diff --git a/.claude/commands/archon/archon-ui-consistency-review.md b/.claude/commands/archon/archon-ui-consistency-review.md
new file mode 100644
index 00000000..f44e88ea
--- /dev/null
+++ b/.claude/commands/archon/archon-ui-consistency-review.md
@@ -0,0 +1,59 @@
+---
+description: Analyze UI components for reusability, Radix usage, primitives, and styling consistency
+argument-hint: <feature path, component path, or directory>
+allowed-tools: Read, Grep, Glob, Write, Bash
+thinking: auto
+---
+
+# UI Consistency Review for Archon
+
+**Review scope**: $ARGUMENTS
+
+## Process
+
+### Step 1: Load Standards
+Read `PRPs/ai_docs/UI_STANDARDS.md` - This is the single source of truth for all rules, patterns, and scans.
+
+### Step 2: Find Files
+Glob all `.tsx` files in the provided path.
+
+### Step 3: Run Automated Scans
+Execute ALL scans from **UI_STANDARDS.md - AUTOMATED SCAN REFERENCE** section:
+- Critical scans (dynamic classes, non-responsive grids, native HTML, unconstrained scroll)
+- High priority scans (keyboard support, dark mode, hardcoded patterns, min-w-0)
+- Medium priority scans (TypeScript, color mismatches, props validation)
+
+### Step 4: Deep Analysis
+For each file, check against ALL rules from **UI_STANDARDS.md sections 1-8**:
+1. TAILWIND V4 - Static classes, tokens
+2. LAYOUT & RESPONSIVE - Grids, scroll, truncation
+3. THEMING - Dark mode variants
+4. RADIX UI - Primitives usage
+5. PRIMITIVES LIBRARY - Card, PillNavigation, styles.ts
+6. ACCESSIBILITY - Keyboard, ARIA, focus
+7. TYPESCRIPT & API CONTRACTS - Types, props, consistency
+8. FUNCTIONAL LOGIC - UI actually works
+
+**For primitives** (files in `/features/ui/primitives/`):
+- Verify all props affect rendering
+- Check color variant objects have: checked, glow, focusRing, hover
+- Validate prop implementations match interface
+
+### Step 5: Generate Report
+Save to `PRPs/reviews/ui-consistency-review-[feature].md` with:
+- Overall scores (use **UI_STANDARDS.md - SCORING VIOLATIONS**)
+- Component-by-component analysis
+- Violations with file:line, current code, required fix
+- Prioritized action items
+
+### Step 6: Create PRP
+Use `/prp-claude-code:prp-claude-code-create ui-consistency-fixes-[feature]` if violations found.
+
+**PRP should reference:**
+- The review report
+- Specific UI_STANDARDS.md sections violated
+- Automated scan commands to re-run for validation
+
+---
+
+**Note**: Do NOT duplicate rules/patterns from UI_STANDARDS.md. Just reference section numbers.
diff --git a/.gitignore b/.gitignore
index 96c7a645..35179987 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ __pycache__
 PRPs/local
 PRPs/completed/
 PRPs/stories/
+PRPs/reviews/
 /logs/
 .zed
 tmp/
diff --git a/CLAUDE.md b/CLAUDE.md
index 77673db7..6bac8d57 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -209,11 +209,15 @@ See `python/.env.example` for complete list
 
 ### Add a new UI component in features directory
 
+**IMPORTANT**: Review UI design standards in `@PRPs/ai_docs/UI_STANDARDS.md` before creating UI components.
+
 1. Use Radix UI primitives from `src/features/ui/primitives/`
 2. Create component in relevant feature folder under `src/features/[feature]/components/`
 3. Define types in `src/features/[feature]/types/`
 4. Use TanStack Query hook from `src/features/[feature]/hooks/`
 5. Apply Tron-inspired glassmorphism styling with Tailwind
+6. Follow responsive design patterns (mobile-first with breakpoints)
+7. Ensure no dynamic Tailwind class construction (see UI_STANDARDS.md Section 2)
 
 ### Add or modify MCP tools
 
@@ -268,6 +272,8 @@ When connected to Claude/Cursor/Windsurf, the following tools are available:
 - `archon:rag_search_knowledge_base` - Search knowledge base for relevant content
 - `archon:rag_search_code_examples` - Find code snippets in the knowledge base
 - `archon:rag_get_available_sources` - List available knowledge sources
+- `archon:rag_list_pages_for_source` - List all pages for a given source (browse documentation structure)
+- `archon:rag_read_full_page` - Retrieve full page content by page_id or URL
 
 ### Project Management
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9c2f0c6d..d3b27af7 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -365,12 +365,21 @@ Test these things using both the UI and the MCP server. This process will be sim
    archon-ui-main/src/pages/YourPage.tsx
    ```
 
-2. **Testing Your Changes**
+2. **UI Design Standards**
+
+   Before creating or modifying UI components, review the design standards:
+   - **UI Standards**: `PRPs/ai_docs/UI_STANDARDS.md` - Complete Tailwind v4, Radix, and responsive design patterns
+   - **Style Guide**: Enable in Settings → scroll to "Feature Flags" → Enable "Style Guide Page"
+     - Access at http://localhost:3737/style-guide
+     - View all available primitives, colors, layouts, and component patterns
+   - **UI Consistency Review**: Run `/archon:archon-ui-consistency-review <path>` to automatically check your components for compliance
+
+3. **Testing Your Changes**
 
    ```bash
    # Using Make (if installed)
    make test-fe
-   
+
    # Or manually
    cd archon-ui-main && npm run test
 
@@ -381,11 +390,11 @@ Test these things using both the UI and the MCP server. This process will be sim
    npm run test:ui
    ```
 
-3. **Development Server**
+4. **Development Server**
    ```bash
    # Using Make for hybrid mode (if installed)
    make dev  # Backend in Docker, frontend local
-   
+
    # Or manually for faster iteration
    cd archon-ui-main && npm run dev
    # Still connects to Docker backend services
diff --git a/PRPs/ai_docs/UI_STANDARDS.md b/PRPs/ai_docs/UI_STANDARDS.md
new file mode 100644
index 00000000..a8f67077
--- /dev/null
+++ b/PRPs/ai_docs/UI_STANDARDS.md
@@ -0,0 +1,797 @@
+# Archon UI Standards
+
+**Audience**: AI agents performing automated UI audits and refactors
+**Purpose**: Single source of truth for UI patterns, violations, and automated detection
+**Usage**: Run `/archon:archon-ui-consistency-review` to scan code against these standards
+
+---
+
+## 1. TAILWIND V4
+
+### Rules
+- **NO dynamic class construction** - Tailwind scans source code as plain text at build time
+  - NEVER: `` `bg-${color}-500` ``, `` `ring-${color}-500` ``, `` `shadow-${size}` ``
+  - Use static lookup objects instead
+- **Bare HSL values in CSS variables** - NO `hsl()` wrapper
+  - Correct: `--background: 0 0% 98%;`
+  - Wrong: `--background: hsl(0 0% 98%);`
+- **CSS variables allowed in arbitrary values** - Utility name must be static
+  - Correct: `bg-[var(--accent)]`
+  - Wrong: `` `bg-[var(--${colorName})]` ``
+- **Use @theme inline** to map CSS vars to Tailwind utilities
+- **Define @custom-variant dark** - Required for `dark:` to work in v4
+
+### Anti-Patterns
+```tsx
+// ❌ Dynamic classes (NO CSS GENERATED)
+const color = "cyan";
+<div className={`bg-${color}-500`} />
+<div className={`focus-visible:ring-${color}-500`} />  // Common miss!
+
+// ❌ Inline styles for visual CSS
+<div style={{ backgroundColor: "#fff" }} />
+```
+
+### Good Examples
+```tsx
+// ✅ Static lookup for discrete variants
+const colorClasses = {
+  cyan: "bg-cyan-500 text-cyan-900 ring-cyan-500",
+  purple: "bg-purple-500 text-purple-900 ring-purple-500",
+};
+<div className={colorClasses[color]} />
+
+// ✅ CSS variables for dynamic values
+<div
+  className="bg-[var(--accent)] ring-[var(--accent)]"
+  style={{ "--accent": "oklch(0.75 0.12 210)" }}
+/>
+```
+
+### Automated Scans
+```bash
+# All dynamic class construction patterns
+grep -rn "className.*\`.*\${.*}\`" [path] --include="*.tsx"
+grep -rn "bg-\${.*}\|text-\${.*}\|border-\${.*}" [path] --include="*.tsx"
+grep -rn "ring-\${.*}\|shadow-\${.*}\|outline-\${.*}\|opacity-\${.*}" [path] --include="*.tsx"
+
+# Inline visual styles (not CSS vars)
+grep -rn "style={{.*backgroundColor\|color:\|padding:" [path] --include="*.tsx"
+```
+
+**Fix Pattern**: Add all properties to static variant object (checked, glow, focusRing, hover)
+
+---
+
+## 2. LAYOUT & RESPONSIVE
+
+### Rules
+- **Responsive grids** - NEVER fixed columns without breakpoints
+  - Use: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`
+- **Constrain horizontal scroll** - Parent must have `w-full` or `max-w-*`
+- **Add scrollbar-hide** to all `overflow-x-auto` containers
+- **min-w-0 on flex parents** containing scroll containers (prevents page expansion)
+- **Text truncation** - Always use `truncate`, `line-clamp-N`, or `break-words`
+- **Desktop-primary** - Optimize for desktop, add responsive breakpoints down
+
+### Anti-Patterns
+```tsx
+// ❌ Fixed grid (breaks mobile)
+<div className="grid grid-cols-4">
+
+// ❌ Unconstrained scroll (page becomes horizontally scrollable)
+<div className="overflow-x-auto">
+  <div className="min-w-max">
+
+// ❌ Flex parent without min-w-0 (page expansion)
+<div className="flex gap-6">
+  <main className="flex-1">  {/* MISSING min-w-0! */}
+    <div className="overflow-x-auto">
+```
+
+### Good Examples
+```tsx
+// ✅ Responsive grid
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+
+// ✅ Constrained horizontal scroll
+<div className="w-full">
+  <div className="overflow-x-auto scrollbar-hide">
+    <div className="flex gap-4 min-w-max">
+
+// ✅ Flex parent with scroll container
+<div className="flex gap-6">
+  <main className="flex-1 min-w-0">  {/* min-w-0 CRITICAL */}
+```
+
+### Automated Scans
+```bash
+# Non-responsive grids
+grep -rn "grid-cols-[2-9]" [path] --include="*.tsx" | grep -v "md:\|lg:\|xl:"
+
+# Unconstrained scroll
+grep -rn "overflow-x-auto" [path] --include="*.tsx"
+# Then manually verify parent has w-full
+
+# Missing text truncation
+grep -rn "<h[1-6]" [path] --include="*.tsx" | grep -v "truncate\|line-clamp"
+
+# Missing min-w-0
+grep -rn "flex-1" [path] --include="*.tsx" | grep -v "min-w-0"
+```
+
+**Fix Pattern**: Wrap scroll in `<div className="w-full">`, add responsive breakpoints to grids
+
+---
+
+## 3. THEMING
+
+### Rules
+- **Every visible color needs `dark:` variant**
+- **Structure identical** between themes (only colors/opacity change)
+- **Use tokens** for both light and dark (`--bg` and redefine in `.dark`)
+
+### Anti-Patterns
+```tsx
+// ❌ No dark variant
+<div className="bg-white text-gray-900">
+
+// ❌ Different structure in dark mode
+{theme === 'dark' ? <ComponentA /> : <ComponentB />}
+```
+
+### Good Examples
+```tsx
+// ✅ Both themes
+<div className="bg-white dark:bg-black text-gray-900 dark:text-white">
+```
+
+### Automated Scans
+```bash
+# Colors without dark variants
+grep -rn "bg-.*-[0-9]" [path] --include="*.tsx" | grep -v "dark:"
+```
+
+**Fix Pattern**: Add `dark:` variant for every color, border, shadow
+
+---
+
+## 4. RADIX UI
+
+### Rules
+- **Use Radix primitives** - NEVER native `<select>`, `<input type="checkbox">`, `<input type="radio">`
+- **Compose with asChild** - Don't wrap, attach behavior to your components
+- **Style via data attributes** - `[data-state="open"]`, `[data-disabled]`
+- **Use Portal** for overlays with proper z-index
+- **Support both controlled and uncontrolled modes** - All form primitives must work in both modes
+
+### Controlled vs Uncontrolled Form Components
+
+**CRITICAL RULE**: Form primitives (Switch, Checkbox, Select, etc.) MUST support both controlled and uncontrolled modes.
+
+**Controlled Mode**: Parent manages state via `value`/`checked` prop + `onChange`/`onCheckedChange` handler
+**Uncontrolled Mode**: Component manages own state via `defaultValue`/`defaultChecked`
+
+### Anti-Patterns
+```tsx
+// ❌ Native HTML
+<select><option>...</option></select>
+<input type="checkbox" />
+
+// ❌ Wrong composition
+<Dialog.Trigger><button>Open</button></Dialog.Trigger>
+
+// ❌ Only supports controlled mode (breaks uncontrolled usage)
+const Switch = ({ checked, ...props }) => {
+  const displayIcon = checked ? iconOn : iconOff;  // No internal state!
+  return <SwitchPrimitives.Root checked={checked} {...props} />
+};
+```
+
+### Good Examples
+```tsx
+// ✅ Radix with asChild
+<Dialog.Trigger asChild>
+  <Button>Open</Button>
+</Dialog.Trigger>
+
+// ✅ Radix primitives
+<Select><SelectTrigger /></Select>
+<Checkbox />
+
+// ✅ Supports both controlled and uncontrolled modes
+const Switch = ({ checked, defaultChecked, onCheckedChange, ...props }) => {
+  const isControlled = checked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const actualChecked = isControlled ? checked : internalChecked;
+
+  const handleChange = (newChecked: boolean) => {
+    if (!isControlled) setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  return <SwitchPrimitives.Root checked={actualChecked} onCheckedChange={handleChange} {...props} />
+};
+```
+
+### Automated Scans
+```bash
+# Native HTML form elements
+grep -rn "<select>\|<option>" [path] --include="*.tsx"
+grep -rn "type=\"checkbox\"\|type=\"radio\"" [path] --include="*.tsx"
+
+# Form primitives that may only support controlled mode (manual check)
+grep -rn "checked.*props\|value.*props" [path]/primitives --include="*.tsx" -A 20
+# Then verify internal state management exists
+```
+
+**Fix Pattern**:
+- Detect controlled mode: `isControlled = checked !== undefined`
+- Add internal state: `useState(defaultChecked ?? false)`
+- Create handler that updates both internal state and calls parent
+- Use actual state for rendering and pass to Radix primitive
+- Import from `@/features/ui/primitives/`, use Radix primitives
+
+---
+
+## 5. CENTRALIZED STYLING (styles.ts)
+
+### CRITICAL RULE: Use glassCard & glassmorphism from styles.ts
+
+**Location**: `@/features/ui/primitives/styles.ts`
+
+All styling definitions MUST come from the centralized `glassCard` and `glassmorphism` objects in styles.ts. Do NOT duplicate style objects in components.
+
+### Anti-Patterns
+```tsx
+// ❌ WRONG - Duplicating style definitions
+const edgeColors = {
+  cyan: { solid: "bg-cyan-500", gradient: "from-cyan-500/40", border: "border-cyan-500/30" },
+  // ... more colors
+};
+
+// ❌ WRONG - Local variant objects
+const colorVariants = {
+  cyan: "shadow-cyan-500/20",
+  blue: "shadow-blue-500/20",
+};
+```
+
+### Good Examples
+```tsx
+// ✅ CORRECT - Use centralized definitions
+const edgeStyle = glassCard.edgeColors[edgeColor];
+<div className={edgeStyle.border}>
+  <div className={edgeStyle.solid} />
+  <div className={edgeStyle.gradient} />
+</div>
+
+// ✅ CORRECT - Use glassCard variants
+const glowVariant = glassCard.variants[glowColor];
+<div className={cn(glowVariant.border, glowVariant.glow, glowVariant.hover)} />
+
+// ✅ CORRECT - Use glassmorphism tokens
+<div className={cn(glassmorphism.background.card, glassmorphism.border.default)} />
+```
+
+### What's in styles.ts
+
+**glassCard object:**
+- `blur` - Blur intensity levels (sm, md, lg, xl, 2xl, 3xl)
+- `transparency` - Glass transparency (clear, light, medium, frosted, solid)
+- `variants` - Color variants with border, glow, hover (purple, blue, cyan, green, orange, pink, red)
+- `edgeColors` - Edge-lit styling with solid, gradient, border, bg
+- `tints` - Colored glass tints
+- `sizes` - Padding variants (none, sm, md, lg, xl)
+- `outerGlowSizes` - Glow size variants per color
+- `innerGlowSizes` - Inner glow size variants per color
+- `edgeLit` - Edge-lit effects (position, color with line/glow/gradient)
+
+**glassmorphism object:**
+- `background` - Background variations
+- `border` - Border styles
+- `interactive` - Interactive states
+- `animation` - Animation presets
+- `shadow` - Shadow effects with neon glow
+
+### Automated Scans
+```bash
+# Check for duplicate edge color definitions
+grep -rn "const edgeColors = {" [path]/primitives --include="*.tsx"
+
+# Check for duplicate variant objects (should use glassCard.variants)
+grep -rn "const.*Variants = {" [path]/primitives --include="*.tsx" -A 3 | grep "cyan:\|blue:\|purple:"
+
+# Check imports - all primitives should import from styles.ts
+grep -rn "from \"./styles\"" [path]/primitives --include="*.tsx" --files-without-match
+```
+
+**Fix Pattern**: Import glassCard/glassmorphism from styles.ts, use object properties instead of duplicating
+
+---
+
+## 6. PRIMITIVES LIBRARY
+
+### Archon Components
+- **Card** - For all glassmorphism effects
+- **DataCard** - Cards with header/content/footer slots
+- **PillNavigation** - Tab navigation (NEVER create custom)
+- **styles.ts** - Central styling definitions (ALWAYS import)
+
+### Rules
+- **Use Card props** - blur, transparency, edgePosition, glowColor (don't hardcode)
+- **Import from styles.ts** - Don't duplicate blur/glow classes
+- **All primitive props must affect rendering** - No unused props
+- **Use glassCard for card styling** - edgeColors, variants, tints, sizes
+- **Use glassmorphism for general styling** - background, border, shadow, animation
+
+### Anti-Patterns
+```tsx
+// ❌ Hardcoded glassmorphism
+<div className="backdrop-blur-md bg-white/10 border">
+
+// ❌ Custom pill navigation
+<div className="rounded-full backdrop-blur-sm">
+  <button>...</button>
+</div>
+
+// ❌ Primitive with unused prop
+interface CardProps { glowColor?: string } // But never used in return!
+```
+
+### Good Examples
+```tsx
+// ✅ Use Card primitive
+<Card blur="lg" transparency="light" edgePosition="top" edgeColor="cyan">
+
+// ✅ Use PillNavigation
+<PillNavigation items={...} colorVariant="orange" />
+
+// ✅ Import from styles.ts
+import { glassCard, cn } from '@/features/ui/primitives/styles';
+<div className={cn(glassCard.blur.md, glassCard.transparency.light)}>
+```
+
+### Automated Scans
+```bash
+# Hardcoded glassmorphism
+grep -rn "backdrop-blur.*bg-white/.*border" [path] --include="*.tsx"
+
+# Hardcoded pill navigation
+grep -rn "rounded-full.*flex gap-" [path] --include="*.tsx"
+
+# Primitives defining own blur classes
+grep -rn "const blurClasses\|backdrop-blur-md" [path]/primitives --include="*.tsx"
+```
+
+**Manual Check**: Read primitive interfaces, verify all props used in return statement
+
+---
+
+## 6. ACCESSIBILITY
+
+### Rules
+- **Keyboard support on all interactive elements**
+  - `<div onClick={...}>` needs `role="button"`, `tabIndex={0}`, `onKeyDown`
+  - Handle Enter and Space keys
+- **ARIA attributes** - `aria-selected`, `aria-current`, `aria-expanded`, `aria-pressed`
+- **Never remove focus rings** - Must be color-specific and static
+- **Icon-only buttons MUST have aria-label** - Required for screen readers
+- **Toggle buttons MUST have aria-pressed** - Indicates current state
+- **Collapsible controls MUST have aria-expanded** - Indicates expanded/collapsed state
+- **Decorative icons MUST have aria-hidden="true"** - Prevents screen reader announcement
+
+### Anti-Patterns
+```tsx
+// ❌ Clickable div without keyboard
+<div onClick={handler}>Click me</div>
+
+// ❌ role="button" without keyboard
+<div onClick={handler} role="button">  // Missing onKeyDown!
+
+// ❌ Clickable icon without button wrapper
+<ChevronRight onClick={handler} className="cursor-pointer" />
+
+// ❌ Icon-only button without aria-label
+<Button onClick={handler}>
+  <TrashIcon />  // Screen reader has no idea what this does!
+</Button>
+
+// ❌ Toggle button without aria-pressed
+<Button onClick={toggleView} className={viewMode === "grid" && "active"}>
+  <GridIcon />  // No indication of current state!
+</Button>
+
+// ❌ Expandable control without aria-expanded
+<Button onClick={() => setExpanded(!expanded)}>
+  <ChevronDown />  // Screen reader doesn't know if expanded or collapsed!
+</Button>
+
+// ❌ Icon without aria-hidden
+<Button aria-label="Delete">
+  <TrashIcon />  // Screen reader announces both "Delete" AND icon details!
+</Button>
+```
+
+### Good Examples
+```tsx
+// ✅ Full keyboard support on div
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handler}
+  onKeyDown={(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handler();
+    }
+  }}
+  aria-selected={isSelected}
+>
+
+// ✅ Clickable icon wrapped in button
+<button
+  type="button"
+  aria-label="Expand menu"
+  aria-expanded={isExpanded}
+  onClick={handler}
+  onKeyDown={(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handler();
+    }
+  }}
+  className="focus:outline-none focus:ring-2"
+>
+  <ChevronRight className="h-4 w-4" />
+</button>
+
+// ✅ Icon-only button with proper aria-label and aria-hidden
+<Button onClick={deleteItem} aria-label="Delete task">
+  <TrashIcon aria-hidden="true" />
+</Button>
+
+// ✅ Toggle button with aria-pressed
+<Button
+  onClick={() => setViewMode("grid")}
+  aria-label="Grid view"
+  aria-pressed={viewMode === "grid"}
+>
+  <GridIcon aria-hidden="true" />
+</Button>
+
+// ✅ Expandable control with aria-expanded
+<Button
+  onClick={() => setSidebarExpanded(false)}
+  aria-label="Collapse sidebar"
+  aria-expanded={sidebarExpanded}
+>
+  <ChevronLeft aria-hidden="true" />
+</Button>
+```
+
+### Automated Scans
+```bash
+# Interactive divs without keyboard
+grep -rn "onClick.*role=\"button\"" [path] --include="*.tsx"
+# Then manually verify onKeyDown exists
+
+# Icons with onClick (should be wrapped in button)
+grep -rn "<[A-Z].*onClick={" [path] --include="*.tsx" | grep -v "<button\|<Button"
+
+# Icon-only buttons without aria-label (manual check - look for Button with only icon child)
+grep -rn "<Button" [path] --include="*.tsx" -A 2 | grep "Icon className"
+# Then verify aria-label exists
+
+# Toggle buttons without aria-pressed
+grep -rn "onClick.*setViewMode\|onClick.*setLayoutMode" [path] --include="*.tsx"
+# Then verify aria-pressed exists
+
+# Expandable controls without aria-expanded
+grep -rn "onClick.*setExpanded\|onClick.*setSidebarExpanded" [path] --include="*.tsx"
+# Then verify aria-expanded exists
+
+# Icons without aria-hidden when button has aria-label
+grep -rn 'aria-label="' [path] --include="*.tsx" -A 3 | grep "className=\".*Icon"
+# Then verify aria-hidden="true" on icon
+```
+
+**Fix Pattern**:
+- Add onKeyDown handler with Enter/Space, add tabIndex={0}, add ARIA
+- Wrap clickable icons in `<button type="button">` with proper ARIA attributes
+- Icon-only buttons: Add `aria-label="Descriptive action"`
+- Toggle buttons: Add `aria-pressed={isActive}`
+- Expandable controls: Add `aria-expanded={isExpanded}`
+- Icons in labeled buttons: Add `aria-hidden="true"`
+
+---
+
+## 7. TYPESCRIPT & API CONTRACTS
+
+### Rules
+- **Async functions return Promise<void>** - Not just `void` if awaited
+- **All props must be used** - If prop in interface, must affect rendering
+- **Color types consistent** - Use "green" not "emerald" across components (avoid emerald entirely)
+- **Run `tsc --noEmit`** to catch type errors
+- **Use `satisfies` for lookup objects** - Enforce type coverage on color variants
+- **120 character line limit** - Split long class strings into arrays with `.join(" ")`
+
+### Anti-Patterns
+```tsx
+// ❌ Async typed as void
+setEnabled: (val: boolean) => void;  // But implemented as async!
+
+// ❌ Unused prop
+interface CardProps { glowColor?: string }
+return <div>  {/* glowColor never used! */}
+
+// ❌ Color type mismatch
+// PillNavigation: colorVariant?: "emerald"
+// Select: color?: "green"  // Should match!
+
+// ❌ Long class strings (exceeds 120 chars)
+const activeClasses = {
+  blue: "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20 data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300 data-[state=active]:border data-[state=active]:border-blue-400/50",
+};
+
+// ❌ Lookup objects without type safety
+const colorClasses = {
+  cyan: "bg-cyan-500",
+  blue: "bg-blue-500",
+  // What if we forget purple? No compile error!
+};
+```
+
+### Good Examples
+```tsx
+// ✅ Correct async type
+setEnabled: (val: boolean) => Promise<void>;
+
+// ✅ All props used
+interface CardProps { glowColor?: string }
+const glow = glassCard.variants[glowColor];
+return <div className={glow.border} />
+
+// ✅ Consistent color types (always use "green", never "emerald")
+type Color = "purple" | "blue" | "cyan" | "green" | "orange" | "pink";
+
+// ✅ Split long class strings (under 120 chars per line)
+const activeClasses = {
+  blue: [
+    "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20",
+    "data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300",
+    "data-[state=active]:border data-[state=active]:border-blue-400/50",
+  ].join(" "),
+};
+
+// ✅ Type-safe lookup objects with satisfies
+type Color = "purple" | "blue" | "cyan" | "green" | "orange" | "pink";
+const colorClasses = {
+  purple: "bg-purple-500",
+  blue: "bg-blue-500",
+  cyan: "bg-cyan-500",
+  green: "bg-green-500",
+  orange: "bg-orange-500",
+  pink: "bg-pink-500",
+} satisfies Record<Color, string>;  // TypeScript enforces all colors present!
+```
+
+### Automated Scans
+```bash
+# TypeScript errors
+npx tsc --noEmit [path] 2>&1 | grep "error TS"
+
+# Color type inconsistencies (must use "green" not "emerald")
+grep -rn "emerald" [path] --include="*.tsx" --include="*.ts"
+
+# Line length violations (over 120 chars)
+grep -rn ".\{121,\}" [path] --include="*.tsx" | grep className
+
+# Lookup objects without satisfies
+grep -rn "const.*Classes = {" [path]/primitives --include="*.tsx" -A 5 | grep -v "satisfies"
+
+# Unused props (manual)
+grep -rn "interface.*Props" [path]/primitives --include="*.tsx" -A 10
+# Then verify each prop name appears in return statement
+```
+
+**Fix Pattern**:
+- Split long strings into arrays: `["class1", "class2"].join(" ")`
+- Add `satisfies Record<ColorType, string>` to lookup objects
+- Replace all "emerald" with "green" + update RGB to green-500 (34,197,94)
+- Wire all props to rendering
+
+---
+
+## 8. FUNCTIONAL LOGIC
+
+### Rules
+- **Interactive UI must be functional** - Especially in demos/examples
+- **State changes must affect rendering**
+  - Filter state → must filter data before .map()
+  - Sort state → must sort data
+  - Drag-drop → must have state + onDrop handler
+- **Props must do what they advertise** - If edgePosition accepts "left", it must work
+
+### Anti-Patterns
+```tsx
+// ❌ Filter that doesn't filter
+const [filter, setFilter] = useState("all");
+return <div>{items.map(...)}</div>  // items not filtered!
+
+// ❌ Drag-drop without state
+{[1,2,3].map(num => <DraggableCard />)}  // Always snaps back!
+
+// ❌ Prop that does nothing
+edgePosition="left"  // But only "top" is implemented!
+```
+
+### Good Examples
+```tsx
+// ✅ Working filter
+const [filter, setFilter] = useState("all");
+const filtered = useMemo(() =>
+  filter === "all" ? items : items.filter(i => i.type === filter),
+[items, filter]);
+return <div>{filtered.map(...)}</div>
+
+// ✅ Working drag-drop
+const [items, setItems] = useState([...]);
+const handleDrop = (id, index) => { /* reorder logic */ };
+return <>{items.map((item, i) => <DraggableCard onDrop={handleDrop} />)}</>
+
+// ✅ All edge positions work
+if (edgePosition === "top") { /* top impl */ }
+if (edgePosition === "left") { /* left impl */ }
+// etc for all accepted values
+```
+
+### Manual Checks
+```bash
+# Look for state that never affects rendering
+# Pattern: setState called but variable not used in .filter/.sort/.map
+
+# Check prop implementations
+# Pattern: Interface accepts values but switch/if only handles subset
+```
+
+**Fix Pattern**: Wire state to data transformations (filter/sort/map), add missing implementations
+
+---
+
+## AUTOMATED SCAN REFERENCE
+
+Run ALL these scans during review:
+
+### Critical (Breaking)
+- Dynamic classes: `grep -rn "className.*\`.*\${.*}\`\|bg-\${.*}\|ring-\${.*}" [path]`
+- Non-responsive grids: `grep -rn "grid-cols-[2-9]" [path] | grep -v "md:\|lg:"`
+- Unconstrained scroll: `grep -rn "overflow-x-auto" [path]` (verify w-full parent)
+- Native HTML: `grep -rn "<select>\|type=\"checkbox\"" [path]`
+- Emerald usage: `grep -rn "emerald" [path] --include="*.tsx" --include="*.ts"` (must use "green")
+
+### High Priority
+- Missing keyboard: `grep -rn "onClick.*role=\"button\"" [path]` (verify onKeyDown)
+- Clickable icons: `grep -rn "<[A-Z].*onClick={" [path] --include="*.tsx" | grep -v "<button\|<Button"`
+- Missing dark mode: `grep -rn "bg-.*-[0-9]" [path] | grep -v "dark:"`
+- Hardcoded glass: `grep -rn "backdrop-blur.*bg-white/.*border" [path]`
+- Missing min-w-0: `grep -rn "flex-1" [path] | grep -v "min-w-0"`
+- Duplicate styling: `grep -rn "const edgeColors = {\|const.*Variants = {" [path]/primitives`
+- Controlled-only form components: `grep -rn "checked.*props\|value.*props" [path]/primitives --include="*.tsx" -A 20` (verify internal state)
+- Icon-only buttons without aria-label: `grep -rn "<Button" [path] --include="*.tsx" -A 2 | grep "Icon className"` (verify aria-label)
+- Toggle buttons without aria-pressed: `grep -rn "setViewMode\|setLayoutMode" [path] --include="*.tsx"` (verify aria-pressed)
+- Expandable controls without aria-expanded: `grep -rn "setExpanded\|setSidebarExpanded" [path] --include="*.tsx"` (verify aria-expanded)
+- Icons without aria-hidden: `grep -rn 'aria-label="' [path] --include="*.tsx" -A 3 | grep "Icon"` (verify aria-hidden)
+
+### Medium Priority
+- TypeScript: `npx tsc --noEmit [path] 2>&1 | grep "error TS"`
+- Line length: `grep -rn ".\{121,\}" [path] --include="*.tsx" | grep className`
+- Missing satisfies: `grep -rn "const.*Classes = {" [path]/primitives -A 5 | grep -v "satisfies"`
+- Props unused: Manual check interfaces vs usage
+
+---
+
+## QUICK REFERENCE
+
+### Breakpoints
+- sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
+
+### Color Variant Checklist (for primitives with colors)
+Every color object MUST have:
+- [ ] `checked` or `active` state classes
+- [ ] `glow` effect
+- [ ] `focusRing` - STATIC class like `"focus-visible:ring-cyan-500"`
+- [ ] `hover` state
+- [ ] All 6 colors: purple, blue, cyan, green, orange, pink
+
+### Common Patterns
+
+**Horizontal Scroll (Archon Standard)**
+```tsx
+<div className="w-full">
+  <div className="overflow-x-auto scrollbar-hide">
+    <div className="flex gap-4 min-w-max">
+      {items.map(i => <Card className="w-72 shrink-0" />)}
+```
+
+**Responsive Grid**
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+```
+
+**Flex + Scroll Container**
+```tsx
+<div className="flex gap-6">
+  <aside className="w-64 shrink-0">Sidebar</aside>
+  <main className="flex-1 min-w-0">  {/* min-w-0 REQUIRED */}
+    {/* scroll containers here */}
+```
+
+**Color Variants (Static Lookup)**
+```tsx
+const variants = {
+  cyan: {
+    checked: "data-[state=checked]:bg-cyan-500/20",
+    glow: "shadow-[0_0_15px_rgba(34,211,238,0.5)]",
+    focusRing: "focus-visible:ring-cyan-500",  // STATIC!
+    hover: "hover:bg-cyan-500/10",
+  },
+  // ... repeat for all colors
+};
+```
+
+**Keyboard Support**
+```tsx
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handler}
+  onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && handler()}
+  aria-selected={isSelected}
+>
+```
+
+---
+
+## SCORING VIOLATIONS
+
+### Critical (-3 points each)
+- Dynamic class construction
+- Missing keyboard support on interactive
+- Non-responsive grids causing horizontal scroll
+- TypeScript errors
+
+### High (-2 points each)
+- Unconstrained scroll containers
+- Props that do nothing
+- Non-functional UI logic (filter/sort/drag-drop)
+- Missing dark mode variants
+
+### Medium (-1 point each)
+- Native HTML form elements
+- Hardcoded glassmorphism
+- Missing text truncation
+- Color type inconsistencies
+
+**Grading Scale:**
+- 0 critical violations: A (9-10/10)
+- 1 critical: B (7-8/10)
+- 2-3 critical: C (5-6/10)
+- 4+ critical: F (1-4/10)
+
+---
+
+## ADDING NEW RULES
+
+When code review finds an issue not caught by automated review:
+
+1. **Identify which section** it belongs to (Tailwind? Layout? A11y?)
+2. **Add to that section**:
+   - Rule (what to do)
+   - Anti-Pattern example
+   - Good example
+   - Automated scan (if possible)
+3. **Add scan to AUTOMATED SCAN REFERENCE**
+4. **Done** - Next review will catch it
+
+**Goal**: Eventually eliminate manual code reviews entirely.
diff --git a/archon-ui-main/package-lock.json b/archon-ui-main/package-lock.json
index a6653753..37b3e9a7 100644
--- a/archon-ui-main/package-lock.json
+++ b/archon-ui-main/package-lock.json
@@ -10,10 +10,14 @@
       "dependencies": {
         "@mdxeditor/editor": "^3.42.0",
         "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-toast": "^1.2.15",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -30,6 +34,7 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
         "react-router-dom": "^6.26.2",
         "tailwind-merge": "latest",
@@ -37,10 +42,13 @@
       },
       "devDependencies": {
         "@biomejs/biome": "2.2.2",
+        "@tailwindcss/postcss": "4.1.2",
+        "@tailwindcss/vite": "4.1.2",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/node": "^20.19.0",
+        "@types/prismjs": "^1.26.5",
         "@types/react": "^18.3.1",
         "@types/react-dom": "^18.3.1",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -54,7 +62,7 @@
         "eslint-plugin-react-refresh": "^0.4.1",
         "jsdom": "^24.1.0",
         "postcss": "latest",
-        "tailwindcss": "3.4.17",
+        "tailwindcss": "4.1.2",
         "ts-node": "^10.9.1",
         "typescript": "^5.5.4",
         "vite": "^5.2.0",
@@ -1739,53 +1747,6 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -2428,17 +2389,6 @@
       "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
       "license": "MIT"
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -2515,6 +2465,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -2745,6 +2725,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
@@ -2925,6 +2928,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -3040,6 +3075,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
@@ -3735,6 +3799,258 @@
       "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.2.tgz",
+      "integrity": "sha512-ZwFnxH+1z8Ehh8bNTMX3YFrYdzAv7JLY5X5X7XSFY+G9QGJVce/P9xb2mh+j5hKt8NceuHmdtllJvAHWKtsNrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.29.2",
+        "tailwindcss": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.2.tgz",
+      "integrity": "sha512-Zwz//1QKo6+KqnCKMT7lA4bspGfwEgcPAHlSthmahtgrpKDfwRGk8PKQrW8Zg/ofCDIlg6EtjSTKSxxSufC+CQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.2",
+        "@tailwindcss/oxide-darwin-x64": "4.1.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.2.tgz",
+      "integrity": "sha512-IxkXbntHX8lwGmwURUj4xTr6nezHhLYqeiJeqa179eihGv99pRlKV1W69WByPJDQgSf4qfmwx904H6MkQqTA8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.2.tgz",
+      "integrity": "sha512-ZRtiHSnFYHb4jHKIdzxlFm6EDfijTCOT4qwUhJ3GWxfDoW2yT3z/y8xg0nE7e72unsmSj6dtfZ9Y5r75FIrlpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.2.tgz",
+      "integrity": "sha512-BiKUNZf1A0pBNzndBvnPnBxonCY49mgbOsPfILhcCE5RM7pQlRoOgN7QnwNhY284bDbfQSEOWnFR0zbPo6IDTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.2.tgz",
+      "integrity": "sha512-Z30VcpUfRGkiddj4l5NRCpzbSGjhmmklVoqkVQdkEC0MOelpY+fJrVhzSaXHmWrmSvnX8yiaEqAbdDScjVujYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.2.tgz",
+      "integrity": "sha512-w3wsK1ChOLeQ3gFOiwabtWU5e8fY3P1Ss8jR3IFIn/V0va3ir//hZ8AwURveS4oK1Pu6b8i+yxesT4qWnLVUow==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.2.tgz",
+      "integrity": "sha512-oY/u+xJHpndTj7B5XwtmXGk8mQ1KALMfhjWMMpE8pdVAznjJsF5KkCceJ4Fmn5lS1nHMCwZum5M3/KzdmwDMdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.2.tgz",
+      "integrity": "sha512-k7G6vcRK/D+JOWqnKzKN/yQq1q4dCkI49fMoLcfs2pVcaUAXEqCP9NmA8Jv+XahBv5DtDjSAY3HJbjosEdKczg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.2.tgz",
+      "integrity": "sha512-fLL+c678TkYKgkDLLNxSjPPK/SzTec7q/E5pTwvpTqrth867dftV4ezRyhPM5PaiCqX651Y8Yk0wRQMcWUGnmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.2.tgz",
+      "integrity": "sha512-0tU1Vjd1WucZ2ooq6y4nI9xyTSaH2g338bhrqk+2yzkMHskBm+pMsOCfY7nEIvALkA1PKPOycR4YVdlV7Czo+A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.2.tgz",
+      "integrity": "sha512-r8QaMo3QKiHqUcn+vXYCypCEha+R0sfYxmaZSgZshx9NfkY+CHz91aS2xwNV/E4dmUDkTPUag7sSdiCHPzFVTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.2.tgz",
+      "integrity": "sha512-lYCdkPxh9JRHXoBsPE8Pu/mppUsC2xihYArNAESub41PKhHTnvn6++5RpmFM+GLSt3ewyS8fwCVvht7ulWm6cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.2.tgz",
+      "integrity": "sha512-vgkMo6QRhG6uv97im6Y4ExDdq71y9v2IGZc+0wn7lauQFYJM/1KdUVhrOkexbUso8tUsMOWALxyHVkQEbsM7gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.2",
+        "@tailwindcss/oxide": "4.1.2",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.2.tgz",
+      "integrity": "sha512-3r/ZdMW0gxY8uOx1To0lpYa4coq4CzINcCX4laM1rS340Kcn0ac4A/MMFfHN8qba51aorZMYwMcOxYk4wJ9FYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.2",
+        "@tailwindcss/oxide": "4.1.2",
+        "tailwindcss": "4.1.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.87.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.87.0.tgz",
@@ -4059,6 +4375,13 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -4665,34 +4988,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4856,19 +5151,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5020,16 +5302,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001720",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001720.tgz",
@@ -5150,44 +5422,6 @@
         "node": "*"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -5279,16 +5513,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/compute-scroll-into-view": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
@@ -5351,19 +5575,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssstyle": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.3.1.tgz",
@@ -5573,6 +5784,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -5592,13 +5813,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -5632,13 +5846,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dnd-core": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
@@ -5713,13 +5920,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.161",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.161.tgz",
@@ -5727,12 +5927,19 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
     },
     "node_modules/entities": {
       "version": "6.0.0",
@@ -6394,23 +6601,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
@@ -6687,6 +6877,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -7096,19 +7293,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -7139,22 +7323,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-date-object": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
@@ -7192,16 +7360,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -7499,30 +7657,14 @@
         "node": ">=8"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
@@ -7692,25 +7834,244 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/local-pkg": {
       "version": "0.5.1",
@@ -8948,16 +9309,6 @@
         "node": "*"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/mlly": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
@@ -9018,18 +9369,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
@@ -9068,16 +9407,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -9133,16 +9462,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -9286,13 +9605,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9374,37 +9686,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -9452,26 +9733,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
@@ -9530,120 +9791,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -9900,6 +10047,15 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -10044,29 +10200,6 @@
         }
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10151,27 +10284,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -10597,76 +10709,6 @@
       "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
       "license": "MIT"
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -10694,20 +10736,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-final-newline": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
@@ -10791,76 +10819,6 @@
         "inline-style-parser": "0.2.4"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10874,19 +10832,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -10911,41 +10856,24 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.2.tgz",
+      "integrity": "sha512-VCsK+fitIbQF7JlxXaibFhxrPq4E2hDcG8apzHUdWFMCQWD8uLdlHg4iSkZ53cgLCCcZ+FZK7vG8VjvLcnBgKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/test-exclude": {
@@ -10970,29 +10898,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -11105,13 +11010,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -11462,13 +11360,6 @@
         }
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/uvu": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
@@ -11850,107 +11741,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -12004,19 +11794,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yjs": {
       "version": "13.6.27",
       "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
diff --git a/archon-ui-main/package.json b/archon-ui-main/package.json
index 31c07574..576b78ae 100644
--- a/archon-ui-main/package.json
+++ b/archon-ui-main/package.json
@@ -30,10 +30,14 @@
   "dependencies": {
     "@mdxeditor/editor": "^3.42.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -50,6 +54,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.26.2",
     "tailwind-merge": "latest",
@@ -57,10 +62,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.2",
+    "@tailwindcss/postcss": "4.1.2",
+    "@tailwindcss/vite": "4.1.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.19.0",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -74,7 +82,7 @@
     "eslint-plugin-react-refresh": "^0.4.1",
     "jsdom": "^24.1.0",
     "postcss": "latest",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.4",
     "vite": "^5.2.0",
diff --git a/archon-ui-main/postcss.config.js b/archon-ui-main/postcss.config.js
index 2e7af2b7..1c878468 100644
--- a/archon-ui-main/postcss.config.js
+++ b/archon-ui-main/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }
diff --git a/archon-ui-main/src/App.tsx b/archon-ui-main/src/App.tsx
index ea2539cc..36e0d375 100644
--- a/archon-ui-main/src/App.tsx
+++ b/archon-ui-main/src/App.tsx
@@ -13,6 +13,7 @@ import { ToastProvider } from './features/ui/components/ToastProvider';
 import { SettingsProvider, useSettings } from './contexts/SettingsContext';
 import { TooltipProvider } from './features/ui/primitives/tooltip';
 import { ProjectPage } from './pages/ProjectPage';
+import StyleGuidePage from './pages/StyleGuidePage';
 import { DisconnectScreenOverlay } from './components/DisconnectScreenOverlay';
 import { ErrorBoundaryWithBugReport } from './components/bug-report/ErrorBoundaryWithBugReport';
 import { MigrationBanner } from './components/ui/MigrationBanner';
@@ -21,14 +22,19 @@ import { useMigrationStatus } from './hooks/useMigrationStatus';
 
 
 const AppRoutes = () => {
-  const { projectsEnabled } = useSettings();
-  
+  const { projectsEnabled, styleGuideEnabled } = useSettings();
+
   return (
     <Routes>
       <Route path="/" element={<KnowledgeBasePage />} />
       <Route path="/onboarding" element={<OnboardingPage />} />
       <Route path="/settings" element={<SettingsPage />} />
       <Route path="/mcp" element={<MCPPage />} />
+      {styleGuideEnabled ? (
+        <Route path="/style-guide" element={<StyleGuidePage />} />
+      ) : (
+        <Route path="/style-guide" element={<Navigate to="/" replace />} />
+      )}
       {projectsEnabled ? (
         <>
           <Route path="/projects" element={<ProjectPage />} />
diff --git a/archon-ui-main/src/components/layout/MainLayout.tsx b/archon-ui-main/src/components/layout/MainLayout.tsx
index 73fcc1de..ffa31792 100644
--- a/archon-ui-main/src/components/layout/MainLayout.tsx
+++ b/archon-ui-main/src/components/layout/MainLayout.tsx
@@ -129,11 +129,12 @@ export function MainLayout({ children, className }: MainLayoutProps) {
   }, [isBackendError, backendError, showToast]);
 
   return (
-    <div className={cn("relative min-h-screen bg-white dark:bg-black overflow-hidden", className)}>
+    <div className={cn("relative min-h-screen overflow-hidden", className)}>
       {/* TEMPORARY: Show backend startup error using old component */}
       {backendStartupFailed && <BackendStartupError />}
 
-      {/* Fixed full-page background grid that doesn't scroll */}
+      {/* Fixed full-page background - grid pattern on dark background */}
+      <div className="fixed inset-0 bg-white dark:bg-black pointer-events-none -z-10" />
       <div className="fixed inset-0 neon-grid pointer-events-none z-0" />
 
       {/* Floating Navigation */}
@@ -143,7 +144,7 @@ export function MainLayout({ children, className }: MainLayoutProps) {
       </div>
 
       {/* Main Content Area - matches old layout exactly */}
-      <div className="relative flex-1 pl-[100px] z-10">
+      <div className="relative flex-1 pl-[100px]">
         <div className="container mx-auto px-8 relative">
           <div className="min-h-screen pt-8 pb-16">{children}</div>
         </div>
diff --git a/archon-ui-main/src/components/layout/Navigation.tsx b/archon-ui-main/src/components/layout/Navigation.tsx
index e2f1e806..3547b5fb 100644
--- a/archon-ui-main/src/components/layout/Navigation.tsx
+++ b/archon-ui-main/src/components/layout/Navigation.tsx
@@ -1,4 +1,4 @@
-import { BookOpen, Settings } from "lucide-react";
+import { BookOpen, Palette, Settings } from "lucide-react";
 import type React from "react";
 import { Link, useLocation } from "react-router-dom";
 // TEMPORARY: Use old SettingsContext until settings are migrated
@@ -24,7 +24,7 @@ interface NavigationProps {
  */
 export function Navigation({ className }: NavigationProps) {
   const location = useLocation();
-  const { projectsEnabled } = useSettings();
+  const { projectsEnabled, styleGuideEnabled } = useSettings();
 
   // Navigation items configuration
   const navigationItems: NavigationItem[] = [
@@ -54,6 +54,12 @@ export function Navigation({ className }: NavigationProps) {
       label: "MCP Server",
       enabled: true,
     },
+    {
+      path: "/style-guide",
+      icon: <Palette className="h-5 w-5" />,
+      label: "Style Guide",
+      enabled: styleGuideEnabled,
+    },
     {
       path: "/settings",
       icon: <Settings className="h-5 w-5" />,
@@ -62,6 +68,9 @@ export function Navigation({ className }: NavigationProps) {
     },
   ];
 
+  // Filter out disabled navigation items
+  const enabledNavigationItems = navigationItems.filter((item) => item.enabled);
+
   const isProjectsActive = location.pathname.startsWith("/projects");
 
   return (
@@ -125,15 +134,14 @@ export function Navigation({ className }: NavigationProps) {
 
       {/* Navigation Items */}
       <nav className="flex flex-col gap-4">
-        {navigationItems.map((item) => {
+        {enabledNavigationItems.map((item) => {
           const isActive = location.pathname === item.path;
-          const isEnabled = item.enabled !== false;
 
           return (
             <Tooltip key={item.path}>
               <TooltipTrigger asChild>
                 <Link
-                  to={isEnabled ? item.path : "#"}
+                  to={item.path}
                   className={cn(
                     "relative p-3 rounded-lg transition-all duration-300",
                     "flex items-center justify-center",
@@ -148,13 +156,7 @@ export function Navigation({ className }: NavigationProps) {
                           "hover:text-blue-600 dark:hover:text-blue-400",
                           "hover:bg-white/10 dark:hover:bg-white/5",
                         ],
-                    !isEnabled && "opacity-50 cursor-not-allowed pointer-events-none",
                   )}
-                  onClick={(e) => {
-                    if (!isEnabled) {
-                      e.preventDefault();
-                    }
-                  }}
                 >
                   {item.icon}
                   {/* Active state decorations with neon line */}
diff --git a/archon-ui-main/src/components/settings/FeaturesSection.tsx b/archon-ui-main/src/components/settings/FeaturesSection.tsx
index 0a61cf5c..1f410baf 100644
--- a/archon-ui-main/src/components/settings/FeaturesSection.tsx
+++ b/archon-ui-main/src/components/settings/FeaturesSection.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Moon, Sun, FileText, Layout, Bot, Settings, Palette, Flame, Monitor } from 'lucide-react';
-import { Toggle } from '../ui/Toggle';
+import { Switch } from '@/features/ui/primitives/switch';
 import { Card } from '../ui/Card';
 import { useTheme } from '../../contexts/ThemeContext';
 import { credentialsService } from '../../services/credentialsService';
 import { useToast } from '../../features/shared/hooks/useToast';
 import { serverHealthService } from '../../services/serverHealthService';
+import { useSettings } from '../../contexts/SettingsContext';
 
 export const FeaturesSection = () => {
   const {
@@ -13,24 +14,30 @@ export const FeaturesSection = () => {
     setTheme
   } = useTheme();
   const { showToast } = useToast();
+  const { styleGuideEnabled, setStyleGuideEnabled: setStyleGuideContext } = useSettings();
   const isDarkMode = theme === 'dark';
   const [projectsEnabled, setProjectsEnabled] = useState(true);
-  
+  const [styleGuideEnabledLocal, setStyleGuideEnabledLocal] = useState(styleGuideEnabled);
+
   // Commented out for future release
   const [agUILibraryEnabled, setAgUILibraryEnabled] = useState(false);
   const [agentsEnabled, setAgentsEnabled] = useState(false);
-  
+
   const [logfireEnabled, setLogfireEnabled] = useState(false);
   const [disconnectScreenEnabled, setDisconnectScreenEnabled] = useState(true);
   const [loading, setLoading] = useState(true);
   const [projectsSchemaValid, setProjectsSchemaValid] = useState(true);
   const [projectsSchemaError, setProjectsSchemaError] = useState<string | null>(null);
 
-  // Load settings on mount
+  // Load settings on mount and sync with context
   useEffect(() => {
     loadSettings();
   }, []);
 
+  useEffect(() => {
+    setStyleGuideEnabledLocal(styleGuideEnabled);
+  }, [styleGuideEnabled]);
+
   const loadSettings = async () => {
     try {
       setLoading(true);
@@ -174,7 +181,7 @@ export const FeaturesSection = () => {
 
   const handleDisconnectScreenToggle = async (checked: boolean) => {
     if (loading) return;
-    
+
     try {
       setLoading(true);
       setDisconnectScreenEnabled(checked);
@@ -182,7 +189,7 @@ export const FeaturesSection = () => {
       await serverHealthService.updateSettings(checked);
 
       showToast(
-        checked ? 'Disconnect Screen Enabled' : 'Disconnect Screen Disabled', 
+        checked ? 'Disconnect Screen Enabled' : 'Disconnect Screen Disabled',
         checked ? 'success' : 'warning'
       );
     } catch (error) {
@@ -194,6 +201,29 @@ export const FeaturesSection = () => {
     }
   };
 
+  const handleStyleGuideToggle = async (checked: boolean) => {
+    if (loading) return;
+
+    try {
+      setLoading(true);
+      setStyleGuideEnabledLocal(checked);
+
+      // Update context which will save to backend
+      await setStyleGuideContext(checked);
+
+      showToast(
+        checked ? 'Style Guide Enabled' : 'Style Guide Disabled',
+        checked ? 'success' : 'warning'
+      );
+    } catch (error) {
+      console.error('Failed to update style guide setting:', error);
+      setStyleGuideEnabledLocal(!checked);
+      showToast('Failed to update style guide setting', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       <div className="grid grid-cols-2 gap-4">
@@ -208,7 +238,14 @@ export const FeaturesSection = () => {
               </p>
             </div>
             <div className="flex-shrink-0">
-              <Toggle checked={isDarkMode} onCheckedChange={handleThemeToggle} accentColor="purple" icon={isDarkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />} />
+              <Switch
+                size="lg"
+                checked={isDarkMode}
+                onCheckedChange={handleThemeToggle}
+                color="purple"
+                iconOn={<Moon className="w-5 h-5" />}
+                iconOff={<Sun className="w-5 h-5" />}
+              />
             </div>
           </div>
 
@@ -228,16 +265,39 @@ export const FeaturesSection = () => {
               )}
             </div>
             <div className="flex-shrink-0">
-              <Toggle 
-                checked={projectsEnabled} 
-                onCheckedChange={handleProjectsToggle} 
-                accentColor="blue" 
+              <Switch
+                size="lg"
+                checked={projectsEnabled}
+                onCheckedChange={handleProjectsToggle}
+                color="blue"
                 icon={<FileText className="w-5 h-5" />}
                 disabled={loading || !projectsSchemaValid}
               />
             </div>
           </div>
 
+          {/* Style Guide Toggle */}
+          <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-cyan-500/10 to-cyan-600/5 backdrop-blur-sm border border-cyan-500/20 shadow-lg">
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-gray-800 dark:text-white">
+                Style Guide
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Show UI style guide and components in navigation
+              </p>
+            </div>
+            <div className="flex-shrink-0">
+              <Switch
+                size="lg"
+                checked={styleGuideEnabledLocal}
+                onCheckedChange={handleStyleGuideToggle}
+                color="cyan"
+                icon={<Palette className="w-5 h-5" />}
+                disabled={loading}
+              />
+            </div>
+          </div>
+
           {/* COMMENTED OUT FOR FUTURE RELEASE - AG-UI Library Toggle */}
           {/*
           <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-pink-500/10 to-pink-600/5 backdrop-blur-sm border border-pink-500/20 shadow-lg">
@@ -283,10 +343,11 @@ export const FeaturesSection = () => {
               </p>
             </div>
             <div className="flex-shrink-0">
-              <Toggle 
-                checked={logfireEnabled} 
-                onCheckedChange={handleLogfireToggle} 
-                accentColor="orange" 
+              <Switch
+                size="lg"
+                checked={logfireEnabled}
+                onCheckedChange={handleLogfireToggle}
+                color="orange"
                 icon={<Flame className="w-5 h-5" />}
                 disabled={loading}
               />
@@ -304,10 +365,11 @@ export const FeaturesSection = () => {
               </p>
             </div>
             <div className="flex-shrink-0">
-              <Toggle 
-                checked={disconnectScreenEnabled} 
-                onCheckedChange={handleDisconnectScreenToggle} 
-                accentColor="green" 
+              <Switch
+                size="lg"
+                checked={disconnectScreenEnabled}
+                onCheckedChange={handleDisconnectScreenToggle}
+                color="green"
                 icon={<Monitor className="w-5 h-5" />}
                 disabled={loading}
               />
diff --git a/archon-ui-main/src/components/settings/RAGSettings.tsx b/archon-ui-main/src/components/settings/RAGSettings.tsx
index ccba61ce..62739fc7 100644
--- a/archon-ui-main/src/components/settings/RAGSettings.tsx
+++ b/archon-ui-main/src/components/settings/RAGSettings.tsx
@@ -1,9 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Settings, Check, Save, Loader, ChevronDown, ChevronUp, Zap, Database, Trash2 } from 'lucide-react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Settings, Check, Save, Loader, ChevronDown, ChevronUp, Zap, Database, Trash2, Cog } from 'lucide-react';
 import { Card } from '../ui/Card';
 import { Input } from '../ui/Input';
 import { Select } from '../ui/Select';
 import { Button } from '../ui/Button';
+import { Button as GlowButton } from '../../features/ui/primitives/button';
+import { LuBrainCircuit } from 'react-icons/lu';
+import { PiDatabaseThin } from 'react-icons/pi';
 import { useToast } from '../../features/shared/hooks/useToast';
 import { credentialsService } from '../../services/credentialsService';
 import OllamaModelDiscoveryModal from './OllamaModelDiscoveryModal';
@@ -11,6 +14,9 @@ import OllamaModelSelectionModal from './OllamaModelSelectionModal';
 
 type ProviderKey = 'openai' | 'google' | 'ollama' | 'anthropic' | 'grok' | 'openrouter';
 
+// Providers that support embedding models
+const EMBEDDING_CAPABLE_PROVIDERS: ProviderKey[] = ['openai', 'google', 'ollama'];
+
 interface ProviderModels {
   chatModel: string;
   embeddingModel: string;
@@ -85,27 +91,53 @@ const colorStyles: Record<ProviderKey, string> = {
   grok: 'border-yellow-500 bg-yellow-500/10',
 };
 
-const providerAlertStyles: Record<ProviderKey, string> = {
-  openai: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300',
-  google: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300',
-  openrouter: 'bg-cyan-50 dark:bg-cyan-900/20 border-cyan-200 dark:border-cyan-800 text-cyan-800 dark:text-cyan-300',
-  ollama: 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800 text-purple-800 dark:text-purple-300',
-  anthropic: 'bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800 text-orange-800 dark:text-orange-300',
-  grok: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-300',
-};
+const providerWarningAlertStyle = 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-300';
+const providerErrorAlertStyle = 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300';
+const providerMissingAlertStyle = providerErrorAlertStyle;
 
-const providerAlertMessages: Record<ProviderKey, string> = {
-  openai: 'Configure your OpenAI API key in the credentials section to use GPT models.',
-  google: 'Configure your Google API key in the credentials section to use Gemini models.',
-  openrouter: 'Configure your OpenRouter API key in the credentials section to use models.',
-  ollama: 'Configure your Ollama instances in this panel to connect local models.',
-  anthropic: 'Configure your Anthropic API key in the credentials section to use Claude models.',
-  grok: 'Configure your Grok API key in the credentials section to use Grok models.',
+const providerDisplayNames: Record<ProviderKey, string> = {
+  openai: 'OpenAI',
+  google: 'Google',
+  openrouter: 'OpenRouter',
+  ollama: 'Ollama',
+  anthropic: 'Anthropic',
+  grok: 'Grok',
 };
 
 const isProviderKey = (value: unknown): value is ProviderKey =>
   typeof value === 'string' && ['openai', 'google', 'openrouter', 'ollama', 'anthropic', 'grok'].includes(value);
 
+// Default base URL for Ollama instances when not explicitly configured
+const DEFAULT_OLLAMA_URL = 'http://host.docker.internal:11434/v1';
+
+const PROVIDER_CREDENTIAL_KEYS = [
+  'OPENAI_API_KEY',
+  'GOOGLE_API_KEY',
+  'ANTHROPIC_API_KEY',
+  'OPENROUTER_API_KEY',
+  'GROK_API_KEY',
+] as const;
+
+type ProviderCredentialKey = typeof PROVIDER_CREDENTIAL_KEYS[number];
+
+const CREDENTIAL_PROVIDER_MAP: Record<ProviderCredentialKey, ProviderKey> = {
+  OPENAI_API_KEY: 'openai',
+  GOOGLE_API_KEY: 'google',
+  ANTHROPIC_API_KEY: 'anthropic',
+  OPENROUTER_API_KEY: 'openrouter',
+  GROK_API_KEY: 'grok',
+};
+
+const normalizeBaseUrl = (url?: string | null): string | null => {
+  if (!url) return null;
+  const trimmed = url.trim();
+  if (!trimmed) return null;
+
+  let normalized = trimmed.replace(/\/+$/, '');
+  normalized = normalized.replace(/\/v1$/i, '');
+  return normalized || null;
+};
+
 interface RAGSettingsProps {
   ragSettings: {
     MODEL_CHOICE: string;
@@ -118,6 +150,7 @@ interface RAGSettingsProps {
     LLM_BASE_URL?: string;
     LLM_INSTANCE_NAME?: string;
     EMBEDDING_MODEL?: string;
+    EMBEDDING_PROVIDER?: string;
     OLLAMA_EMBEDDING_URL?: string;
     OLLAMA_EMBEDDING_INSTANCE_NAME?: string;
     // Crawling Performance Settings
@@ -148,6 +181,7 @@ export const RAGSettings = ({
   const [showCrawlingSettings, setShowCrawlingSettings] = useState(false);
   const [showStorageSettings, setShowStorageSettings] = useState(false);
   const [showModelDiscoveryModal, setShowModelDiscoveryModal] = useState(false);
+  const [showOllamaConfig, setShowOllamaConfig] = useState(false);
   
   // Edit modals state
   const [showEditLLMModal, setShowEditLLMModal] = useState(false);
@@ -160,6 +194,16 @@ export const RAGSettings = ({
   // Provider-specific model persistence state
   const [providerModels, setProviderModels] = useState<ProviderModelMap>(() => loadProviderModels());
 
+  // Independent provider selection state
+  const [chatProvider, setChatProvider] = useState<ProviderKey>(() =>
+    (ragSettings.LLM_PROVIDER as ProviderKey) || 'openai'
+  );
+  const [embeddingProvider, setEmbeddingProvider] = useState<ProviderKey>(() =>
+    // Default to openai if no specific embedding provider is set
+    (ragSettings.EMBEDDING_PROVIDER as ProviderKey) || 'openai'
+  );
+  const [activeSelection, setActiveSelection] = useState<'chat' | 'embedding'>('chat');
+
   // Instance configurations
   const [llmInstanceConfig, setLLMInstanceConfig] = useState({
     name: '',
@@ -215,16 +259,32 @@ export const RAGSettings = ({
     }
   }, [ragSettings.OLLAMA_EMBEDDING_URL, ragSettings.OLLAMA_EMBEDDING_INSTANCE_NAME]);
 
-  // Provider model persistence effects
+  // Provider model persistence effects - separate for chat and embedding
   useEffect(() => {
-    // Update provider models when current models change
-    const currentProvider = ragSettings.LLM_PROVIDER as ProviderKey;
-    if (currentProvider && ragSettings.MODEL_CHOICE && ragSettings.EMBEDDING_MODEL) {
+    // Update chat provider models when chat model changes
+    if (chatProvider && ragSettings.MODEL_CHOICE) {
       setProviderModels(prev => {
         const updated = {
           ...prev,
-          [currentProvider]: {
-            chatModel: ragSettings.MODEL_CHOICE,
+          [chatProvider]: {
+            ...prev[chatProvider],
+            chatModel: ragSettings.MODEL_CHOICE
+          }
+        };
+        saveProviderModels(updated);
+        return updated;
+      });
+    }
+  }, [ragSettings.MODEL_CHOICE, chatProvider]);
+
+  useEffect(() => {
+    // Update embedding provider models when embedding model changes
+    if (embeddingProvider && ragSettings.EMBEDDING_MODEL) {
+      setProviderModels(prev => {
+        const updated = {
+          ...prev,
+          [embeddingProvider]: {
+            ...prev[embeddingProvider],
             embeddingModel: ragSettings.EMBEDDING_MODEL
           }
         };
@@ -232,93 +292,181 @@ export const RAGSettings = ({
         return updated;
       });
     }
-  }, [ragSettings.MODEL_CHOICE, ragSettings.EMBEDDING_MODEL, ragSettings.LLM_PROVIDER]);
+  }, [ragSettings.EMBEDDING_MODEL, embeddingProvider]);
 
-  // Load API credentials for status checking
-  useEffect(() => {
-    const loadApiCredentials = async () => {
-      try {
-        // Get decrypted values for the API keys we need for status checking
-        const keyNames = ['OPENAI_API_KEY', 'GOOGLE_API_KEY', 'ANTHROPIC_API_KEY'];
-        const statusResults = await credentialsService.checkCredentialStatus(keyNames);
-        
-        const credentials: {[key: string]: string} = {};
-        
-        for (const [key, result] of Object.entries(statusResults)) {
-          if (result.has_value && result.value && result.value.trim().length > 0) {
-            credentials[key] = result.value;
-          }
-        }
-        
-        console.log('🔑 Loaded API credentials for status checking:', Object.keys(credentials));
-        setApiCredentials(credentials);
-      } catch (error) {
-        console.error('Failed to load API credentials for status checking:', error);
-      }
-    };
-
-    loadApiCredentials();
-  }, []);
-
-  // Reload API credentials when ragSettings change (e.g., after saving)
-  // Use a ref to track if we've loaded credentials to prevent infinite loops
   const hasLoadedCredentialsRef = useRef(false);
-  
-  // Manual reload function for external calls
-  const reloadApiCredentials = async () => {
+
+  const reloadApiCredentials = useCallback(async () => {
     try {
-      // Get decrypted values for the API keys we need for status checking
-      const keyNames = ['OPENAI_API_KEY', 'GOOGLE_API_KEY', 'ANTHROPIC_API_KEY'];
-      const statusResults = await credentialsService.checkCredentialStatus(keyNames);
-      
-      const credentials: {[key: string]: string} = {};
-      
-      for (const [key, result] of Object.entries(statusResults)) {
-        if (result.has_value && result.value && result.value.trim().length > 0) {
-          credentials[key] = result.value;
-        }
+      const statusResults = await credentialsService.checkCredentialStatus(
+        Array.from(PROVIDER_CREDENTIAL_KEYS),
+      );
+
+      const credentials: { [key: string]: boolean } = {};
+
+      for (const key of PROVIDER_CREDENTIAL_KEYS) {
+        const result = statusResults[key];
+        credentials[key] = !!result?.has_value;
       }
-      
-      console.log('🔄 Reloaded API credentials for status checking:', Object.keys(credentials));
+
+      console.log(
+        '🔑 Updated API credential status snapshot:',
+        Object.keys(credentials),
+      );
       setApiCredentials(credentials);
       hasLoadedCredentialsRef.current = true;
     } catch (error) {
-      console.error('Failed to reload API credentials:', error);
+      console.error('Failed to load API credentials for status checking:', error);
     }
-  };
-  
+  }, []);
+
   useEffect(() => {
-    // Only reload if we have ragSettings and haven't loaded yet, or if LLM_PROVIDER changed
-    if (Object.keys(ragSettings).length > 0 && (!hasLoadedCredentialsRef.current || ragSettings.LLM_PROVIDER)) {
-      reloadApiCredentials();
+    void reloadApiCredentials();
+  }, [reloadApiCredentials]);
+
+  useEffect(() => {
+    if (!hasLoadedCredentialsRef.current) {
+      return;
     }
-  }, [ragSettings.LLM_PROVIDER]); // Only depend on LLM_PROVIDER changes
-  
-  // Reload credentials periodically to catch updates from other components (like onboarding)
+
+    void reloadApiCredentials();
+  }, [ragSettings.LLM_PROVIDER, reloadApiCredentials]);
+
   useEffect(() => {
-    // Set up periodic reload every 30 seconds when component is active (reduced from 2s)
     const interval = setInterval(() => {
       if (Object.keys(ragSettings).length > 0) {
-        reloadApiCredentials();
+        void reloadApiCredentials();
       }
-    }, 30000); // Changed from 2000ms to 30000ms (30 seconds)
+    }, 30000);
 
     return () => clearInterval(interval);
-  }, [ragSettings.LLM_PROVIDER]); // Only restart interval if provider changes
-  
+  }, [ragSettings.LLM_PROVIDER, reloadApiCredentials]);
+
+  useEffect(() => {
+    const needsDetection = chatProvider === 'ollama' || embeddingProvider === 'ollama';
+
+    if (!needsDetection) {
+      setOllamaServerStatus('unknown');
+      return;
+    }
+
+    const baseUrl = (
+      ragSettings.LLM_BASE_URL?.trim() ||
+      llmInstanceConfig.url?.trim() ||
+      ragSettings.OLLAMA_EMBEDDING_URL?.trim() ||
+      embeddingInstanceConfig.url?.trim() ||
+      DEFAULT_OLLAMA_URL
+    );
+
+    const normalizedUrl = baseUrl.replace('/v1', '').replace(/\/$/, '');
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const response = await fetch(
+          `/api/ollama/instances/health?instance_urls=${encodeURIComponent(normalizedUrl)}`,
+          { method: 'GET', headers: { Accept: 'application/json' }, signal: AbortSignal.timeout(10000) }
+        );
+
+        if (cancelled) return;
+
+        if (!response.ok) {
+          setOllamaServerStatus('offline');
+          return;
+        }
+
+        const data = await response.json();
+        const instanceStatus = data.instance_status?.[normalizedUrl];
+        setOllamaServerStatus(instanceStatus?.is_healthy ? 'online' : 'offline');
+      } catch (error) {
+        if (!cancelled) {
+          setOllamaServerStatus('offline');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [chatProvider, embeddingProvider, ragSettings.LLM_BASE_URL, ragSettings.OLLAMA_EMBEDDING_URL, llmInstanceConfig.url, embeddingInstanceConfig.url]);
+
+  // Sync independent provider states with ragSettings (one-way: ragSettings -> local state)
+  useEffect(() => {
+    if (ragSettings.LLM_PROVIDER && ragSettings.LLM_PROVIDER !== chatProvider) {
+      setChatProvider(ragSettings.LLM_PROVIDER as ProviderKey);
+    }
+  }, [ragSettings.LLM_PROVIDER]); // Remove chatProvider dependency to avoid loops
+
+  useEffect(() => {
+    if (ragSettings.EMBEDDING_PROVIDER && ragSettings.EMBEDDING_PROVIDER !== embeddingProvider) {
+      setEmbeddingProvider(ragSettings.EMBEDDING_PROVIDER as ProviderKey);
+    }
+  }, [ragSettings.EMBEDDING_PROVIDER]); // Remove embeddingProvider dependency to avoid loops
+
+  useEffect(() => {
+    setOllamaManualConfirmed(false);
+    setOllamaServerStatus('unknown');
+  }, [ragSettings.LLM_BASE_URL, ragSettings.OLLAMA_EMBEDDING_URL, chatProvider, embeddingProvider]);
+
+  // Update ragSettings when independent providers change (one-way: local state -> ragSettings)
+  // Split the “first‐run” guard into two refs so chat and embedding effects don’t interfere.
+  const updateChatRagSettingsRef = useRef(true);
+  const updateEmbeddingRagSettingsRef = useRef(true);
+
+  useEffect(() => {
+    // Only update if this is a user‐initiated change, not a sync from ragSettings
+    if (updateChatRagSettingsRef.current && chatProvider !== ragSettings.LLM_PROVIDER) {
+      setRagSettings(prev => ({
+        ...prev,
+        LLM_PROVIDER: chatProvider
+      }));
+    }
+    updateChatRagSettingsRef.current = true;
+  }, [chatProvider]);
+
+  useEffect(() => {
+    // Only update if this is a user‐initiated change, not a sync from ragSettings
+    if (updateEmbeddingRagSettingsRef.current && embeddingProvider && embeddingProvider !== ragSettings.EMBEDDING_PROVIDER) {
+      setRagSettings(prev => ({
+        ...prev,
+        EMBEDDING_PROVIDER: embeddingProvider
+      }));
+    }
+    updateEmbeddingRagSettingsRef.current = true;
+  }, [embeddingProvider]);
+
+
   // Status tracking
   const [llmStatus, setLLMStatus] = useState({ online: false, responseTime: null, checking: false });
   const [embeddingStatus, setEmbeddingStatus] = useState({ online: false, responseTime: null, checking: false });
+  const llmRetryTimeoutRef = useRef<number | null>(null);
+  const embeddingRetryTimeoutRef = useRef<number | null>(null);
   
   // API key credentials for status checking
-  const [apiCredentials, setApiCredentials] = useState<{[key: string]: string}>({});
+  const [apiCredentials, setApiCredentials] = useState<{[key: string]: boolean}>({});
   // Provider connection status tracking
   const [providerConnectionStatus, setProviderConnectionStatus] = useState<{
     [key: string]: { connected: boolean; checking: boolean; lastChecked?: Date }
   }>({});
+  const [ollamaServerStatus, setOllamaServerStatus] = useState<'unknown' | 'online' | 'offline'>('unknown');
+  const [ollamaManualConfirmed, setOllamaManualConfirmed] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (llmRetryTimeoutRef.current) {
+        clearTimeout(llmRetryTimeoutRef.current);
+        llmRetryTimeoutRef.current = null;
+      }
+      if (embeddingRetryTimeoutRef.current) {
+        clearTimeout(embeddingRetryTimeoutRef.current);
+        embeddingRetryTimeoutRef.current = null;
+      }
+    };
+  }, []);
 
   // Test connection to external providers
-  const testProviderConnection = async (provider: string): Promise<boolean> => {
+  const testProviderConnection = useCallback(async (provider: string): Promise<boolean> => {
     setProviderConnectionStatus(prev => ({
       ...prev,
       [provider]: { ...prev[provider], checking: true }
@@ -345,7 +493,7 @@ export const RAGSettings = ({
       }));
       return false;
     }
-  };
+  }, []);
 
   // Test provider connections when API credentials change
   useEffect(() => {
@@ -371,7 +519,39 @@ export const RAGSettings = ({
     const interval = setInterval(testConnections, 60000);
 
     return () => clearInterval(interval);
-  }, [apiCredentials]); // Test when credentials change
+  }, [apiCredentials, testProviderConnection]); // Test when credentials change
+
+  useEffect(() => {
+    const handleCredentialUpdate = (event: Event) => {
+      const detail = (event as CustomEvent<{ keys?: string[] }>).detail;
+      const updatedKeys = (detail?.keys ?? []).map(key => key.toUpperCase());
+
+      if (updatedKeys.length === 0) {
+        void reloadApiCredentials();
+        return;
+      }
+
+      const touchedProviderKeys = updatedKeys.filter(key => key in CREDENTIAL_PROVIDER_MAP);
+      if (touchedProviderKeys.length === 0) {
+        return;
+      }
+
+      void reloadApiCredentials();
+
+      touchedProviderKeys.forEach(key => {
+        const provider = CREDENTIAL_PROVIDER_MAP[key as ProviderCredentialKey];
+        if (provider) {
+          void testProviderConnection(provider);
+        }
+      });
+    };
+
+    window.addEventListener('archon:credentials-updated', handleCredentialUpdate);
+
+    return () => {
+      window.removeEventListener('archon:credentials-updated', handleCredentialUpdate);
+    };
+  }, [reloadApiCredentials, testProviderConnection]);
 
   // Ref to track if initial test has been run (will be used after function definitions)
   const hasRunInitialTestRef = useRef(false);
@@ -444,7 +624,14 @@ export const RAGSettings = ({
   };
 
   // Manual test function with user feedback using backend proxy
-  const manualTestConnection = async (url: string, setStatus: React.Dispatch<React.SetStateAction<{ online: boolean; responseTime: number | null; checking: boolean }>>, instanceName: string) => {
+const manualTestConnection = async (
+    url: string,
+    setStatus: React.Dispatch<React.SetStateAction<{ online: boolean; responseTime: number | null; checking: boolean }>>,
+    instanceName: string,
+    context?: 'chat' | 'embedding',
+    options?: { suppressToast?: boolean }
+  ): Promise<boolean> => {
+    const suppressToast = options?.suppressToast ?? false;
     setStatus(prev => ({ ...prev, checking: true }));
     const startTime = Date.now();
     
@@ -471,31 +658,58 @@ export const RAGSettings = ({
         if (instanceStatus?.is_healthy) {
           const responseTime = Math.round(instanceStatus.response_time_ms || (Date.now() - startTime));
           setStatus({ online: true, responseTime, checking: false });
-          showToast(`${instanceName} connection successful: ${instanceStatus.models_available || 0} models available (${responseTime}ms)`, 'success');
-          
+
+          // Context-aware model count display
+          let modelCount = instanceStatus.models_available || 0;
+          let modelType = 'models';
+
+          if (context === 'chat') {
+            modelCount = ollamaMetrics.llmInstanceModels?.chat || 0;
+            modelType = 'chat models';
+          } else if (context === 'embedding') {
+            modelCount = ollamaMetrics.embeddingInstanceModels?.embedding || 0;
+            modelType = 'embedding models';
+          }
+
+          if (!suppressToast) {
+            showToast(`${instanceName} connection successful: ${modelCount} ${modelType} available (${responseTime}ms)`, 'success');
+          }
+
           // Scenario 2: Manual "Test Connection" button - refresh Ollama metrics if Ollama provider is selected
-          if (ragSettings.LLM_PROVIDER === 'ollama') {
+          if (ragSettings.LLM_PROVIDER === 'ollama' || embeddingProvider === 'ollama' || context === 'embedding') {
             console.log('🔄 Fetching Ollama metrics - Test Connection button clicked');
             fetchOllamaMetrics();
           }
+
+          return true;
         } else {
           setStatus({ online: false, responseTime: null, checking: false });
-          showToast(`${instanceName} connection failed: ${instanceStatus?.error_message || 'Instance is not healthy'}`, 'error');
+          if (!suppressToast) {
+            showToast(`${instanceName} connection failed: ${instanceStatus?.error_message || 'Instance is not healthy'}`, 'error');
+          }
+          return false;
         }
       } else {
         setStatus({ online: false, responseTime: null, checking: false });
-        showToast(`${instanceName} connection failed: Backend proxy error (HTTP ${response.status})`, 'error');
+        if (!suppressToast) {
+          showToast(`${instanceName} connection failed: Backend proxy error (HTTP ${response.status})`, 'error');
+        }
+        return false;
       }
     } catch (error: any) {
       setStatus({ online: false, responseTime: null, checking: false });
-      
-      if (error.name === 'AbortError') {
-        showToast(`${instanceName} connection failed: Request timeout (>15s)`, 'error');
-      } else {
-        showToast(`${instanceName} connection failed: ${error.message || 'Unknown error'}`, 'error');
+
+      if (!suppressToast) {
+        if (error.name === 'AbortError') {
+          showToast(`${instanceName} connection failed: Request timeout (>15s)`, 'error');
+        } else {
+          showToast(`${instanceName} connection failed: ${error.message || 'Unknown error'}`, 'error');
+        }
       }
+
+      return false;
     }
-  };;
+  };
 
   // Function to handle LLM instance deletion
   const handleDeleteLLMInstance = () => {
@@ -546,11 +760,14 @@ export const RAGSettings = ({
     try {
       setOllamaMetrics(prev => ({ ...prev, loading: true }));
 
-      // Prepare instance URLs for the API call
-      const instanceUrls = [];
-      if (llmInstanceConfig.url) instanceUrls.push(llmInstanceConfig.url);
-      if (embeddingInstanceConfig.url && embeddingInstanceConfig.url !== llmInstanceConfig.url) {
-        instanceUrls.push(embeddingInstanceConfig.url);
+      // Prepare normalized instance URLs for the API call
+      const instanceUrls: string[] = [];
+      const llmUrlBase = normalizeBaseUrl(llmInstanceConfig.url);
+      const embUrlBase = normalizeBaseUrl(embeddingInstanceConfig.url);
+
+      if (llmUrlBase) instanceUrls.push(llmUrlBase);
+      if (embUrlBase && embUrlBase !== llmUrlBase) {
+        instanceUrls.push(embUrlBase);
       }
 
       if (instanceUrls.length === 0) {
@@ -574,18 +791,18 @@ export const RAGSettings = ({
         
         // Count models for LLM instance
         const llmChatModels = allChatModels.filter((model: any) => 
-          model.instance_url === llmInstanceConfig.url
+          normalizeBaseUrl(model.instance_url) === llmUrlBase
         );
         const llmEmbeddingModels = allEmbeddingModels.filter((model: any) => 
-          model.instance_url === llmInstanceConfig.url
+          normalizeBaseUrl(model.instance_url) === llmUrlBase
         );
-        
+
         // Count models for Embedding instance
         const embChatModels = allChatModels.filter((model: any) => 
-          model.instance_url === embeddingInstanceConfig.url
+          normalizeBaseUrl(model.instance_url) === embUrlBase
         );
         const embEmbeddingModels = allEmbeddingModels.filter((model: any) => 
-          model.instance_url === embeddingInstanceConfig.url
+          normalizeBaseUrl(model.instance_url) === embUrlBase
         );
         
         // Calculate totals
@@ -624,7 +841,7 @@ export const RAGSettings = ({
   // Use refs to prevent infinite connection testing
   const lastTestedLLMConfigRef = useRef({ url: '', name: '', provider: '' });
   const lastTestedEmbeddingConfigRef = useRef({ url: '', name: '', provider: '' });
-  const lastMetricsFetchRef = useRef({ provider: '', llmUrl: '', embUrl: '', llmOnline: false, embOnline: false });
+  const lastMetricsFetchRef = useRef({ provider: '', embProvider: '', llmUrl: '', embUrl: '', llmOnline: false, embOnline: false });
   
   // Auto-testing disabled to prevent API calls on every keystroke per user request
   // Connection testing should only happen on manual "Test Connection" or "Save Changes" button clicks
@@ -672,91 +889,106 @@ export const RAGSettings = ({
   //   }
   // }, [embeddingInstanceConfig.url, embeddingInstanceConfig.name, ragSettings.LLM_PROVIDER]);
 
-  // Fetch Ollama metrics only when Ollama provider is initially selected (not on URL changes during typing)
   React.useEffect(() => {
-    if (ragSettings.LLM_PROVIDER === 'ollama') {
-      const currentProvider = ragSettings.LLM_PROVIDER;
-      const lastProvider = lastMetricsFetchRef.current.provider;
-      
-      // Only fetch if provider changed to Ollama (scenario 1: user clicks on Ollama Provider)
-      if (currentProvider !== lastProvider) {
-        lastMetricsFetchRef.current = {
-          provider: currentProvider,
-          llmUrl: llmInstanceConfig.url,
-          embUrl: embeddingInstanceConfig.url,
-          llmOnline: llmStatus.online,
-          embOnline: embeddingStatus.online
-        };
-        console.log('🔄 Fetching Ollama metrics - Provider selected');
-        fetchOllamaMetrics();
-      }
+    const current = {
+      provider: ragSettings.LLM_PROVIDER,
+      embProvider: embeddingProvider,
+      llmUrl: normalizeBaseUrl(llmInstanceConfig.url) ?? '',
+      embUrl: normalizeBaseUrl(embeddingInstanceConfig.url) ?? '',
+      llmOnline: llmStatus.online,
+      embOnline: embeddingStatus.online,
+    };
+    const last = lastMetricsFetchRef.current;
+
+    const meaningfulChange =
+      current.provider !== last.provider ||
+      current.embProvider !== last.embProvider ||
+      current.llmUrl !== last.llmUrl ||
+      current.embUrl !== last.embUrl ||
+      current.llmOnline !== last.llmOnline ||
+      current.embOnline !== last.embOnline;
+
+    if ((current.provider === 'ollama' || current.embProvider === 'ollama') && meaningfulChange) {
+      lastMetricsFetchRef.current = current;
+      console.log('🔄 Fetching Ollama metrics - state changed');
+      fetchOllamaMetrics();
     }
-  }, [ragSettings.LLM_PROVIDER]); // Only watch provider changes, not URL changes
+  }, [ragSettings.LLM_PROVIDER, embeddingProvider, llmStatus.online, embeddingStatus.online]);
+
+  const hasApiCredential = (credentialKey: ProviderCredentialKey): boolean => {
+    if (credentialKey in apiCredentials) {
+      return Boolean(apiCredentials[credentialKey]);
+    }
+
+    const fallbackKey = Object.keys(apiCredentials).find(
+      key => key.toUpperCase() === credentialKey,
+    );
+
+    return fallbackKey ? Boolean(apiCredentials[fallbackKey]) : false;
+  };
 
   // Function to check if a provider is properly configured
   const getProviderStatus = (providerKey: string): 'configured' | 'missing' | 'partial' => {
     switch (providerKey) {
       case 'openai':
-        // Check if OpenAI API key is configured (case insensitive)
-        const openAIKey = Object.keys(apiCredentials).find(key => key.toUpperCase() === 'OPENAI_API_KEY');
-        const keyValue = openAIKey ? apiCredentials[openAIKey] : undefined;
-        // Don't consider encrypted placeholders as valid API keys for connection testing
-        const hasOpenAIKey = openAIKey && keyValue && keyValue.trim().length > 0 && !keyValue.includes('[ENCRYPTED]');
-        
+        const hasOpenAIKey = hasApiCredential('OPENAI_API_KEY');
+
         // Only show configured if we have both API key AND confirmed connection
         const openAIConnected = providerConnectionStatus['openai']?.connected || false;
         const isChecking = providerConnectionStatus['openai']?.checking || false;
-        
-        console.log('🔍 OpenAI status check:', { 
-          openAIKey, 
-          keyValue: keyValue ? `${keyValue.substring(0, 10)}...` : keyValue, 
-          hasValue: !!keyValue, 
-          hasOpenAIKey,
-          openAIConnected,
-          isChecking,
-          allCredentials: Object.keys(apiCredentials)
-        });
-        
+
+        // Intentionally avoid logging API key material.
+
         if (!hasOpenAIKey) return 'missing';
         if (isChecking) return 'partial';
         return openAIConnected ? 'configured' : 'missing';
         
       case 'google':
-        // Check if Google API key is configured (case insensitive)
-        const googleKey = Object.keys(apiCredentials).find(key => key.toUpperCase() === 'GOOGLE_API_KEY');
-        const googleKeyValue = googleKey ? apiCredentials[googleKey] : undefined;
-        // Don't consider encrypted placeholders as valid API keys for connection testing
-        const hasGoogleKey = googleKey && googleKeyValue && googleKeyValue.trim().length > 0 && !googleKeyValue.includes('[ENCRYPTED]');
+        const hasGoogleKey = hasApiCredential('GOOGLE_API_KEY');
         
         // Only show configured if we have both API key AND confirmed connection
         const googleConnected = providerConnectionStatus['google']?.connected || false;
         const googleChecking = providerConnectionStatus['google']?.checking || false;
-        
+
         if (!hasGoogleKey) return 'missing';
         if (googleChecking) return 'partial';
         return googleConnected ? 'configured' : 'missing';
         
       case 'ollama':
-        // Check if both LLM and embedding instances are configured and online
-        if (llmStatus.online && embeddingStatus.online) return 'configured';
-        if (llmStatus.online || embeddingStatus.online) return 'partial';
-        return 'missing';
+        {
+          if (ollamaManualConfirmed || llmStatus.online || embeddingStatus.online) {
+            return 'configured';
+          }
+
+          if (ollamaServerStatus === 'online') {
+            return 'partial';
+          }
+
+          if (ollamaServerStatus === 'offline') {
+            return 'missing';
+          }
+
+          return 'missing';
+        }
       case 'anthropic':
-        // Use server-side connection status
+        const hasAnthropicKey = hasApiCredential('ANTHROPIC_API_KEY');
         const anthropicConnected = providerConnectionStatus['anthropic']?.connected || false;
         const anthropicChecking = providerConnectionStatus['anthropic']?.checking || false;
+        if (!hasAnthropicKey) return 'missing';
         if (anthropicChecking) return 'partial';
         return anthropicConnected ? 'configured' : 'missing';
       case 'grok':
-        // Use server-side connection status
+        const hasGrokKey = hasApiCredential('GROK_API_KEY');
         const grokConnected = providerConnectionStatus['grok']?.connected || false;
         const grokChecking = providerConnectionStatus['grok']?.checking || false;
+        if (!hasGrokKey) return 'missing';
         if (grokChecking) return 'partial';
         return grokConnected ? 'configured' : 'missing';
       case 'openrouter':
-        // Use server-side connection status
+        const hasOpenRouterKey = hasApiCredential('OPENROUTER_API_KEY');
         const openRouterConnected = providerConnectionStatus['openrouter']?.connected || false;
         const openRouterChecking = providerConnectionStatus['openrouter']?.checking || false;
+        if (!hasOpenRouterKey) return 'missing';
         if (openRouterChecking) return 'partial';
         return openRouterConnected ? 'configured' : 'missing';
       default:
@@ -764,20 +996,147 @@ export const RAGSettings = ({
     }
   };
 
-  const selectedProviderKey = isProviderKey(ragSettings.LLM_PROVIDER)
-    ? (ragSettings.LLM_PROVIDER as ProviderKey)
+  const resolvedProviderForAlert = activeSelection === 'chat' ? chatProvider : embeddingProvider;
+  const activeProviderKey = isProviderKey(resolvedProviderForAlert)
+    ? (resolvedProviderForAlert as ProviderKey)
     : undefined;
-  const selectedProviderStatus = selectedProviderKey ? getProviderStatus(selectedProviderKey) : undefined;
-  const shouldShowProviderAlert = Boolean(
-    selectedProviderKey && selectedProviderStatus === 'missing'
-  );
-  const providerAlertClassName = shouldShowProviderAlert && selectedProviderKey
-    ? providerAlertStyles[selectedProviderKey]
-    : '';
-  const providerAlertMessage = shouldShowProviderAlert && selectedProviderKey
-    ? providerAlertMessages[selectedProviderKey]
-    : '';
+  const selectedProviderStatus = activeProviderKey ? getProviderStatus(activeProviderKey) : undefined;
+
+  let providerAlertMessage: string | null = null;
+  let providerAlertClassName = '';
+
+  if (activeProviderKey === 'ollama') {
+    if (ollamaServerStatus === 'offline') {
+      providerAlertMessage = 'Local Ollama service is not running. Start the Ollama server and ensure it is reachable at the configured URL.';
+      providerAlertClassName = providerErrorAlertStyle;
+    } else if (selectedProviderStatus === 'partial' && ollamaServerStatus === 'online') {
+      providerAlertMessage = 'Local Ollama service detected. Click "Test Connection" to confirm model availability.';
+      providerAlertClassName = providerWarningAlertStyle;
+    }
+  } else if (activeProviderKey && selectedProviderStatus === 'missing') {
+    const providerName = providerDisplayNames[activeProviderKey] ?? activeProviderKey;
+    providerAlertMessage = `${providerName} API key is not configured. Add it in Settings > API Keys.`;
+    providerAlertClassName = providerMissingAlertStyle;
+  }
+
+  const shouldShowProviderAlert = Boolean(providerAlertMessage);
   
+  useEffect(() => {
+    if (chatProvider !== 'ollama') {
+      if (llmRetryTimeoutRef.current) {
+        clearTimeout(llmRetryTimeoutRef.current);
+        llmRetryTimeoutRef.current = null;
+      }
+      return;
+    }
+
+    const baseUrl = (
+      ragSettings.LLM_BASE_URL?.trim() ||
+      llmInstanceConfig.url?.trim() ||
+      DEFAULT_OLLAMA_URL
+    );
+
+    if (!baseUrl) {
+      return;
+    }
+
+    const instanceName = llmInstanceConfig.name?.trim().length
+      ? llmInstanceConfig.name
+      : 'LLM Instance';
+
+    let cancelled = false;
+
+    const runTest = async () => {
+      if (cancelled) return;
+
+      const success = await manualTestConnection(
+        baseUrl,
+        setLLMStatus,
+        instanceName,
+        'chat',
+        { suppressToast: true }
+      );
+
+      if (!success && chatProvider === 'ollama' && !cancelled) {
+        llmRetryTimeoutRef.current = window.setTimeout(runTest, 5000);
+      }
+    };
+
+    if (llmRetryTimeoutRef.current) {
+      clearTimeout(llmRetryTimeoutRef.current);
+      llmRetryTimeoutRef.current = null;
+    }
+
+    setLLMStatus(prev => ({ ...prev, checking: true }));
+    runTest();
+
+    return () => {
+      cancelled = true;
+      if (llmRetryTimeoutRef.current) {
+        clearTimeout(llmRetryTimeoutRef.current);
+        llmRetryTimeoutRef.current = null;
+      }
+    };
+  }, [chatProvider, ragSettings.LLM_BASE_URL, ragSettings.LLM_INSTANCE_NAME, llmInstanceConfig.url, llmInstanceConfig.name]);
+
+  useEffect(() => {
+    if (embeddingProvider !== 'ollama') {
+      if (embeddingRetryTimeoutRef.current) {
+        clearTimeout(embeddingRetryTimeoutRef.current);
+        embeddingRetryTimeoutRef.current = null;
+      }
+      return;
+    }
+
+    const baseUrl = (
+      ragSettings.OLLAMA_EMBEDDING_URL?.trim() ||
+      embeddingInstanceConfig.url?.trim() ||
+      DEFAULT_OLLAMA_URL
+    );
+
+    if (!baseUrl) {
+      return;
+    }
+
+    const instanceName = embeddingInstanceConfig.name?.trim().length
+      ? embeddingInstanceConfig.name
+      : 'Embedding Instance';
+
+    let cancelled = false;
+
+    const runTest = async () => {
+      if (cancelled) return;
+
+      const success = await manualTestConnection(
+        baseUrl,
+        setEmbeddingStatus,
+        instanceName,
+        'embedding',
+        { suppressToast: true }
+      );
+
+      if (!success && embeddingProvider === 'ollama' && !cancelled) {
+        embeddingRetryTimeoutRef.current = window.setTimeout(runTest, 5000);
+      }
+    };
+
+    if (embeddingRetryTimeoutRef.current) {
+      clearTimeout(embeddingRetryTimeoutRef.current);
+      embeddingRetryTimeoutRef.current = null;
+    }
+
+    setEmbeddingStatus(prev => ({ ...prev, checking: true }));
+    runTest();
+
+    return () => {
+      cancelled = true;
+      if (embeddingRetryTimeoutRef.current) {
+        clearTimeout(embeddingRetryTimeoutRef.current);
+        embeddingRetryTimeoutRef.current = null;
+      }
+    };
+  }, [embeddingProvider, ragSettings.OLLAMA_EMBEDDING_URL, ragSettings.OLLAMA_EMBEDDING_INSTANCE_NAME, embeddingInstanceConfig.url, embeddingInstanceConfig.name]);
+
   // Test Ollama connectivity when Settings page loads (scenario 4: page load)
   // This useEffect is placed after function definitions to ensure access to manualTestConnection
   useEffect(() => {
@@ -792,35 +1151,74 @@ export const RAGSettings = ({
     });
     
     // Only run once when data is properly loaded and not run before
-    if (!hasRunInitialTestRef.current && 
-        ragSettings.LLM_PROVIDER === 'ollama' && 
-        Object.keys(ragSettings).length > 0 && 
-        (llmInstanceConfig.url || embeddingInstanceConfig.url)) {
+    if (
+      !hasRunInitialTestRef.current &&
+      (ragSettings.LLM_PROVIDER === 'ollama' || embeddingProvider === 'ollama') &&
+      Object.keys(ragSettings).length > 0
+    ) {
       
       hasRunInitialTestRef.current = true;
       console.log('🔄 Settings page loaded with Ollama - Testing connectivity');
-      
-      // Test LLM instance if configured (use URL presence as the key indicator)
-      // Only test if URL is explicitly set in ragSettings, not just using the default
-      if (llmInstanceConfig.url && ragSettings.LLM_BASE_URL) {
+
+      // Test LLM instance if a URL is available (either saved or default)
+      if (llmInstanceConfig.url) {
         setTimeout(() => {
           const instanceName = llmInstanceConfig.name || 'LLM Instance';
           console.log('🔍 Testing LLM instance on page load:', instanceName, llmInstanceConfig.url);
-          manualTestConnection(llmInstanceConfig.url, setLLMStatus, instanceName);
+          manualTestConnection(
+            llmInstanceConfig.url,
+            setLLMStatus,
+            instanceName,
+            'chat',
+            { suppressToast: true }
+          );
         }, 1000); // Increased delay to ensure component is fully ready
       }
-      
+      // If no saved URL, run tests against default endpoint
+      else {
+        setTimeout(() => {
+          const defaultInstanceName = 'Local Ollama (Default)';
+          console.log('🔍 Testing default Ollama chat instance on page load:', DEFAULT_OLLAMA_URL);
+          manualTestConnection(
+            DEFAULT_OLLAMA_URL,
+            setLLMStatus,
+            defaultInstanceName,
+            'chat',
+            { suppressToast: true }
+          );
+        }, 1000);
+      }
+
       // Test Embedding instance if configured and different from LLM instance
-      // Only test if URL is explicitly set in ragSettings, not just using the default
-      if (embeddingInstanceConfig.url && ragSettings.OLLAMA_EMBEDDING_URL &&
+      if (embeddingInstanceConfig.url &&
           embeddingInstanceConfig.url !== llmInstanceConfig.url) {
         setTimeout(() => {
           const instanceName = embeddingInstanceConfig.name || 'Embedding Instance';
           console.log('🔍 Testing Embedding instance on page load:', instanceName, embeddingInstanceConfig.url);
-          manualTestConnection(embeddingInstanceConfig.url, setEmbeddingStatus, instanceName);
+          manualTestConnection(
+            embeddingInstanceConfig.url,
+            setEmbeddingStatus,
+            instanceName,
+            'embedding',
+            { suppressToast: true }
+          );
         }, 1500); // Stagger the tests
       }
-      
+      // If embedding provider is also Ollama but no specific URL is set, test default as fallback
+      else if (embeddingProvider === 'ollama' && !embeddingInstanceConfig.url) {
+        setTimeout(() => {
+          const defaultEmbeddingName = 'Local Ollama (Default)';
+          console.log('🔍 Testing default Ollama embedding instance on page load:', DEFAULT_OLLAMA_URL);
+          manualTestConnection(
+            DEFAULT_OLLAMA_URL,
+            setEmbeddingStatus,
+            defaultEmbeddingName,
+            'embedding',
+            { suppressToast: true }
+          );
+        }, 1500);
+      }
+
       // Fetch Ollama metrics after testing connections
       setTimeout(() => {
         console.log('📊 Fetching Ollama metrics on page load');
@@ -838,12 +1236,63 @@ export const RAGSettings = ({
           knowledge retrieval.
         </p>
         
-        {/* Provider Selection - 6 Button Layout */}
+        {/* LLM Provider Settings Header */}
+        <div className="mb-4">
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-white">
+            LLM Provider Settings
+          </h2>
+        </div>
+
+        {/* Provider Selection Buttons */}
+        <div className="flex gap-4 mb-6">
+          <GlowButton
+            onClick={() => setActiveSelection('chat')}
+            variant="ghost"
+            className={`min-w-[180px] px-5 py-3 font-semibold text-white dark:text-white
+              border border-emerald-400/70 dark:border-emerald-400/40
+              bg-black/40 backdrop-blur-md
+              shadow-[inset_0_0_16px_rgba(15,118,110,0.38)]
+              hover:bg-emerald-500/12 dark:hover:bg-emerald-500/20
+              hover:border-emerald-300/80 hover:shadow-[0_0_22px_rgba(16,185,129,0.5)]
+              ${(activeSelection === 'chat')
+                ? 'shadow-[0_0_25px_rgba(16,185,129,0.5)] ring-2 ring-emerald-400/50'
+                : 'shadow-[0_0_15px_rgba(16,185,129,0.25)]'}
+            `}
+          >
+            <span className="flex items-center justify-center gap-2">
+              <LuBrainCircuit className="w-4 h-4 text-emerald-300" aria-hidden="true" />
+              <span>Chat: {chatProvider}</span>
+            </span>
+          </GlowButton>
+          <GlowButton
+            onClick={() => setActiveSelection('embedding')}
+            variant="ghost"
+            className={`min-w-[180px] px-5 py-3 font-semibold text-white dark:text-white
+              border border-purple-400/70 dark:border-purple-400/40
+              bg-black/40 backdrop-blur-md
+              shadow-[inset_0_0_16px_rgba(109,40,217,0.38)]
+              hover:bg-purple-500/12 dark:hover:bg-purple-500/20
+              hover:border-purple-300/80 hover:shadow-[0_0_24px_rgba(168,85,247,0.52)]
+              ${(activeSelection === 'embedding')
+                ? 'shadow-[0_0_26px_rgba(168,85,247,0.55)] ring-2 ring-purple-400/60'
+                : 'shadow-[0_0_15px_rgba(168,85,247,0.25)]'}
+            `}
+          >
+            <span className="flex items-center justify-center gap-2">
+              <PiDatabaseThin className="w-4 h-4 text-purple-300" aria-hidden="true" />
+              <span>Embeddings: {embeddingProvider}</span>
+            </span>
+          </GlowButton>
+        </div>
+
+        {/* Context-Aware Provider Grid */}
         <div className="mb-6">
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-            LLM Provider
+            Select {activeSelection === 'chat' ? 'Chat' : 'Embedding'} Provider
           </label>
-          <div className="grid grid-cols-6 gap-3 mb-4">
+          <div className={`grid gap-3 mb-4 ${
+            activeSelection === 'chat' ? 'grid-cols-6' : 'grid-cols-3'
+          }`}>
             {[
               { key: 'openai', name: 'OpenAI', logo: '/img/OpenAI.png', color: 'green' },
               { key: 'google', name: 'Google', logo: '/img/google-logo.svg', color: 'blue' },
@@ -851,39 +1300,50 @@ export const RAGSettings = ({
               { key: 'ollama', name: 'Ollama', logo: '/img/Ollama.png', color: 'purple' },
               { key: 'anthropic', name: 'Anthropic', logo: '/img/claude-logo.svg', color: 'orange' },
               { key: 'grok', name: 'Grok', logo: '/img/Grok.png', color: 'yellow' }
-            ].map(provider => (
+            ]
+              .filter(provider =>
+                activeSelection === 'chat' || EMBEDDING_CAPABLE_PROVIDERS.includes(provider.key as ProviderKey)
+              )
+              .map(provider => (
               <button
                 key={provider.key}
                 type="button"
                 onClick={() => {
-                  // Get saved models for this provider, or use defaults
                   const providerKey = provider.key as ProviderKey;
-                  const savedModels = providerModels[providerKey] || getDefaultModels(providerKey);
 
-                  const updatedSettings = {
-                    ...ragSettings,
-                    LLM_PROVIDER: providerKey,
-                    MODEL_CHOICE: savedModels.chatModel,
-                    EMBEDDING_MODEL: savedModels.embeddingModel
-                  };
-
-                  setRagSettings(updatedSettings);
+                  if (activeSelection === 'chat') {
+                    setChatProvider(providerKey);
+                    // Update chat model when switching providers
+                    const savedModels = providerModels[providerKey] || getDefaultModels(providerKey);
+                    setRagSettings(prev => ({
+                      ...prev,
+                      MODEL_CHOICE: savedModels.chatModel
+                    }));
+                  } else {
+                    setEmbeddingProvider(providerKey);
+                    // Update embedding model when switching providers
+                    const savedModels = providerModels[providerKey] || getDefaultModels(providerKey);
+                    setRagSettings(prev => ({
+                      ...prev,
+                      EMBEDDING_MODEL: savedModels.embeddingModel
+                    }));
+                  }
                 }}
                 className={`
                   relative p-3 rounded-lg border-2 transition-all duration-200 text-center
-                  ${ragSettings.LLM_PROVIDER === provider.key
+                  ${(activeSelection === 'chat' ? chatProvider === provider.key : embeddingProvider === provider.key)
                     ? `${colorStyles[provider.key as ProviderKey]} shadow-[0_0_15px_rgba(34,197,94,0.3)]`
                     : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
                   }
                   hover:scale-105 active:scale-95
                 `}
               >
-                <img 
-                  src={provider.logo} 
+                <img
+                  src={provider.logo}
                   alt={`${provider.name} logo`}
                   className={`w-8 h-8 mb-1 mx-auto ${
-                    provider.key === 'openai' || provider.key === 'grok' 
-                      ? 'bg-white rounded p-1' 
+                    provider.key === 'openai' || provider.key === 'grok'
+                      ? 'bg-white rounded p-1'
                       : ''
                   }`}
                 />
@@ -892,10 +1352,9 @@ export const RAGSettings = ({
                 }`}>
                   {provider.name}
                 </div>
-{(() => {
+                {(() => {
                   const status = getProviderStatus(provider.key);
-                  const isSelected = ragSettings.LLM_PROVIDER === provider.key;
-                  
+
                   if (status === 'configured') {
                     return (
                       <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
@@ -919,394 +1378,93 @@ export const RAGSettings = ({
               </button>
             ))}
           </div>
-          
-          {/* Provider-specific configuration */}
-          {ragSettings.LLM_PROVIDER === 'ollama' && (
-            <div className="bg-gray-800 rounded-lg p-6 mb-6">
-              <div className="flex items-center justify-between mb-4">
-                <div>
-                  <h3 className="text-white text-lg font-semibold">Ollama Configuration</h3>
-                  <p className="text-gray-400 text-sm">Configure separate Ollama instances for LLM and embedding models</p>
-                </div>
-                <div className={`text-sm font-medium ${
-                  (llmStatus.online && embeddingStatus.online) ? "text-teal-400" : 
-                  (llmStatus.online || embeddingStatus.online) ? "text-yellow-400" : "text-red-400"
-                }`}>
-                  {(llmStatus.online && embeddingStatus.online) ? "2 / 2 Online" :
-                   (llmStatus.online || embeddingStatus.online) ? "1 / 2 Online" : "0 / 2 Online"}
-                </div>
-              </div>
-
-              {/* LLM Instance Card */}
-              <div className="bg-gray-700 rounded-lg p-4 mb-4">
-                <div className="flex justify-between items-start mb-3">
-                  <div>
-                    <h4 className="text-white font-medium">LLM Instance</h4>
-                    <p className="text-gray-400 text-sm">For chat completions and text generation</p>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {llmStatus.checking ? (
-                      <span className="text-yellow-400 text-sm">Checking...</span>
-                    ) : llmStatus.online ? (
-                      <span className="text-teal-400 text-sm">Online ({llmStatus.responseTime}ms)</span>
-                    ) : (
-                      <span className="text-red-400 text-sm">Offline</span>
-                    )}
-                    {llmInstanceConfig.name && llmInstanceConfig.url && (
-                      <button 
-                        className="text-red-400 hover:text-red-300 transition-colors"
-                        onClick={handleDeleteLLMInstance}
-                        title="Delete LLM instance configuration"
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    )}
-                  </div>
-                </div>
-                
-                <div className="flex justify-between items-start">
-                  <div className="flex-1">
-                    {llmInstanceConfig.name && llmInstanceConfig.url ? (
-                      <>
-                        <div className="mb-3">
-                          <div className="text-white font-medium mb-1">{llmInstanceConfig.name}</div>
-                          <div className="text-gray-400 text-sm font-mono">{llmInstanceConfig.url}</div>
-                        </div>
-
-                        <div className="mb-4">
-                          <div className="text-gray-300 text-sm mb-1">Model:</div>
-                          <div className="text-white">{getDisplayedChatModel(ragSettings)}</div>
-                        </div>
-                        
-                        <div className="text-gray-400 text-sm">
-                          {llmStatus.checking ? (
-                            <Loader className="w-4 h-4 animate-spin inline mr-1" />
-                          ) : null}
-                          {ollamaMetrics.loading ? 'Loading...' : `${ollamaMetrics.llmInstanceModels.total} models available`}
-                        </div>
-                      </>
-                    ) : (
-                      <div className="text-center py-8">
-                        <div className="text-gray-400 text-sm mb-2">No LLM instance configured</div>
-                        <div className="text-gray-500 text-xs mb-4">Configure an instance to use LLM features</div>
-                        
-                        {/* Quick setup for single host users */}
-                        {!embeddingInstanceConfig.url && (
-                          <div className="flex flex-col gap-2">
-                            <Button 
-                              variant="outline" 
-                              size="sm" 
-                              className="text-green-400 border-green-400 mb-1"
-                              onClick={() => {
-                                // Quick setup: configure both instances with default values
-                                const defaultUrl = 'http://host.docker.internal:11434/v1';
-                                const defaultName = 'Default Ollama';
-                                setLLMInstanceConfig({ name: defaultName, url: defaultUrl });
-                                setEmbeddingInstanceConfig({ name: defaultName, url: defaultUrl });
-                                setShowEditLLMModal(true);
-                              }}
-                            >
-                              ⚡ Quick Setup (Single Host)
-                            </Button>
-                            <div className="text-gray-500 text-xs mb-2">Sets up both LLM and Embedding for one host</div>
-                          </div>
-                        )}
-                        
-                        <Button 
-                          variant="outline" 
-                          size="sm" 
-                          className="text-purple-400 border-purple-400"
-                          onClick={() => setShowEditLLMModal(true)}
-                        >
-                          Add LLM Instance
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-
-                  {llmInstanceConfig.name && llmInstanceConfig.url && (
-                    <div className="flex flex-col gap-2 ml-4">
-                      <Button 
-                        variant="outline" 
-                        size="sm" 
-                        className="text-purple-400 border-purple-400"
-                        onClick={() => setShowEditLLMModal(true)}
-                      >
-                        Edit Settings
-                      </Button>
-                      <Button 
-                        variant="outline" 
-                        size="sm" 
-                        className="text-purple-400 border-purple-400"
-                        onClick={() => manualTestConnection(llmInstanceConfig.url, setLLMStatus, llmInstanceConfig.name)}
-                        disabled={llmStatus.checking}
-                    >
-                      {llmStatus.checking ? 'Testing...' : 'Test Connection'}
-                    </Button>
-                      <Button 
-                        variant="outline" 
-                        size="sm" 
-                        className="text-purple-400 border-purple-400"
-                        onClick={() => setShowLLMModelSelectionModal(true)}
-                      >
-                        Select Model
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Embedding Instance Card */}
-              <div className="bg-gray-700 rounded-lg p-4 mb-4">
-                <div className="flex justify-between items-start mb-3">
-                  <div>
-                    <h4 className="text-white font-medium">Embedding Instance</h4>
-                    <p className="text-gray-400 text-sm">For generating text embeddings and vector search</p>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {embeddingStatus.checking ? (
-                      <span className="text-yellow-400 text-sm">Checking...</span>
-                    ) : embeddingStatus.online ? (
-                      <span className="text-teal-400 text-sm">Online ({embeddingStatus.responseTime}ms)</span>
-                    ) : (
-                      <span className="text-red-400 text-sm">Offline</span>
-                    )}
-                    {embeddingInstanceConfig.name && embeddingInstanceConfig.url && (
-                      <button 
-                        className="text-red-400 hover:text-red-300 transition-colors"
-                        onClick={handleDeleteEmbeddingInstance}
-                        title="Delete Embedding instance configuration"
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    )}
-                  </div>
-                </div>
-                
-                <div className="flex justify-between items-start">
-                  <div className="flex-1">
-                    {embeddingInstanceConfig.name && embeddingInstanceConfig.url ? (
-                      <>
-                        <div className="mb-3">
-                          <div className="text-white font-medium mb-1">{embeddingInstanceConfig.name}</div>
-                          <div className="text-gray-400 text-sm font-mono">{embeddingInstanceConfig.url}</div>
-                        </div>
-
-                        <div className="mb-4">
-                          <div className="text-gray-300 text-sm mb-1">Model:</div>
-                          <div className="text-white">{getDisplayedEmbeddingModel(ragSettings)}</div>
-                        </div>
-                        
-                        <div className="text-gray-400 text-sm">
-                          {embeddingStatus.checking ? (
-                            <Loader className="w-4 h-4 animate-spin inline mr-1" />
-                          ) : null}
-                          {ollamaMetrics.loading ? 'Loading...' : `${ollamaMetrics.embeddingInstanceModels.total} models available`}
-                        </div>
-                      </>
-                    ) : (
-                      <div className="text-center py-8">
-                        <div className="text-gray-400 text-sm mb-2">No Embedding instance configured</div>
-                        <div className="text-gray-500 text-xs mb-4">Configure an instance to use embedding features</div>
-                        <Button 
-                          variant="outline" 
-                          size="sm" 
-                          className="text-purple-400 border-purple-400"
-                          onClick={() => setShowEditEmbeddingModal(true)}
-                        >
-                          Add Embedding Instance
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-
-                  {embeddingInstanceConfig.name && embeddingInstanceConfig.url && (
-                    <div className="flex flex-col gap-2 ml-4">
-                      <Button 
-                        variant="outline" 
-                        size="sm" 
-                        className="text-purple-400 border-purple-400"
-                        onClick={() => setShowEditEmbeddingModal(true)}
-                      >
-                        Edit Settings
-                      </Button>
-                      <Button 
-                        variant="outline" 
-                        size="sm" 
-                        className="text-purple-400 border-purple-400"
-                        onClick={() => manualTestConnection(embeddingInstanceConfig.url, setEmbeddingStatus, embeddingInstanceConfig.name)}
-                        disabled={embeddingStatus.checking}
-                      >
-                        {embeddingStatus.checking ? 'Testing...' : 'Test Connection'}
-                      </Button>
-                      <Button 
-                        variant="outline" 
-                        size="sm" 
-                        className="text-purple-400 border-purple-400"
-                        onClick={() => setShowEmbeddingModelSelectionModal(true)}
-                      >
-                        Select Model
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Single Host Indicator */}
-              {llmInstanceConfig.url && embeddingInstanceConfig.url && 
-               llmInstanceConfig.url === embeddingInstanceConfig.url && (
-                <div className="bg-green-900/30 border border-green-500/30 rounded-lg p-3 mb-4">
-                  <div className="flex items-center gap-2">
-                    <svg className="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                    </svg>
-                    <span className="text-green-300 font-medium">Single Host Setup</span>
-                  </div>
-                  <p className="text-green-200/80 text-sm mt-1 ml-7">
-                    Both LLM and Embedding instances are using the same Ollama host ({llmInstanceConfig.name})
-                  </p>
-                </div>
-              )}
-
-              {/* Configuration Summary */}
-              <div className="bg-gray-700 rounded-lg p-4">
-                <h4 className="text-white font-medium mb-3">Configuration Summary</h4>
-                
-                {/* Instance Comparison Table */}
-                <div className="overflow-x-auto">
-                  <table className="w-full text-sm">
-                    <thead>
-                      <tr className="border-b border-gray-600">
-                        <th className="text-left py-2 text-gray-300 font-medium">Configuration</th>
-                        <th className="text-left py-2 text-gray-300 font-medium">LLM Instance</th>
-                        <th className="text-left py-2 text-gray-300 font-medium">Embedding Instance</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-600">
-                      <tr>
-                        <td className="py-2 text-gray-400">Instance Name</td>
-                        <td className="py-2 text-white">
-                          {llmInstanceConfig.name || <span className="text-gray-500 italic">Not configured</span>}
-                        </td>
-                        <td className="py-2 text-white">
-                          {embeddingInstanceConfig.name || <span className="text-gray-500 italic">Not configured</span>}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td className="py-2 text-gray-400">Status</td>
-                        <td className="py-2">
-                          <span className={llmStatus.checking ? "text-yellow-400" : llmStatus.online ? "text-teal-400" : "text-red-400"}>
-                            {llmStatus.checking ? "Checking..." : llmStatus.online ? `Online (${llmStatus.responseTime}ms)` : "Offline"}
-                          </span>
-                        </td>
-                        <td className="py-2">
-                          <span className={embeddingStatus.checking ? "text-yellow-400" : embeddingStatus.online ? "text-teal-400" : "text-red-400"}>
-                            {embeddingStatus.checking ? "Checking..." : embeddingStatus.online ? `Online (${embeddingStatus.responseTime}ms)` : "Offline"}
-                          </span>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td className="py-2 text-gray-400">Selected Model</td>
-                        <td className="py-2 text-white">
-                          {getDisplayedChatModel(ragSettings) || <span className="text-gray-500 italic">No model selected</span>}
-                        </td>
-                        <td className="py-2 text-white">
-                          {getDisplayedEmbeddingModel(ragSettings) || <span className="text-gray-500 italic">No model selected</span>}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td className="py-2 text-gray-400">Available Models</td>
-                        <td className="py-2">
-                          {ollamaMetrics.loading ? (
-                            <Loader className="w-3 h-3 animate-spin inline" />
-                          ) : (
-                            <div className="text-white">
-                              <div className="font-medium">{ollamaMetrics.llmInstanceModels.total} Total Models</div>
-                              {ollamaMetrics.llmInstanceModels.total > 0 && (
-                                <div className="text-xs text-gray-400 mt-1">
-                                  <span className="inline-block mr-3">
-                                    <span className="text-blue-400">{ollamaMetrics.llmInstanceModels.chat}</span> Chat
-                                  </span>
-                                  <span className="inline-block">
-                                    <span className="text-green-400">{ollamaMetrics.llmInstanceModels.embedding}</span> Embedding
-                                  </span>
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </td>
-                        <td className="py-2">
-                          {ollamaMetrics.loading ? (
-                            <Loader className="w-3 h-3 animate-spin inline" />
-                          ) : (
-                            <div className="text-white">
-                              <div className="font-medium">{ollamaMetrics.embeddingInstanceModels.total} Total Models</div>
-                              {ollamaMetrics.embeddingInstanceModels.total > 0 && (
-                                <div className="text-xs text-gray-400 mt-1">
-                                  <span className="inline-block mr-3">
-                                    <span className="text-blue-400">{ollamaMetrics.embeddingInstanceModels.chat}</span> Chat
-                                  </span>
-                                  <span className="inline-block">
-                                    <span className="text-green-400">{ollamaMetrics.embeddingInstanceModels.embedding}</span> Embedding
-                                  </span>
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                  
-                  {/* System Readiness Summary */}
-                  <div className="mt-4 pt-3 border-t border-gray-600">
-                    <div className="flex items-center justify-between text-sm">
-                      <span className="text-gray-300">System Readiness:</span>
-                      <span className={(llmStatus.online && embeddingStatus.online) ? "text-teal-400 font-medium" : (llmStatus.online || embeddingStatus.online) ? "text-yellow-400" : "text-red-400"}>
-                        {(llmStatus.online && embeddingStatus.online) ? "✓ Ready (Both Instances Online)" : 
-                         (llmStatus.online || embeddingStatus.online) ? "⚠ Partial (1 of 2 Online)" : "✗ Not Ready (No Instances Online)"}
-                      </span>
-                    </div>
-                    
-                    {/* Overall Model Metrics */}
-                    <div className="mt-3 flex items-center gap-4 text-xs text-gray-400">
-                      <div className="flex items-center gap-1">
-                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                          <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
-                        </svg>
-                        <span>Overall Available:</span>
-                        <span className="text-white">
-                          {ollamaMetrics.loading ? (
-                            <Loader className="w-3 h-3 animate-spin inline" />
-                          ) : (
-                            `${ollamaMetrics.totalModels} total (${ollamaMetrics.chatModels} chat, ${ollamaMetrics.embeddingModels} embedding)`
-                          )}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
           {shouldShowProviderAlert && (
             <div className={`p-4 border rounded-lg mb-4 ${providerAlertClassName}`}>
               <p className="text-sm">{providerAlertMessage}</p>
             </div>
           )}
           
-          <div className="flex justify-end">
-            <Button 
-              variant="outline" 
-              accentColor="green" 
+          <div className="flex justify-between items-end">
+            {/* Context-Aware Model Input */}
+            <div className="flex-1 max-w-md">
+              {activeSelection === 'chat' ? (
+                chatProvider !== 'ollama' ? (
+                  <Input
+                    label="Chat Model"
+                    value={getDisplayedChatModel(ragSettings)}
+                    onChange={e => setRagSettings({
+                      ...ragSettings,
+                      MODEL_CHOICE: e.target.value
+                    })}
+                    placeholder={getModelPlaceholder(chatProvider)}
+                    accentColor="green"
+                  />
+                ) : (
+                  <div className="p-3 border border-green-500/30 rounded-lg bg-green-500/5">
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Chat Model
+                    </label>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      Configured via Ollama instance
+                    </div>
+                    <div className="text-xs text-green-400 mt-1">
+                      Current: {getDisplayedChatModel(ragSettings) || 'Not selected'}
+                    </div>
+                  </div>
+                )
+              ) : (
+                embeddingProvider !== 'ollama' ? (
+                  <Input
+                    label="Embedding Model"
+                    value={getDisplayedEmbeddingModel(ragSettings)}
+                    onChange={e => setRagSettings({
+                      ...ragSettings,
+                      EMBEDDING_MODEL: e.target.value
+                    })}
+                    placeholder={getEmbeddingPlaceholder(embeddingProvider)}
+                    accentColor="purple"
+                  />
+                ) : (
+                  <div className="p-3 border border-purple-500/30 rounded-lg bg-purple-500/5">
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Embedding Model
+                    </label>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      Configured via Ollama instance
+                    </div>
+                    <div className="text-xs text-purple-400 mt-1">
+                      Current: {getDisplayedEmbeddingModel(ragSettings) || 'Not selected'}
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+
+            {/* Ollama Configuration Gear Icon */}
+            {((activeSelection === 'chat' && chatProvider === 'ollama') ||
+              (activeSelection === 'embedding' && embeddingProvider === 'ollama')) && (
+              <Button
+                variant="outline"
+                accentColor="green"
+                icon={<Cog className={`w-4 h-4 mr-1 transition-transform ${showOllamaConfig ? 'rotate-90' : ''}`} />}
+                className="whitespace-nowrap ml-4 border-green-500 text-green-400 hover:bg-green-500/10"
+                onClick={() => setShowOllamaConfig(!showOllamaConfig)}
+              >
+                {activeSelection === 'chat' ? 'Config' : 'Config'}
+              </Button>
+            )}
+
+            {/* Save Settings Button */}
+            <Button
+              variant="outline"
+              accentColor="green"
               icon={saving ? <Loader className="w-4 h-4 mr-1 animate-spin" /> : <Save className="w-4 h-4 mr-1" />}
-              className="whitespace-nowrap"
+              className="whitespace-nowrap ml-4"
               size="md"
               onClick={async () => {
                 try {
                   setSaving(true);
-                  
+
                   // Ensure instance configurations are synced with ragSettings before saving
                   const updatedSettings = {
                     ...ragSettings,
@@ -1315,12 +1473,12 @@ export const RAGSettings = ({
                     OLLAMA_EMBEDDING_URL: embeddingInstanceConfig.url,
                     OLLAMA_EMBEDDING_INSTANCE_NAME: embeddingInstanceConfig.name
                   };
-                  
+
                   await credentialsService.updateRagSettings(updatedSettings);
-                  
+
                   // Update local ragSettings state to match what was saved
                   setRagSettings(updatedSettings);
-                  
+
                   showToast('RAG settings saved successfully!', 'success');
                 } catch (err) {
                   console.error('Failed to save RAG settings:', err);
@@ -1334,38 +1492,312 @@ export const RAGSettings = ({
               {saving ? 'Saving...' : 'Save Settings'}
             </Button>
           </div>
+
+          {/* Expandable Ollama Configuration Container */}
+          {showOllamaConfig && ((activeSelection === 'chat' && chatProvider === 'ollama') ||
+                               (activeSelection === 'embedding' && embeddingProvider === 'ollama')) && (
+            <div className="mt-4 p-4 bg-gradient-to-r from-green-500/5 to-green-600/5 border border-green-500/20 rounded-lg shadow-[0_2px_8px_rgba(34,197,94,0.1)]">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h3 className="text-white text-lg font-semibold">
+                    {activeSelection === 'chat' ? 'LLM Chat Configuration' : 'Embedding Configuration'}
+                  </h3>
+                  <p className="text-gray-400 text-sm">
+                    {activeSelection === 'chat'
+                      ? 'Configure Ollama instance for chat completions'
+                      : 'Configure Ollama instance for text embeddings'}
+                  </p>
+                </div>
+                <div className={`text-sm font-medium ${
+                  (activeSelection === 'chat' ? llmStatus.online : embeddingStatus.online)
+                    ? "text-teal-400" : "text-red-400"
+                }`}>
+                  {(activeSelection === 'chat' ? llmStatus.online : embeddingStatus.online)
+                    ? "Online" : "Offline"}
+                </div>
+              </div>
+
+              {/* Configuration Content */}
+              <div className="bg-black/40 rounded-lg p-4 shadow-[0_2px_8px_rgba(34,197,94,0.1)]">
+                {activeSelection === 'chat' ? (
+                  // Chat Model Configuration
+                  <div>
+                    {llmInstanceConfig.name && llmInstanceConfig.url ? (
+                      <>
+                        <div className="mb-3">
+                          <div className="text-white font-medium mb-1">{llmInstanceConfig.name}</div>
+                          <div className="text-gray-400 text-sm font-mono">{llmInstanceConfig.url}</div>
+                        </div>
+
+                        <div className="mb-4">
+                          <div className="text-gray-300 text-sm mb-1">Model:</div>
+                          <div className="text-white">{getDisplayedChatModel(ragSettings)}</div>
+                        </div>
+
+                        <div className="text-gray-400 text-sm mb-4">
+                          {llmStatus.checking ? (
+                            <Loader className="w-4 h-4 animate-spin inline mr-1" />
+                          ) : null}
+                          {ollamaMetrics.loading ? 'Loading...' : `${ollamaMetrics.llmInstanceModels?.chat || 0} chat models available`}
+                        </div>
+
+                        <div className="flex gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            accentColor="green"
+                            className="text-white border-emerald-400 hover:bg-emerald-500/10"
+                            onClick={() => setShowEditLLMModal(true)}
+                          >
+                            Edit Settings
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            accentColor="green"
+                            className="text-white border-emerald-400 hover:bg-emerald-500/10"
+                            onClick={async () => {
+                              const success = await manualTestConnection(
+                                llmInstanceConfig.url,
+                                setLLMStatus,
+                                llmInstanceConfig.name,
+                                'chat'
+                              );
+
+                              setOllamaManualConfirmed(success);
+                              setOllamaServerStatus(success ? 'online' : 'offline');
+                            }}
+                            disabled={llmStatus.checking}
+                          >
+                            {llmStatus.checking ? 'Testing...' : 'Test Connection'}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            accentColor="green"
+                            className="text-white border-emerald-400 hover:bg-emerald-500/10"
+                            onClick={() => setShowLLMModelSelectionModal(true)}
+                          >
+                            Select Model
+                          </Button>
+                        </div>
+                      </>
+                    ) : (
+                      <div className="text-center py-8">
+                        <div className="text-gray-400 text-sm mb-2">No LLM instance configured</div>
+                        <div className="text-gray-500 text-xs mb-4">Configure an instance to use LLM chat features</div>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="text-green-400 border-green-400 hover:bg-green-400/10"
+                          onClick={() => setShowEditLLMModal(true)}
+                        >
+                          Add LLM Instance
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  // Embedding Model Configuration
+                  <div>
+                    {embeddingInstanceConfig.name && embeddingInstanceConfig.url ? (
+                      <>
+                        <div className="mb-3">
+                          <div className="text-white font-medium mb-1">{embeddingInstanceConfig.name}</div>
+                          <div className="text-gray-400 text-sm font-mono">{embeddingInstanceConfig.url}</div>
+                        </div>
+
+                        <div className="mb-4">
+                          <div className="text-gray-300 text-sm mb-1">Model:</div>
+                          <div className="text-white">{getDisplayedEmbeddingModel(ragSettings)}</div>
+                        </div>
+
+                        <div className="text-gray-400 text-sm mb-4">
+                          {embeddingStatus.checking ? (
+                            <Loader className="w-4 h-4 animate-spin inline mr-1" />
+                          ) : null}
+                          {ollamaMetrics.loading ? 'Loading...' : `${ollamaMetrics.embeddingInstanceModels?.embedding || 0} embedding models available`}
+                        </div>
+
+                        <div className="flex gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-purple-300 border-purple-400 hover:bg-purple-500/10"
+                            onClick={() => setShowEditEmbeddingModal(true)}
+                          >
+                            Edit Settings
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-purple-300 border-purple-400 hover:bg-purple-500/10"
+                            onClick={async () => {
+                              const success = await manualTestConnection(
+                                embeddingInstanceConfig.url,
+                                setEmbeddingStatus,
+                                embeddingInstanceConfig.name,
+                                'embedding'
+                              );
+
+                              setOllamaManualConfirmed(success);
+                              setOllamaServerStatus(success ? 'online' : 'offline');
+                            }}
+                            disabled={embeddingStatus.checking}
+                          >
+                            {embeddingStatus.checking ? 'Testing...' : 'Test Connection'}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-purple-300 border-purple-400 hover:bg-purple-500/10"
+                            onClick={() => setShowEmbeddingModelSelectionModal(true)}
+                          >
+                            Select Model
+                          </Button>
+                        </div>
+                      </>
+                    ) : (
+                      <div className="text-center py-8">
+                        <div className="text-gray-400 text-sm mb-2">No Embedding instance configured</div>
+                        <div className="text-gray-500 text-xs mb-4">Configure an instance to use embedding features</div>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="text-purple-300 border-purple-400 hover:bg-purple-500/10"
+                          onClick={() => setShowEditEmbeddingModal(true)}
+                        >
+                          Add Embedding Instance
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              {/* Context-Aware Configuration Summary */}
+              <div className="bg-black/40 rounded-lg p-4 mt-4 shadow-[0_2px_8px_rgba(34,197,94,0.1)]">
+                <h4 className="text-white font-medium mb-3">
+                  {activeSelection === 'chat' ? 'LLM Instance Summary' : 'Embedding Instance Summary'}
+                </h4>
+
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b border-gray-600">
+                        <th className="text-left py-2 text-gray-300 font-medium">Configuration</th>
+                        <th className="text-left py-2 text-gray-300 font-medium">
+                          {activeSelection === 'chat' ? 'LLM Instance' : 'Embedding Instance'}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-600">
+                      <tr>
+                        <td className="py-2 text-gray-400">Instance Name</td>
+                        <td className="py-2 text-white">
+                          {activeSelection === 'chat'
+                            ? (llmInstanceConfig.name || <span className="text-gray-500 italic">Not configured</span>)
+                            : (embeddingInstanceConfig.name || <span className="text-gray-500 italic">Not configured</span>)
+                          }
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="py-2 text-gray-400">Instance URL</td>
+                        <td className="py-2 text-white font-mono text-xs">
+                          {activeSelection === 'chat'
+                            ? (llmInstanceConfig.url || <span className="text-gray-500 italic">Not configured</span>)
+                            : (embeddingInstanceConfig.url || <span className="text-gray-500 italic">Not configured</span>)
+                          }
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="py-2 text-gray-400">Status</td>
+                        <td className="py-2">
+                          {activeSelection === 'chat' ? (
+                            <span className={llmStatus.checking ? "text-yellow-400" : llmStatus.online ? "text-teal-400" : "text-red-400"}>
+                              {llmStatus.checking ? "Checking..." : llmStatus.online ? `Online (${llmStatus.responseTime}ms)` : "Offline"}
+                            </span>
+                          ) : (
+                            <span className={embeddingStatus.checking ? "text-yellow-400" : embeddingStatus.online ? "text-teal-400" : "text-red-400"}>
+                              {embeddingStatus.checking ? "Checking..." : embeddingStatus.online ? `Online (${embeddingStatus.responseTime}ms)` : "Offline"}
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="py-2 text-gray-400">Selected Model</td>
+                        <td className="py-2 text-white">
+                          {activeSelection === 'chat'
+                            ? (getDisplayedChatModel(ragSettings) || <span className="text-gray-500 italic">No model selected</span>)
+                            : (getDisplayedEmbeddingModel(ragSettings) || <span className="text-gray-500 italic">No model selected</span>)
+                          }
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="py-2 text-gray-400">Available Models</td>
+                        <td className="py-2">
+                          {ollamaMetrics.loading ? (
+                            <Loader className="w-3 h-3 animate-spin inline" />
+                          ) : activeSelection === 'chat' ? (
+                            <div className="text-white">
+                              <span className="text-green-400 font-medium text-lg">{ollamaMetrics.llmInstanceModels?.chat || 0}</span>
+                              <span className="text-gray-400 text-sm ml-2">chat models</span>
+                            </div>
+                          ) : (
+                            <div className="text-white">
+                              <span className="text-purple-400 font-medium text-lg">{ollamaMetrics.embeddingInstanceModels?.embedding || 0}</span>
+                              <span className="text-gray-400 text-sm ml-2">embedding models</span>
+                            </div>
+                          )}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+
+                  {/* Instance-Specific Readiness */}
+                  <div className="mt-4 pt-3 border-t border-gray-600">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-gray-300">
+                        {activeSelection === 'chat' ? 'LLM Instance Status:' : 'Embedding Instance Status:'}
+                      </span>
+                      <span className={
+                        activeSelection === 'chat'
+                          ? (llmStatus.online ? "text-teal-400 font-medium" : "text-red-400")
+                          : (embeddingStatus.online ? "text-teal-400 font-medium" : "text-red-400")
+                      }>
+                        {activeSelection === 'chat'
+                          ? (llmStatus.online ? "✓ Ready" : "✗ Not Ready")
+                          : (embeddingStatus.online ? "✓ Ready" : "✗ Not Ready")
+                        }
+                      </span>
+                    </div>
+
+                    {/* Instance-Specific Model Metrics */}
+                    <div className="mt-3 flex items-center gap-4 text-xs text-gray-400">
+                      <div className="flex items-center gap-1">
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                          <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+                        </svg>
+                        <span>Available on this instance:</span>
+                        <span className="text-white">
+                          {ollamaMetrics.loading ? (
+                            <Loader className="w-3 h-3 animate-spin inline" />
+                          ) : activeSelection === 'chat' ? (
+                            `${ollamaMetrics.llmInstanceModels?.chat || 0} chat models`
+                          ) : (
+                            `${ollamaMetrics.embeddingInstanceModels?.embedding || 0} embedding models`
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
 
-        {/* Model Settings Row - Only show for non-Ollama providers */}
-        {ragSettings.LLM_PROVIDER !== 'ollama' && (
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div>
-              <Input 
-                label="Chat Model" 
-                value={getDisplayedChatModel(ragSettings)} 
-                onChange={e => setRagSettings({
-                  ...ragSettings,
-                  MODEL_CHOICE: e.target.value
-                })} 
-                placeholder={getModelPlaceholder(ragSettings.LLM_PROVIDER || 'openai')}
-                accentColor="green" 
-              />
-            </div>
-            <div>
-              <Input
-                label="Embedding Model"
-                value={getDisplayedEmbeddingModel(ragSettings)}
-                onChange={e => setRagSettings({
-                  ...ragSettings,
-                  EMBEDDING_MODEL: e.target.value
-                })}
-                placeholder={getEmbeddingPlaceholder(ragSettings.LLM_PROVIDER || 'openai')}
-                accentColor="green"
-              />
-            </div>
-          </div>
-        )}
-        
+
         {/* Second row: Contextual Embeddings, Max Workers, and description */}
         <div className="grid grid-cols-8 gap-4 mb-4 p-4 rounded-lg border border-green-500/20 shadow-[0_2px_8px_rgba(34,197,94,0.1)]">
           <div className="col-span-4">
@@ -1778,7 +2210,16 @@ export const RAGSettings = ({
                     showToast('LLM instance updated successfully', 'success');
                     // Wait 1 second then automatically test connection and refresh models
                     setTimeout(() => {
-                      manualTestConnection(llmInstanceConfig.url, setLLMStatus, llmInstanceConfig.name);
+                      manualTestConnection(
+                        llmInstanceConfig.url,
+                        setLLMStatus,
+                        llmInstanceConfig.name,
+                        'chat',
+                        { suppressToast: true }
+                      ).then((success) => {
+                        setOllamaManualConfirmed(success);
+                        setOllamaServerStatus(success ? 'online' : 'offline');
+                      });
                       fetchOllamaMetrics(); // Refresh model metrics after saving
                     }, 1000);
                   }}
@@ -1829,7 +2270,16 @@ export const RAGSettings = ({
                     showToast('Embedding instance updated successfully', 'success');
                     // Wait 1 second then automatically test connection and refresh models
                     setTimeout(() => {
-                      manualTestConnection(embeddingInstanceConfig.url, setEmbeddingStatus, embeddingInstanceConfig.name);
+                      manualTestConnection(
+                        embeddingInstanceConfig.url,
+                        setEmbeddingStatus,
+                        embeddingInstanceConfig.name,
+                        'embedding',
+                        { suppressToast: true }
+                      ).then((success) => {
+                        setOllamaManualConfirmed(success);
+                        setOllamaServerStatus(success ? 'online' : 'offline');
+                      });
                       fetchOllamaMetrics(); // Refresh model metrics after saving
                     }, 1000);
                   }}
@@ -1854,7 +2304,7 @@ export const RAGSettings = ({
             ]}
             currentModel={ragSettings.MODEL_CHOICE}
             modelType="chat"
-            selectedInstanceUrl={llmInstanceConfig.url.replace('/v1', '')}
+            selectedInstanceUrl={normalizeBaseUrl(llmInstanceConfig.url) ?? ''}
             onSelectModel={(modelName: string) => {
               setRagSettings({ ...ragSettings, MODEL_CHOICE: modelName });
               showToast(`Selected LLM model: ${modelName}`, 'success');
@@ -1873,7 +2323,7 @@ export const RAGSettings = ({
             ]}
             currentModel={ragSettings.EMBEDDING_MODEL}
             modelType="embedding"
-            selectedInstanceUrl={embeddingInstanceConfig.url.replace('/v1', '')}
+            selectedInstanceUrl={normalizeBaseUrl(embeddingInstanceConfig.url) ?? ''}
             onSelectModel={(modelName: string) => {
               setRagSettings({ ...ragSettings, EMBEDDING_MODEL: modelName });
               showToast(`Selected embedding model: ${modelName}`, 'success');
@@ -1907,7 +2357,7 @@ export const RAGSettings = ({
 };
 
 // Helper functions to get provider-specific model display
-function getDisplayedChatModel(ragSettings: any): string {
+function getDisplayedChatModel(ragSettings: RAGSettingsProps["ragSettings"]): string {
   const provider = ragSettings.LLM_PROVIDER || 'openai';
   const modelChoice = ragSettings.MODEL_CHOICE;
 
@@ -1935,8 +2385,8 @@ function getDisplayedChatModel(ragSettings: any): string {
   }
 }
 
-function getDisplayedEmbeddingModel(ragSettings: any): string {
-  const provider = ragSettings.LLM_PROVIDER || 'openai';
+function getDisplayedEmbeddingModel(ragSettings: RAGSettingsProps["ragSettings"]): string {
+  const provider = ragSettings.EMBEDDING_PROVIDER || ragSettings.LLM_PROVIDER || 'openai';
   const embeddingModel = ragSettings.EMBEDDING_MODEL;
 
   // Always prioritize user input to allow editing
@@ -1964,7 +2414,7 @@ function getDisplayedEmbeddingModel(ragSettings: any): string {
 }
 
 // Helper functions for model placeholders
-function getModelPlaceholder(provider: string): string {
+function getModelPlaceholder(provider: ProviderKey): string {
   switch (provider) {
     case 'openai':
       return 'e.g., gpt-4o-mini';
@@ -1983,7 +2433,7 @@ function getModelPlaceholder(provider: string): string {
   }
 }
 
-function getEmbeddingPlaceholder(provider: string): string {
+function getEmbeddingPlaceholder(provider: ProviderKey): string {
   switch (provider) {
     case 'openai':
       return 'Default: text-embedding-3-small';
diff --git a/archon-ui-main/src/contexts/SettingsContext.tsx b/archon-ui-main/src/contexts/SettingsContext.tsx
index fa44a438..ff8f2264 100644
--- a/archon-ui-main/src/contexts/SettingsContext.tsx
+++ b/archon-ui-main/src/contexts/SettingsContext.tsx
@@ -3,7 +3,9 @@ import { credentialsService } from '../services/credentialsService';
 
 interface SettingsContextType {
   projectsEnabled: boolean;
-  setProjectsEnabled: (enabled: boolean) => void;
+  setProjectsEnabled: (enabled: boolean) => Promise<void>;
+  styleGuideEnabled: boolean;
+  setStyleGuideEnabled: (enabled: boolean) => Promise<void>;
   loading: boolean;
   refreshSettings: () => Promise<void>;
 }
@@ -24,24 +26,35 @@ interface SettingsProviderProps {
 
 export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children }) => {
   const [projectsEnabled, setProjectsEnabledState] = useState(true);
+  const [styleGuideEnabled, setStyleGuideEnabledState] = useState(false);
   const [loading, setLoading] = useState(true);
 
   const loadSettings = async () => {
     try {
       setLoading(true);
-      
-      // Load Projects setting
-      const projectsResponse = await credentialsService.getCredential('PROJECTS_ENABLED').catch(() => ({ value: undefined }));
-      
+
+      // Load Projects and Style Guide settings
+      const [projectsResponse, styleGuideResponse] = await Promise.all([
+        credentialsService.getCredential('PROJECTS_ENABLED').catch(() => ({ value: undefined })),
+        credentialsService.getCredential('STYLE_GUIDE_ENABLED').catch(() => ({ value: undefined }))
+      ]);
+
       if (projectsResponse.value !== undefined) {
         setProjectsEnabledState(projectsResponse.value === 'true');
       } else {
         setProjectsEnabledState(true); // Default to true
       }
-      
+
+      if (styleGuideResponse.value !== undefined) {
+        setStyleGuideEnabledState(styleGuideResponse.value === 'true');
+      } else {
+        setStyleGuideEnabledState(false); // Default to false
+      }
+
     } catch (error) {
       console.error('Failed to load settings:', error);
       setProjectsEnabledState(true);
+      setStyleGuideEnabledState(false);
     } finally {
       setLoading(false);
     }
@@ -72,6 +85,27 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children })
     }
   };
 
+  const setStyleGuideEnabled = async (enabled: boolean) => {
+    try {
+      // Update local state immediately
+      setStyleGuideEnabledState(enabled);
+
+      // Save to backend
+      await credentialsService.createCredential({
+        key: 'STYLE_GUIDE_ENABLED',
+        value: enabled.toString(),
+        is_encrypted: false,
+        category: 'features',
+        description: 'Show UI style guide and components in navigation'
+      });
+    } catch (error) {
+      console.error('Failed to update style guide setting:', error);
+      // Revert on error
+      setStyleGuideEnabledState(!enabled);
+      throw error;
+    }
+  };
+
   const refreshSettings = async () => {
     await loadSettings();
   };
@@ -79,6 +113,8 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children })
   const value: SettingsContextType = {
     projectsEnabled,
     setProjectsEnabled,
+    styleGuideEnabled,
+    setStyleGuideEnabled,
     loading,
     refreshSettings
   };
diff --git a/archon-ui-main/src/contexts/ThemeContext.tsx b/archon-ui-main/src/contexts/ThemeContext.tsx
index 726d8d96..fc92eca1 100644
--- a/archon-ui-main/src/contexts/ThemeContext.tsx
+++ b/archon-ui-main/src/contexts/ThemeContext.tsx
@@ -8,25 +8,22 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 export const ThemeProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>('dark');
-  useEffect(() => {
-    // Check if theme is stored in localStorage
+  // Read from localStorage immediately to avoid flash
+  const [theme, setTheme] = useState<Theme>(() => {
     const savedTheme = localStorage.getItem('theme') as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    } else {
-      // Default to dark mode
-      setTheme('dark');
-      localStorage.setItem('theme', 'dark');
-    }
-  }, []);
+    return savedTheme || 'dark';
+  });
   useEffect(() => {
     // Apply theme class to document element
     const root = window.document.documentElement;
-    // Remove both classes first
-    root.classList.remove('dark', 'light');
-    // Add the current theme class
-    root.classList.add(theme);
+
+    // Tailwind v4: Only toggle .dark class, don't add .light
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
     // Save to localStorage
     localStorage.setItem('theme', theme);
   }, [theme]);
diff --git a/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx b/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
index 3788affd..bcf01bdd 100644
--- a/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
+++ b/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
@@ -8,8 +8,8 @@ import { useId, useState } from "react";
 import { useToast } from "@/features/shared/hooks/useToast";
 import { Button, Input, Label } from "../../ui/primitives";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../ui/primitives/dialog";
-import { cn } from "../../ui/primitives/styles";
-import { Tabs, TabsContent } from "../../ui/primitives/tabs";
+import { cn, glassCard } from "../../ui/primitives/styles";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/primitives/tabs";
 import { useCrawlUrl, useUploadDocument } from "../hooks";
 import type { CrawlRequest, UploadMetadata } from "../types";
 import { KnowledgeTypeSelector } from "./KnowledgeTypeSelector";
@@ -134,59 +134,17 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
         </DialogHeader>
 
         <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "crawl" | "upload")}>
-          {/* Enhanced Tab Buttons */}
-          <div className="grid grid-cols-2 gap-3 p-2 rounded-xl backdrop-blur-md bg-gradient-to-b from-gray-100/30 via-gray-50/20 to-white/40 dark:from-gray-900/30 dark:via-gray-800/20 dark:to-black/40 border border-gray-200/40 dark:border-gray-700/40">
-            {/* Crawl Website Tab */}
-            <button
-              type="button"
-              onClick={() => setActiveTab("crawl")}
-              className={cn(
-                "relative flex items-center justify-center gap-3 px-6 py-4 rounded-lg transition-all duration-300",
-                "backdrop-blur-md border-2 font-medium text-sm",
-                activeTab === "crawl"
-                  ? "bg-gradient-to-b from-cyan-100/70 via-cyan-50/40 to-white/80 dark:from-cyan-900/40 dark:via-cyan-800/25 dark:to-black/50 border-cyan-400/60 text-cyan-700 dark:text-cyan-300 shadow-[0_0_20px_rgba(34,211,238,0.25)]"
-                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-cyan-300/50 hover:text-cyan-600 dark:hover:text-cyan-400 hover:shadow-[0_0_15px_rgba(34,211,238,0.15)]",
-              )}
-            >
-              {/* Top accent glow for active state */}
-              {activeTab === "crawl" && (
-                <div className="pointer-events-none absolute inset-x-0 top-0">
-                  <div className="mx-2 mt-0.5 h-[2px] rounded-full bg-cyan-500" />
-                  <div className="-mt-1 h-8 w-full bg-gradient-to-b from-cyan-500/30 to-transparent blur-md" />
-                </div>
-              )}
-              <Globe className={cn("w-5 h-5", activeTab === "crawl" ? "text-cyan-500" : "text-current")} />
-              <div className="flex flex-col items-start gap-0.5">
-                <span className="font-semibold">Crawl Website</span>
-                <span className="text-xs opacity-80">Scan web pages</span>
-              </div>
-            </button>
-
-            {/* Upload Document Tab */}
-            <button
-              type="button"
-              onClick={() => setActiveTab("upload")}
-              className={cn(
-                "relative flex items-center justify-center gap-3 px-6 py-4 rounded-lg transition-all duration-300",
-                "backdrop-blur-md border-2 font-medium text-sm",
-                activeTab === "upload"
-                  ? "bg-gradient-to-b from-purple-100/70 via-purple-50/40 to-white/80 dark:from-purple-900/40 dark:via-purple-800/25 dark:to-black/50 border-purple-400/60 text-purple-700 dark:text-purple-300 shadow-[0_0_20px_rgba(147,51,234,0.25)]"
-                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-purple-300/50 hover:text-purple-600 dark:hover:text-purple-400 hover:shadow-[0_0_15px_rgba(147,51,234,0.15)]",
-              )}
-            >
-              {/* Top accent glow for active state */}
-              {activeTab === "upload" && (
-                <div className="pointer-events-none absolute inset-x-0 top-0">
-                  <div className="mx-2 mt-0.5 h-[2px] rounded-full bg-purple-500" />
-                  <div className="-mt-1 h-8 w-full bg-gradient-to-b from-purple-500/30 to-transparent blur-md" />
-                </div>
-              )}
-              <Upload className={cn("w-5 h-5", activeTab === "upload" ? "text-purple-500" : "text-current")} />
-              <div className="flex flex-col items-start gap-0.5">
-                <span className="font-semibold">Upload Document</span>
-                <span className="text-xs opacity-80">Add local files</span>
-              </div>
-            </button>
+          <div className="flex justify-center">
+            <TabsList>
+              <TabsTrigger value="crawl" color="blue">
+                <Globe className="w-4 h-4 mr-2" />
+                Crawl Website
+              </TabsTrigger>
+              <TabsTrigger value="upload" color="purple">
+                <Upload className="w-4 h-4 mr-2" />
+                Upload Document
+              </TabsTrigger>
+            </TabsList>
           </div>
 
           {/* Crawl Tab */}
@@ -207,12 +165,14 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                   value={crawlUrl}
                   onChange={(e) => setCrawlUrl(e.target.value)}
                   disabled={isProcessing}
-                  className="pl-10 h-12 backdrop-blur-md bg-gradient-to-r from-white/60 to-white/50 dark:from-black/60 dark:to-black/50 border-gray-300/60 dark:border-gray-600/60 focus:border-cyan-400/70 focus:shadow-[0_0_20px_rgba(34,211,238,0.15)]"
+                  className={cn(
+                    "pl-10 h-12",
+                    glassCard.blur.md,
+                    glassCard.transparency.medium,
+                    "border-gray-300/60 dark:border-gray-600/60 focus:border-cyan-400/70",
+                  )}
                 />
               </div>
-              <p className="text-xs text-gray-500 dark:text-gray-400">
-                Enter the URL of a website you want to crawl for knowledge
-              </p>
             </div>
 
             <div className="space-y-6">
@@ -231,7 +191,13 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
             <Button
               onClick={handleCrawl}
               disabled={isProcessing || !crawlUrl}
-              className="w-full bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-600 hover:to-cyan-700 backdrop-blur-md border border-cyan-400/50 shadow-[0_0_20px_rgba(6,182,212,0.25)] hover:shadow-[0_0_30px_rgba(6,182,212,0.35)] transition-all duration-200"
+              className={[
+                "w-full bg-gradient-to-r from-cyan-500 to-cyan-600",
+                "hover:from-cyan-600 hover:to-cyan-700",
+                "backdrop-blur-md border border-cyan-400/50",
+                "shadow-[0_0_20px_rgba(6,182,212,0.25)] hover:shadow-[0_0_30px_rgba(6,182,212,0.35)]",
+                "transition-all duration-200",
+              ].join(" ")}
             >
               {crawlMutation.isPending ? (
                 <>
@@ -268,11 +234,11 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                 <div
                   className={cn(
                     "relative h-20 rounded-xl border-2 border-dashed transition-all duration-200",
-                    "backdrop-blur-md bg-gradient-to-b from-white/60 via-white/40 to-white/50 dark:from-black/60 dark:via-black/40 dark:to-black/50",
                     "flex flex-col items-center justify-center gap-2 text-center p-4",
-                    selectedFile
-                      ? "border-purple-400/70 bg-gradient-to-b from-purple-50/60 to-white/60 dark:from-purple-900/20 dark:to-black/50"
-                      : "border-gray-300/60 dark:border-gray-600/60 hover:border-purple-400/50 hover:bg-gradient-to-b hover:from-purple-50/40 hover:to-white/60 dark:hover:from-purple-900/10 dark:hover:to-black/50",
+                    glassCard.blur.md,
+                    selectedFile ? glassCard.tints.purple.light : glassCard.transparency.medium,
+                    selectedFile ? "border-purple-400/70" : "border-gray-300/60 dark:border-gray-600/60",
+                    !selectedFile && "hover:border-purple-400/50",
                     isProcessing && "opacity-50 cursor-not-allowed",
                   )}
                 >
@@ -312,7 +278,13 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
             <Button
               onClick={handleUpload}
               disabled={isProcessing || !selectedFile}
-              className="w-full bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 backdrop-blur-md border border-purple-400/50 shadow-[0_0_20px_rgba(147,51,234,0.25)] hover:shadow-[0_0_30px_rgba(147,51,234,0.35)] transition-all duration-200"
+              className={[
+                "w-full bg-gradient-to-r from-purple-500 to-purple-600",
+                "hover:from-purple-600 hover:to-purple-700",
+                "backdrop-blur-md border border-purple-400/50",
+                "shadow-[0_0_20px_rgba(147,51,234,0.25)] hover:shadow-[0_0_30px_rgba(147,51,234,0.35)]",
+                "transition-all duration-200",
+              ].join(" ")}
             >
               {uploadMutation.isPending ? (
                 <>
diff --git a/archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx b/archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx
deleted file mode 100644
index 6da79b18..00000000
--- a/archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * Document Browser Component
- * Shows document chunks and code examples for a knowledge item
- */
-
-import { ChevronDown, ChevronRight, Code, FileText, Search } from "lucide-react";
-import { useState } from "react";
-import { Input } from "../../ui/primitives";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../ui/primitives/dialog";
-import { cn } from "../../ui/primitives/styles";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/primitives/tabs";
-import { useCodeExamples, useKnowledgeItemChunks } from "../hooks";
-
-interface DocumentBrowserProps {
-  sourceId: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export const DocumentBrowser: React.FC<DocumentBrowserProps> = ({ sourceId, open, onOpenChange }) => {
-  const [activeTab, setActiveTab] = useState<"documents" | "code">("documents");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [expandedChunks, setExpandedChunks] = useState<Set<string>>(new Set());
-
-  const {
-    data: chunksData,
-    isLoading: chunksLoading,
-    isError: chunksError,
-    error: chunksErrorObj,
-  } = useKnowledgeItemChunks(sourceId);
-  const { data: codeData, isLoading: codeLoading, isError: codeError, error: codeErrorObj } = useCodeExamples(sourceId);
-
-  const chunks = chunksData?.chunks || [];
-  const codeExamples = codeData?.code_examples || [];
-
-  // Filter chunks based on search
-  const filteredChunks = chunks.filter(
-    (chunk) =>
-      chunk.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      chunk.metadata?.title?.toLowerCase().includes(searchQuery.toLowerCase()),
-  );
-
-  // Filter code examples based on search
-  const filteredCode = codeExamples.filter((example) => {
-    const codeContent = example.code || example.content || "";
-    return (
-      codeContent.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      example.summary?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      example.language?.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-  });
-
-  const toggleChunk = (chunkId: string) => {
-    setExpandedChunks((prev) => {
-      const next = new Set(prev);
-      if (next.has(chunkId)) {
-        next.delete(chunkId);
-      } else {
-        next.add(chunkId);
-      }
-      return next;
-    });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl h-[80vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>Document Browser</DialogTitle>
-          <div className="flex items-center gap-2 mt-4">
-            <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-              <Input
-                type="text"
-                placeholder="Search documents and code..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 bg-black/30 border-white/10 focus:border-cyan-500/50"
-              />
-            </div>
-          </div>
-        </DialogHeader>
-
-        <Tabs
-          value={activeTab}
-          onValueChange={(v) => setActiveTab(v as "documents" | "code")}
-          className="flex-1 flex flex-col"
-        >
-          <TabsList className="">
-            <TabsTrigger value="documents" className="data-[state=active]:bg-cyan-500/20">
-              <FileText className="w-4 h-4 mr-2" />
-              Documents ({filteredChunks.length})
-            </TabsTrigger>
-            <TabsTrigger value="code" className="data-[state=active]:bg-cyan-500/20">
-              <Code className="w-4 h-4 mr-2" />
-              Code Examples ({filteredCode.length})
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Documents Tab */}
-          <TabsContent value="documents" className="flex-1 overflow-hidden">
-            <div className="h-full overflow-y-auto">
-              {chunksLoading ? (
-                <div className="text-center py-8 text-gray-400">Loading documents...</div>
-              ) : chunksError ? (
-                <div className="text-center py-8 text-red-400">
-                  Failed to load documents for source {sourceId}.
-                  {chunksErrorObj?.message && ` ${chunksErrorObj.message}`}
-                </div>
-              ) : filteredChunks.length === 0 ? (
-                <div className="text-center py-8 text-gray-400">
-                  {searchQuery ? "No documents match your search" : "No documents available"}
-                </div>
-              ) : (
-                <div className="space-y-3 p-4">
-                  {filteredChunks.map((chunk) => {
-                    const isExpanded = expandedChunks.has(chunk.id);
-                    const preview = chunk.content.substring(0, 200);
-                    const needsExpansion = chunk.content.length > 200;
-
-                    return (
-                      <div
-                        key={chunk.id}
-                        className="bg-black/30 rounded-lg border border-white/10 p-4 hover:border-cyan-500/30 transition-colors"
-                      >
-                        {chunk.metadata?.title && (
-                          <h4 className="font-medium text-white/90 mb-2 flex items-center gap-2">
-                            {needsExpansion && (
-                              <button
-                                type="button"
-                                onClick={() => toggleChunk(chunk.id)}
-                                className="text-gray-400 hover:text-white transition-colors"
-                              >
-                                {isExpanded ? (
-                                  <ChevronDown className="w-4 h-4" />
-                                ) : (
-                                  <ChevronRight className="w-4 h-4" />
-                                )}
-                              </button>
-                            )}
-                            {chunk.metadata.title}
-                          </h4>
-                        )}
-
-                        <div className="text-sm text-gray-300 whitespace-pre-wrap">
-                          {isExpanded || !needsExpansion ? (
-                            chunk.content
-                          ) : (
-                            <>
-                              {preview}...
-                              <button
-                                type="button"
-                                onClick={() => toggleChunk(chunk.id)}
-                                className="ml-2 text-cyan-400 hover:text-cyan-300"
-                              >
-                                Show more
-                              </button>
-                            </>
-                          )}
-                        </div>
-
-                        {chunk.metadata?.tags && chunk.metadata.tags.length > 0 && (
-                          <div className="flex items-center gap-2 mt-3 flex-wrap">
-                            {chunk.metadata.tags.map((tag: string) => (
-                              <span key={tag} className="px-2 py-1 text-xs border border-white/20 rounded bg-black/20">
-                                {tag}
-                              </span>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          </TabsContent>
-
-          {/* Code Examples Tab */}
-          <TabsContent value="code" className="flex-1 overflow-hidden">
-            <div className="h-full overflow-y-auto">
-              {codeLoading ? (
-                <div className="text-center py-8 text-gray-400">Loading code examples...</div>
-              ) : codeError ? (
-                <div className="text-center py-8 text-red-400">
-                  Failed to load code examples for source {sourceId}.
-                  {codeErrorObj?.message && ` ${codeErrorObj.message}`}
-                </div>
-              ) : filteredCode.length === 0 ? (
-                <div className="text-center py-8 text-gray-400">
-                  {searchQuery ? "No code examples match your search" : "No code examples available"}
-                </div>
-              ) : (
-                <div className="space-y-3 p-4">
-                  {filteredCode.map((example) => (
-                    <div
-                      key={example.id}
-                      className="bg-black/30 rounded-lg border border-white/10 overflow-hidden hover:border-cyan-500/30 transition-colors"
-                    >
-                      <div className="flex items-center justify-between p-3 border-b border-white/10 bg-black/20">
-                        <div className="flex items-center gap-2">
-                          <Code className="w-4 h-4 text-cyan-400" />
-                          {example.language && (
-                            <span className="px-2 py-1 text-xs bg-cyan-500/20 text-cyan-400 rounded">
-                              {example.language}
-                            </span>
-                          )}
-                        </div>
-                        {example.file_path && <span className="text-xs text-gray-400">{example.file_path}</span>}
-                      </div>
-
-                      {example.summary && (
-                        <div className="p-3 text-sm text-gray-300 border-b border-white/10">{example.summary}</div>
-                      )}
-
-                      <pre className="p-4 text-sm overflow-x-auto">
-                        <code
-                          className={cn(
-                            "text-gray-300",
-                            example.language === "javascript" && "language-javascript",
-                            example.language === "typescript" && "language-typescript",
-                            example.language === "python" && "language-python",
-                            example.language === "java" && "language-java",
-                          )}
-                        >
-                          {example.code || example.content || ""}
-                        </code>
-                      </pre>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
index 05c882de..0769e708 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
@@ -8,10 +8,11 @@ import { format } from "date-fns";
 import { motion } from "framer-motion";
 import { Clock, Code, ExternalLink, File, FileText, Globe } from "lucide-react";
 import { useState } from "react";
+import { isOptimistic } from "@/features/shared/utils/optimistic";
 import { KnowledgeCardProgress } from "../../progress/components/KnowledgeCardProgress";
 import type { ActiveOperation } from "../../progress/types";
-import { isOptimistic } from "@/features/shared/utils/optimistic";
 import { StatPill } from "../../ui/primitives";
+import { DataCard, DataCardContent, DataCardFooter, DataCardHeader } from "../../ui/primitives/data-card";
 import { OptimisticIndicator } from "../../ui/primitives/OptimisticIndicator";
 import { cn } from "../../ui/primitives/styles";
 import { SimpleTooltip } from "../../ui/primitives/tooltip";
@@ -79,37 +80,16 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
     }
   };
 
-  const getCardGradient = () => {
-    if (activeOperation) {
-      return "from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40";
-    }
-    if (hasError) {
-      return "from-red-100/50 via-red-50/25 to-white/60 dark:from-red-900/20 dark:via-red-900/10 dark:to-black/30";
-    }
-    if (isProcessing) {
-      return "from-yellow-100/50 via-yellow-50/25 to-white/60 dark:from-yellow-900/20 dark:via-yellow-900/10 dark:to-black/30";
-    }
-    if (isTechnical) {
-      return isUrl
-        ? "from-cyan-100/50 via-cyan-50/25 to-white/60 dark:from-cyan-900/20 dark:via-cyan-900/10 dark:to-black/30"
-        : "from-purple-100/50 via-purple-50/25 to-white/60 dark:from-purple-900/20 dark:via-purple-900/10 dark:to-black/30";
-    }
-    return isUrl
-      ? "from-blue-100/50 via-blue-50/25 to-white/60 dark:from-blue-900/20 dark:via-blue-900/10 dark:to-black/30"
-      : "from-pink-100/50 via-pink-50/25 to-white/60 dark:from-pink-900/20 dark:via-pink-900/10 dark:to-black/30";
+  // Determine edge color for DataCard primitive
+  const getEdgeColor = (): "cyan" | "purple" | "blue" | "pink" | "red" | "orange" => {
+    if (activeOperation) return "cyan";
+    if (hasError) return "red";
+    if (isProcessing) return "orange";
+    if (isTechnical) return isUrl ? "cyan" : "purple";
+    return isUrl ? "blue" : "pink";
   };
 
-  const getBorderColor = () => {
-    if (activeOperation) return "border-cyan-600/40 dark:border-cyan-500/50";
-    if (hasError) return "border-red-600/30 dark:border-red-500/30";
-    if (isProcessing) return "border-yellow-600/30 dark:border-yellow-500/30";
-    if (isTechnical) {
-      return isUrl ? "border-cyan-600/30 dark:border-cyan-500/30" : "border-purple-600/30 dark:border-purple-500/30";
-    }
-    return isUrl ? "border-blue-600/30 dark:border-blue-500/30" : "border-pink-600/30 dark:border-pink-500/30";
-  };
-
-  // Accent color used for the top glow bar
+  // Accent color name for title component
   const getAccentColorName = () => {
     if (activeOperation) return "cyan" as const;
     if (hasError) return "red" as const;
@@ -118,26 +98,6 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
     return isUrl ? ("blue" as const) : ("pink" as const);
   };
 
-  const accent = (() => {
-    const name = getAccentColorName();
-    switch (name) {
-      case "cyan":
-        return { bar: "bg-cyan-500", smear: "from-cyan-500/25" };
-      case "purple":
-        return { bar: "bg-purple-500", smear: "from-purple-500/25" };
-      case "blue":
-        return { bar: "bg-blue-500", smear: "from-blue-500/25" };
-      case "pink":
-        return { bar: "bg-pink-500", smear: "from-pink-500/25" };
-      case "red":
-        return { bar: "bg-red-500", smear: "from-red-500/25" };
-      case "yellow":
-        return { bar: "bg-yellow-400", smear: "from-yellow-400/25" };
-      default:
-        return { bar: "bg-cyan-500", smear: "from-cyan-500/25" };
-    }
-  })();
-
   const getSourceIcon = () => {
     if (isUrl) return <Globe className="w-5 h-5" />;
     return <File className="w-5 h-5" />;
@@ -146,7 +106,7 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
   return (
     // biome-ignore lint/a11y/useSemanticElements: Card contains nested interactive elements (buttons, links) - using div to avoid invalid HTML nesting
     <motion.div
-      className="relative group cursor-pointer"
+      className={cn("relative group cursor-pointer", optimistic && "opacity-80")}
       role="button"
       tabIndex={0}
       onMouseEnter={() => setIsHovered(true)}
@@ -161,33 +121,17 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
       whileHover={{ scale: 1.02 }}
       transition={{ duration: 0.2 }}
     >
-      <div
+      <DataCard
+        edgePosition="top"
+        edgeColor={getEdgeColor()}
+        blur="md"
         className={cn(
-          "relative overflow-hidden transition-all duration-300 rounded-xl",
-          "bg-gradient-to-b backdrop-blur-md border",
-          getCardGradient(),
-          getBorderColor(),
+          "transition-shadow",
           isHovered && "shadow-[0_0_30px_rgba(6,182,212,0.2)]",
-          "min-h-[240px] flex flex-col",
-          optimistic && "opacity-80 ring-1 ring-cyan-400/30",
+          optimistic && "ring-1 ring-cyan-400/30",
         )}
       >
-        {/* Top accent glow tied to type (does not change size) */}
-        <div className="pointer-events-none absolute inset-x-0 top-0">
-          {/* Hairline highlight */}
-          <div className={cn("mx-1 mt-0.5 h-[2px] rounded-full", accent.bar)} />
-          {/* Soft glow smear fading downward */}
-          <div className={cn("-mt-1 h-8 w-full bg-gradient-to-b to-transparent blur-md", accent.smear)} />
-        </div>
-        {/* Glow effect on hover */}
-        {isHovered && (
-          <div className="absolute inset-0 opacity-20 pointer-events-none">
-            <div className="absolute -inset-[100px] bg-[radial-gradient(circle,rgba(6,182,212,0.4)_0%,transparent_70%)] blur-3xl" />
-          </div>
-        )}
-
-        {/* Header with Type Badge */}
-        <div className="relative p-4 pb-2">
+        <DataCardHeader>
           <div className="flex items-start justify-between gap-2 mb-2">
             {/* Type and Source Badge */}
             <div className="flex items-center gap-2">
@@ -248,7 +192,10 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => e.stopPropagation()}
-                className="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors mt-2"
+                className={[
+                  "inline-flex items-center gap-1 text-xs mt-2",
+                  "text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors",
+                ].join(" ")}
               >
                 <ExternalLink className="w-3 h-3" />
                 <span className="truncate">{extractDomain(item.url)}</span>
@@ -273,16 +220,14 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
           >
             <KnowledgeCardTags sourceId={item.source_id} tags={item.metadata?.tags || []} />
           </div>
-        </div>
+        </DataCardHeader>
 
-        {/* Spacer to push footer to bottom */}
-        <div className="flex-1" />
+        <DataCardContent>
+          {/* Progress tracking for active operations - using simplified component */}
+          {activeOperation && <KnowledgeCardProgress operation={activeOperation} />}
+        </DataCardContent>
 
-        {/* Progress tracking for active operations - using simplified component */}
-        {activeOperation && <KnowledgeCardProgress operation={activeOperation} />}
-
-        {/* Fixed Footer with Stats */}
-        <div className="px-4 py-3 bg-gray-100/50 dark:bg-black/30 border-t border-gray-200/50 dark:border-white/10">
+        <DataCardFooter>
           <div className="flex items-center justify-between text-xs">
             {/* Left: date */}
             <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
@@ -342,8 +287,8 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
               </SimpleTooltip>
             </div>
           </div>
-        </div>
-      </div>
+        </DataCardFooter>
+      </DataCard>
     </motion.div>
   );
 };
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
index de0a1ea1..e6061d62 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
@@ -215,7 +215,10 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
                 <Badge
                   color="gray"
                   variant="outline"
-                  className="flex items-center gap-1 text-[10px] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group pr-0.5 px-1.5 py-0.5 h-5"
+                  className={[
+                    "flex items-center gap-1 text-[10px] cursor-pointer",
+                    "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group pr-0.5 px-1.5 py-0.5 h-5",
+                  ].join(" ")}
                   onClick={() => {
                     setIsEditing(true);
                     // Load this specific tag for editing
@@ -255,7 +258,10 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
         <button
           type="button"
           onClick={() => setShowAllTags(!showAllTags)}
-          className="flex items-center gap-0.5 text-[10px] text-gray-500 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors px-1 py-0.5 rounded"
+          className={[
+            "flex items-center gap-0.5 text-[10px] text-gray-500 dark:text-gray-400",
+            "hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors px-1 py-0.5 rounded",
+          ].join(" ")}
         >
           {showAllTags ? (
             <>
@@ -322,7 +328,12 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
                 }
               }, 0);
             }}
-            className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 hover:border-cyan-400 dark:hover:border-cyan-600 transition-colors h-5"
+            className={[
+              "flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded border h-5",
+              "border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400",
+              "hover:text-cyan-600 dark:hover:text-cyan-400 hover:border-cyan-400 dark:hover:border-cyan-600",
+              "transition-colors",
+            ].join(" ")}
             aria-label="Add tags"
           >
             <Plus className="w-2.5 h-2.5" />
@@ -338,7 +349,10 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
             type="button"
             onClick={handleSaveTags}
             disabled={updateMutation.isPending}
-            className="px-2 py-1 text-xs bg-cyan-600 text-white rounded hover:bg-cyan-700 disabled:opacity-50 transition-colors"
+            className={[
+              "px-2 py-1 text-xs bg-cyan-600 dark:bg-cyan-600 text-white",
+              "hover:bg-cyan-700 dark:hover:bg-cyan-700 disabled:opacity-50 transition-colors",
+            ].join(" ")}
           >
             Save
           </button>
@@ -346,7 +360,10 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
             type="button"
             onClick={handleCancelEdit}
             disabled={updateMutation.isPending}
-            className="px-2 py-1 text-xs bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50 transition-colors"
+            className={[
+              "px-2 py-1 text-xs bg-gray-500 dark:bg-gray-500 text-white",
+              "hover:bg-gray-600 dark:hover:bg-gray-600 disabled:opacity-50 transition-colors",
+            ].join(" ")}
           >
             Cancel
           </button>
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx
index ac2f8afe..1c0a4ecd 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx
@@ -72,8 +72,8 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({ sourceId,
               "border-cyan-400 dark:border-cyan-600",
               "focus:ring-1 focus:ring-cyan-400",
               isTechnical
-                ? "bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
-                : "bg-pink-100 text-pink-700 dark:bg-pink-500/10 dark:text-pink-400",
+                ? "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+                : "bg-purple-500/10 text-purple-600 dark:text-purple-400",
             )}
           >
             <SelectValue>
@@ -111,8 +111,8 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({ sourceId,
           "flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium cursor-pointer",
           "hover:ring-1 hover:ring-cyan-400/50 transition-all",
           isTechnical
-            ? "bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
-            : "bg-pink-100 text-pink-700 dark:bg-pink-500/10 dark:text-pink-400",
+            ? "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+            : "bg-purple-500/10 text-purple-600 dark:text-purple-400",
           updateMutation.isPending && "opacity-50 cursor-not-allowed",
         )}
         onClick={handleClick}
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx
index 8b392699..4cb6dd55 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx
@@ -32,8 +32,8 @@ export const KnowledgeHeader: React.FC<KnowledgeHeaderProps> = ({
 }) => {
   return (
     <div className="flex flex-col gap-4 px-6 py-4 border-b border-white/10">
-      <div className="flex items-center gap-4">
-        {/* Left: Title */}
+      {/* Row 1: Title and Add Button (always on same line) */}
+      <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-3 flex-shrink-0">
           <BookOpen className="h-7 w-7 text-purple-500 filter drop-shadow-[0_0_8px_rgba(168,85,247,0.8)]" />
           <h1 className="text-2xl font-bold text-white">Knowledge Base</h1>
@@ -42,85 +42,89 @@ export const KnowledgeHeader: React.FC<KnowledgeHeaderProps> = ({
           </span>
         </div>
 
-        {/* Right: Search, Filters, View toggle, CTA */}
-        <div className="ml-auto flex items-center gap-3">
-          {/* Search on title row */}
-          <div className="relative w-[320px]">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <Input
-              type="text"
-              placeholder="Search knowledge base..."
-              value={searchQuery}
-              onChange={(e) => onSearchChange(e.target.value)}
-              className="pl-10 bg-black/30 border-white/10 focus:border-cyan-500/50"
-            />
-          </div>
+        {/* Add knowledge button - stays on top line */}
+        <Button variant="knowledge" onClick={onAddKnowledge} className="shadow-lg shadow-purple-500/30 flex-shrink-0">
+          <Plus className="w-4 h-4 mr-2" />
+          Knowledge
+        </Button>
+      </div>
 
-          {/* Segmented type filters */}
-          <ToggleGroup
-            type="single"
-            size="sm"
-            value={typeFilter}
-            onValueChange={(v) => v && onTypeFilterChange(v as "all" | "technical" | "business")}
-            aria-label="Filter knowledge type"
+      {/* Row 2: Search and Filters (wraps on smaller screens) */}
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Search */}
+        <div className="relative w-full sm:w-[320px]">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <Input
+            type="text"
+            placeholder="Search knowledge base..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-10 bg-black/30 dark:bg-black/30 border-white/10 dark:border-white/10 focus:border-cyan-500/50"
+          />
+        </div>
+
+        {/* Segmented type filters */}
+        <ToggleGroup
+          type="single"
+          size="sm"
+          value={typeFilter}
+          onValueChange={(v) => v && onTypeFilterChange(v as "all" | "technical" | "business")}
+          aria-label="Filter knowledge type"
+        >
+          <ToggleGroupItem value="all" aria-label="All" title="All" className="flex items-center justify-center">
+            <Asterisk className="w-4 h-4" aria-hidden="true" />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="technical"
+            aria-label="Technical"
+            title="Technical"
+            className="flex items-center justify-center"
           >
-            <ToggleGroupItem value="all" aria-label="All" title="All" className="flex items-center justify-center">
-              <Asterisk className="w-4 h-4" aria-hidden="true" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="technical"
-              aria-label="Technical"
-              title="Technical"
-              className="flex items-center justify-center"
-            >
-              <Terminal className="w-4 h-4" aria-hidden="true" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="business"
-              aria-label="Business"
-              title="Business"
-              className="flex items-center justify-center"
-            >
-              <Briefcase className="w-4 h-4" aria-hidden="true" />
-            </ToggleGroupItem>
-          </ToggleGroup>
+            <Terminal className="w-4 h-4" aria-hidden="true" />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="business"
+            aria-label="Business"
+            title="Business"
+            className="flex items-center justify-center"
+          >
+            <Briefcase className="w-4 h-4" aria-hidden="true" />
+          </ToggleGroupItem>
+        </ToggleGroup>
 
-          {/* View Mode Toggle */}
-          <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => onViewModeChange("grid")}
-              aria-label="Grid view"
-              aria-pressed={viewMode === "grid"}
-              title="Grid view"
-              className={cn(
-                "px-3",
-                viewMode === "grid" ? "bg-cyan-500/20 text-cyan-400" : "text-gray-400 hover:text-white",
-              )}
-            >
-              <Grid className="w-4 h-4" aria-hidden="true" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => onViewModeChange("table")}
-              aria-label="Table view"
-              aria-pressed={viewMode === "table"}
-              title="Table view"
-              className={cn(
-                "px-3",
-                viewMode === "table" ? "bg-cyan-500/20 text-cyan-400" : "text-gray-400 hover:text-white",
-              )}
-            >
-              <List className="w-4 h-4" aria-hidden="true" />
-            </Button>
-          </div>
-
-          {/* Add knowledge */}
-          <Button variant="knowledge" onClick={onAddKnowledge} className="shadow-lg shadow-purple-500/30">
-            <Plus className="w-4 h-4 mr-2" />
-            Add Knowledge
+        {/* View Mode Toggle */}
+        <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onViewModeChange("grid")}
+            aria-label="Grid view"
+            aria-pressed={viewMode === "grid"}
+            title="Grid view"
+            className={cn(
+              "px-3",
+              viewMode === "grid"
+                ? "bg-cyan-500/20 dark:bg-cyan-500/20 text-cyan-400"
+                : "text-gray-400 hover:text-white",
+            )}
+          >
+            <Grid className="w-4 h-4" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onViewModeChange("table")}
+            aria-label="Table view"
+            aria-pressed={viewMode === "table"}
+            title="Table view"
+            className={cn(
+              "px-3",
+              viewMode === "table"
+                ? "bg-cyan-500/20 dark:bg-cyan-500/20 text-cyan-400"
+                : "text-gray-400 hover:text-white",
+            )}
+          >
+            <List className="w-4 h-4" aria-hidden="true" />
           </Button>
         </div>
       </div>
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx
index 39d7db41..0358f67c 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx
@@ -107,7 +107,7 @@ export const KnowledgeList: React.FC<KnowledgeListProps> = ({
         className="flex items-center justify-center py-12"
       >
         <div className="text-center max-w-md" role="alert">
-          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-500/10 mb-4">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-500/10 dark:bg-red-500/10 mb-4">
             <AlertCircle className="w-6 h-6 text-red-400" />
           </div>
           <h3 className="text-lg font-semibold mb-2">Failed to Load Knowledge Base</h3>
@@ -130,7 +130,7 @@ export const KnowledgeList: React.FC<KnowledgeListProps> = ({
         className="flex items-center justify-center py-12"
       >
         <div className="text-center max-w-md">
-          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-cyan-500/10 mb-4">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-cyan-500/10 dark:bg-cyan-500/10 mb-4">
             <AlertCircle className="w-6 h-6 text-cyan-400" />
           </div>
           <h3 className="text-lg font-semibold mb-2">No Knowledge Items</h3>
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx
index 63844333..614d2276 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx
@@ -60,150 +60,171 @@ export const KnowledgeTable: React.FC<KnowledgeTableProps> = ({ items, onViewDoc
 
   const getTypeColor = (type?: string) => {
     if (type === "technical") {
-      return "text-cyan-400 bg-cyan-500/10 border-cyan-500/20";
+      return "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400";
+    }
+    return "bg-purple-500/10 text-purple-600 dark:text-purple-400";
+  };
+
+  const getHostname = (url: string): string => {
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return url;
+    }
+  };
+
+  const isSafeProtocol = (url: string): boolean => {
+    try {
+      const protocol = new URL(url).protocol;
+      return protocol === "http:" || protocol === "https:";
+    } catch {
+      return false;
+    }
+  };
+
+  const formatCreatedDate = (dateString: string): string => {
+    try {
+      const date = new Date(dateString);
+      if (Number.isNaN(date.getTime())) {
+        return "N/A";
+      }
+      return formatDistanceToNowStrict(date, { addSuffix: true });
+    } catch {
+      return "N/A";
     }
-    return "text-blue-400 bg-blue-500/10 border-blue-500/20";
   };
 
   return (
-    <div className="overflow-x-auto">
-      <table className="w-full">
-        <thead>
-          <tr className="border-b border-white/10">
-            <th className="text-left py-3 px-4 text-sm font-medium text-gray-400">Title</th>
-            <th className="text-left py-3 px-4 text-sm font-medium text-gray-400">Type</th>
-            <th className="text-left py-3 px-4 text-sm font-medium text-gray-400">Source</th>
-            <th className="text-left py-3 px-4 text-sm font-medium text-gray-400">Docs</th>
-            <th className="text-left py-3 px-4 text-sm font-medium text-gray-400">Examples</th>
-            <th className="text-left py-3 px-4 text-sm font-medium text-gray-400">Created</th>
-            <th className="text-right py-3 px-4 text-sm font-medium text-gray-400">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {items.map((item) => {
-            const isDeleting = deletingIds.has(item.source_id);
+    <div className="w-full">
+      <div className="overflow-x-auto scrollbar-hide">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Source</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Docs</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Examples</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Created</th>
+              <th className="px-4 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => {
+              const isDeleting = deletingIds.has(item.source_id);
 
-            return (
-              <tr
-                key={item.source_id}
-                className={cn(
-                  "border-b border-white/5 transition-colors",
-                  "hover:bg-white/5",
-                  isDeleting && "opacity-50 pointer-events-none",
-                )}
-              >
-                {/* Title */}
-                <td className="py-3 px-4">
-                  <div className="flex items-center gap-2">
-                    <span className="text-white/90 font-medium truncate max-w-xs">{item.title}</span>
-                  </div>
-                </td>
+              return (
+                <tr
+                  key={item.source_id}
+                  className={cn(
+                    "group transition-all duration-200",
+                    index % 2 === 0 ? "bg-white/50 dark:bg-black/50" : "bg-gray-50/80 dark:bg-gray-900/30",
+                    "border-b border-gray-200 dark:border-gray-800",
+                    isDeleting && "opacity-50 pointer-events-none",
+                  )}
+                >
+                  {/* Title */}
+                  <td className="py-3 px-4">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-sm text-gray-900 dark:text-white truncate max-w-xs inline-block">
+                        {item.title}
+                      </span>
+                    </div>
+                  </td>
 
-                {/* Type */}
-                <td className="py-3 px-4">
-                  <span
-                    className={cn(
-                      "px-2 py-1 text-xs rounded inline-flex items-center",
-                      getTypeColor(item.metadata?.knowledge_type),
-                    )}
-                  >
-                    {getTypeIcon(item.metadata?.knowledge_type)}
-                    <span className="ml-1">{item.metadata?.knowledge_type || "general"}</span>
-                  </span>
-                </td>
-
-                {/* Source URL */}
-                <td className="py-3 px-4">
-                  <a
-                    href={item.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
-                  >
-                    <ExternalLink className="w-3.5 h-3.5" />
-                    <span className="truncate max-w-xs">
-                      {(() => {
-                        try {
-                          return new URL(item.url).hostname;
-                        } catch {
-                          return item.url;
-                        }
-                      })()}
-                    </span>
-                  </a>
-                </td>
-
-                {/* Document Count */}
-                <td className="py-3 px-4">
-                  <div className="flex items-center gap-1 text-sm text-gray-400">
-                    <FileText className="w-3.5 h-3.5" />
-                    <span className="font-medium text-white/80">
-                      {item.document_count || item.metadata?.document_count || 0}
-                    </span>
-                  </div>
-                </td>
-
-                {/* Code Examples Count */}
-                <td className="py-3 px-4">
-                  <div className="flex items-center gap-1 text-sm text-gray-400">
-                    <Code className="w-3.5 h-3.5 text-green-400" />
-                    <span className="font-medium text-white/80">
-                      {item.code_examples_count || item.metadata?.code_examples_count || 0}
-                    </span>
-                  </div>
-                </td>
-
-                {/* Created Date */}
-                <td className="py-3 px-4">
-                  <span className="text-sm text-gray-400">
-                    {formatDistanceToNowStrict(new Date(item.created_at), { addSuffix: true })}
-                  </span>
-                </td>
-
-                {/* Actions */}
-                <td className="py-3 px-4">
-                  <div className="flex items-center justify-end gap-2">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => onViewDocument(item.source_id)}
-                      className="text-gray-400 hover:text-white hover:bg-white/10"
+                  {/* Type */}
+                  <td className="py-3 px-4">
+                    <span
+                      className={cn(
+                        "px-2 py-1 text-xs rounded inline-flex items-center",
+                        getTypeColor(item.metadata?.knowledge_type),
+                      )}
                     >
-                      <Eye className="w-4 h-4" />
-                    </Button>
+                      {getTypeIcon(item.metadata?.knowledge_type)}
+                      <span className="ml-1">{item.metadata?.knowledge_type || "general"}</span>
+                    </span>
+                  </td>
 
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-8 w-8 p-0 text-gray-400 hover:text-white hover:bg-white/10"
-                        >
-                          <MoreHorizontal className="w-4 h-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => onViewDocument(item.source_id)}>
-                          <Eye className="w-4 h-4 mr-2" />
-                          View Documents
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => handleDelete(item)}
-                          className="text-red-400 focus:text-red-400"
-                        >
-                          <Trash2 className="w-4 h-4 mr-2" />
-                          Delete
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                  {/* Source URL */}
+                  <td className="py-3 px-4 text-sm text-gray-700 dark:text-gray-300 max-w-xs truncate">
+                    {isSafeProtocol(item.url) ? (
+                      <a
+                        href={item.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-1 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors"
+                      >
+                        <ExternalLink className="w-3.5 h-3.5" />
+                        <span className="truncate inline-block">{getHostname(item.url)}</span>
+                      </a>
+                    ) : (
+                      <span className="inline-flex items-center gap-1">
+                        <ExternalLink className="w-3.5 h-3.5" />
+                        <span className="truncate inline-block">{getHostname(item.url)}</span>
+                      </span>
+                    )}
+                  </td>
+
+                  {/* Document Count */}
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {item.document_count || item.metadata?.document_count || 0}
+                  </td>
+
+                  {/* Code Examples Count */}
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {item.code_examples_count || item.metadata?.code_examples_count || 0}
+                  </td>
+
+                  {/* Created Date */}
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {formatCreatedDate(item.created_at)}
+                  </td>
+
+                  {/* Actions */}
+                  <td className="py-3 px-4">
+                    <div className="flex items-center justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onViewDocument(item.source_id)}
+                        className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+                      >
+                        <Eye className="w-4 h-4" />
+                      </Button>
+
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+                          >
+                            <MoreHorizontal className="w-4 h-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => onViewDocument(item.source_id)}>
+                            <Eye className="w-4 h-4 mr-2" />
+                            View Documents
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            onClick={() => handleDelete(item)}
+                            className="text-red-600 dark:text-red-400 focus:text-red-600 dark:focus:text-red-400"
+                          >
+                            <Trash2 className="w-4 h-4 mr-2" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx
index 2d1f6e4e..faa34dda 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx
@@ -4,8 +4,8 @@
  */
 
 import { motion } from "framer-motion";
-import { Briefcase, Check, Terminal } from "lucide-react";
-import { cn } from "../../ui/primitives/styles";
+import { Briefcase, Terminal } from "lucide-react";
+import { cn, glassCard } from "../../ui/primitives/styles";
 
 interface KnowledgeTypeSelectorProps {
   value: "technical" | "business";
@@ -19,54 +19,24 @@ const TYPES = [
     label: "Technical",
     description: "Code, APIs, dev docs",
     icon: Terminal,
-    gradient: {
-      selected:
-        "from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40",
-      unselected:
-        "from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
-    },
-    border: {
-      selected: "border-cyan-500/60",
-      unselected: "border-gray-300/50 dark:border-gray-700/50",
-      hover: "hover:border-cyan-400/50",
-    },
+    edgeColor: "cyan" as const,
     colors: {
-      selected: "text-cyan-700 dark:text-cyan-400",
-      unselected: "text-gray-700 dark:text-gray-300",
-      description: {
-        selected: "text-cyan-600 dark:text-cyan-400",
-        unselected: "text-gray-500 dark:text-gray-400",
-      },
+      icon: "text-cyan-700 dark:text-cyan-400",
+      label: "text-cyan-700 dark:text-cyan-400",
+      description: "text-cyan-600 dark:text-cyan-400",
     },
-    accent: "bg-cyan-500",
-    smear: "from-cyan-500/25",
   },
   {
     value: "business" as const,
     label: "Business",
     description: "Guides, policies, general",
     icon: Briefcase,
-    gradient: {
-      selected:
-        "from-pink-100/60 via-pink-50/30 to-white/70 dark:from-pink-900/30 dark:via-pink-900/15 dark:to-black/40",
-      unselected:
-        "from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
-    },
-    border: {
-      selected: "border-pink-500/60",
-      unselected: "border-gray-300/50 dark:border-gray-700/50",
-      hover: "hover:border-pink-400/50",
-    },
+    edgeColor: "purple" as const,
     colors: {
-      selected: "text-pink-700 dark:text-pink-400",
-      unselected: "text-gray-700 dark:text-gray-300",
-      description: {
-        selected: "text-pink-600 dark:text-pink-400",
-        unselected: "text-gray-500 dark:text-gray-400",
-      },
+      icon: "text-purple-700 dark:text-purple-400",
+      label: "text-purple-700 dark:text-purple-400",
+      description: "text-purple-600 dark:text-purple-400",
     },
-    accent: "bg-pink-500",
-    smear: "from-pink-500/25",
   },
 ];
 
@@ -94,47 +64,50 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
                 onClick={() => !disabled && onValueChange(type.value)}
                 disabled={disabled}
                 className={cn(
-                  "relative w-full h-24 rounded-xl transition-all duration-200 border-2",
+                  "relative w-full h-24 rounded-xl transition-all duration-200",
                   "flex flex-col items-center justify-center gap-2 p-4",
-                  "backdrop-blur-md",
+                  glassCard.base,
                   isSelected
-                    ? `${type.border.selected} bg-gradient-to-b ${type.gradient.selected}`
-                    : `${type.border.unselected} bg-gradient-to-b ${type.gradient.unselected}`,
-                  !disabled && !isSelected && type.border.hover,
-                  !disabled &&
-                    !isSelected &&
-                    "hover:shadow-[0_0_15px_rgba(0,0,0,0.05)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.05)]",
-                  isSelected && "shadow-[0_0_20px_rgba(6,182,212,0.15)]",
+                    ? glassCard.edgeColors[type.edgeColor].border
+                    : "border border-gray-300/50 dark:border-gray-700/50",
+                  isSelected ? glassCard.tints[type.edgeColor].light : glassCard.transparency.light,
+                  !isSelected && "hover:border-gray-400/60 dark:hover:border-gray-600/60",
                   disabled && "opacity-50 cursor-not-allowed",
                 )}
                 aria-label={`Select ${type.label}: ${type.description}`}
               >
-                {/* Top accent glow for selected state */}
+                {/* Top edge-lit effect for selected state */}
                 {isSelected && (
-                  <div className="pointer-events-none absolute inset-x-0 top-0">
-                    <div className={cn("mx-1 mt-0.5 h-[2px] rounded-full", type.accent)} />
-                    <div className={cn("-mt-1 h-6 w-full bg-gradient-to-b to-transparent blur-md", type.smear)} />
-                  </div>
-                )}
-
-                {/* Selection indicator */}
-                {isSelected && (
-                  <div
-                    className={cn(
-                      "absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center",
-                      type.accent,
-                    )}
-                  >
-                    <Check className="w-3 h-3 text-white" />
-                  </div>
+                  <>
+                    <div
+                      className={cn(
+                        "absolute inset-x-0 top-0 h-[2px] pointer-events-none z-10",
+                        glassCard.edgeLit.position.top,
+                        glassCard.edgeLit.color[type.edgeColor].line,
+                        glassCard.edgeLit.color[type.edgeColor].glow,
+                      )}
+                    />
+                    <div
+                      className={cn(
+                        "absolute inset-x-0 top-0 h-16 bg-gradient-to-b to-transparent blur-lg pointer-events-none z-10",
+                        glassCard.edgeLit.color[type.edgeColor].gradient.vertical,
+                      )}
+                    />
+                  </>
                 )}
 
                 {/* Icon */}
-                <Icon className={cn("w-6 h-6", isSelected ? type.colors.selected : type.colors.unselected)} />
+                <Icon
+                  className={cn("w-6 h-6", isSelected ? type.colors.icon : "text-gray-700 dark:text-gray-300")}
+                  aria-hidden="true"
+                />
 
                 {/* Label */}
                 <div
-                  className={cn("text-sm font-semibold", isSelected ? type.colors.selected : type.colors.unselected)}
+                  className={cn(
+                    "text-sm font-semibold",
+                    isSelected ? type.colors.label : "text-gray-700 dark:text-gray-300",
+                  )}
                 >
                   {type.label}
                 </div>
@@ -143,7 +116,7 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
                 <div
                   className={cn(
                     "text-xs text-center leading-tight",
-                    isSelected ? type.colors.description.selected : type.colors.description.unselected,
+                    isSelected ? type.colors.description : "text-gray-500 dark:text-gray-400",
                   )}
                 >
                   {type.description}
@@ -153,11 +126,6 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
           );
         })}
       </div>
-
-      {/* Help text */}
-      <div className="text-xs text-gray-500 dark:text-gray-400 text-center">
-        Choose the type that best describes your content
-      </div>
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx b/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
index 42832adb..0bb9afa4 100644
--- a/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
+++ b/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
@@ -4,9 +4,9 @@
  */
 
 import { motion } from "framer-motion";
-import { Check, Info } from "lucide-react";
-import { cn } from "../../ui/primitives/styles";
-import { SimpleTooltip } from "../../ui/primitives/tooltip";
+import { Info } from "lucide-react";
+import { cn, glassCard } from "../../ui/primitives/styles";
+import { SimpleTooltip, Tooltip, TooltipContent, TooltipTrigger } from "../../ui/primitives/tooltip";
 
 interface LevelSelectorProps {
   value: string;
@@ -43,36 +43,47 @@ const LEVELS = [
 
 export const LevelSelector: React.FC<LevelSelectorProps> = ({ value, onValueChange, disabled = false }) => {
   const tooltipContent = (
-    <div className="space-y-2 text-xs">
-      <div className="font-semibold mb-2">Crawl Depth Level Explanations:</div>
+    <div className="space-y-2 max-w-xs">
+      <div className="font-semibold mb-2 text-sm">Crawl Depth Levels:</div>
       {LEVELS.map((level) => (
-        <div key={level.value} className="space-y-1">
-          <div className="font-medium">
-            Level {level.value}: "{level.description}"
+        <div key={level.value} className="space-y-0.5">
+          <div className="text-xs font-medium">
+            Level {level.value}: {level.description}
           </div>
-          <div className="text-gray-300 dark:text-gray-400 pl-2">{level.details}</div>
+          <div className="text-xs text-gray-400 dark:text-gray-500 pl-2">{level.details}</div>
         </div>
       ))}
-      <div className="mt-3 pt-2 border-t border-gray-600 dark:border-gray-400">
-        <div className="flex items-center gap-1">
-          <span>💡</span>
-          <span className="font-medium">More data isn't always better. Choose based on your needs.</span>
-        </div>
+      <div className="mt-2 pt-2 border-t border-gray-600 dark:border-gray-500 text-xs">
+        💡 More data isn't always better. Choose based on your needs.
       </div>
     </div>
   );
 
   return (
     <div className="space-y-3">
-      <div className="flex items-center gap-2">
-        <div className="text-sm font-medium text-gray-900 dark:text-white/90" id="crawl-depth-label">
-          Crawl Depth
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <div className="text-sm font-medium text-gray-900 dark:text-white/90" id="crawl-depth-label">
+            Crawl Depth
+          </div>
+          <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="text-gray-400 hover:text-cyan-500 transition-colors cursor-help"
+              aria-label="Show crawl depth level details"
+            >
+              <Info className="w-4 h-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">{tooltipContent}</TooltipContent>
+        </Tooltip>
+        </div>
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          Higher levels crawl deeper into the website structure
         </div>
-        <SimpleTooltip content={tooltipContent}>
-          <Info className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help" />
-        </SimpleTooltip>
       </div>
-      <div className="grid grid-cols-4 gap-3" role="radiogroup" aria-labelledby="crawl-depth-label">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3" role="radiogroup" aria-labelledby="crawl-depth-label">
         {LEVELS.map((level) => {
           const isSelected = value === level.value;
 
@@ -98,29 +109,34 @@ export const LevelSelector: React.FC<LevelSelectorProps> = ({ value, onValueChan
                   }}
                   disabled={disabled}
                   className={cn(
-                    "relative w-full h-16 rounded-xl transition-all duration-200 border-2",
+                    "relative w-full h-16 rounded-xl transition-all duration-200",
                     "flex flex-col items-center justify-center gap-1",
-                    "backdrop-blur-md focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2",
-                    isSelected
-                      ? "border-cyan-500/60 bg-gradient-to-b from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40"
-                      : "border-gray-300/50 dark:border-gray-700/50 bg-gradient-to-b from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
-                    !disabled && "hover:border-cyan-400/50 hover:shadow-[0_0_15px_rgba(6,182,212,0.15)]",
+                    glassCard.base,
+                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-offset-2",
+                    isSelected ? glassCard.edgeColors.cyan.border : "border border-gray-300/50 dark:border-gray-700/50",
+                    isSelected ? glassCard.tints.cyan.light : glassCard.transparency.light,
+                    !disabled && !isSelected && "hover:border-cyan-400/50",
                     disabled && "opacity-50 cursor-not-allowed",
                   )}
                 >
-                  {/* Top accent glow for selected state */}
+                  {/* Top edge-lit effect for selected state */}
                   {isSelected && (
-                    <div className="pointer-events-none absolute inset-x-0 top-0">
-                      <div className="mx-1 mt-0.5 h-[2px] rounded-full bg-cyan-500" />
-                      <div className="-mt-1 h-6 w-full bg-gradient-to-b from-cyan-500/25 to-transparent blur-md" />
-                    </div>
-                  )}
-
-                  {/* Selection indicator */}
-                  {isSelected && (
-                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-cyan-500 rounded-full flex items-center justify-center">
-                      <Check className="w-3 h-3 text-white" />
-                    </div>
+                    <>
+                      <div
+                        className={cn(
+                          "absolute inset-x-0 top-0 h-[2px] pointer-events-none z-10",
+                          glassCard.edgeLit.position.top,
+                          glassCard.edgeLit.color.cyan.line,
+                          glassCard.edgeLit.color.cyan.glow,
+                        )}
+                      />
+                      <div
+                        className={cn(
+                          "absolute inset-x-0 top-0 h-16 bg-gradient-to-b to-transparent blur-lg pointer-events-none z-10",
+                          glassCard.edgeLit.color.cyan.gradient.vertical,
+                        )}
+                      />
+                    </>
                   )}
 
                   {/* Level number */}
@@ -148,11 +164,6 @@ export const LevelSelector: React.FC<LevelSelectorProps> = ({ value, onValueChan
           );
         })}
       </div>
-
-      {/* Help text */}
-      <div className="text-xs text-gray-500 dark:text-gray-400 text-center">
-        Higher levels crawl deeper into the website structure
-      </div>
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/knowledge/components/TagInput.tsx b/archon-ui-main/src/features/knowledge/components/TagInput.tsx
index d4cde034..4c2dd397 100644
--- a/archon-ui-main/src/features/knowledge/components/TagInput.tsx
+++ b/archon-ui-main/src/features/knowledge/components/TagInput.tsx
@@ -7,7 +7,7 @@ import { motion } from "framer-motion";
 import { Plus, X } from "lucide-react";
 import { useState } from "react";
 import { Input } from "../../ui/primitives";
-import { cn } from "../../ui/primitives/styles";
+import { cn, glassCard } from "../../ui/primitives/styles";
 
 interface TagInputProps {
   tags: string[];
@@ -75,12 +75,17 @@ export const TagInput: React.FC<TagInputProps> = ({
 
   return (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-900 dark:text-white/90">Tags</div>
+      <div className="flex items-center justify-between gap-2">
+        <div className="text-sm font-medium text-gray-900 dark:text-white/90">Tags</div>
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          Press Enter or comma to add tags • Backspace to remove last tag
+        </div>
+      </div>
 
       {/* Tag Display */}
       {tags.length > 0 && (
         <div className="flex flex-wrap gap-2">
-          {tags.map((tag, index) => (
+          {tags.map((tag) => (
             <motion.div
               key={tag}
               initial={{ opacity: 0, scale: 0.8 }}
@@ -88,9 +93,9 @@ export const TagInput: React.FC<TagInputProps> = ({
               exit={{ opacity: 0, scale: 0.8 }}
               className={cn(
                 "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium",
-                "backdrop-blur-md bg-gradient-to-r from-blue-100/80 to-blue-50/60 dark:from-blue-900/40 dark:to-blue-800/30",
-                "border border-blue-300/50 dark:border-blue-700/50",
-                "text-blue-700 dark:text-blue-300",
+                glassCard.blur.md,
+                glassCard.tints.blue.medium,
+                "border border-blue-400/30",
                 "transition-all duration-200",
               )}
             >
@@ -102,7 +107,7 @@ export const TagInput: React.FC<TagInputProps> = ({
                   className="ml-0.5 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"
                   aria-label={`Remove ${tag} tag`}
                 >
-                  <X className="w-3 h-3" />
+                  <X className="w-3 h-3" aria-hidden="true" />
                 </button>
               )}
             </motion.div>
@@ -122,19 +127,21 @@ export const TagInput: React.FC<TagInputProps> = ({
           onKeyDown={handleKeyDown}
           placeholder={tags.length >= maxTags ? "Maximum tags reached" : placeholder}
           disabled={disabled || tags.length >= maxTags}
-          className="pl-9 backdrop-blur-md bg-gradient-to-r from-white/60 to-white/50 dark:from-black/60 dark:to-black/50 border-gray-300/60 dark:border-gray-600/60 focus:border-blue-400/70 focus:shadow-[0_0_15px_rgba(59,130,246,0.15)]"
+          className={cn(
+            "pl-9",
+            glassCard.blur.md,
+            glassCard.transparency.medium,
+            "border-gray-300/60 dark:border-gray-600/60 focus:border-blue-400/70",
+          )}
         />
       </div>
 
-      {/* Help Text */}
-      <div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
-        <p>Press Enter or comma to add tags • Backspace to remove last tag</p>
-        {maxTags && (
-          <p>
-            {tags.length}/{maxTags} tags used
-          </p>
-        )}
-      </div>
+      {/* Tag count */}
+      {maxTags && (
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          {tags.length}/{maxTags} tags used
+        </div>
+      )}
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/knowledge/components/index.ts b/archon-ui-main/src/features/knowledge/components/index.ts
index e9174d5b..a7f9ff55 100644
--- a/archon-ui-main/src/features/knowledge/components/index.ts
+++ b/archon-ui-main/src/features/knowledge/components/index.ts
@@ -1,5 +1,4 @@
 export * from "./AddKnowledgeDialog";
-export * from "./DocumentBrowser";
 export * from "./KnowledgeCard";
 export * from "./KnowledgeList";
 export * from "./KnowledgeTypeSelector";
diff --git a/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts b/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
index bf2ab907..568b834d 100644
--- a/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
+++ b/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
@@ -228,7 +228,7 @@ export function useCrawlUrl() {
       });
 
       // Return context for rollback and replacement
-      return { previousSummaries, previousOperations, tempProgressId };
+      return { previousSummaries, previousOperations, tempProgressId, tempItemId: tempProgressId };
     },
     onSuccess: (response, _variables, context) => {
       // Replace temporary IDs with real ones from the server
@@ -407,7 +407,7 @@ export function useUploadDocument() {
         };
       });
 
-      return { previousSummaries, previousOperations, tempProgressId };
+      return { previousSummaries, previousOperations, tempProgressId, tempItemId: tempProgressId };
     },
     onSuccess: (response, _variables, context) => {
       // Replace temporary IDs with real ones from the server
diff --git a/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx b/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
index d3f91a3a..4a3a9c05 100644
--- a/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
+++ b/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
@@ -4,9 +4,20 @@
  */
 
 import { Check, Code, Copy, FileText, Layers } from "lucide-react";
+import Prism from "prismjs";
+import ReactMarkdown from "react-markdown";
 import { Button } from "../../../ui/primitives";
 import type { InspectorSelectedItem } from "../../types";
 
+// Import Prism theme and languages
+import "prismjs/themes/prism-tomorrow.css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+
 interface ContentViewerProps {
   selectedItem: InspectorSelectedItem | null;
   onCopy: (text: string, id: string) => void;
@@ -25,6 +36,51 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
     );
   }
 
+  // Highlight code with Prism
+  const highlightCode = (code: string, language?: string): string => {
+    try {
+      // Escape HTML entities FIRST per Prism documentation requirement
+      // Prism expects pre-escaped input to prevent XSS
+      const escaped = code
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+
+      const lang = language?.toLowerCase() || "javascript";
+      const grammar = Prism.languages[lang] || Prism.languages.javascript;
+      return Prism.highlight(escaped, grammar, lang);
+    } catch (error) {
+      console.error("Prism highlighting failed:", error);
+      // Return escaped code on error
+      return code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+  };
+
+  // Strip leading/trailing backticks from document content
+  const stripOuterBackticks = (content: string) => {
+    let cleaned = content.trim();
+
+    // Remove opening triple backticks (with optional language identifier)
+    if (cleaned.startsWith("```")) {
+      const firstNewline = cleaned.indexOf("\n");
+      if (firstNewline > 0) {
+        cleaned = cleaned.substring(firstNewline + 1);
+      }
+    }
+
+    // Remove closing triple backticks
+    if (cleaned.endsWith("```")) {
+      const lastBackticks = cleaned.lastIndexOf("\n```");
+      if (lastBackticks > 0) {
+        cleaned = cleaned.substring(0, lastBackticks);
+      } else {
+        cleaned = cleaned.substring(0, cleaned.length - 3);
+      }
+    }
+
+    return cleaned.trim();
+  };
+
   return (
     <div className="flex flex-col h-full">
       {/* Content Header - Fixed with proper overflow handling */}
@@ -56,7 +112,12 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
             ) : (
               <>
                 <div className="flex items-center gap-2 min-w-0">
-                  <span className="px-2 py-0.5 bg-green-500/10 text-green-400 text-xs font-mono rounded flex-shrink-0">
+                  <span
+                    className={[
+                      "px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400",
+                      "text-xs font-mono rounded flex-shrink-0",
+                    ].join(" ")}
+                  >
                     {selectedItem.type === "code" && selectedItem.metadata && "language" in selectedItem.metadata
                       ? selectedItem.metadata.language || "unknown"
                       : "unknown"}
@@ -105,19 +166,48 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
       {/* Content Body */}
       <div className="flex-1 overflow-y-auto min-h-0 p-6 scrollbar-thin">
         {selectedItem.type === "document" ? (
-          <div className="prose prose-invert max-w-none">
-            <pre className="whitespace-pre-wrap text-sm text-gray-300 font-sans leading-relaxed">
-              {selectedItem.content || "No content available"}
-            </pre>
+          <div className="prose prose-invert prose-sm max-w-none prose-headings:text-cyan-400 prose-a:text-cyan-400 prose-code:text-purple-400 prose-strong:text-white prose-pre:bg-black/30 prose-pre:border prose-pre:border-white/10">
+            <ReactMarkdown
+              components={{
+                p: ({ children }) => <p className="mb-4 leading-relaxed">{children}</p>,
+                h1: ({ children }) => <h1 className="text-xl font-bold mb-3 mt-6">{children}</h1>,
+                h2: ({ children }) => <h2 className="text-lg font-bold mb-3 mt-5">{children}</h2>,
+                h3: ({ children }) => <h3 className="text-base font-semibold mb-2 mt-4">{children}</h3>,
+                ul: ({ children }) => <ul className="list-disc list-inside mb-4 space-y-1">{children}</ul>,
+                ol: ({ children }) => <ol className="list-decimal list-inside mb-4 space-y-1">{children}</ol>,
+                li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+                code: ({ children }) => <code className="px-1.5 py-0.5 rounded bg-black/30">{children}</code>,
+              }}
+            >
+              {stripOuterBackticks(selectedItem.content || "No content available")}
+            </ReactMarkdown>
           </div>
         ) : (
-          <div className="relative">
-            <pre className="bg-black/30 border border-white/10 rounded-lg p-4 overflow-x-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
-              <code className="text-sm text-gray-300 font-mono">
-                {selectedItem.content || "// No code content available"}
-              </code>
-            </pre>
-          </div>
+          (() => {
+            // Extract language once
+            const language =
+              selectedItem.metadata && "language" in selectedItem.metadata
+                ? selectedItem.metadata.language || "javascript"
+                : "javascript";
+
+            return (
+              <div className="relative">
+                <pre
+                  className={[
+                    "bg-black/30 dark:bg-black/30 border border-cyan-500/10 rounded-lg p-4",
+                    "overflow-x-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent",
+                  ].join(" ")}
+                >
+                  <code
+                    className={`language-${language} font-mono text-sm leading-relaxed`}
+                    dangerouslySetInnerHTML={{
+                      __html: highlightCode(selectedItem.content || "// No code content available", language),
+                    }}
+                  />
+                </pre>
+              </div>
+            );
+          })()
         )}
       </div>
 
@@ -131,16 +221,19 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
                 <span className="text-cyan-400">{(selectedItem.metadata.relevance_score * 100).toFixed(0)}%</span>
               </span>
             )}
-            {selectedItem.type === "document" && "url" in selectedItem.metadata && selectedItem.metadata.url && (
-              <a
-                href={selectedItem.metadata.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-cyan-400 hover:text-cyan-300 transition-colors underline"
-              >
-                View Source
-              </a>
-            )}
+            {selectedItem.type === "document" &&
+              selectedItem.metadata &&
+              "url" in selectedItem.metadata &&
+              selectedItem.metadata.url && (
+                <a
+                  href={selectedItem.metadata.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-cyan-400 hover:text-cyan-300 transition-colors underline"
+                >
+                  View Source
+                </a>
+              )}
           </div>
           <span className="text-gray-600">{selectedItem.type === "document" ? "Document Chunk" : "Code Example"}</span>
         </div>
diff --git a/archon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsx b/archon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsx
index a3dc9615..ecdc90af 100644
--- a/archon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsx
+++ b/archon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsx
@@ -38,8 +38,8 @@ export const InspectorHeader: React.FC<InspectorHeaderProps> = ({
               className={cn(
                 "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
                 item.source_type === "url"
-                  ? "bg-blue-500/10 text-blue-400 border border-blue-500/20"
-                  : "bg-purple-500/10 text-purple-400 border border-purple-500/20",
+                  ? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20"
+                  : "bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20",
               )}
             >
               {item.source_type === "url" ? (
@@ -60,8 +60,8 @@ export const InspectorHeader: React.FC<InspectorHeaderProps> = ({
               className={cn(
                 "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
                 item.knowledge_type === "technical"
-                  ? "bg-green-500/10 text-green-400 border border-green-500/20"
-                  : "bg-orange-500/10 text-orange-400 border border-orange-500/20",
+                  ? "bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20"
+                  : "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20",
               )}
             >
               {item.knowledge_type === "technical" ? (
diff --git a/archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx b/archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx
index 09b9e441..2dfa5119 100644
--- a/archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx
+++ b/archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx
@@ -102,9 +102,9 @@ export const InspectorSidebar: React.FC<InspectorSidebarProps> = ({
                 onClick={() => onItemSelect(item)}
                 className={cn(
                   "w-full text-left p-3 rounded-lg mb-1 transition-all",
-                  "hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-cyan-500/50",
+                  "hover:bg-white/5 dark:hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-cyan-500/50",
                   selectedItemId === item.id
-                    ? "bg-cyan-500/10 border border-cyan-500/30 ring-1 ring-cyan-500/20"
+                    ? "bg-cyan-500/10 dark:bg-cyan-500/10 border border-cyan-500/30 dark:border-cyan-500/30 ring-1 ring-cyan-500/20"
                     : "border border-transparent",
                 )}
                 role="option"
@@ -128,7 +128,7 @@ export const InspectorSidebar: React.FC<InspectorSidebarProps> = ({
                         {getItemTitle(item)}
                       </span>
                       {viewMode === "code" && (item as CodeExample).language && (
-                        <span className="px-1.5 py-0.5 bg-green-500/10 text-green-400 text-xs rounded flex-shrink-0">
+                        <span className="px-1.5 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 text-xs rounded flex-shrink-0">
                           {(item as CodeExample).language}
                         </span>
                       )}
@@ -157,7 +157,7 @@ export const InspectorSidebar: React.FC<InspectorSidebarProps> = ({
                   size="sm"
                   onClick={onLoadMore}
                   disabled={isFetchingNextPage}
-                  className="w-full text-cyan-400 hover:text-white hover:bg-cyan-500/10 transition-all"
+                  className="w-full text-cyan-600 dark:text-cyan-400 hover:text-white dark:hover:text-white hover:bg-cyan-500/10 transition-all"
                   aria-label={`Load more ${viewMode}`}
                 >
                   {isFetchingNextPage ? (
diff --git a/archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx b/archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx
index 0bedc7b2..c9a9a3af 100644
--- a/archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx
+++ b/archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx
@@ -73,7 +73,7 @@ export const KnowledgeView = () => {
       // Check if it was an error or success
       if (op.status === "error" || op.status === "failed") {
         // Show error message with details
-        const errorMessage = op.message || op.error || "Operation failed";
+        const errorMessage = op.message || "Operation failed";
         showToast(`❌ ${errorMessage}`, "error", 7000);
       } else if (op.status === "completed") {
         // Show success message
@@ -141,7 +141,7 @@ export const KnowledgeView = () => {
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-semibold text-white/90">Active Operations ({activeOperations.length})</h3>
               <div className="flex items-center gap-2 text-sm text-gray-400">
-                <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse" />
+                <div className="w-2 h-2 bg-cyan-400 dark:bg-cyan-400 rounded-full animate-pulse" />
                 Live Updates
               </div>
             </div>
diff --git a/archon-ui-main/src/features/projects/components/ProjectCard.tsx b/archon-ui-main/src/features/projects/components/ProjectCard.tsx
index a6b62349..b89fdce8 100644
--- a/archon-ui-main/src/features/projects/components/ProjectCard.tsx
+++ b/archon-ui-main/src/features/projects/components/ProjectCard.tsx
@@ -1,8 +1,8 @@
-import { motion } from "framer-motion";
 import { Activity, CheckCircle2, ListTodo } from "lucide-react";
 import type React from "react";
 import { isOptimistic } from "@/features/shared/utils/optimistic";
 import { OptimisticIndicator } from "../../ui/primitives/OptimisticIndicator";
+import { SelectableCard } from "../../ui/primitives/selectable-card";
 import { cn } from "../../ui/primitives/styles";
 import type { Project } from "../types";
 import { ProjectCardActions } from "./ProjectCardActions";
@@ -33,46 +33,24 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
   const optimistic = isOptimistic(project);
 
   return (
-    <motion.div
-      tabIndex={0}
-      aria-label={`Select project ${project.title}`}
-      aria-current={isSelected ? "true" : undefined}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onSelect(project);
-        }
-      }}
-      onClick={() => onSelect(project)}
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={() => onSelect(project)}
+      blur="xl"
+      transparency="light"
+      size="none"
       className={cn(
-        "relative rounded-xl backdrop-blur-md w-72 min-h-[180px] cursor-pointer overflow-visible group flex flex-col",
-        "transition-all duration-300",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+        "w-72 min-h-[180px] flex flex-col shrink-0",
         project.pinned
           ? "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10"
           : isSelected
             ? "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20"
             : "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
-        "border",
-        project.pinned
-          ? "border-purple-500/80 dark:border-purple-500/80 shadow-[0_0_15px_rgba(168,85,247,0.3)]"
-          : isSelected
-            ? "border-purple-400/60 dark:border-purple-500/60"
-            : "border-gray-200 dark:border-zinc-800/50",
-        isSelected
-          ? "shadow-[0_0_15px_rgba(168,85,247,0.4),0_0_10px_rgba(147,51,234,0.3)] dark:shadow-[0_0_20px_rgba(168,85,247,0.5),0_0_15px_rgba(147,51,234,0.4)]"
-          : "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
-        "hover:shadow-[0_15px_40px_-15px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_15px_40px_-15px_rgba(0,0,0,0.9)]",
-        isSelected ? "scale-[1.02]" : "hover:scale-[1.01]", // Use scale instead of translate to avoid clipping
         optimistic && "opacity-80 ring-1 ring-cyan-400/30",
       )}
     >
-      {/* Subtle aurora glow effect for selected card */}
-      {isSelected && (
-        <div className="absolute inset-0 rounded-xl overflow-hidden opacity-30 dark:opacity-40 pointer-events-none">
-          <div className="absolute -inset-[100px] bg-[radial-gradient(circle,rgba(168,85,247,0.8)_0%,rgba(147,51,234,0.6)_40%,transparent_70%)] blur-3xl animate-[pulse_8s_ease-in-out_infinite]"></div>
-        </div>
-      )}
 
       {/* Main content area with padding */}
       <div className="flex-1 p-4 pb-2">
@@ -94,7 +72,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
         </div>
 
         {/* Task count pills */}
-        <div className="flex items-stretch gap-2 w-full">
+        <div className="flex flex-col sm:flex-row items-stretch gap-2 w-full">
           {/* Todo pill */}
           <div className="relative flex-1">
             <div
@@ -253,7 +231,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
       <div className="flex items-center justify-between px-3 py-2 mt-auto border-t border-gray-200/30 dark:border-gray-700/20">
         {/* Pinned indicator badge */}
         {project.pinned ? (
-          <div className="px-2 py-0.5 bg-purple-500 text-white text-[10px] font-bold rounded-full shadow-lg shadow-purple-500/30">
+          <div className="px-2 py-0.5 bg-purple-500 dark:bg-purple-600 text-white text-[10px] font-bold rounded-full shadow-lg shadow-purple-500/30">
             DEFAULT
           </div>
         ) : (
@@ -275,6 +253,6 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
           }}
         />
       </div>
-    </motion.div>
+    </SelectableCard>
   );
 };
diff --git a/archon-ui-main/src/features/projects/components/ProjectHeader.tsx b/archon-ui-main/src/features/projects/components/ProjectHeader.tsx
index 995792e0..563035d7 100644
--- a/archon-ui-main/src/features/projects/components/ProjectHeader.tsx
+++ b/archon-ui-main/src/features/projects/components/ProjectHeader.tsx
@@ -1,10 +1,18 @@
 import { motion } from "framer-motion";
-import { Plus } from "lucide-react";
+import { LayoutGrid, List, Plus, Search, X } from "lucide-react";
 import type React from "react";
+import { ReactNode } from "react";
 import { Button } from "../../ui/primitives/button";
+import { Input } from "../../ui/primitives/input";
+import { cn } from "../../ui/primitives/styles";
 
 interface ProjectHeaderProps {
   onNewProject: () => void;
+  layoutMode?: "horizontal" | "sidebar";
+  onLayoutModeChange?: (mode: "horizontal" | "sidebar") => void;
+  rightContent?: ReactNode;
+  searchQuery?: string;
+  onSearchChange?: (query: string) => void;
 }
 
 const titleVariants = {
@@ -25,7 +33,14 @@ const itemVariants = {
   },
 };
 
-export const ProjectHeader: React.FC<ProjectHeaderProps> = ({ onNewProject }) => {
+export const ProjectHeader: React.FC<ProjectHeaderProps> = ({
+  onNewProject,
+  layoutMode,
+  onLayoutModeChange,
+  rightContent,
+  searchQuery,
+  onSearchChange,
+}) => {
   return (
     <motion.div
       className="flex items-center justify-between mb-8"
@@ -44,10 +59,62 @@ export const ProjectHeader: React.FC<ProjectHeaderProps> = ({ onNewProject }) =>
         />
         Projects
       </motion.h1>
-      <Button onClick={onNewProject} variant="cyan" className="shadow-lg shadow-cyan-500/20">
-        <Plus className="w-4 h-4 mr-2" />
-        New Project
-      </Button>
+      <div className="flex items-center gap-3">
+        {/* Search input */}
+        {searchQuery !== undefined && onSearchChange && (
+          <div className="relative w-64">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Input
+              type="text"
+              placeholder="Search projects..."
+              value={searchQuery}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-9 pr-8"
+              aria-label="Search projects"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => onSearchChange("")}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                aria-label="Clear search"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            )}
+          </div>
+        )}
+        {/* Layout toggle - show if mode and change handler provided */}
+        {layoutMode && onLayoutModeChange && (
+          <div className="flex gap-1 p-1 bg-black/30 dark:bg-black/50 rounded-lg border border-white/10">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onLayoutModeChange("horizontal")}
+              className={cn("px-3", layoutMode === "horizontal" && "bg-purple-500/20 text-purple-400")}
+              aria-label="Switch to horizontal layout"
+              aria-pressed={layoutMode === "horizontal"}
+            >
+              <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onLayoutModeChange("sidebar")}
+              className={cn("px-3", layoutMode === "sidebar" && "bg-purple-500/20 text-purple-400")}
+              aria-label="Switch to sidebar layout"
+              aria-pressed={layoutMode === "sidebar"}
+            >
+              <List className="w-4 h-4" aria-hidden="true" />
+            </Button>
+          </div>
+        )}
+        {rightContent}
+        <Button onClick={onNewProject} variant="cyan" className="shadow-lg shadow-cyan-500/20">
+          <Plus className="w-4 h-4 mr-2" />
+          New Project
+        </Button>
+      </div>
     </motion.div>
   );
 };
diff --git a/archon-ui-main/src/features/projects/components/ProjectList.tsx b/archon-ui-main/src/features/projects/components/ProjectList.tsx
index 7b4b769e..aa4d0c58 100644
--- a/archon-ui-main/src/features/projects/components/ProjectList.tsx
+++ b/archon-ui-main/src/features/projects/components/ProjectList.tsx
@@ -97,7 +97,7 @@ export const ProjectList: React.FC<ProjectListProps> = ({
   }
 
   return (
-    <motion.div initial="hidden" animate="visible" className="relative mb-10" variants={itemVariants}>
+    <motion.div initial="hidden" animate="visible" className="relative mb-10 w-full" variants={itemVariants}>
       <div className="overflow-x-auto overflow-y-visible pb-4 pt-2 pr-6 md:pr-8 scrollbar-thin">
         <ul className="flex gap-4 min-w-max pl-6 md:pl-8" aria-label="Projects">
           {sortedProjects.map((project) => (
diff --git a/archon-ui-main/src/features/projects/documents/DocsTab.tsx b/archon-ui-main/src/features/projects/documents/DocsTab.tsx
index 4b499244..0f9dbba8 100644
--- a/archon-ui-main/src/features/projects/documents/DocsTab.tsx
+++ b/archon-ui-main/src/features/projects/documents/DocsTab.tsx
@@ -1,11 +1,12 @@
-import { FileText, Search } from "lucide-react";
+import { FileText, Plus, Search } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Input } from "../../ui/primitives";
-import { cn } from "../../ui/primitives/styles";
+import { DeleteConfirmModal } from "../../ui/components/DeleteConfirmModal";
+import { Button, Input } from "../../ui/primitives";
+import { AddDocumentModal } from "./components/AddDocumentModal";
 import { DocumentCard } from "./components/DocumentCard";
 import { DocumentViewer } from "./components/DocumentViewer";
-import { useProjectDocuments } from "./hooks";
-import type { ProjectDocument } from "./types";
+import { useCreateDocument, useDeleteDocument, useProjectDocuments, useUpdateDocument } from "./hooks";
+import type { DocumentContent, ProjectDocument } from "./types";
 
 interface DocsTabProps {
   project?: {
@@ -25,10 +26,75 @@ export const DocsTab = ({ project }: DocsTabProps) => {
 
   // Fetch documents from project's docs field
   const { data: documents = [], isLoading } = useProjectDocuments(projectId);
+  const updateDocumentMutation = useUpdateDocument(projectId);
+  const createDocumentMutation = useCreateDocument(projectId);
+  const deleteDocumentMutation = useDeleteDocument(projectId);
 
   // Document state
   const [selectedDocument, setSelectedDocument] = useState<ProjectDocument | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [documentToDelete, setDocumentToDelete] = useState<ProjectDocument | null>(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  // Handle document save
+  const handleSaveDocument = async (documentId: string, content: DocumentContent) => {
+    try {
+      await updateDocumentMutation.mutateAsync({
+        documentId,
+        updates: { content },
+      });
+    } catch (error) {
+      console.error("Failed to save document:", error);
+      throw error;
+    }
+  };
+
+  // Handle add document
+  const handleAddDocument = async (title: string, document_type: string) => {
+    await createDocumentMutation.mutateAsync({
+      title,
+      document_type,
+      content: { markdown: "# " + title + "\n\nStart writing your document here..." },
+      // NOTE: Archon does not have user authentication - this is a single-user local app.
+      // "User" is a constant representing the sole user of this Archon instance.
+      author: "User",
+    });
+  };
+
+  // Handle delete document
+  const handleDeleteDocument = (doc: ProjectDocument) => {
+    setDocumentToDelete(doc);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!documentToDelete) return;
+
+    await deleteDocumentMutation.mutateAsync(documentToDelete.id);
+
+    // Clear selection if deleted document was selected
+    if (selectedDocument?.id === documentToDelete.id) {
+      setSelectedDocument(null);
+    }
+
+    setShowDeleteModal(false);
+    setDocumentToDelete(null);
+  };
+
+  const cancelDelete = () => {
+    setShowDeleteModal(false);
+    setDocumentToDelete(null);
+  };
+
+  // Reset state when project changes
+  useEffect(() => {
+    setSelectedDocument(null);
+    setSearchQuery("");
+    setShowAddModal(false);
+    setShowDeleteModal(false);
+    setDocumentToDelete(null);
+  }, [projectId]);
 
   // Auto-select first document when documents load
   useEffect(() => {
@@ -59,111 +125,97 @@ export const DocsTab = ({ project }: DocsTabProps) => {
   }
 
   return (
-    <div className="flex flex-col h-[calc(100vh-200px)]">
-      {/* Migration Warning Banner */}
-      <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 px-4 py-3">
-        <div className="flex items-start gap-3">
-          <div className="text-yellow-600 dark:text-yellow-400">
-            <svg className="w-5 h-5 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-label="Warning">
-              <title>Warning icon</title>
-              <path
-                fillRule="evenodd"
-                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </div>
-          <div className="flex-1">
-            <h3 className="text-sm font-semibold text-yellow-800 dark:text-yellow-300">
-              Project Documents Under Migration
-            </h3>
-            <p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
-              Editing and uploading project documents is currently disabled while we migrate to a new storage system.
-              <strong className="font-semibold">
-                {" "}
-                Please backup your existing project documents elsewhere as they will be lost when the migration is
-                complete.
-              </strong>
-            </p>
-            <p className="text-xs text-yellow-600 dark:text-yellow-500 mt-1">
-              Note: This only affects project-specific documents. Your knowledge base documents are safe and unaffected.
-            </p>
-          </div>
-        </div>
-      </div>
-
+    <div className="flex h-[600px] gap-6">
       {/* Main Content */}
-      <div className="flex flex-1">
-        {/* Left Sidebar - Document List */}
-        <div
-          className={cn(
-            "w-80 flex flex-col",
-            "border-r border-gray-200 dark:border-gray-700",
-            "bg-gray-50 dark:bg-gray-900",
-          )}
-        >
-          {/* Header */}
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-            <h2 className="text-lg font-semibold mb-3 flex items-center gap-2 text-gray-800 dark:text-white">
-              <FileText className="w-5 h-5" />
-              Documents (Read-Only)
-            </h2>
-
-            {/* Search */}
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-              <Input
-                type="text"
-                placeholder="Search documents..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9"
-              />
-            </div>
-
-            {/* Info message */}
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-3">
-              Viewing {documents.length} document{documents.length !== 1 ? "s" : ""}
-            </p>
+      {/* Left Sidebar - Document List */}
+      <div className="w-64 flex flex-col space-y-4 overflow-visible">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FileText className="w-5 h-5 text-gray-700 dark:text-gray-300" />
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-white">Documents</h3>
           </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowAddModal(true)}
+            className="text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/10"
+            aria-label="Add new document"
+          >
+            <Plus className="w-4 h-4" aria-hidden="true" />
+          </Button>
+        </div>
 
-          {/* Document List */}
-          <div className="flex-1 overflow-y-auto p-4 space-y-2">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <Input
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+            aria-label="Search documents"
+          />
+        </div>
+
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          {documents.length} document{documents.length !== 1 ? "s" : ""}
+        </p>
+
+        <div className="flex-1 min-h-0">
+          <div className="h-full overflow-y-auto space-y-2 p-2 -mx-2">
             {filteredDocuments.length === 0 ? (
               <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                 <FileText className="w-12 h-12 mx-auto mb-3 opacity-30" />
                 <p className="text-sm">{searchQuery ? "No documents found" : "No documents in this project"}</p>
               </div>
             ) : (
-              filteredDocuments.map((doc) => (
-                <DocumentCard
-                  key={doc.id}
-                  document={doc}
-                  isActive={selectedDocument?.id === doc.id}
-                  onSelect={setSelectedDocument}
-                  onDelete={() => {}} // No delete in read-only mode
-                />
-              ))
+              <div className="space-y-2">
+                {filteredDocuments.map((doc) => (
+                  <DocumentCard
+                    key={doc.id}
+                    document={doc}
+                    isActive={selectedDocument?.id === doc.id}
+                    onSelect={setSelectedDocument}
+                    onDelete={handleDeleteDocument}
+                  />
+                ))}
+              </div>
             )}
           </div>
         </div>
-
-        {/* Right Content - Document Viewer */}
-        <div className="flex-1 bg-white dark:bg-gray-900">
-          {selectedDocument ? (
-            <DocumentViewer document={selectedDocument} />
-          ) : (
-            <div className="flex items-center justify-center h-full">
-              <div className="text-center">
-                <FileText className="w-16 h-16 text-gray-300 dark:text-gray-700 mx-auto mb-4" />
-                <p className="text-gray-500 dark:text-gray-400">
-                  {documents.length > 0 ? "Select a document to view" : "No documents available"}
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
+
+      {/* Right Content - Document Viewer */}
+      <div className="flex-1 overflow-y-auto">
+        {selectedDocument ? (
+          <DocumentViewer document={selectedDocument} onSave={handleSaveDocument} />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <FileText className="w-16 h-16 text-gray-300 dark:text-gray-700 mx-auto mb-4" />
+              <p className="text-gray-500 dark:text-gray-400">
+                {documents.length > 0 ? "Select a document to view" : "No documents available"}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Add Document Modal */}
+      <AddDocumentModal open={showAddModal} onOpenChange={setShowAddModal} onAdd={handleAddDocument} />
+
+      {/* Delete Confirmation Modal */}
+      <DeleteConfirmModal
+        open={showDeleteModal}
+        onOpenChange={(open) => {
+          setShowDeleteModal(open);
+          if (!open) setDocumentToDelete(null);
+        }}
+        itemName={documentToDelete?.title ?? ""}
+        onConfirm={confirmDelete}
+        onCancel={cancelDelete}
+        type="document"
+      />
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/projects/documents/components/AddDocumentModal.tsx b/archon-ui-main/src/features/projects/documents/components/AddDocumentModal.tsx
new file mode 100644
index 00000000..f29210c5
--- /dev/null
+++ b/archon-ui-main/src/features/projects/documents/components/AddDocumentModal.tsx
@@ -0,0 +1,136 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../ui/primitives";
+
+interface AddDocumentModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (title: string, type: string) => Promise<void>;
+}
+
+export const AddDocumentModal = ({ open, onOpenChange, onAdd }: AddDocumentModalProps) => {
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState("spec");
+  const [isAdding, setIsAdding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset form state when modal closes
+  useEffect(() => {
+    if (!open) {
+      setTitle("");
+      setType("spec");
+      setError(null);
+      setIsAdding(false);
+    }
+  }, [open]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+
+    setIsAdding(true);
+    setError(null);
+
+    try {
+      await onAdd(title, type);
+      setTitle("");
+      setType("spec");
+      setError(null);
+      onOpenChange(false);
+    } catch (err) {
+      setError(
+        typeof err === "string"
+          ? err
+          : err instanceof Error
+            ? err.message
+            : "Failed to create document"
+      );
+    } finally {
+      setIsAdding(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Add New Document</DialogTitle>
+            <DialogDescription>Create a new document for this project</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 my-6">
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-3">
+                <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="document-title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Document Title
+              </label>
+              <Input
+                id="document-title"
+                type="text"
+                placeholder="Enter document title..."
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                disabled={isAdding}
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label htmlFor="document-type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Document Type
+              </label>
+              <Select value={type} onValueChange={setType} disabled={isAdding}>
+                <SelectTrigger className="w-full" color="cyan">
+                  <SelectValue placeholder="Select a document type" />
+                </SelectTrigger>
+                <SelectContent color="cyan">
+                  <SelectItem value="spec" color="cyan">Specification</SelectItem>
+                  <SelectItem value="api" color="cyan">API Documentation</SelectItem>
+                  <SelectItem value="guide" color="cyan">Guide</SelectItem>
+                  <SelectItem value="note" color="cyan">Note</SelectItem>
+                  <SelectItem value="design" color="cyan">Design</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={isAdding}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="default" disabled={isAdding || !title.trim()}>
+              {isAdding ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Adding...
+                </>
+              ) : (
+                "Add Document"
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/archon-ui-main/src/features/projects/documents/components/DocumentCard.tsx b/archon-ui-main/src/features/projects/documents/components/DocumentCard.tsx
index 06241a46..df2cf0f3 100644
--- a/archon-ui-main/src/features/projects/documents/components/DocumentCard.tsx
+++ b/archon-ui-main/src/features/projects/documents/components/DocumentCard.tsx
@@ -8,13 +8,14 @@ import {
   FileText,
   Info,
   Rocket,
+  Trash2,
   Users,
-  X,
 } from "lucide-react";
 import type React from "react";
 import { memo, useCallback, useState } from "react";
 import { copyToClipboard } from "../../../shared/utils/clipboard";
-import { Button } from "../../../ui/primitives";
+import { Button, Card } from "../../../ui/primitives";
+import { cn } from "../../../ui/primitives/styles";
 import type { DocumentCardProps, DocumentType } from "../types";
 
 const getDocumentIcon = (type?: DocumentType) => {
@@ -43,23 +44,23 @@ const getDocumentIcon = (type?: DocumentType) => {
 const getTypeColor = (type?: DocumentType) => {
   switch (type) {
     case "prp":
-      return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30";
+      return { badge: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30", glow: "blue" };
     case "technical":
-      return "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30";
+      return { badge: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30", glow: "green" };
     case "business":
-      return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30";
+      return { badge: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30", glow: "purple" };
     case "meeting_notes":
-      return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/30";
+      return { badge: "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/30", glow: "orange" };
     case "spec":
-      return "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/30";
+      return { badge: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/30", glow: "cyan" };
     case "design":
-      return "bg-pink-500/10 text-pink-600 dark:text-pink-400 border-pink-500/30";
+      return { badge: "bg-pink-500/10 text-pink-600 dark:text-pink-400 border-pink-500/30", glow: "pink" };
     case "api":
-      return "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/30";
+      return { badge: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30", glow: "green" };
     case "guide":
-      return "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30";
+      return { badge: "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/30", glow: "orange" };
     default:
-      return "bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/30";
+      return { badge: "bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/30", glow: "cyan" };
   }
 };
 
@@ -67,6 +68,8 @@ export const DocumentCard = memo(({ document, isActive, onSelect, onDelete }: Do
   const [showDelete, setShowDelete] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
 
+  const typeColors = getTypeColor(document.document_type as DocumentType);
+
   const handleCopyId = useCallback(
     async (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -87,87 +90,95 @@ export const DocumentCard = memo(({ document, isActive, onSelect, onDelete }: Do
     [document, onDelete],
   );
 
+  const handleCardClick = () => {
+    onSelect(document);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect(document);
+    }
+  };
+
   return (
-    // biome-ignore lint/a11y/useSemanticElements: Complex card with nested interactive elements - semantic button would break layout
-    <div
+    <Card
+      blur="none"
+      transparency="light"
+      glowColor={isActive ? (typeColors.glow as any) : "none"}
+      glowType="inner"
+      glowSize="md"
+      size="sm"
       role="button"
       tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onSelect(document);
-        }
-      }}
-      className={`
-        relative flex-shrink-0 w-48 p-4 rounded-lg cursor-pointer
-        transition-all duration-200 group
-        ${
-          isActive
-            ? "bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 shadow-lg scale-105"
-            : "bg-white/50 dark:bg-black/30 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md"
-        }
-      `}
-      onClick={() => onSelect(document)}
+      onKeyDown={handleKeyDown}
+      onClick={handleCardClick}
       onMouseEnter={() => setShowDelete(true)}
       onMouseLeave={() => setShowDelete(false)}
+      aria-label={`${isActive ? "Selected: " : ""}${document.title}`}
+      className={cn("relative w-full cursor-pointer transition-all duration-300 group", isActive && "scale-[1.02]")}
     >
-      {/* Document Type Badge */}
-      <div
-        className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium mb-2 border ${getTypeColor(
-          document.document_type as DocumentType,
-        )}`}
-      >
-        {getDocumentIcon(document.document_type as DocumentType)}
-        <span>{document.document_type || "document"}</span>
-      </div>
-
-      {/* Title */}
-      <h4 className="font-medium text-gray-900 dark:text-white text-sm line-clamp-2 mb-1">{document.title}</h4>
-
-      {/* Metadata */}
-      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
-        {new Date(document.updated_at || document.created_at || Date.now()).toLocaleDateString()}
-      </p>
-
-      {/* ID Display Section - Always visible for active, hover for others */}
-      <div
-        className={`flex items-center justify-between mt-2 ${
-          isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-        } transition-opacity duration-200`}
-      >
-        <span className="text-xs text-gray-400 dark:text-gray-500 truncate max-w-[120px]" title={document.id}>
-          {document.id.slice(0, 8)}...
-        </span>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleCopyId}
-          className="p-1 h-auto min-h-0"
-          title="Copy Document ID to clipboard"
-          aria-label="Copy Document ID to clipboard"
-        >
-          {isCopied ? (
-            <span className="text-green-500 text-xs">✓</span>
-          ) : (
-            <Clipboard className="w-3 h-3" aria-hidden="true" />
+        <div>
+        {/* Document Type Badge */}
+        <div
+          className={cn(
+            "inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium mb-2 border",
+            typeColors.badge,
           )}
-        </Button>
-      </div>
-
-      {/* Delete Button */}
-      {showDelete && !isActive && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleDelete}
-          className="absolute top-2 right-2 p-1 h-auto min-h-0 text-red-600 dark:text-red-400 hover:bg-red-500/20"
-          aria-label={`Delete ${document.title}`}
-          title="Delete document"
         >
-          <X className="w-4 h-4" aria-hidden="true" />
-        </Button>
-      )}
-    </div>
+          {getDocumentIcon(document.document_type as DocumentType)}
+          <span>{document.document_type || "document"}</span>
+        </div>
+
+        {/* Title */}
+        <h4 className="font-medium text-gray-900 dark:text-white text-sm line-clamp-2 mb-1">{document.title}</h4>
+
+        {/* Metadata */}
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+          {new Date(document.updated_at || document.created_at || Date.now()).toLocaleDateString()}
+        </p>
+
+        {/* ID Display Section - Always visible for active, hover for others */}
+        <div
+          className={cn(
+            "flex items-center justify-between mt-2 transition-opacity duration-200",
+            isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          )}
+        >
+          <span className="text-xs text-gray-400 dark:text-gray-500 truncate max-w-[120px]" title={document.id}>
+            {document.id.slice(0, 8)}...
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCopyId}
+            className="p-1 h-auto min-h-0"
+            title="Copy Document ID to clipboard"
+            aria-label="Copy Document ID to clipboard"
+          >
+            {isCopied ? (
+              <span className="text-green-500 text-xs">✓</span>
+            ) : (
+              <Clipboard className="w-3 h-3" aria-hidden="true" />
+            )}
+          </Button>
+        </div>
+
+        {/* Delete Button - show on hover OR when selected */}
+        {(showDelete || isActive) && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDelete}
+            className="absolute top-2 right-2 p-1 h-auto min-h-0 text-red-600 dark:text-red-400 hover:bg-red-500/20"
+            aria-label={`Delete ${document.title}`}
+            title="Delete document"
+          >
+            <Trash2 className="w-4 h-4" aria-hidden="true" />
+          </Button>
+        )}
+        </div>
+    </Card>
   );
 });
 
diff --git a/archon-ui-main/src/features/projects/documents/components/DocumentViewer.tsx b/archon-ui-main/src/features/projects/documents/components/DocumentViewer.tsx
index c19a0c17..b143982a 100644
--- a/archon-ui-main/src/features/projects/documents/components/DocumentViewer.tsx
+++ b/archon-ui-main/src/features/projects/documents/components/DocumentViewer.tsx
@@ -1,36 +1,142 @@
-import { FileText } from "lucide-react";
+import { Edit3, Eye, FileText, Save } from "lucide-react";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Button, Card } from "../../../ui/primitives";
 import { cn } from "../../../ui/primitives/styles";
+import { SimpleTooltip } from "../../../ui/primitives/tooltip";
 import type { ProjectDocument } from "../types";
 
 interface DocumentViewerProps {
   document: ProjectDocument;
+  onSave?: (documentId: string, content: any) => Promise<void>;
 }
 
 /**
  * Simple read-only document viewer
  * Displays document content in a reliable way without complex editing
  */
-export const DocumentViewer = ({ document }: DocumentViewerProps) => {
+export const DocumentViewer = ({ document, onSave }: DocumentViewerProps) => {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editedContent, setEditedContent] = useState("");
+  const [hasChanges, setHasChanges] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Get markdown content as string
+  const getMarkdownContent = (): string => {
+    if (!document.content) return "";
+
+    if (typeof document.content === "string") return document.content;
+    if ("markdown" in document.content && typeof document.content.markdown === "string") {
+      return document.content.markdown;
+    }
+    if ("text" in document.content && typeof document.content.text === "string") {
+      return document.content.text;
+    }
+    if ("sections" in document.content && Array.isArray(document.content.sections)) {
+      return document.content.sections
+        .map((s: any) => `${s.heading ? `# ${s.heading}\n\n` : ""}${s.content || ""}`)
+        .join("\n\n");
+    }
+    return JSON.stringify(document.content, null, 2);
+  };
+
+  // Initialize edited content when switching to edit mode
+  const handleToggleEdit = () => {
+    if (!isEditMode) {
+      setEditedContent(getMarkdownContent());
+    }
+    setIsEditMode(!isEditMode);
+    setHasChanges(false);
+  };
+
+  const handleContentChange = (value: string) => {
+    setEditedContent(value);
+    setHasChanges(value !== getMarkdownContent());
+  };
+
+  const handleSave = async () => {
+    if (!onSave || !hasChanges) return;
+
+    setIsSaving(true);
+    try {
+      await onSave(document.id, { markdown: editedContent });
+      setHasChanges(false);
+      setIsEditMode(false);
+    } catch (error) {
+      console.error("Failed to save document:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
   // Extract content for display
   const renderContent = () => {
     if (!document.content) {
-      return <p className="text-gray-500 italic">No content available</p>;
+      return <p className="text-gray-500 dark:text-gray-400 italic">No content available</p>;
     }
 
     // Handle string content
     if (typeof document.content === "string") {
       return (
-        <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">{document.content}</pre>
+        <div className="prose prose-sm dark:prose-invert max-w-none">
+          <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+            {document.content}
+          </pre>
+        </div>
       );
     }
 
     // Handle markdown field
     if ("markdown" in document.content && typeof document.content.markdown === "string") {
       return (
-        <div className="prose prose-sm dark:prose-invert max-w-none">
-          <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">
+        <div className="markdown-content">
+          <ReactMarkdown
+            components={{
+              h1: ({ node, ...props }) => (
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 mt-6" {...props} />
+              ),
+              h2: ({ node, ...props }) => (
+                <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-3 mt-5" {...props} />
+              ),
+              h3: ({ node, ...props }) => (
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2 mt-4" {...props} />
+              ),
+              p: ({ node, ...props }) => (
+                <p className="text-sm text-gray-700 dark:text-gray-300 mb-3 leading-relaxed" {...props} />
+              ),
+              ul: ({ node, ...props }) => (
+                <ul
+                  className="list-disc list-inside text-sm text-gray-700 dark:text-gray-300 mb-3 space-y-1"
+                  {...props}
+                />
+              ),
+              ol: ({ node, ...props }) => (
+                <ol
+                  className="list-decimal list-inside text-sm text-gray-700 dark:text-gray-300 mb-3 space-y-1"
+                  {...props}
+                />
+              ),
+              li: ({ node, ...props }) => <li className="ml-4" {...props} />,
+              code: ({ node, ...props }) => (
+                <code
+                  className="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs font-mono text-cyan-600 dark:text-cyan-400"
+                  {...props}
+                />
+              ),
+              pre: ({ node, ...props }) => (
+                <pre className="bg-gray-100 dark:bg-gray-900 p-3 rounded-lg overflow-x-auto mb-3" {...props} />
+              ),
+              a: ({ node, ...props }) => <a className="text-cyan-600 dark:text-cyan-400 hover:underline" {...props} />,
+              blockquote: ({ node, ...props }) => (
+                <blockquote
+                  className="border-l-4 border-gray-300 dark:border-gray-700 pl-4 italic text-gray-600 dark:text-gray-400 my-3"
+                  {...props}
+                />
+              ),
+            }}
+          >
             {document.content.markdown}
-          </pre>
+          </ReactMarkdown>
         </div>
       );
     }
@@ -38,78 +144,136 @@ export const DocumentViewer = ({ document }: DocumentViewerProps) => {
     // Handle text field
     if ("text" in document.content && typeof document.content.text === "string") {
       return (
-        <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">
-          {document.content.text}
-        </pre>
+        <div className="prose prose-sm dark:prose-invert max-w-none">
+          <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+            {document.content.text}
+          </pre>
+        </div>
       );
     }
 
-    // Handle structured content (JSON)
-    return (
-      <div className="space-y-4">
-        {Object.entries(document.content).map(([key, value]) => (
-          <div key={key} className="border-l-2 border-gray-300 dark:border-gray-700 pl-4">
-            <h3 className="font-semibold text-gray-700 dark:text-gray-300 mb-2">
-              {key.replace(/_/g, " ").charAt(0).toUpperCase() + key.replace(/_/g, " ").slice(1)}
-            </h3>
-            <div className="text-sm text-gray-600 dark:text-gray-400">
-              {typeof value === "string" ? (
-                <p>{value}</p>
-              ) : Array.isArray(value) ? (
-                <ul className="list-disc pl-5">
-                  {value.map((item, i) => (
-                    <li key={`${key}-${typeof item === "object" ? JSON.stringify(item) : String(item)}-${i}`}>
-                      {typeof item === "object" ? JSON.stringify(item, null, 2) : String(item)}
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <pre className="bg-gray-100 dark:bg-gray-900 p-2 rounded text-xs overflow-x-auto">
-                  {JSON.stringify(value, null, 2)}
-                </pre>
+    // Handle sections array (structured content)
+    if ("sections" in document.content && Array.isArray(document.content.sections)) {
+      return (
+        <div className="space-y-6">
+          {document.content.sections.map((section: any, index: number) => (
+            <div key={index} className="space-y-2">
+              {section.heading && (
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white border-l-4 border-cyan-500 pl-3">
+                  {section.heading}
+                </h3>
+              )}
+              {section.content && (
+                <div className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap pl-3">
+                  {section.content}
+                </div>
               )}
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
+      );
+    }
+
+    // Fallback: render JSON as formatted text
+    return (
+      <div className="space-y-4">
+        <pre className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg text-xs overflow-x-auto text-gray-700 dark:text-gray-300">
+          {JSON.stringify(document.content, null, 2)}
+        </pre>
       </div>
     );
   };
 
   return (
-    <div className="h-full flex flex-col">
-      {/* Header */}
-      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+    <div className="space-y-4">
+      {/* Metadata Card - Blue glass with bottom edge-lit */}
+      <Card
+        blur="md"
+        transparency="light"
+        edgePosition="bottom"
+        edgeColor="blue"
+        size="md"
+        className="overflow-visible"
+      >
         <div className="flex items-center gap-3">
-          <FileText className="w-5 h-5 text-gray-500" />
+          <FileText className="w-5 h-5 text-gray-500 dark:text-gray-400" />
           <div className="flex-1">
-            <h2 className="text-lg font-semibold text-gray-800 dark:text-white">{document.title}</h2>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              Type: {document.document_type || "document"} • Last updated:{" "}
-              {new Date(document.updated_at).toLocaleDateString()}
-            </p>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{document.title}</h2>
+            <div className="flex items-center gap-3 mt-1">
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                Type:{" "}
+                <span className="px-2 py-1 text-xs bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded">
+                  {document.document_type || "document"}
+                </span>
+              </span>
+              {document.updated_at && (
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  Last updated: {new Date(document.updated_at).toLocaleDateString()}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-        {document.tags && document.tags.length > 0 && (
-          <div className="flex gap-2 mt-3">
-            {document.tags.map((tag) => (
-              <span
-                key={tag}
-                className={cn(
-                  "px-2 py-1 text-xs rounded",
-                  "bg-gray-100 dark:bg-gray-800",
-                  "text-gray-700 dark:text-gray-300",
-                  "border border-gray-300 dark:border-gray-600",
-                )}
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
+      </Card>
 
-      {/* Content */}
-      <div className="flex-1 overflow-auto p-6 bg-white dark:bg-gray-900">{renderContent()}</div>
+      {/* Content Card - Medium blur glass */}
+      <Card blur="md" transparency="light" size="lg" className="overflow-visible">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Content</h3>
+          <div className="flex items-center gap-2">
+            {/* Save button - only show in edit mode with changes */}
+            {isEditMode && hasChanges && (
+              <SimpleTooltip content={isSaving ? "Saving..." : "Save changes"}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={isSaving}
+                  className="text-green-600 dark:text-green-400 hover:bg-green-500/10"
+                  aria-label="Save document"
+                >
+                  <Save className={cn("w-4 h-4", isSaving && "animate-pulse")} aria-hidden="true" />
+                </Button>
+              </SimpleTooltip>
+            )}
+            {/* View/Edit toggle */}
+            <SimpleTooltip content={isEditMode ? "Preview mode" : "Edit mode"}>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleToggleEdit}
+                className="text-gray-600 dark:text-gray-400 hover:bg-gray-500/10"
+                aria-label={isEditMode ? "Switch to preview mode" : "Switch to edit mode"}
+                aria-pressed={isEditMode}
+              >
+                {isEditMode ? (
+                  <Eye className="w-4 h-4" aria-hidden="true" />
+                ) : (
+                  <Edit3 className="w-4 h-4" aria-hidden="true" />
+                )}
+              </Button>
+            </SimpleTooltip>
+          </div>
+        </div>
+
+        {isEditMode ? (
+          <textarea
+            value={editedContent}
+            onChange={(e) => handleContentChange(e.target.value)}
+            className={cn(
+              "w-full min-h-[400px] p-4 rounded-lg",
+              "bg-white/50 dark:bg-black/30",
+              "border border-gray-300 dark:border-gray-700",
+              "text-gray-900 dark:text-white font-mono text-sm",
+              "focus:outline-none focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20",
+              "resize-y",
+            )}
+            placeholder="Enter markdown content..."
+          />
+        ) : (
+          <div className="text-gray-700 dark:text-gray-300">{renderContent()}</div>
+        )}
+      </Card>
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/projects/documents/hooks/index.ts b/archon-ui-main/src/features/projects/documents/hooks/index.ts
index 79042568..d21df27c 100644
--- a/archon-ui-main/src/features/projects/documents/hooks/index.ts
+++ b/archon-ui-main/src/features/projects/documents/hooks/index.ts
@@ -1,7 +1,7 @@
 /**
  * Document Hooks
  *
- * Read-only hooks for document display
+ * Hooks for document display and editing
  */
 
-export { useProjectDocuments } from "./useDocumentQueries";
+export { useCreateDocument, useDeleteDocument, useProjectDocuments, useUpdateDocument } from "./useDocumentQueries";
diff --git a/archon-ui-main/src/features/projects/documents/hooks/useDocumentQueries.ts b/archon-ui-main/src/features/projects/documents/hooks/useDocumentQueries.ts
index 00c6eea6..9d4e9f4f 100644
--- a/archon-ui-main/src/features/projects/documents/hooks/useDocumentQueries.ts
+++ b/archon-ui-main/src/features/projects/documents/hooks/useDocumentQueries.ts
@@ -1,6 +1,8 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { callAPIWithETag } from "../../../shared/api/apiClient";
 import { DISABLED_QUERY_KEY, STALE_TIMES } from "../../../shared/config/queryPatterns";
-import { projectService } from "../../services";
+import { useToast } from "../../../shared/hooks/useToast";
+import { documentService } from "../services/documentService";
 import type { ProjectDocument } from "../types";
 
 // Query keys factory for documents
@@ -14,18 +16,122 @@ export const documentKeys = {
 };
 
 /**
- * Get documents from project's docs JSONB field
- * Read-only - no mutations
+ * Get documents for a project from Archon documents API
  */
 export function useProjectDocuments(projectId: string | undefined) {
   return useQuery({
     queryKey: projectId ? documentKeys.byProject(projectId) : DISABLED_QUERY_KEY,
     queryFn: async () => {
       if (!projectId) return [];
-      const project = await projectService.getProject(projectId);
-      return (project.docs || []) as ProjectDocument[];
+      return await documentService.getDocumentsByProject(projectId);
     },
     enabled: !!projectId,
     staleTime: STALE_TIMES.normal,
   });
 }
+
+/**
+ * Get a single document by ID
+ */
+export function useProjectDocument(projectId: string | undefined, documentId: string | undefined) {
+  return useQuery({
+    queryKey: projectId && documentId ? documentKeys.detail(projectId, documentId) : DISABLED_QUERY_KEY,
+    queryFn: async () => {
+      if (!projectId || !documentId) return null;
+      return await documentService.getDocument(projectId, documentId);
+    },
+    enabled: !!(projectId && documentId),
+    staleTime: STALE_TIMES.normal,
+  });
+}
+
+// Type for document updates
+export interface DocumentUpdateData {
+  documentId: string;
+  updates: { title?: string; content?: unknown; tags?: string[]; author?: string };
+}
+
+/**
+ * Update a project document
+ */
+export function useUpdateDocument(projectId: string) {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ documentId, updates }: DocumentUpdateData) => {
+      return await documentService.updateDocument(projectId, documentId, updates);
+    },
+
+    onSuccess: (_, variables) => {
+      // Invalidate documents list to refetch with new content
+      queryClient.invalidateQueries({ queryKey: documentKeys.byProject(projectId) });
+      // Invalidate the specific document detail to update open viewers
+      queryClient.invalidateQueries({ queryKey: documentKeys.detail(projectId, variables.documentId) });
+      showToast("Document updated successfully", "success");
+    },
+
+    onError: (error: Error) => {
+      showToast(`Failed to update document: ${error.message}`, "error");
+    },
+  });
+}
+
+/**
+ * Create a new project document
+ */
+export function useCreateDocument(projectId: string) {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  return useMutation({
+    mutationFn: async (document: {
+      title: string;
+      document_type: string;
+      content?: any;
+      tags?: string[];
+      author?: string;
+    }) => {
+      const response = await callAPIWithETag<{ success: boolean; message: string; document: ProjectDocument }>(
+        `/api/projects/${projectId}/docs`,
+        {
+          method: "POST",
+          body: JSON.stringify(document),
+        },
+      );
+      return response.document;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: documentKeys.byProject(projectId) });
+      showToast("Document created successfully", "success");
+    },
+
+    onError: (error: Error) => {
+      showToast(`Failed to create document: ${error.message}`, "error");
+    },
+  });
+}
+
+/**
+ * Delete a project document
+ */
+export function useDeleteDocument(projectId: string) {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  return useMutation({
+    mutationFn: async (documentId: string) => {
+      return await documentService.deleteDocument(projectId, documentId);
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: documentKeys.byProject(projectId) });
+      showToast("Document deleted successfully", "success");
+    },
+
+    onError: (error: Error) => {
+      showToast(`Failed to delete document: ${error.message}`, "error");
+    },
+  });
+}
diff --git a/archon-ui-main/src/features/projects/documents/services/documentService.ts b/archon-ui-main/src/features/projects/documents/services/documentService.ts
new file mode 100644
index 00000000..c05c70e5
--- /dev/null
+++ b/archon-ui-main/src/features/projects/documents/services/documentService.ts
@@ -0,0 +1,70 @@
+/**
+ * Document Service
+ * Handles API calls for project documents via Archon MCP
+ */
+
+import { callAPIWithETag } from "../../../shared/api/apiClient";
+import type { ProjectDocument } from "../types";
+
+interface DocumentsResponse {
+  success: boolean;
+  documents: ProjectDocument[];
+  count: number;
+  total: number;
+}
+
+export const documentService = {
+  /**
+   * Get all documents for a project
+   */
+  async getDocumentsByProject(projectId: string): Promise<ProjectDocument[]> {
+    const response = await callAPIWithETag<DocumentsResponse>(`/api/projects/${projectId}/docs?include_content=true`);
+    return response.documents || [];
+  },
+
+  /**
+   * Get a single document by ID
+   */
+  async getDocument(projectId: string, documentId: string): Promise<ProjectDocument> {
+    const response = await callAPIWithETag<{ success: boolean; document: ProjectDocument }>(
+      `/api/projects/${projectId}/docs/${documentId}`,
+    );
+    if (!response.document) {
+      throw new Error(`Document not found: ${documentId} in project ${projectId}`);
+    }
+    return response.document;
+  },
+
+  /**
+   * Update a document
+   */
+  async updateDocument(
+    projectId: string,
+    documentId: string,
+    updates: { content?: unknown; title?: string; tags?: string[] },
+  ): Promise<ProjectDocument> {
+    const response = await callAPIWithETag<{ success: boolean; document: ProjectDocument }>(
+      `/api/projects/${projectId}/docs/${documentId}`,
+      {
+        method: "PUT",
+        body: JSON.stringify(updates),
+      },
+    );
+    if (!response.document) {
+      throw new Error(`Failed to update document: ${documentId} in project ${projectId}`);
+    }
+    return response.document;
+  },
+
+  /**
+   * Delete a document
+   */
+  async deleteDocument(projectId: string, documentId: string): Promise<void> {
+    await callAPIWithETag<{ success: boolean; message: string }>(
+      `/api/projects/${projectId}/docs/${documentId}`,
+      {
+        method: "DELETE",
+      },
+    );
+  },
+};
diff --git a/archon-ui-main/src/features/projects/tasks/TasksTab.tsx b/archon-ui-main/src/features/projects/tasks/TasksTab.tsx
index d30da07a..284278e1 100644
--- a/archon-ui-main/src/features/projects/tasks/TasksTab.tsx
+++ b/archon-ui-main/src/features/projects/tasks/TasksTab.tsx
@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { DeleteConfirmModal } from "../../ui/components/DeleteConfirmModal";
-import { Button } from "../../ui/primitives";
+import { Button, Card } from "../../ui/primitives";
 import { cn, glassmorphism } from "../../ui/primitives/styles";
 import { TaskEditModal } from "./components/TaskEditModal";
 import { useDeleteTask, useProjectTasks, useUpdateTask } from "./hooks";
@@ -260,18 +260,17 @@ const ViewControls = ({ viewMode, onViewChange, onAddTask }: ViewControlsProps)
         </Button>
 
         {/* View Toggle Controls with Glassmorphism */}
-        <div
-          className={cn(
-            "flex items-center overflow-hidden pointer-events-auto",
-            glassmorphism.background.subtle,
-            glassmorphism.border.default,
-            glassmorphism.shadow.elevated,
-            "rounded-lg",
-          )}
+        <Card
+          blur="lg"
+          transparency="medium"
+          size="none"
+          className="flex items-center overflow-hidden pointer-events-auto rounded-lg"
         >
           <button
             type="button"
             onClick={() => onViewChange("table")}
+            aria-label="Switch to table view"
+            aria-pressed={viewMode === "table"}
             className={cn(
               "px-5 py-2.5 flex items-center gap-2 relative transition-all duration-300",
               viewMode === "table"
@@ -279,7 +278,7 @@ const ViewControls = ({ viewMode, onViewChange, onAddTask }: ViewControlsProps)
                 : "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300",
             )}
           >
-            <Table className="w-4 h-4" />
+            <Table className="w-4 h-4" aria-hidden="true" />
             <span>Table</span>
             {viewMode === "table" && (
               <span
@@ -296,6 +295,8 @@ const ViewControls = ({ viewMode, onViewChange, onAddTask }: ViewControlsProps)
           <button
             type="button"
             onClick={() => onViewChange("board")}
+            aria-label="Switch to board view"
+            aria-pressed={viewMode === "board"}
             className={cn(
               "px-5 py-2.5 flex items-center gap-2 relative transition-all duration-300",
               viewMode === "board"
@@ -303,7 +304,7 @@ const ViewControls = ({ viewMode, onViewChange, onAddTask }: ViewControlsProps)
                 : "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300",
             )}
           >
-            <LayoutGrid className="w-4 h-4" />
+            <LayoutGrid className="w-4 h-4" aria-hidden="true" />
             <span>Board</span>
             {viewMode === "board" && (
               <span
@@ -316,7 +317,7 @@ const ViewControls = ({ viewMode, onViewChange, onAddTask }: ViewControlsProps)
               />
             )}
           </button>
-        </div>
+        </Card>
       </div>
     </div>
   );
diff --git a/archon-ui-main/src/features/projects/tasks/components/KanbanColumn.tsx b/archon-ui-main/src/features/projects/tasks/components/KanbanColumn.tsx
index c1edb2d8..1c1e2e30 100644
--- a/archon-ui-main/src/features/projects/tasks/components/KanbanColumn.tsx
+++ b/archon-ui-main/src/features/projects/tasks/components/KanbanColumn.tsx
@@ -1,3 +1,4 @@
+import { Activity, CheckCircle2, Eye, ListTodo } from "lucide-react";
 import { useRef } from "react";
 import { useDrop } from "react-dnd";
 import { cn } from "../../../ui/primitives/styles";
@@ -32,71 +33,96 @@ export const KanbanColumn = ({
 }: KanbanColumnProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
-  const [{ isOver }, drop] = useDrop({
+  const [, drop] = useDrop({
     accept: ItemTypes.TASK,
     drop: (item: { id: string; status: Task["status"] }) => {
       if (item.status !== status) {
         onTaskMove(item.id, status);
       }
     },
-    collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-    }),
   });
 
   drop(ref);
 
+  // Get icon and label based on status
+  const getStatusInfo = () => {
+    switch (status) {
+      case "todo":
+        return {
+          icon: <ListTodo className="w-3 h-3" />,
+          label: "Todo",
+          color: "bg-pink-500/10 text-pink-600 dark:text-pink-400 border-pink-500/30",
+        };
+      case "doing":
+        return {
+          icon: <Activity className="w-3 h-3" />,
+          label: "Doing",
+          color: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30",
+        };
+      case "review":
+        return {
+          icon: <Eye className="w-3 h-3" />,
+          label: "Review",
+          color: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30",
+        };
+      case "done":
+        return {
+          icon: <CheckCircle2 className="w-3 h-3" />,
+          label: "Done",
+          color: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30",
+        };
+      default:
+        return {
+          icon: <ListTodo className="w-3 h-3" />,
+          label: "Todo",
+          color: "bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/30",
+        };
+    }
+  };
+
+  const statusInfo = getStatusInfo();
+
   return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex flex-col h-full",
-        "bg-gradient-to-b from-white/20 to-transparent dark:from-black/30 dark:to-transparent",
-        "backdrop-blur-sm",
-        "transition-all duration-200",
-        isOver && "bg-gradient-to-b from-cyan-500/5 to-purple-500/5 dark:from-cyan-400/10 dark:to-purple-400/10",
-        isOver && "border-t-2 border-t-cyan-400/50 dark:border-t-cyan-400/70",
-        isOver &&
-          "shadow-[inset_0_2px_20px_rgba(34,211,238,0.15)] dark:shadow-[inset_0_2px_30px_rgba(34,211,238,0.25)]",
-        isOver && "backdrop-blur-md",
-      )}
-    >
-      {/* Column Header with Glassmorphism */}
-      <div
-        className={cn(
-          "text-center py-3 sticky top-0 z-10",
-          "bg-gradient-to-b from-white/80 to-white/60 dark:from-black/80 dark:to-black/60",
-          "backdrop-blur-md",
-          "border-b border-gray-200/50 dark:border-gray-700/50",
-          "relative",
-        )}
-      >
-        <h3 className={cn("font-mono text-sm font-medium", getColumnColor(status))}>{title}</h3>
-        {/* Column header glow effect */}
+    <div ref={ref} className="flex flex-col h-full">
+      {/* Column Header - pill badge only */}
+      <div className="text-center py-3 relative">
+        <div className="flex items-center justify-center">
+          <div
+            className={cn(
+              "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium border backdrop-blur-md",
+              statusInfo.color
+            )}
+          >
+            {statusInfo.icon}
+            <span className="font-medium">{statusInfo.label}</span>
+            <span className="font-bold">{tasks.length}</span>
+          </div>
+        </div>
+        {/* Colored underline */}
         <div
-          className={cn("absolute bottom-0 left-[15%] right-[15%] w-[70%] mx-auto h-[1px]", getColumnGlow(status))}
+          className={cn(
+            "absolute bottom-0 left-[15%] right-[15%] w-[70%] mx-auto h-[1px]",
+            getColumnGlow(status),
+            "shadow-md",
+          )}
         />
       </div>
 
       {/* Tasks Container */}
       <div className="px-2 flex-1 overflow-y-auto space-y-2 py-3 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700">
-        {tasks.length === 0 ? (
-          <div className={cn("text-center py-8 text-gray-400 dark:text-gray-600 text-sm", "opacity-60")}>No tasks</div>
-        ) : (
-          tasks.map((task, index) => (
-            <TaskCard
-              key={task.id}
-              task={task}
-              index={index}
-              projectId={projectId}
-              onTaskReorder={onTaskReorder}
-              onEdit={onTaskEdit}
-              onDelete={onTaskDelete}
-              hoveredTaskId={hoveredTaskId}
-              onTaskHover={onTaskHover}
-            />
-          ))
-        )}
+        {tasks.map((task, index) => (
+          <TaskCard
+            key={task.id}
+            task={task}
+            index={index}
+            projectId={projectId}
+            onTaskReorder={onTaskReorder}
+            onEdit={onTaskEdit}
+            onDelete={onTaskDelete}
+            hoveredTaskId={hoveredTaskId}
+            onTaskHover={onTaskHover}
+          />
+        ))}
       </div>
     </div>
   );
diff --git a/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx b/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx
index c8e09464..3772de0c 100644
--- a/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx
+++ b/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx
@@ -3,7 +3,9 @@ import type React from "react";
 import { useCallback } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { isOptimistic } from "@/features/shared/utils/optimistic";
+import { Card } from "../../../ui/primitives";
 import { OptimisticIndicator } from "../../../ui/primitives/OptimisticIndicator";
+import { cn } from "../../../ui/primitives/styles";
 import { useTaskActions } from "../hooks";
 import type { Assignee, Task, TaskPriority } from "../types";
 import { getOrderColor, getOrderGlow, ItemTypes } from "../utils/task-styles";
@@ -120,48 +122,40 @@ export const TaskCard: React.FC<TaskCardProps> = ({
     }
   };
 
-  // Glassmorphism styling constants
-  const cardBaseStyles =
-    "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30 border border-gray-200 dark:border-gray-700 rounded-lg backdrop-blur-md";
-  const transitionStyles = "transition-all duration-200 ease-in-out";
-
-  // Subtle highlight effect for related tasks
-  const highlightGlow = isHighlighted ? "border-cyan-400/50 shadow-[0_0_8px_rgba(34,211,238,0.2)]" : "";
-
-  // Selection styling with glassmorphism
-  const selectionGlow = isSelected
-    ? "border-blue-500 shadow-[0_0_12px_rgba(59,130,246,0.4)] bg-blue-50/30 dark:bg-blue-900/20"
-    : "";
-
-  // Beautiful hover effect with glowing borders
-  const hoverEffectClasses =
-    "group-hover:border-cyan-400/70 dark:group-hover:border-cyan-500/50 group-hover:shadow-[0_0_15px_rgba(34,211,238,0.4)] dark:group-hover:shadow-[0_0_15px_rgba(34,211,238,0.6)]";
-
   return (
     // biome-ignore lint/a11y/useSemanticElements: Drag-and-drop card with react-dnd - requires div for drag handle
     <div
       ref={(node) => drag(drop(node))}
-      role="button"
-      tabIndex={0}
-      className={`w-full min-h-[140px] cursor-move relative ${isDragging ? "opacity-50 scale-90" : "scale-100 opacity-100"} ${transitionStyles} group`}
+      role="group"
+      className={cn(
+        "w-full min-h-[140px] cursor-move relative group",
+        "transition-all duration-200 ease-in-out",
+        isDragging ? "opacity-50 scale-90" : "scale-100 opacity-100",
+      )}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleTaskClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (onEdit) {
-            onEdit(task);
-          }
-        }
-      }}
     >
-      <div
-        className={`${cardBaseStyles} ${transitionStyles} ${hoverEffectClasses} ${highlightGlow} ${selectionGlow} ${optimistic ? "opacity-80 ring-1 ring-cyan-400/30" : ""} w-full min-h-[140px] h-full`}
+      <Card
+        blur="md"
+        transparency="light"
+        size="none"
+        className={cn(
+          "transition-all duration-200 ease-in-out",
+          "w-full min-h-[140px] h-full",
+          isHighlighted && "border-cyan-400/50 shadow-[0_0_8px_rgba(34,211,238,0.2)]",
+          isSelected && "border-blue-500 shadow-[0_0_12px_rgba(59,130,246,0.4)]",
+          "group-hover:border-cyan-400/70 dark:group-hover:border-cyan-500/50 group-hover:shadow-[0_0_15px_rgba(34,211,238,0.4)] dark:group-hover:shadow-[0_0_15px_rgba(34,211,238,0.6)]",
+          optimistic && "opacity-80 ring-1 ring-cyan-400/30",
+        )}
       >
         {/* Priority indicator with beautiful glow */}
         <div
-          className={`absolute left-0 top-0 bottom-0 w-[3px] ${getOrderColor(task.task_order)} ${getOrderGlow(task.task_order)} rounded-l-lg opacity-80 group-hover:w-[4px] group-hover:opacity-100 transition-all duration-300`}
+          className={cn(
+            "absolute left-0 top-0 bottom-0 w-[3px] rounded-l-lg opacity-80 group-hover:w-[4px] group-hover:opacity-100 transition-all duration-300",
+            getOrderColor(task.task_order),
+            getOrderGlow(task.task_order),
+          )}
         />
 
         {/* Content container with fixed padding */}
@@ -186,7 +180,7 @@ export const TaskCard: React.FC<TaskCardProps> = ({
             <OptimisticIndicator isOptimistic={optimistic} className="ml-auto" />
 
             {/* Action buttons group */}
-            <div className={`${optimistic ? "" : "ml-auto"} flex items-center gap-1.5`}>
+            <div className={cn("flex items-center gap-1.5", !optimistic && "ml-auto")}>
               <TaskCardActions
                 taskId={task.id}
                 taskTitle={task.title}
@@ -232,7 +226,7 @@ export const TaskCard: React.FC<TaskCardProps> = ({
             />
           </div>
         </div>
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx b/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
index 7d9082ac..28c91711 100644
--- a/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
+++ b/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
@@ -36,10 +36,10 @@ export const getAssigneeGlow = (assigneeName: Assignee) => {
 
 // Get color based on task priority/order
 export const getOrderColor = (order: number) => {
-  if (order <= 3) return "bg-rose-500";
-  if (order <= 6) return "bg-orange-500";
-  if (order <= 10) return "bg-blue-500";
-  return "bg-emerald-500";
+  if (order <= 3) return "bg-rose-500 dark:bg-rose-400";
+  if (order <= 6) return "bg-orange-500 dark:bg-orange-400";
+  if (order <= 10) return "bg-blue-500 dark:bg-blue-400";
+  return "bg-green-500 dark:bg-green-400";
 };
 
 // Get glow effect based on task priority/order
@@ -47,7 +47,7 @@ export const getOrderGlow = (order: number) => {
   if (order <= 3) return "shadow-[0_0_10px_rgba(244,63,94,0.7)]";
   if (order <= 6) return "shadow-[0_0_10px_rgba(249,115,22,0.7)]";
   if (order <= 10) return "shadow-[0_0_10px_rgba(59,130,246,0.7)]";
-  return "shadow-[0_0_10px_rgba(16,185,129,0.7)]";
+  return "shadow-[0_0_10px_rgba(34,197,94,0.7)]";
 };
 
 // Get column header color based on status
@@ -68,12 +68,12 @@ export const getColumnColor = (status: "todo" | "doing" | "review" | "done") =>
 export const getColumnGlow = (status: "todo" | "doing" | "review" | "done") => {
   switch (status) {
     case "todo":
-      return "bg-gray-500/30";
+      return "bg-gray-500/30 dark:bg-gray-400/40";
     case "doing":
-      return "bg-blue-500/30 shadow-[0_0_10px_2px_rgba(59,130,246,0.2)]";
+      return "bg-blue-500/30 dark:bg-blue-400/40 shadow-[0_0_10px_2px_rgba(59,130,246,0.2)] dark:shadow-[0_0_10px_2px_rgba(96,165,250,0.3)]";
     case "review":
-      return "bg-purple-500/30 shadow-[0_0_10px_2px_rgba(168,85,247,0.2)]";
+      return "bg-purple-500/30 dark:bg-purple-400/40 shadow-[0_0_10px_2px_rgba(168,85,247,0.2)] dark:shadow-[0_0_10px_2px_rgba(192,132,252,0.3)]";
     case "done":
-      return "bg-green-500/30 shadow-[0_0_10px_2px_rgba(16,185,129,0.2)]";
+      return "bg-green-500/30 dark:bg-green-400/40 shadow-[0_0_10px_2px_rgba(34,197,94,0.2)] dark:shadow-[0_0_10px_2px_rgba(74,222,128,0.3)]";
   }
 };
diff --git a/archon-ui-main/src/features/projects/tasks/views/BoardView.tsx b/archon-ui-main/src/features/projects/tasks/views/BoardView.tsx
index 35c7334f..5b005010 100644
--- a/archon-ui-main/src/features/projects/tasks/views/BoardView.tsx
+++ b/archon-ui-main/src/features/projects/tasks/views/BoardView.tsx
@@ -37,7 +37,7 @@ export const BoardView = ({
   return (
     <div className="flex flex-col h-full min-h-[70vh] relative">
       {/* Board Columns Grid */}
-      <div className="grid grid-cols-4 gap-1 flex-1 p-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 flex-1 p-2 min-h-[500px]">
         {columns.map(({ status, title }) => (
           <KanbanColumn
             key={status}
diff --git a/archon-ui-main/src/features/projects/tasks/views/TableView.tsx b/archon-ui-main/src/features/projects/tasks/views/TableView.tsx
index 49ac7940..9fe6d02b 100644
--- a/archon-ui-main/src/features/projects/tasks/views/TableView.tsx
+++ b/archon-ui-main/src/features/projects/tasks/views/TableView.tsx
@@ -2,13 +2,20 @@ import { Check, Edit, Tag, Trash2 } from "lucide-react";
 import React, { useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../ui/primitives";
-import { cn } from "../../../ui/primitives/styles";
+import { cn, glassmorphism } from "../../../ui/primitives/styles";
 import { EditableTableCell } from "../components/EditableTableCell";
 import { TaskAssignee } from "../components/TaskAssignee";
 import { useDeleteTask, useUpdateTask } from "../hooks";
 import type { Assignee, Task } from "../types";
 import { getOrderColor, getOrderGlow, ItemTypes } from "../utils/task-styles";
 
+const rowVariants = {
+  even: "bg-white/50 dark:bg-black/50",
+  odd: "bg-gray-50/80 dark:bg-gray-900/30",
+  hover:
+    "hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20",
+} satisfies Record<string, string>;
+
 interface TableViewProps {
   tasks: Task[];
   projectId: string;
@@ -114,11 +121,9 @@ const DraggableRow = ({
     <tr
       ref={(node) => drag(drop(node))}
       className={cn(
-        "group transition-all duration-200 cursor-move",
-        index % 2 === 0 ? "bg-white/50 dark:bg-black/50" : "bg-gray-50/80 dark:bg-gray-900/30",
-        "hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70",
-        "dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20",
-        "border-b border-gray-200 dark:border-gray-800",
+        "group transition-all duration-200 cursor-move border-b border-gray-200 dark:border-gray-800",
+        index % 2 === 0 ? rowVariants.even : rowVariants.odd,
+        rowVariants.hover,
         isDragging && "opacity-50 scale-105 shadow-lg",
         isOver && "bg-cyan-100/50 dark:bg-cyan-900/20 border-cyan-400",
       )}
@@ -178,8 +183,8 @@ const DraggableRow = ({
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="xs" onClick={handleEdit} className="h-7 w-7 p-0">
-                  <Edit className="w-3 h-3" />
+                <Button variant="ghost" size="xs" onClick={handleEdit} className="h-7 w-7 p-0" aria-label="Edit task">
+                  <Edit className="w-3 h-3" aria-hidden="true" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>Edit task</TooltipContent>
@@ -192,8 +197,9 @@ const DraggableRow = ({
                   size="xs"
                   onClick={handleComplete}
                   className="h-7 w-7 p-0 text-green-600 hover:text-green-700"
+                  aria-label="Mark task as complete"
                 >
-                  <Check className="w-3 h-3" />
+                  <Check className="w-3 h-3" aria-hidden="true" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>Mark as complete</TooltipContent>
@@ -207,8 +213,9 @@ const DraggableRow = ({
                   onClick={handleDelete}
                   className="h-7 w-7 p-0 text-red-600 hover:text-red-700"
                   disabled={deleteTaskMutation.isPending}
+                  aria-label="Delete task"
                 >
-                  <Trash2 className="w-3 h-3" />
+                  <Trash2 className="w-3 h-3" aria-hidden="true" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>Delete task</TooltipContent>
@@ -255,7 +262,7 @@ export const TableView = ({
     <div className="overflow-x-auto">
       <table className="w-full">
         <thead>
-          <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+          <tr className={cn(glassmorphism.background.card, "border-b-2 border-gray-200 dark:border-gray-700")}>
             <th className="w-1"></th>
             <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th>
             <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-32">Status</th>
diff --git a/archon-ui-main/src/features/projects/views/ProjectsView.tsx b/archon-ui-main/src/features/projects/views/ProjectsView.tsx
index ceac8176..da1b3b65 100644
--- a/archon-ui-main/src/features/projects/views/ProjectsView.tsx
+++ b/archon-ui-main/src/features/projects/views/ProjectsView.tsx
@@ -1,10 +1,15 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
+import { Activity, CheckCircle2, FileText, LayoutGrid, List, ListTodo, Pin } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useStaggeredEntrance } from "../../../hooks/useStaggeredEntrance";
+import { isOptimistic } from "../../shared/utils/optimistic";
 import { DeleteConfirmModal } from "../../ui/components/DeleteConfirmModal";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/primitives";
+import { OptimisticIndicator } from "../../ui/primitives/OptimisticIndicator";
+import { Button, PillNavigation, SelectableCard } from "../../ui/primitives";
+import { StatPill } from "../../ui/primitives/pill";
+import { cn } from "../../ui/primitives/styles";
 import { NewProjectModal } from "../components/NewProjectModal";
 import { ProjectHeader } from "../components/ProjectHeader";
 import { ProjectList } from "../components/ProjectList";
@@ -44,6 +49,9 @@ export function ProjectsView({ className = "", "data-id": dataId }: ProjectsView
   // State management
   const [selectedProject, setSelectedProject] = useState<Project | null>(null);
   const [activeTab, setActiveTab] = useState("tasks");
+  const [layoutMode, setLayoutMode] = useState<"horizontal" | "sidebar">("horizontal");
+  const [sidebarExpanded, setSidebarExpanded] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
   const [isNewProjectModalOpen, setIsNewProjectModalOpen] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<{
@@ -59,14 +67,20 @@ export function ProjectsView({ className = "", "data-id": dataId }: ProjectsView
   const updateProjectMutation = useUpdateProject();
   const deleteProjectMutation = useDeleteProject();
 
-  // Sort projects - pinned first, then alphabetically
+  // Sort and filter projects
   const sortedProjects = useMemo(() => {
-    return [...(projects as Project[])].sort((a, b) => {
+    // Filter by search query
+    const filtered = (projects as Project[]).filter((project) =>
+      project.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    // Sort: pinned first, then alphabetically
+    return filtered.sort((a, b) => {
       if (a.pinned && !b.pinned) return -1;
       if (!a.pinned && b.pinned) return 1;
       return a.title.localeCompare(b.title);
     });
-  }, [projects]);
+  }, [projects, searchQuery]);
 
   // Handle project selection
   const handleProjectSelect = useCallback(
@@ -165,51 +179,142 @@ export function ProjectsView({ className = "", "data-id": dataId }: ProjectsView
       initial="hidden"
       animate={isVisible ? "visible" : "hidden"}
       variants={containerVariants}
-      className={`max-w-full mx-auto ${className}`}
+      className={cn("max-w-full mx-auto", className)}
       data-id={dataId}
     >
-      <ProjectHeader onNewProject={() => setIsNewProjectModalOpen(true)} />
-
-      <ProjectList
-        projects={sortedProjects}
-        selectedProject={selectedProject}
-        taskCounts={taskCounts}
-        isLoading={isLoadingProjects}
-        error={projectsError as Error | null}
-        onProjectSelect={handleProjectSelect}
-        onPinProject={handlePinProject}
-        onDeleteProject={handleDeleteProject}
-        onRetry={() => queryClient.invalidateQueries({ queryKey: projectKeys.lists() })}
+      <ProjectHeader
+        onNewProject={() => setIsNewProjectModalOpen(true)}
+        layoutMode={layoutMode}
+        onLayoutModeChange={setLayoutMode}
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
       />
 
-      {/* Project Details Section */}
-      {selectedProject && (
-        <motion.div variants={itemVariants} className="relative">
-          <Tabs defaultValue="tasks" value={activeTab} onValueChange={setActiveTab} className="w-full">
-            <TabsList>
-              <TabsTrigger value="docs" className="py-3 font-mono transition-all duration-300" color="blue">
-                Docs
-              </TabsTrigger>
-              <TabsTrigger value="tasks" className="py-3 font-mono transition-all duration-300" color="orange">
-                Tasks
-              </TabsTrigger>
-            </TabsList>
+      {layoutMode === "horizontal" ? (
+        <>
+          <ProjectList
+            projects={sortedProjects}
+            selectedProject={selectedProject}
+            taskCounts={taskCounts}
+            isLoading={isLoadingProjects}
+            error={projectsError as Error | null}
+            onProjectSelect={handleProjectSelect}
+            onPinProject={handlePinProject}
+            onDeleteProject={handleDeleteProject}
+            onRetry={() => queryClient.invalidateQueries({ queryKey: projectKeys.lists() })}
+          />
 
-            {/* Tab content */}
-            <div>
-              {activeTab === "docs" && (
-                <TabsContent value="docs" className="mt-0">
-                  <DocsTab project={selectedProject} />
-                </TabsContent>
-              )}
-              {activeTab === "tasks" && (
-                <TabsContent value="tasks" className="mt-0">
-                  <TasksTab projectId={selectedProject.id} />
-                </TabsContent>
-              )}
+          {/* Project Details Section */}
+          {selectedProject && (
+            <motion.div variants={itemVariants} className="relative">
+              {/* PillNavigation centered, View Toggle on right */}
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex-1" />
+                <PillNavigation
+                  items={[
+                    { id: "docs", label: "Docs", icon: <FileText className="w-4 h-4" /> },
+                    { id: "tasks", label: "Tasks", icon: <ListTodo className="w-4 h-4" /> },
+                  ]}
+                  activeSection={activeTab}
+                  onSectionClick={(id) => setActiveTab(id as string)}
+                  colorVariant="orange"
+                  size="small"
+                  showIcons={true}
+                  showText={true}
+                  hasSubmenus={false}
+                />
+                <div className="flex-1" />
+              </div>
+
+              {/* Tab content */}
+              <div>
+                {activeTab === "docs" && <DocsTab project={selectedProject} />}
+                {activeTab === "tasks" && <TasksTab projectId={selectedProject.id} />}
+              </div>
+            </motion.div>
+          )}
+        </>
+      ) : (
+        /* Sidebar Mode */
+        <div className="flex gap-6">
+          {/* Left Sidebar - Collapsible Project List */}
+          {sidebarExpanded && (
+            <div className="w-64 flex-shrink-0 space-y-2">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">Projects</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSidebarExpanded(false)}
+                  className="px-2"
+                  aria-label="Collapse sidebar"
+                  aria-expanded={sidebarExpanded}
+                >
+                  <List className="w-3 h-3" aria-hidden="true" />
+                </Button>
+              </div>
+              <div className="space-y-2">
+                {sortedProjects.map((project) => (
+                  <SidebarProjectCard
+                    key={project.id}
+                    project={project}
+                    isSelected={selectedProject?.id === project.id}
+                    taskCounts={taskCounts[project.id] || { todo: 0, doing: 0, review: 0, done: 0 }}
+                    onSelect={() => handleProjectSelect(project)}
+                  />
+                ))}
+              </div>
             </div>
-          </Tabs>
-        </motion.div>
+          )}
+
+          {/* Main Content Area - CRITICAL: min-w-0 prevents page expansion */}
+          <div className="flex-1 min-w-0">
+            {selectedProject && (
+              <>
+                {/* Header with project name, tabs, view toggle inline */}
+                <div className="flex items-center gap-4 mb-4">
+                  {!sidebarExpanded && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSidebarExpanded(true)}
+                      className="px-2 flex-shrink-0"
+                      aria-label="Expand sidebar"
+                      aria-expanded={sidebarExpanded}
+                    >
+                      <List className="w-3 h-3 mr-1" aria-hidden="true" />
+                      <span className="text-sm font-medium">{selectedProject.title}</span>
+                    </Button>
+                  )}
+
+                  {/* PillNavigation - ALWAYS CENTERED */}
+                  <div className="flex-1 flex justify-center">
+                    <PillNavigation
+                      items={[
+                        { id: "docs", label: "Docs", icon: <FileText className="w-4 h-4" /> },
+                        { id: "tasks", label: "Tasks", icon: <ListTodo className="w-4 h-4" /> },
+                      ]}
+                      activeSection={activeTab}
+                      onSectionClick={(id) => setActiveTab(id as string)}
+                      colorVariant="orange"
+                      size="small"
+                      showIcons={true}
+                      showText={true}
+                      hasSubmenus={false}
+                    />
+                  </div>
+                  <div className="flex-1" />
+                </div>
+
+                {/* Tab Content */}
+                <div>
+                  {activeTab === "docs" && <DocsTab project={selectedProject} />}
+                  {activeTab === "tasks" && <TasksTab projectId={selectedProject.id} />}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
       )}
 
       {/* Modals */}
@@ -232,3 +337,77 @@ export function ProjectsView({ className = "", "data-id": dataId }: ProjectsView
     </motion.div>
   );
 }
+
+// Sidebar Project Card - compact variant with StatPills
+interface SidebarProjectCardProps {
+  project: Project;
+  isSelected: boolean;
+  taskCounts: {
+    todo: number;
+    doing: number;
+    review: number;
+    done: number;
+  };
+  onSelect: () => void;
+}
+
+const SidebarProjectCard: React.FC<SidebarProjectCardProps> = ({ project, isSelected, taskCounts, onSelect }) => {
+  const optimistic = isOptimistic(project);
+
+  const getBackgroundClass = () => {
+    if (project.pinned)
+      return "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10";
+    if (isSelected)
+      return "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20";
+    return "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30";
+  };
+
+  return (
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={onSelect}
+      size="none"
+      blur="md"
+      className={cn("p-2", getBackgroundClass(), optimistic && "opacity-80 ring-1 ring-cyan-400/30")}
+    >
+      <div className="space-y-2">
+        {/* Title */}
+        <div className="flex items-center justify-between">
+          <h4
+            className={cn(
+              "font-medium text-sm line-clamp-1 flex-1",
+              isSelected ? "text-purple-700 dark:text-purple-300" : "text-gray-700 dark:text-gray-300",
+            )}
+          >
+            {project.title}
+          </h4>
+          <div className="flex items-center gap-1">
+            {project.pinned && (
+              <div
+                className="flex items-center gap-1 px-1.5 py-0.5 bg-purple-500 dark:bg-purple-600 text-white text-[9px] font-bold rounded-full"
+                aria-label="Pinned"
+              >
+                <Pin className="w-2.5 h-2.5" aria-hidden="true" />
+              </div>
+            )}
+            <OptimisticIndicator isOptimistic={optimistic} />
+          </div>
+        </div>
+
+        {/* Status Pills - horizontal layout with icons */}
+        <div className="flex items-center gap-1.5">
+          <StatPill color="pink" value={taskCounts.todo} size="sm" icon={<ListTodo className="w-3 h-3" />} />
+          <StatPill
+            color="blue"
+            value={taskCounts.doing + taskCounts.review}
+            size="sm"
+            icon={<Activity className="w-3 h-3" />}
+          />
+          <StatPill color="green" value={taskCounts.done} size="sm" icon={<CheckCircle2 className="w-3 h-3" />} />
+        </div>
+      </div>
+    </SelectableCard>
+  );
+};
diff --git a/archon-ui-main/src/features/shared/api/apiClient.ts b/archon-ui-main/src/features/shared/api/apiClient.ts
index 5d7d4713..e766fbed 100644
--- a/archon-ui-main/src/features/shared/api/apiClient.ts
+++ b/archon-ui-main/src/features/shared/api/apiClient.ts
@@ -60,10 +60,10 @@ export async function callAPIWithETag<T = unknown>(endpoint: string, options: Re
 
     // Only set Content-Type for requests that have a body (POST, PUT, PATCH, etc.)
     // GET and DELETE requests should not have Content-Type header
-    const method = options.method?.toUpperCase() || 'GET';
+    const method = options.method?.toUpperCase() || "GET";
     const hasBody = options.body !== undefined && options.body !== null;
-    if (hasBody && !headers['Content-Type']) {
-      headers['Content-Type'] = 'application/json';
+    if (hasBody && !headers["Content-Type"]) {
+      headers["Content-Type"] = "application/json";
     }
 
     // Make the request with timeout
diff --git a/archon-ui-main/src/features/style-guide/components.json b/archon-ui-main/src/features/style-guide/components.json
new file mode 100644
index 00000000..0d04e97e
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/components.json
@@ -0,0 +1,210 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "version": "1.0.0",
+  "description": "Archon UI Component Reference for AI Agents and Developers",
+  "categories": {
+    "navigation": {
+      "description": "Navigation components for app and page-level navigation",
+      "components": [
+        {
+          "name": "MainNavigation",
+          "path": "archon-ui-main/src/components/layout/Navigation.tsx",
+          "usage": "Fixed left sidebar navigation with glassmorphism, tooltips, and active state indicators",
+          "props": ["className?"],
+          "example": "Fixed position, icon-based, tooltip on hover, neon glow on active"
+        },
+        {
+          "name": "PageTabs",
+          "path": "archon-ui-main/src/features/ui/primitives/tabs.tsx (Radix Tabs)",
+          "usage": "Top-level page navigation tabs (e.g., Docs/Tasks in Projects)",
+          "props": ["defaultValue", "value", "onValueChange"],
+          "example": "See Projects page (Docs/Tasks tabs) - archon-ui-main/src/features/projects/views/ProjectsView.tsx:188-210"
+        },
+        {
+          "name": "ViewToggleButtons",
+          "path": "archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx:88-118",
+          "usage": "Toggle between grid and table views",
+          "props": ["viewMode", "onViewModeChange"],
+          "example": "Grid/List icon buttons with active state styling"
+        }
+      ]
+    },
+    "layouts": {
+      "description": "Page layout patterns",
+      "components": [
+        {
+          "name": "CardGridLayout",
+          "path": "archon-ui-main/src/features/projects/components/ProjectList.tsx:100-117",
+          "usage": "Horizontal scrolling card grid for project cards or similar items",
+          "pattern": "flex gap-4 overflow-x-auto with min-w-max",
+          "example": "Projects page - horizontal scrollable cards",
+          "variant": "horizontal (default)"
+        },
+        {
+          "name": "SidebarListLayout",
+          "path": "archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx",
+          "usage": "Sidebar navigation list with compact cards and search",
+          "pattern": "Fixed left column (w-72) with vertical list, Input for search, main content on right (flex-1)",
+          "example": "Projects page sidebar variant - vertical list with smaller cards",
+          "variant": "sidebar (alternative to horizontal cards)"
+        },
+        {
+          "name": "BentoGridLayout",
+          "path": "archon-ui-main/src/pages/SettingsPage.tsx:125-223",
+          "usage": "Two-column responsive grid for collapsible settings cards",
+          "pattern": "grid grid-cols-1 lg:grid-cols-2 gap-6",
+          "example": "Settings page - left/right column layout"
+        },
+        {
+          "name": "ResponsiveGridLayout",
+          "path": "archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx:158-183",
+          "usage": "Responsive grid for card items (1/2/3/4 columns)",
+          "pattern": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
+          "example": "Knowledge page grid view"
+        },
+        {
+          "name": "TableLayout",
+          "path": "archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx:68-209",
+          "usage": "Table with glassmorphism styling, hover states, and action buttons",
+          "pattern": "overflow-x-auto wrapper with full-width table",
+          "example": "Knowledge page table view"
+        }
+      ]
+    },
+    "cards": {
+      "description": "Card components for various use cases",
+      "components": [
+        {
+          "name": "ProjectCard",
+          "path": "archon-ui-main/src/features/projects/components/ProjectCard.tsx",
+          "usage": "Card with real-time data (task counts), selection states, pinned indicator",
+          "features": ["glassmorphism", "hover effects", "neon glow borders", "task count pills", "pin badge"],
+          "example": "w-72 min-h-[180px] with gradient backgrounds"
+        },
+        {
+          "name": "CollapsibleSettingsCard",
+          "path": "archon-ui-main/src/components/ui/CollapsibleSettingsCard.tsx",
+          "usage": "Collapsible card with PowerButton toggle and flicker animation",
+          "features": ["expand/collapse", "localStorage persistence", "accent colors"],
+          "example": "Settings page cards"
+        },
+        {
+          "name": "GlassCard (Primitive)",
+          "path": "archon-ui-main/src/features/ui/primitives/card.tsx",
+          "usage": "Base glassmorphism card with configurable blur, transparency, tints, edges",
+          "props": ["blur?", "transparency?", "glassTint?", "edgePosition?", "edgeColor?", "size?"],
+          "example": "See GlassCardConfigurator for all options"
+        }
+      ]
+    },
+    "information_display": {
+      "description": "Patterns for displaying structured information",
+      "components": [
+        {
+          "name": "DocumentBrowser",
+          "path": "archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx",
+          "usage": "Modal for displaying documents, code, logs, or structured information with tabs and search",
+          "features": [
+            "Dialog modal",
+            "Tabs navigation",
+            "Search filtering",
+            "Expandable content",
+            "Code syntax highlighting"
+          ],
+          "radix_used": ["Dialog", "Tabs", "Input"],
+          "pattern": "Dialog + Tabs + Search input + Collapsible items with expand/collapse",
+          "example": "Knowledge inspector, document viewer, code browser, log viewer"
+        }
+      ]
+    },
+    "buttons": {
+      "description": "Button components and variants",
+      "components": [
+        {
+          "name": "Button (Primitive)",
+          "path": "archon-ui-main/src/features/ui/primitives/button.tsx",
+          "usage": "Base button with glassmorphism variants",
+          "variants": ["default", "destructive", "outline", "ghost", "cyan", "purple", "green"],
+          "sizes": ["sm", "md", "lg", "icon"],
+          "example": "See ButtonConfigurator for all variants"
+        }
+      ]
+    },
+    "radix_primitives": {
+      "description": "Radix UI primitives with Archon glassmorphism styling",
+      "components": [
+        {
+          "name": "Tabs",
+          "path": "archon-ui-main/src/features/ui/primitives/tabs.tsx",
+          "usage": "Tab navigation with color variants and neon glow effects",
+          "radix_package": "@radix-ui/react-tabs",
+          "parts": ["Tabs", "TabsList", "TabsTrigger", "TabsContent"],
+          "props": ["defaultValue", "value", "onValueChange", "color (cyan|blue|purple|orange|green|pink)"],
+          "example": "Projects page Docs/Tasks tabs"
+        },
+        {
+          "name": "Select",
+          "path": "archon-ui-main/src/features/ui/primitives/select.tsx",
+          "usage": "Dropdown select with glassmorphism and color variants",
+          "radix_package": "@radix-ui/react-select",
+          "parts": ["Select", "SelectTrigger", "SelectValue", "SelectContent", "SelectItem"],
+          "props": ["value", "onValueChange", "color (purple|blue|green|pink|orange|cyan)"],
+          "example": "Configurators use Select for all dropdowns"
+        },
+        {
+          "name": "Dialog",
+          "path": "archon-ui-main/src/features/ui/primitives/dialog.tsx",
+          "usage": "Modal dialogs with glassmorphism backdrop",
+          "radix_package": "@radix-ui/react-dialog",
+          "parts": ["Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "DialogDescription"],
+          "props": ["open", "onOpenChange"],
+          "example": "NewProjectModal, EditTaskModal"
+        },
+        {
+          "name": "Checkbox",
+          "path": "archon-ui-main/src/features/ui/primitives/checkbox.tsx",
+          "usage": "Styled checkbox with color variants",
+          "radix_package": "@radix-ui/react-checkbox",
+          "parts": ["Checkbox"],
+          "props": ["checked", "onCheckedChange", "color (cyan|purple|blue|green|etc)"],
+          "example": "Settings toggles, NavigationConfigurator"
+        },
+        {
+          "name": "Switch",
+          "path": "archon-ui-main/src/features/ui/primitives/switch.tsx",
+          "usage": "Toggle switch with smooth animations",
+          "radix_package": "@radix-ui/react-switch",
+          "parts": ["Switch"],
+          "props": ["checked", "onCheckedChange"],
+          "example": "Feature toggles in Settings"
+        },
+        {
+          "name": "Tooltip",
+          "path": "archon-ui-main/src/features/ui/primitives/tooltip.tsx",
+          "usage": "Hover tooltips with glassmorphism",
+          "radix_package": "@radix-ui/react-tooltip",
+          "parts": ["TooltipProvider", "Tooltip", "TooltipTrigger", "TooltipContent"],
+          "props": ["delayDuration", "side", "align"],
+          "example": "Navigation sidebar icons"
+        },
+        {
+          "name": "DropdownMenu",
+          "path": "archon-ui-main/src/features/ui/primitives/dropdown-menu.tsx",
+          "usage": "Context menus with glassmorphism",
+          "radix_package": "@radix-ui/react-dropdown-menu",
+          "parts": ["DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem"],
+          "example": "ProjectCardActions, context menus"
+        },
+        {
+          "name": "ToggleGroup",
+          "path": "archon-ui-main/src/features/ui/primitives/toggle-group.tsx",
+          "usage": "Mutually exclusive button group",
+          "radix_package": "@radix-ui/react-toggle-group",
+          "parts": ["ToggleGroup", "ToggleGroupItem"],
+          "props": ["type (single|multiple)", "value", "onValueChange"],
+          "example": "KnowledgeHeader type filter"
+        }
+      ]
+    }
+  }
+}
diff --git a/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx
new file mode 100644
index 00000000..da082c8c
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx
@@ -0,0 +1,51 @@
+import { Layout, Palette } from "lucide-react";
+import { useState } from "react";
+import { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
+import { ThemeToggle } from "../../../components/ui/ThemeToggle";
+import { LayoutsTab } from "../tabs/LayoutsTab";
+import { StyleGuideTab } from "../tabs/StyleGuideTab";
+
+export const StyleGuideView = () => {
+  const [activeTab, setActiveTab] = useState<"style-guide" | "layouts">("style-guide");
+
+  const navigationItems: PillNavigationItem[] = [
+    { id: "style-guide", label: "Style Guide", icon: <Palette className="w-4 h-4" /> },
+    { id: "layouts", label: "Layouts", icon: <Layout className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="space-y-12">
+      {/* Header */}
+      <div className="relative">
+        <div className="absolute top-0 right-0">
+          <ThemeToggle accentColor="blue" />
+        </div>
+        <div className="text-center space-y-4">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Archon UI Style Guide</h1>
+          <p className="text-gray-600 dark:text-gray-400 text-lg max-w-2xl mx-auto">
+            Design system foundations and layout patterns for building consistent interfaces.
+          </p>
+        </div>
+      </div>
+
+      {/* Tab Navigation - Blue Pill Navigation */}
+      <div className="flex justify-center">
+        <PillNavigation
+          items={navigationItems}
+          activeSection={activeTab}
+          onSectionClick={(id) => setActiveTab(id as typeof activeTab)}
+          colorVariant="blue"
+          showIcons={true}
+          showText={true}
+          hasSubmenus={false}
+        />
+      </div>
+
+      {/* Tab Content */}
+      <div>
+        {activeTab === "style-guide" && <StyleGuideTab />}
+        {activeTab === "layouts" && <LayoutsTab />}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/index.ts b/archon-ui-main/src/features/style-guide/index.ts
new file mode 100644
index 00000000..4578ae94
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/index.ts
@@ -0,0 +1,5 @@
+export { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
+export { StyleGuideView } from "./components/StyleGuideView";
+export { SideNavigation } from "./shared/SideNavigation";
+export { LayoutsTab } from "./tabs/LayoutsTab";
+export { StyleGuideTab } from "./tabs/StyleGuideTab";
diff --git a/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx b/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx
new file mode 100644
index 00000000..3f749c0e
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx
@@ -0,0 +1,241 @@
+import { Code, FileText, Globe, Search } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { Dialog, DialogContent } from "@/features/ui/primitives/dialog";
+import { Input } from "@/features/ui/primitives/input";
+import { cn } from "@/features/ui/primitives/styles";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/features/ui/primitives/tabs";
+
+const MOCK_DOCUMENTS = [
+  {
+    id: "1",
+    title: "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS](https://workos.com)",
+    preview: "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS]...",
+    content:
+      "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS](https://workos.com)\n\n[ThemesThemes](https://www.radix-ui.com/)[PrimitivesPrimitives](https://www.radix-ui.com/primitives)[IconsIcons](https://www.radix-ui.com/icons)[ColorsColors](https://www.radix-ui.com/colors)\n\n[Documentation](https://www.radix-ui.com/themes/docs/overview/getting-started)[Playground](https://www.radix-ui.com/themes/playground)[Blog](https://www.radix-ui.com/blog)[](https://github.com/radix-ui/themes)",
+    sourceType: "Web" as const,
+    category: "Technical" as const,
+    url: "https://www.radix-ui.com/primitives/docs/guides/styling",
+  },
+  {
+    id: "2",
+    title: "Deleted report #34",
+    preview: "7-4d586f394674?&w=64&h=64&dpr=2&q=70&crop=faces...",
+    content: "Detailed report content...",
+    sourceType: "Document" as const,
+    category: "Technical" as const,
+  },
+  {
+    id: "3",
+    title: "Latest updates",
+    preview: "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS]...",
+    content: "Latest updates and changes...",
+    sourceType: "Web" as const,
+    category: "Technical" as const,
+    url: "https://www.radix-ui.com",
+  },
+];
+
+const MOCK_CODE = [
+  {
+    id: "1",
+    language: "typescript",
+    summary: "React component example",
+    code: `const Example = () => {\n  return <div>Hello</div>;\n};`,
+  },
+  {
+    id: "2",
+    language: "python",
+    summary: "FastAPI endpoint",
+    code: `@app.get("/api/test")\nasync def test():\n    return {"status": "ok"}`,
+  },
+];
+
+export const DocumentBrowserExample = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        <strong>Use this pattern for:</strong> Document browser with header showing source type pills (Web
+        Page/Document), knowledge type badges (Technical/Business), and StatPills for counts. Uses Radix primitives for
+        all components.
+      </p>
+
+      <Button onClick={() => setOpen(true)}>Open Document Browser Example</Button>
+
+      <DocumentBrowserModal open={open} onOpenChange={setOpen} />
+    </div>
+  );
+};
+
+const DocumentBrowserModal = ({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) => {
+  const [activeTab, setActiveTab] = useState<"documents" | "code">("documents");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedDoc, setSelectedDoc] = useState(MOCK_DOCUMENTS[0]);
+  const [selectedCode, setSelectedCode] = useState(MOCK_CODE[0]);
+
+  const filteredDocuments = MOCK_DOCUMENTS.filter((doc) => doc.title.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const filteredCode = MOCK_CODE.filter((example) => example.summary.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-6xl h-[80vh] flex flex-col p-0">
+        {/* Header - EXACT layout from InspectorHeader.tsx line 31-93 */}
+        <div className="px-6 py-4 border-b border-white/10">
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-white mb-2">Radix UI</h2>
+              <div className="flex flex-wrap items-center gap-3">
+                {/* Source Type Badge - exact classes from InspectorHeader line 37-56 */}
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                  <Globe className="w-3.5 h-3.5" />
+                  Web
+                </span>
+
+                {/* Knowledge Type Badge - exact classes from InspectorHeader line 59-78 */}
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
+                  <span>Technical</span>
+                </span>
+
+                {/* URL - exact classes from InspectorHeader line 81-90 */}
+                <a
+                  href="https://www.radix-ui.com/primitives/docs/guides/styling"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-cyan-400 hover:text-cyan-300 truncate max-w-xs"
+                >
+                  https://www.radix-ui.com/primitives/docs/guides/styling
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Tabs and Content */}
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as typeof activeTab)}
+          className="flex-1 flex flex-col px-6"
+        >
+          <div className="flex justify-start mb-4 mt-6">
+            <TabsList>
+              <TabsTrigger value="documents" color="cyan">
+                <FileText className="w-4 h-4" />
+                Documents
+              </TabsTrigger>
+              <TabsTrigger value="code" color="cyan">
+                <Code className="w-4 h-4" />
+                Code Examples
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* Documents Tab - Left Sidebar + Right Content */}
+          <TabsContent value="documents" className="flex-1 flex">
+            {/* Left Sidebar */}
+            <div className="w-80 flex flex-col pr-4 border-r border-gray-700">
+              <div className="relative mb-4">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Input
+                  placeholder="Search documents..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+
+              <div className="flex-1 overflow-y-auto space-y-2">
+                {filteredDocuments.map((doc) => (
+                  <button
+                    key={doc.id}
+                    type="button"
+                    onClick={() => setSelectedDoc(doc)}
+                    className={cn(
+                      "w-full text-left p-3 rounded-lg transition-colors",
+                      selectedDoc.id === doc.id ? "bg-cyan-500/10 border border-cyan-500/30" : "hover:bg-white/5",
+                    )}
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <FileText className="w-4 h-4 text-cyan-400" />
+                      <span className="font-medium text-sm text-white line-clamp-1">{doc.title}</span>
+                    </div>
+                    <p className="text-xs text-gray-400 line-clamp-2">{doc.preview}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Right Content */}
+            <div className="flex-1 overflow-y-auto pl-6">
+              {/* Header with badges and URL */}
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-400">
+                    <Globe className="w-3.5 h-3.5" />
+                    {selectedDoc.sourceType}
+                  </span>
+                  <span className="px-2 py-1 text-xs rounded-md font-medium bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
+                    {selectedDoc.category}
+                  </span>
+                </div>
+                {selectedDoc.url && (
+                  <a
+                    href={selectedDoc.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-cyan-400 hover:text-cyan-300 inline-block mb-4"
+                  >
+                    {selectedDoc.url}
+                  </a>
+                )}
+              </div>
+
+              <div className="prose prose-invert max-w-none">
+                <p className="text-gray-300 whitespace-pre-wrap">{selectedDoc.content}</p>
+              </div>
+            </div>
+          </TabsContent>
+
+          {/* Code Tab - Left Sidebar + Right Content */}
+          <TabsContent value="code" className="flex-1 flex">
+            {/* Left Sidebar */}
+            <div className="w-80 flex flex-col pr-4 border-r border-gray-700">
+              <div className="flex-1 overflow-y-auto space-y-2">
+                {filteredCode.map((code) => (
+                  <button
+                    key={code.id}
+                    type="button"
+                    onClick={() => setSelectedCode(code)}
+                    className={cn(
+                      "w-full text-left p-3 rounded-lg transition-colors",
+                      selectedCode.id === code.id ? "bg-cyan-500/10 border border-cyan-500/30" : "hover:bg-white/5",
+                    )}
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <Code className="w-4 h-4 text-cyan-400" />
+                      <span className="px-2 py-0.5 text-xs bg-cyan-500/20 text-cyan-400 rounded">{code.language}</span>
+                    </div>
+                    <p className="text-xs text-gray-400 line-clamp-2">{code.summary}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Right Content */}
+            <div className="flex-1 overflow-y-auto pl-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-semibold text-white">{selectedCode.summary}</h3>
+                <span className="px-2 py-1 text-xs bg-cyan-500/20 text-cyan-400 rounded">{selectedCode.language}</span>
+              </div>
+              <pre className="bg-black/30 rounded-lg p-4 overflow-x-auto scrollbar-hide">
+                <code className="text-gray-300 text-sm">{selectedCode.code}</code>
+              </pre>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
new file mode 100644
index 00000000..0f394cf6
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
@@ -0,0 +1,310 @@
+import { Asterisk, Calendar, Code, FileCode, FileText, Globe, Grid, List, Terminal } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { DataCard, DataCardContent, DataCardFooter, DataCardHeader } from "@/features/ui/primitives/data-card";
+import { GroupedCard } from "@/features/ui/primitives/grouped-card";
+import { Input } from "@/features/ui/primitives/input";
+import { StatPill } from "@/features/ui/primitives/pill";
+import { cn } from "@/features/ui/primitives/styles";
+import { ToggleGroup, ToggleGroupItem } from "@/features/ui/primitives/toggle-group";
+
+const MOCK_KNOWLEDGE_ITEMS = [
+  {
+    id: "1",
+    title: "React Documentation",
+    type: "technical",
+    url: "https://react.dev",
+    date: "2024-01-15",
+    chunks: 145,
+    codeExamples: 23,
+  },
+  {
+    id: "2",
+    title: "Product Requirements",
+    type: "business",
+    url: null,
+    date: "2024-01-20",
+    chunks: 23,
+    codeExamples: 0,
+  },
+  {
+    id: "3",
+    title: "FastAPI Guide",
+    type: "technical",
+    url: "https://fastapi.tiangolo.com",
+    date: "2024-01-18",
+    chunks: 89,
+    codeExamples: 15,
+  },
+  {
+    id: "4",
+    title: "TailwindCSS Docs",
+    type: "technical",
+    url: "https://tailwindcss.com",
+    date: "2024-01-22",
+    chunks: 112,
+    codeExamples: 31,
+  },
+  {
+    id: "5",
+    title: "Marketing Strategy",
+    type: "business",
+    url: null,
+    date: "2024-01-10",
+    chunks: 15,
+    codeExamples: 0,
+  },
+  {
+    id: "6",
+    title: "TypeScript Handbook",
+    type: "technical",
+    url: "https://www.typescriptlang.org/docs",
+    date: "2024-01-25",
+    chunks: 203,
+    codeExamples: 47,
+  },
+];
+
+export const KnowledgeLayoutExample = () => {
+  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
+  const [typeFilter, setTypeFilter] = useState("all");
+
+  const filteredItems = useMemo(() => {
+    if (typeFilter === "all") return MOCK_KNOWLEDGE_ITEMS;
+    return MOCK_KNOWLEDGE_ITEMS.filter((item) => item.type === typeFilter);
+  }, [typeFilter]);
+
+  return (
+    <div className="space-y-4">
+      {/* Explanation Text */}
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        <strong>Use this layout for:</strong> Switchable views (grid/table/list), filterable data, search interfaces.
+        Users can toggle between dense (table) and spacious (grid) layouts.
+      </p>
+
+      {/* Header with Controls */}
+      <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+        <Input placeholder="Search knowledge base..." className="max-w-xs" />
+
+        <div className="flex gap-2 items-center">
+          {/* Type Filter */}
+          <ToggleGroup
+            type="single"
+            size="sm"
+            value={typeFilter}
+            onValueChange={(v) => v && setTypeFilter(v)}
+            aria-label="Filter type"
+          >
+            <ToggleGroupItem value="all" aria-label="All" title="All">
+              <Asterisk className="w-4 h-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="technical" aria-label="Technical" title="Technical">
+              <Terminal className="w-4 h-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="business" aria-label="Business" title="Business">
+              <FileCode className="w-4 h-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+
+          {/* View Toggle */}
+          <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setViewMode("grid")}
+              className={cn("px-3", viewMode === "grid" && "bg-cyan-500/20 text-cyan-400")}
+            >
+              <Grid className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setViewMode("table")}
+              className={cn("px-3", viewMode === "table" && "bg-cyan-500/20 text-cyan-400")}
+            >
+              <List className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Conditional View Rendering */}
+      {viewMode === "grid" ? (
+        // Grid View - Responsive columns
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {filteredItems.map((item) => (
+            <KnowledgeCard key={item.id} item={item} />
+          ))}
+        </div>
+      ) : (
+        // Table View - matching TaskView standard pattern
+        <div className="w-full">
+          <div className="overflow-x-auto scrollbar-hide">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Source</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Chunks</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredItems.map((item, index) => (
+                  <KnowledgeTableRow key={item.id} item={item} index={index} />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Grouped Card Example */}
+      <div className="mt-8 space-y-4">
+        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Grouped Knowledge Cards</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Multiple related items stacked together with progressive scaling and fading edge lights
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <GroupedCard
+            cards={[
+              { id: "1", title: "React Hooks Guide", edgeColor: "cyan" },
+              { id: "2", title: "React Components", edgeColor: "cyan" },
+              { id: "3", title: "React Patterns", edgeColor: "cyan" },
+            ]}
+            className="h-[280px]"
+          />
+          <GroupedCard
+            cards={[
+              { id: "4", title: "API Documentation", edgeColor: "purple" },
+              { id: "5", title: "API Examples", edgeColor: "purple" },
+            ]}
+            className="h-[280px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Grid Card Component - using DataCard primitive
+const KnowledgeCard = ({ item }: { item: (typeof MOCK_KNOWLEDGE_ITEMS)[0] }) => {
+  const isUrl = !!item.url;
+  const isTechnical = item.type === "technical";
+
+  const getEdgeColor = (): "cyan" | "purple" | "blue" | "pink" => {
+    if (isTechnical) return isUrl ? "cyan" : "purple";
+    return isUrl ? "blue" : "pink";
+  };
+
+  return (
+    <DataCard
+      edgePosition="top"
+      edgeColor={getEdgeColor()}
+      blur="md"
+      className="cursor-pointer hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-shadow"
+    >
+      <DataCardHeader>
+        <div className="flex items-center gap-2 mb-3">
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium",
+              isUrl
+                ? "bg-cyan-100 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-400"
+                : "bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400",
+            )}
+          >
+            {isUrl ? <Globe className="w-3.5 h-3.5" /> : <FileText className="w-3.5 h-3.5" />}
+            <span>{isUrl ? "Web Page" : "Document"}</span>
+          </div>
+          <span
+            className={cn(
+              "px-2 py-1 text-xs rounded-md font-medium",
+              item.type === "technical"
+                ? "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+                : "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+            )}
+          >
+            {item.type}
+          </span>
+        </div>
+
+        <h4 className="font-medium text-gray-900 dark:text-white mb-2 line-clamp-2">{item.title}</h4>
+
+        {item.url && <div className="text-xs text-gray-600 dark:text-gray-400 truncate">{item.url}</div>}
+      </DataCardHeader>
+
+      <DataCardContent />
+
+      <DataCardFooter>
+        <div className="flex items-center justify-between text-xs">
+          <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
+            <Calendar className="w-3 h-3" />
+            <span>{item.date}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <StatPill
+              color="orange"
+              value={item.chunks}
+              icon={<FileText className="w-3.5 h-3.5" />}
+              size="sm"
+              onClick={() => console.log("View documents")}
+              className="cursor-pointer hover:scale-105 transition-transform"
+            />
+            <StatPill
+              color="blue"
+              value={item.codeExamples}
+              icon={<Code className="w-3.5 h-3.5" />}
+              size="sm"
+              onClick={() => console.log("View code examples")}
+              className="cursor-pointer hover:scale-105 transition-transform"
+            />
+          </div>
+        </div>
+      </DataCardFooter>
+    </DataCard>
+  );
+};
+
+// Table Row Component - matching TaskView standard pattern
+const KnowledgeTableRow = ({ item, index }: { item: (typeof MOCK_KNOWLEDGE_ITEMS)[0]; index: number }) => {
+  return (
+    <tr
+      className={cn(
+        "group transition-all duration-200 cursor-pointer",
+        index % 2 === 0 ? "bg-white/50 dark:bg-black/50" : "bg-gray-50/80 dark:bg-gray-900/30",
+        "hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20",
+        "border-b border-gray-200 dark:border-gray-800",
+      )}
+    >
+      <td className="px-4 py-2">
+        <div className="flex items-center gap-2">
+          {item.url ? (
+            <Globe className="w-4 h-4 text-cyan-500 flex-shrink-0" />
+          ) : (
+            <FileText className="w-4 h-4 text-purple-500 flex-shrink-0" />
+          )}
+          <span className="font-medium text-sm text-gray-900 dark:text-white">{item.title}</span>
+        </div>
+      </td>
+      <td className="px-4 py-2">
+        <span
+          className={cn(
+            "px-2 py-1 text-xs rounded-md font-medium inline-block",
+            item.type === "technical"
+              ? "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+              : "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+          )}
+        >
+          {item.type}
+        </span>
+      </td>
+      <td className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 max-w-xs truncate">
+        {item.url || "Uploaded Document"}
+      </td>
+      <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">{item.chunks}</td>
+      <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">{item.date}</td>
+    </tr>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx b/archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx
new file mode 100644
index 00000000..8ae2fc41
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx
@@ -0,0 +1,78 @@
+import { ChevronRight } from "lucide-react";
+
+export const NavigationExplanation = () => {
+  return (
+    <div className="space-y-8">
+      {/* Navigation Hierarchy at Top */}
+      <div className="bg-white/80 dark:bg-black/40 border border-gray-300 dark:border-gray-700 rounded-lg p-6">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Navigation Hierarchy</h3>
+        <div className="flex items-center gap-2 text-sm flex-wrap">
+          <span className="px-3 py-1 bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 rounded border border-cyan-400/30 font-medium">
+            Main Nav
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <span className="px-3 py-1 bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded border border-purple-400/30 font-medium">
+            Content Area
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <span className="px-3 py-1 bg-blue-500/20 text-blue-700 dark:text-blue-400 rounded border border-blue-400/30 font-medium">
+            Page Tabs
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <span className="px-3 py-1 bg-green-500/20 text-green-700 dark:text-green-400 rounded border border-green-400/30 font-medium">
+            View Controls
+          </span>
+        </div>
+      </div>
+
+      {/* Wireframe Mockup */}
+      <div className="relative h-[500px]">
+        {/* Main Navigation - Floating Left (Centered Vertically) */}
+        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[72px] flex flex-col items-center gap-2">
+          <div className="text-xs font-semibold text-cyan-700 dark:text-cyan-400">Main Navigation</div>
+          <div className="w-full h-[250px] bg-cyan-200 dark:bg-cyan-900/30 rounded-lg border-2 border-cyan-500/50 flex items-center justify-center p-2">
+            <span className="text-[10px] text-cyan-700 dark:text-cyan-400 text-center">Floating</span>
+          </div>
+        </div>
+
+        {/* Content Area - Full Width (with left padding for nav) */}
+        <div className="pl-20 h-full flex flex-col gap-2">
+          <div className="text-xs font-semibold text-purple-700 dark:text-purple-400">Content Area</div>
+          <div className="flex-1 bg-purple-100 dark:bg-purple-900/20 rounded-lg border-2 border-purple-500/50 p-4 space-y-3">
+            {/* Page Tabs - Pill Shaped */}
+            <div className="space-y-1">
+              <div className="text-[10px] font-semibold text-blue-700 dark:text-blue-400">
+                Page Navigation (Pill Tabs)
+              </div>
+              <div className="h-10 w-48 mx-auto bg-blue-200 dark:bg-blue-900/30 rounded-full border-2 border-blue-500/50 flex items-center justify-center">
+                <span className="text-xs text-blue-700 dark:text-blue-400">Docs | Tasks</span>
+              </div>
+            </div>
+
+            {/* View Controls */}
+            <div className="flex items-center justify-end gap-2">
+              <div className="text-[10px] font-semibold text-green-700 dark:text-green-400">View Controls</div>
+              <div className="h-8 w-20 bg-green-200 dark:bg-green-900/30 rounded-lg border-2 border-green-500/50 flex items-center justify-center">
+                <span className="text-xs text-green-700 dark:text-green-400">Grid/List</span>
+              </div>
+            </div>
+
+            {/* Content Placeholder */}
+            <div className="flex-1 bg-gray-200 dark:bg-gray-800 rounded-lg border-2 border-gray-400 dark:border-gray-600 flex items-center justify-center">
+              <span className="text-sm text-gray-600 dark:text-gray-400">Page Content</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Key Point */}
+      <div className="bg-orange-100 dark:bg-orange-500/10 border border-orange-400/50 rounded-lg p-4">
+        <p className="text-sm text-gray-800 dark:text-gray-200">
+          <strong className="text-orange-700 dark:text-orange-400">Important:</strong> Main navigation is OUTSIDE the
+          content area (fixed position). All page layouts (including sidebar variants) exist INSIDE the content area and
+          use relative positioning to avoid overlapping with the main nav.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
new file mode 100644
index 00000000..d4d4175c
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
@@ -0,0 +1,939 @@
+import {
+  Activity,
+  CheckCircle2,
+  Copy,
+  Edit,
+  FileText,
+  LayoutGrid,
+  List,
+  ListTodo,
+  Pin,
+  Search,
+  Table as TableIcon,
+  Tag,
+  Trash2,
+  User,
+} from "lucide-react";
+import { useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Button } from "@/features/ui/primitives/button";
+import { DraggableCard } from "@/features/ui/primitives/draggable-card";
+import { Input } from "@/features/ui/primitives/input";
+import { StatPill } from "@/features/ui/primitives/pill";
+import { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
+import { SelectableCard } from "@/features/ui/primitives/selectable-card";
+import { cn } from "@/features/ui/primitives/styles";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/features/ui/primitives/tooltip";
+
+const MOCK_PROJECTS = [
+  {
+    id: "1",
+    title: "Design System Refactor",
+    pinned: true,
+    taskCounts: { todo: 5, doing: 2, review: 1, done: 12 },
+  },
+  {
+    id: "2",
+    title: "API Integration Layer",
+    pinned: false,
+    taskCounts: { todo: 3, doing: 1, review: 0, done: 8 },
+  },
+  {
+    id: "3",
+    title: "Mobile App Development",
+    pinned: false,
+    taskCounts: { todo: 8, doing: 0, review: 0, done: 0 },
+  },
+  {
+    id: "4",
+    title: "Documentation Updates",
+    pinned: false,
+    taskCounts: { todo: 2, doing: 1, review: 2, done: 15 },
+  },
+];
+
+const MOCK_TASKS = [
+  {
+    id: "1",
+    title: "Update color palette",
+    status: "todo" as const,
+    assignee: "User",
+    feature: "Design",
+    priority: "high" as const,
+  },
+  {
+    id: "2",
+    title: "Refactor button component",
+    status: "todo" as const,
+    assignee: "AI",
+    feature: "Components",
+    priority: "medium" as const,
+  },
+  {
+    id: "3",
+    title: "Implement glassmorphism effects",
+    status: "doing" as const,
+    assignee: "User",
+    feature: "Styling",
+    priority: "high" as const,
+  },
+  {
+    id: "4",
+    title: "Add documentation",
+    status: "review" as const,
+    assignee: "User",
+    feature: "Docs",
+    priority: "low" as const,
+  },
+  {
+    id: "5",
+    title: "Setup project structure",
+    status: "done" as const,
+    assignee: "AI",
+    feature: "Setup",
+    priority: "high" as const,
+  },
+  {
+    id: "6",
+    title: "Create initial components",
+    status: "done" as const,
+    assignee: "User",
+    feature: "Components",
+    priority: "medium" as const,
+  },
+];
+
+const MOCK_DOCUMENTS = [
+  { id: "1", title: "Project Overview", type: "spec" as const },
+  { id: "2", title: "API Documentation", type: "api" as const },
+  { id: "3", title: "Design Notes", type: "note" as const },
+];
+
+export const ProjectsLayoutExample = () => {
+  const [selectedId, setSelectedId] = useState("1");
+  const [activeTab, setActiveTab] = useState<"docs" | "tasks">("tasks");
+  const [viewMode, setViewMode] = useState<"board" | "table">("board");
+  const [selectedDoc, setSelectedDoc] = useState(MOCK_DOCUMENTS[0]);
+  const [layoutMode, setLayoutMode] = useState<"horizontal" | "sidebar">("horizontal");
+  const [sidebarExpanded, setSidebarExpanded] = useState(true);
+
+  const selectedProject = MOCK_PROJECTS.find((p) => p.id === selectedId);
+
+  const tabItems: PillNavigationItem[] = [
+    { id: "docs", label: "Docs", icon: <FileText className="w-4 h-4" /> },
+    { id: "tasks", label: "Tasks", icon: <ListTodo className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Layout Mode Toggle */}
+      <div className="flex justify-end">
+        <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLayoutMode("horizontal")}
+            className={cn("px-3", layoutMode === "horizontal" && "bg-purple-500/20 text-purple-400")}
+            aria-label="Switch to horizontal layout"
+            aria-pressed={layoutMode === "horizontal"}
+          >
+            <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLayoutMode("sidebar")}
+            className={cn("px-3", layoutMode === "sidebar" && "bg-purple-500/20 text-purple-400")}
+            aria-label="Switch to sidebar layout"
+            aria-pressed={layoutMode === "sidebar"}
+          >
+            <List className="w-4 h-4" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+
+      {layoutMode === "horizontal" ? (
+        <>
+          {/* Horizontal Project Cards - ONLY cards scroll, not whole page */}
+          <div className="w-full max-w-full">
+            <div className="overflow-x-auto overflow-y-visible py-8 -mx-6 px-6 scrollbar-hide">
+              <div className="flex gap-4 min-w-max">
+                {MOCK_PROJECTS.map((project) => (
+                  <ProjectCardExample
+                    key={project.id}
+                    project={project}
+                    isSelected={selectedId === project.id}
+                    onSelect={() => setSelectedId(project.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Orange Pill Navigation centered, View Toggle on right */}
+          <div className="flex items-center justify-between">
+            <div className="flex-1" />
+            <PillNavigation
+              items={tabItems}
+              activeSection={activeTab}
+              onSectionClick={(id) => setActiveTab(id as typeof activeTab)}
+              colorVariant="orange"
+              size="small"
+              showIcons={true}
+              showText={true}
+              hasSubmenus={false}
+            />
+            <div className="flex-1 flex justify-end">
+              {/* View Toggle aligned right */}
+              {activeTab === "tasks" && (
+                <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("board")}
+                    className={cn("px-3", viewMode === "board" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Board view"
+                    aria-pressed={viewMode === "board"}
+                  >
+                    <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("table")}
+                    className={cn("px-3", viewMode === "table" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Table view"
+                    aria-pressed={viewMode === "table"}
+                  >
+                    <TableIcon className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Tab Content - NO extra margin */}
+          <div>
+            {activeTab === "tasks" && (viewMode === "board" ? <KanbanBoardView /> : <TaskTableView />)}
+            {activeTab === "docs" && <EmbeddedDocumentBrowser doc={selectedDoc} onDocSelect={setSelectedDoc} />}
+          </div>
+        </>
+      ) : (
+        /* Sidebar Mode */
+        <div className="flex gap-6">
+          {/* Left Sidebar - Collapsible Project List */}
+          {sidebarExpanded && (
+            <div className="w-64 flex-shrink-0 space-y-2">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">Projects</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSidebarExpanded(false)}
+                  className="px-2"
+                  aria-label="Collapse sidebar"
+                  aria-expanded={sidebarExpanded}
+                >
+                  <List className="w-3 h-3" aria-hidden="true" />
+                </Button>
+              </div>
+              <div className="space-y-2">
+                {MOCK_PROJECTS.map((project) => (
+                  <SidebarProjectCard
+                    key={project.id}
+                    project={project}
+                    isSelected={selectedId === project.id}
+                    onSelect={() => setSelectedId(project.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Main Content Area */}
+          <div className="flex-1">
+            {/* Header with project name, tabs, and view toggle inline */}
+            <div className="flex items-center gap-4 mb-4">
+              {!sidebarExpanded && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSidebarExpanded(true)}
+                  className="px-2 flex-shrink-0"
+                >
+                  <List className="w-3 h-3 mr-1" />
+                  <span className="text-sm font-medium">{selectedProject?.title}</span>
+                </Button>
+              )}
+
+              {/* Orange Pill Navigation - ALWAYS CENTERED */}
+              <div className="flex-1 flex justify-center">
+                <PillNavigation
+                  items={tabItems}
+                  activeSection={activeTab}
+                  onSectionClick={(id) => setActiveTab(id as typeof activeTab)}
+                  colorVariant="orange"
+                  size="small"
+                  showIcons={true}
+                  showText={true}
+                  hasSubmenus={false}
+                />
+              </div>
+
+              {/* View Toggle - INLINE to right of pill nav */}
+              {activeTab === "tasks" && (
+                <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10 flex-shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("board")}
+                    className={cn("px-3", viewMode === "board" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Board view"
+                    aria-pressed={viewMode === "board"}
+                  >
+                    <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("table")}
+                    className={cn("px-3", viewMode === "table" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Table view"
+                    aria-pressed={viewMode === "table"}
+                  >
+                    <TableIcon className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            {/* Tab Content - Full Width, NO extra spacing */}
+            <div>
+              {activeTab === "tasks" && (viewMode === "board" ? <KanbanBoardView /> : <TaskTableView />)}
+              {activeTab === "docs" && <EmbeddedDocumentBrowser doc={selectedDoc} onDocSelect={setSelectedDoc} />}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Sidebar Project Card - mini card style with StatPills
+const SidebarProjectCard = ({
+  project,
+  isSelected,
+  onSelect,
+}: {
+  project: (typeof MOCK_PROJECTS)[0];
+  isSelected: boolean;
+  onSelect: () => void;
+}) => {
+  const getBackgroundClass = () => {
+    if (project.pinned)
+      return "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10";
+    if (isSelected)
+      return "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20";
+    return "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30";
+  };
+
+  return (
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={onSelect}
+      size="none"
+      blur="md"
+      className={cn("p-2", getBackgroundClass())}
+    >
+      <div className="space-y-2">
+        {/* Title */}
+        <div className="flex items-center justify-between">
+          <h4
+            className={cn(
+              "font-medium text-sm line-clamp-1",
+              isSelected ? "text-purple-700 dark:text-purple-300" : "text-gray-700 dark:text-gray-300",
+            )}
+          >
+            {project.title}
+          </h4>
+          {project.pinned && (
+            <div
+              className="flex items-center gap-1 px-1.5 py-0.5 bg-purple-500 text-white text-[9px] font-bold rounded-full"
+              aria-label="Pinned"
+            >
+              <Pin className="w-2.5 h-2.5" aria-hidden="true" />
+            </div>
+          )}
+        </div>
+
+        {/* Status Pills - horizontal layout with icons */}
+        <div className="flex items-center gap-1.5">
+          <StatPill color="pink" value={project.taskCounts.todo} size="sm" icon={<ListTodo className="w-3 h-3" />} />
+          <StatPill
+            color="blue"
+            value={project.taskCounts.doing + project.taskCounts.review}
+            size="sm"
+            icon={<Activity className="w-3 h-3" />}
+          />
+          <StatPill
+            color="green"
+            value={project.taskCounts.done}
+            size="sm"
+            icon={<CheckCircle2 className="w-3 h-3" />}
+          />
+        </div>
+      </div>
+    </SelectableCard>
+  );
+};
+
+// Project Card using SelectableCard primitive
+const ProjectCardExample = ({
+  project,
+  isSelected,
+  onSelect,
+}: {
+  project: (typeof MOCK_PROJECTS)[0];
+  isSelected: boolean;
+  onSelect: () => void;
+}) => {
+  // Custom gradients for pinned vs selected vs default
+  const getBackgroundClass = () => {
+    if (project.pinned)
+      return "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10";
+    if (isSelected)
+      return "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20";
+    return "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30";
+  };
+
+  return (
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={onSelect}
+      size="none"
+      blur="xl"
+      className={cn("w-72 min-h-[180px] flex flex-col shrink-0", getBackgroundClass())}
+    >
+      {/* Main content */}
+      <div className="flex-1 p-3 pb-2">
+        {/* Title */}
+        <div className="flex flex-col items-center justify-center mb-4 min-h-[48px]">
+          <h3
+            className={cn(
+              "font-medium text-center leading-tight line-clamp-2 transition-all duration-300",
+              isSelected
+                ? "text-gray-900 dark:text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.8)]"
+                : project.pinned
+                  ? "text-purple-700 dark:text-purple-300"
+                  : "text-gray-500 dark:text-gray-400",
+            )}
+          >
+            {project.title}
+          </h3>
+        </div>
+
+        {/* Task count pills */}
+        <div className="flex items-stretch gap-2 w-full">
+          {/* Todo pill */}
+          <div className="relative flex-1">
+            <div
+              className={cn(
+                "absolute inset-0 bg-pink-600 rounded-full blur-md",
+                isSelected ? "opacity-30 dark:opacity-75" : "opacity-0",
+              )}
+            />
+            <div
+              className={cn(
+                "relative flex items-center h-12 backdrop-blur-sm rounded-full border shadow-sm transition-all duration-300",
+                isSelected
+                  ? "bg-white/70 dark:bg-zinc-900/90 border-pink-300 dark:border-pink-500/50 dark:shadow-[0_0_10px_rgba(236,72,153,0.5)]"
+                  : "bg-white/30 dark:bg-zinc-900/30 border-gray-300/50 dark:border-gray-700/50",
+              )}
+            >
+              <div className="flex flex-col items-center justify-center px-2 min-w-[40px]">
+                <ListTodo
+                  className={cn(
+                    "w-4 h-4",
+                    isSelected ? "text-pink-600 dark:text-pink-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[8px] font-medium",
+                    isSelected ? "text-pink-600 dark:text-pink-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  ToDo
+                </span>
+              </div>
+              <div className="flex-1 flex items-center justify-center border-l border-pink-300 dark:border-pink-500/30">
+                <span
+                  className={cn(
+                    "text-lg font-bold",
+                    isSelected ? "text-pink-600 dark:text-pink-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  {project.taskCounts.todo}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Doing pill */}
+          <div className="relative flex-1">
+            <div
+              className={cn(
+                "absolute inset-0 bg-blue-600 rounded-full blur-md",
+                isSelected ? "opacity-30 dark:opacity-75" : "opacity-0",
+              )}
+            />
+            <div
+              className={cn(
+                "relative flex items-center h-12 backdrop-blur-sm rounded-full border shadow-sm transition-all duration-300",
+                isSelected
+                  ? "bg-white/70 dark:bg-zinc-900/90 border-blue-300 dark:border-blue-500/50 dark:shadow-[0_0_10px_rgba(59,130,246,0.5)]"
+                  : "bg-white/30 dark:bg-zinc-900/30 border-gray-300/50 dark:border-gray-700/50",
+              )}
+            >
+              <div className="flex flex-col items-center justify-center px-2 min-w-[40px]">
+                <Activity
+                  className={cn(
+                    "w-4 h-4",
+                    isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[8px] font-medium",
+                    isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  Doing
+                </span>
+              </div>
+              <div className="flex-1 flex items-center justify-center border-l border-blue-300 dark:border-blue-500/30">
+                <span
+                  className={cn(
+                    "text-lg font-bold",
+                    isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  {project.taskCounts.doing + project.taskCounts.review}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Done pill */}
+          <div className="relative flex-1">
+            <div
+              className={cn(
+                "absolute inset-0 bg-green-600 rounded-full blur-md",
+                isSelected ? "opacity-30 dark:opacity-75" : "opacity-0",
+              )}
+            />
+            <div
+              className={cn(
+                "relative flex items-center h-12 backdrop-blur-sm rounded-full border shadow-sm transition-all duration-300",
+                isSelected
+                  ? "bg-white/70 dark:bg-zinc-900/90 border-green-300 dark:border-green-500/50 dark:shadow-[0_0_10px_rgba(34,197,94,0.5)]"
+                  : "bg-white/30 dark:bg-zinc-900/30 border-gray-300/50 dark:border-gray-700/50",
+              )}
+            >
+              <div className="flex flex-col items-center justify-center px-2 min-w-[40px]">
+                <CheckCircle2
+                  className={cn(
+                    "w-4 h-4",
+                    isSelected ? "text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[8px] font-medium",
+                    isSelected ? "text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  Done
+                </span>
+              </div>
+              <div className="flex-1 flex items-center justify-center border-l border-green-300 dark:border-green-500/30">
+                <span
+                  className={cn(
+                    "text-lg font-bold",
+                    isSelected ? "text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  {project.taskCounts.done}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom bar with action icons */}
+      <div className="flex items-center justify-between px-3 py-2 mt-auto border-t border-gray-200/30 dark:border-gray-700/20">
+        {/* Pinned indicator with icon */}
+        {project.pinned ? (
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-purple-500 text-white text-[10px] font-bold rounded-full shadow-lg shadow-purple-500/30">
+            <Pin className="w-2.5 h-2.5" />
+            <span>PINNED</span>
+          </div>
+        ) : (
+          <div />
+        )}
+
+        {/* Action icons */}
+        <div className="flex items-center gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className="p-1.5 rounded-md hover:bg-red-500/10 text-gray-500 hover:text-red-500 transition-colors"
+                  aria-label="Delete project"
+                >
+                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Delete project</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className={cn(
+                    "p-1.5 rounded-md transition-colors",
+                    project.pinned
+                      ? "bg-purple-500/10 text-purple-500"
+                      : "hover:bg-purple-500/10 text-gray-500 hover:text-purple-500",
+                  )}
+                  aria-label={project.pinned ? "Unpin project" : "Pin project"}
+                >
+                  <Pin className="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{project.pinned ? "Unpin project" : "Pin project"}</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className="p-1.5 rounded-md hover:bg-cyan-500/10 text-gray-500 hover:text-cyan-500 transition-colors"
+                  aria-label="Duplicate project"
+                >
+                  <Copy className="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Duplicate project</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    </SelectableCard>
+  );
+};
+
+// Kanban Board - NO BACKGROUNDS, wrapped in DndProvider
+const KanbanBoardView = () => {
+  const columns = [
+    { status: "todo" as const, title: "Todo", color: "text-pink-500", glow: "bg-pink-500" },
+    { status: "doing" as const, title: "Doing", color: "text-blue-500", glow: "bg-blue-500" },
+    { status: "review" as const, title: "Review", color: "text-purple-500", glow: "bg-purple-500" },
+    { status: "done" as const, title: "Done", color: "text-green-500", glow: "bg-green-500" },
+  ];
+
+  const getTasksByStatus = (status: (typeof columns)[0]["status"]) => {
+    return MOCK_TASKS.filter((t) => t.status === status);
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 min-h-[500px]">
+        {columns.map(({ status, title, color, glow }) => (
+          <div key={status} className="flex flex-col">
+            {/* Column Header - transparent */}
+            <div className="text-center py-3 relative">
+              <h3 className={cn("font-mono text-sm font-medium", color)}>{title}</h3>
+              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">{getTasksByStatus(status).length}</div>
+              <div
+                className={cn("absolute bottom-0 left-[15%] right-[15%] w-[70%] mx-auto h-[1px]", glow, "shadow-md")}
+              />
+            </div>
+
+            {/* Tasks */}
+            <div className="flex-1 p-2 space-y-2">
+              {getTasksByStatus(status).map((task, idx) => (
+                <TaskCardExample key={task.id} task={task} index={idx} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </DndProvider>
+  );
+};
+
+// Task Card using DraggableCard primitive with actions
+const TaskCardExample = ({ task, index }: { task: (typeof MOCK_TASKS)[0]; index: number }) => {
+  const getPriorityColor = (priority: string) => {
+    if (priority === "high") return { color: "bg-red-500", glow: "shadow-[0_0_10px_rgba(239,68,68,0.3)]" };
+    if (priority === "medium") return { color: "bg-yellow-500", glow: "shadow-[0_0_10px_rgba(234,179,8,0.3)]" };
+    return { color: "bg-green-500", glow: "shadow-[0_0_10px_rgba(34,197,94,0.3)]" };
+  };
+
+  const priorityStyle = getPriorityColor(task.priority);
+
+  return (
+    <div className="relative group">
+      <DraggableCard itemType="task" itemId={task.id} index={index} size="none" className="min-h-[140px]">
+        {/* Priority indicator on left edge */}
+        <div
+          className={cn(
+            "absolute left-0 top-0 bottom-0 w-[3px] rounded-l-lg opacity-80 group-hover:w-[4px] group-hover:opacity-100 transition-all duration-300",
+            priorityStyle.color,
+            priorityStyle.glow,
+          )}
+        />
+
+        {/* Content */}
+        <div className="flex flex-col h-full p-3">
+          {/* Header with feature tag and actions */}
+          <div className="flex items-center gap-2 mb-2 pl-1.5">
+            {task.feature && (
+              <div className="px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1 backdrop-blur-md bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 shadow-sm">
+                <Tag className="w-3 h-3" />
+                {task.feature}
+              </div>
+            )}
+
+            {/* Action buttons - matching TaskCard.tsx pattern */}
+            <div className="ml-auto flex items-center gap-1">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={(e) => e.stopPropagation()}
+                      className="p-1 rounded hover:bg-cyan-500/10 text-gray-500 hover:text-cyan-500 transition-colors"
+                      aria-label="Edit task"
+                    >
+                      <Edit className="w-3 h-3" aria-hidden="true" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Edit task</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={(e) => e.stopPropagation()}
+                      className="p-1 rounded hover:bg-red-500/10 text-gray-500 hover:text-red-500 transition-colors"
+                      aria-label="Delete task"
+                    >
+                      <Trash2 className="w-3 h-3" aria-hidden="true" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Delete task</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </div>
+
+          {/* Title */}
+          <h4 className="text-xs font-medium text-gray-900 dark:text-white mb-2 pl-1.5 line-clamp-2">{task.title}</h4>
+
+          {/* Spacer */}
+          <div className="flex-1" />
+
+          {/* Footer with assignee and priority */}
+          <div className="flex items-center justify-between mt-auto pt-2 pl-1.5 pr-3">
+            {/* Assignee card-style - matching TaskCard.tsx */}
+            <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-white/50 dark:bg-black/30 border border-gray-200 dark:border-gray-700 text-xs">
+              <User className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+              <span className="text-gray-700 dark:text-gray-300">{task.assignee}</span>
+            </div>
+
+            {/* Priority dot */}
+            <div className={cn("w-2 h-2 rounded-full", priorityStyle.color)} />
+          </div>
+        </div>
+      </DraggableCard>
+    </div>
+  );
+};
+
+// Task Table View - matching real TableView
+const TaskTableView = () => {
+  return (
+    <div className="w-full">
+      <div className="overflow-x-auto scrollbar-hide">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+              <th className="w-1" />
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-32">Status</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-40">Feature</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-36">
+                Assignee
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {MOCK_TASKS.map((task, index) => {
+              const getPriorityColor = (priority: string) => {
+                if (priority === "high") return { color: "bg-red-500", glow: "shadow-[0_0_10px_rgba(239,68,68,0.3)]" };
+                if (priority === "medium")
+                  return { color: "bg-yellow-500", glow: "shadow-[0_0_10px_rgba(234,179,8,0.3)]" };
+                return { color: "bg-green-500", glow: "shadow-[0_0_10px_rgba(34,197,94,0.3)]" };
+              };
+
+              const priorityStyle = getPriorityColor(task.priority);
+
+              return (
+                <tr
+                  key={task.id}
+                  className={cn(
+                    "group transition-all duration-200",
+                    index % 2 === 0 ? "bg-white/50 dark:bg-black/50" : "bg-gray-50/80 dark:bg-gray-900/30",
+                    "hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20",
+                    "border-b border-gray-200 dark:border-gray-800",
+                  )}
+                >
+                  {/* Priority indicator */}
+                  <td className="w-1 p-0">
+                    <div className={cn("w-1 h-full", priorityStyle.color, priorityStyle.glow)} />
+                  </td>
+
+                  {/* Title */}
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">{task.title}</span>
+                  </td>
+
+                  {/* Status */}
+                  <td className="px-4 py-2 w-32">
+                    <span
+                      className={cn(
+                        "px-2 py-1 text-xs rounded-md font-medium inline-block",
+                        task.status === "todo" && "bg-pink-500/10 text-pink-600 dark:text-pink-400",
+                        task.status === "doing" && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+                        task.status === "review" && "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+                        task.status === "done" && "bg-green-500/10 text-green-600 dark:text-green-400",
+                      )}
+                    >
+                      {task.status}
+                    </span>
+                  </td>
+
+                  {/* Feature */}
+                  <td className="px-4 py-2 w-40">
+                    <div className="flex items-center gap-1">
+                      {task.feature && (
+                        <>
+                          <Tag className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                          <span className="text-sm text-gray-700 dark:text-gray-300">{task.feature}</span>
+                        </>
+                      )}
+                    </div>
+                  </td>
+
+                  {/* Assignee - card style like real component */}
+                  <td className="px-4 py-2 w-36">
+                    <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-white/70 dark:bg-black/40 border border-gray-300 dark:border-gray-600 backdrop-blur-sm">
+                      <User className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                      <span className="text-xs text-gray-700 dark:text-gray-300">{task.assignee}</span>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+// Embedded Document Browser
+const EmbeddedDocumentBrowser = ({
+  doc,
+  onDocSelect,
+}: {
+  doc: (typeof MOCK_DOCUMENTS)[0];
+  onDocSelect: (doc: (typeof MOCK_DOCUMENTS)[0]) => void;
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredDocs = MOCK_DOCUMENTS.filter((d) => d.title.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <div className="flex h-[600px] gap-6">
+      {/* Left Sidebar */}
+      <div className="w-64 flex flex-col space-y-4">
+        <div className="flex items-center gap-2">
+          <FileText className="w-5 h-5 text-gray-700 dark:text-gray-300" />
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white">Documents</h3>
+        </div>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <Input
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+            aria-label="Search documents"
+          />
+        </div>
+
+        <p className="text-xs text-gray-500 dark:text-gray-400">{MOCK_DOCUMENTS.length} documents</p>
+
+        <div className="flex-1 space-y-1">
+          {filteredDocs.map((d) => {
+            const isActive = d.id === doc.id;
+            return (
+              <button
+                key={d.id}
+                type="button"
+                onClick={() => onDocSelect(d)}
+                className={cn(
+                  "w-full text-left px-3 py-2 rounded-lg transition-all duration-200",
+                  isActive
+                    ? "bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-300 border-l-2 border-cyan-500"
+                    : "text-gray-600 dark:text-gray-400 hover:bg-white/5 dark:hover:bg-white/5 border-l-2 border-transparent",
+                )}
+              >
+                <div className="font-medium text-sm line-clamp-1">{d.title}</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{d.type}</div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Right Content */}
+      <div className="flex-1 overflow-y-auto">
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">{doc.title}</h2>
+        <div className="text-gray-600 dark:text-gray-400 space-y-4">
+          <p>
+            Document type:{" "}
+            <span className="px-2 py-1 text-xs bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded">
+              {doc.type}
+            </span>
+          </p>
+          <p>This area shows the full document content with rich formatting and embedded media.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
new file mode 100644
index 00000000..5e012019
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
@@ -0,0 +1,208 @@
+import { Code, Database, FileText, Flame, Globe, Key, Monitor, Moon, Palette, Settings } from "lucide-react";
+import { useId } from "react";
+import { CollapsibleSettingsCard } from "@/components/ui/CollapsibleSettingsCard";
+import { Card } from "@/features/ui/primitives/card";
+import { Input } from "@/features/ui/primitives/input";
+import { Label } from "@/features/ui/primitives/label";
+import { Switch } from "@/features/ui/primitives/switch";
+
+export const SettingsLayoutExample = () => {
+  const openaiKeyId = useId();
+  const googleKeyId = useId();
+  const dbUrlId = useId();
+  const autoBackupId = useId();
+  const extractCodeId = useId();
+  const maxExamplesId = useId();
+  const matchCountId = useId();
+  const rerankId = useId();
+  const maxDepthId = useId();
+  const followLinksId = useId();
+
+  return (
+    <div className="space-y-4">
+      {/* Explanation Text */}
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        <strong>Use this layout for:</strong> Settings pages, dashboard widgets, grouped configuration sections.
+        Two-column responsive grid with collapsible cards.
+      </p>
+
+      {/* Bento Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Features Section */}
+        <CollapsibleSettingsCard title="Features" icon={Palette} accentColor="purple" defaultExpanded={true}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {/* Dark Mode */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-purple-500/10 to-purple-600/5 backdrop-blur-sm border border-purple-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Dark Mode</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Switch between themes</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="purple" iconOn={<Moon className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Projects */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-blue-500/10 to-blue-600/5 backdrop-blur-sm border border-blue-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Projects</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Enable Projects functionality</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="blue" icon={<FileText className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Style Guide */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-cyan-500/10 to-cyan-600/5 backdrop-blur-sm border border-cyan-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Style Guide</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Show UI components</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="cyan" icon={<Palette className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Pydantic Logfire */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-orange-500/10 to-orange-600/5 backdrop-blur-sm border border-orange-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Pydantic Logfire</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Logging platform</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" color="orange" icon={<Flame className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Disconnect Screen */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-green-500/10 to-green-600/5 backdrop-blur-sm border border-green-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Disconnect Screen</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Show when disconnected</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="green" icon={<Monitor className="w-5 h-5" />} />
+              </div>
+            </div>
+          </div>
+        </CollapsibleSettingsCard>
+
+        {/* API Keys Section */}
+        <CollapsibleSettingsCard title="API Keys" icon={Key} accentColor="pink" defaultExpanded={true}>
+          <Card edgePosition="top" edgeColor="pink">
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+              Manage your API keys and credentials for various services used by Archon.
+            </p>
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor={openaiKeyId} className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  OPENAI_API_KEY
+                </Label>
+                <Input
+                  id={openaiKeyId}
+                  type="password"
+                  placeholder="Enter new value (encrypted)"
+                  className="mt-2"
+                  defaultValue="••••••••••••••••••"
+                />
+              </div>
+              <div>
+                <Label htmlFor={googleKeyId} className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  GOOGLE_API_KEY
+                </Label>
+                <Input
+                  id={googleKeyId}
+                  type="password"
+                  placeholder="Enter new value (encrypted)"
+                  className="mt-2"
+                  defaultValue="••••••••••••••••"
+                />
+              </div>
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* Database Settings */}
+        <CollapsibleSettingsCard title="Database Settings" icon={Database} accentColor="blue" defaultExpanded={false}>
+          <Card edgePosition="top" edgeColor="blue">
+            <div>
+              <Label htmlFor={dbUrlId} className="text-sm font-medium">
+                Database URL
+              </Label>
+              <Input
+                id={dbUrlId}
+                placeholder="postgresql://..."
+                className="mt-2"
+                defaultValue="postgresql://localhost:5432/archon"
+              />
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <Label htmlFor={autoBackupId} className="text-sm font-medium">
+                Auto Backup
+              </Label>
+              <Switch id={autoBackupId} />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* Code Extraction */}
+        <CollapsibleSettingsCard title="Code Extraction" icon={Code} accentColor="green" defaultExpanded={false}>
+          <Card edgePosition="top" edgeColor="green">
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              Configure how code blocks are extracted from crawled documents.
+            </p>
+            <div className="flex items-center justify-between mb-4">
+              <Label htmlFor={extractCodeId} className="text-sm font-medium">
+                Extract Code Examples
+              </Label>
+              <Switch id={extractCodeId} defaultChecked />
+            </div>
+            <div>
+              <Label htmlFor={maxExamplesId} className="text-sm font-medium">
+                Max Examples per Source
+              </Label>
+              <Input id={maxExamplesId} type="number" placeholder="50" className="mt-2" defaultValue="50" />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* RAG Configuration */}
+        <CollapsibleSettingsCard title="RAG Configuration" icon={Settings} accentColor="orange" defaultExpanded={true}>
+          <Card edgePosition="top" edgeColor="orange">
+            <div>
+              <Label htmlFor={matchCountId} className="text-sm font-medium">
+                Match Count
+              </Label>
+              <Input id={matchCountId} type="number" placeholder="5" className="mt-2" defaultValue="5" />
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <Label htmlFor={rerankId} className="text-sm font-medium">
+                Enable Reranking
+              </Label>
+              <Switch id={rerankId} defaultChecked />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* Crawling Settings */}
+        <CollapsibleSettingsCard title="Crawling Settings" icon={Globe} accentColor="pink" defaultExpanded={false}>
+          <Card edgePosition="top" edgeColor="pink">
+            <div>
+              <Label htmlFor={maxDepthId} className="text-sm font-medium">
+                Max Crawl Depth
+              </Label>
+              <Input id={maxDepthId} type="number" placeholder="3" className="mt-2" defaultValue="3" />
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <Label htmlFor={followLinksId} className="text-sm font-medium">
+                Follow External Links
+              </Label>
+              <Switch id={followLinksId} />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx b/archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx
new file mode 100644
index 00000000..d838678e
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { cn } from "@/features/ui/primitives/styles";
+
+export interface SideNavigationSection {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+interface SideNavigationProps {
+  sections: SideNavigationSection[];
+  activeSection: string;
+  onSectionClick: (sectionId: string) => void;
+}
+
+export const SideNavigation = ({ sections, activeSection, onSectionClick }: SideNavigationProps) => {
+  return (
+    <div className="w-32 flex-shrink-0">
+      <div className="sticky top-4 space-y-0.5">
+        {sections.map((section) => {
+          const isActive = activeSection === section.id;
+          return (
+            <button
+              key={section.id}
+              type="button"
+              onClick={() => onSectionClick(section.id)}
+              className={cn(
+                "w-full text-left px-2 py-1.5 rounded-md transition-all duration-200",
+                "flex items-center gap-1.5",
+                isActive
+                  ? "bg-blue-500/10 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300 border-l-2 border-blue-500"
+                  : "text-gray-600 dark:text-gray-400 hover:bg-white/5 dark:hover:bg-white/5 border-l-2 border-transparent",
+              )}
+            >
+              {section.icon && <span className="flex-shrink-0 w-3 h-3">{section.icon}</span>}
+              <span className="text-xs font-medium truncate">{section.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx
new file mode 100644
index 00000000..32f675ec
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx
@@ -0,0 +1,112 @@
+import { Plus } from "lucide-react";
+import { Button } from "@/features/ui/primitives/button";
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticButtons = () => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Buttons</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Button types used across the application</p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Glass Button (Outer Glow) */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Glass Button (Outer Glow)</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Primary action button with gradient fill and external glow on hover
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="default" size="sm">
+              Small
+            </Button>
+            <Button variant="default">Default</Button>
+            <Button variant="default" size="lg">
+              Large
+            </Button>
+            <Button variant="default">
+              <Plus className="w-4 h-4 mr-2" />
+              With Icon
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            variant="default" • Outer glow on hover
+          </p>
+        </Card>
+
+        {/* Outline Button (Inner Glow) */}
+        <Card className="p-6 shadow-[inset_0_0_15px_rgba(34,211,238,0.1)] dark:shadow-[inset_0_0_20px_rgba(34,211,238,0.15)]">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Outline Button (Inner Glow)</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Transparent button with border and internal glow on hover
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="outline" size="sm">
+              Small
+            </Button>
+            <Button variant="outline">Default</Button>
+            <Button variant="outline" size="lg">
+              Large
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            variant="outline" • Inner glow effect
+          </p>
+        </Card>
+
+        {/* Ghost Button */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Ghost Button</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">Minimal button with hover background only</p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="ghost" size="sm">
+              Small
+            </Button>
+            <Button variant="ghost">Default</Button>
+            <Button variant="ghost" size="lg">
+              Large
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">variant="ghost"</p>
+        </Card>
+
+        {/* Icon Button */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Icon Only</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">Square button for icon-only actions</p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="outline" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+            <Button variant="default" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+            <Button variant="ghost" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">size="icon"</p>
+        </Card>
+
+        {/* Destructive */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Destructive</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            For dangerous or destructive actions (delete, remove, etc.)
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="destructive" size="sm">
+              Delete
+            </Button>
+            <Button variant="destructive">Remove</Button>
+            <Button variant="destructive" size="lg">
+              Destroy
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">variant="destructive"</p>
+        </Card>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx
new file mode 100644
index 00000000..a08d08a2
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx
@@ -0,0 +1,306 @@
+import { useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Card } from "@/features/ui/primitives/card";
+import { DraggableCard } from "@/features/ui/primitives/draggable-card";
+import { SelectableCard } from "@/features/ui/primitives/selectable-card";
+import { cn } from "@/features/ui/primitives/styles";
+
+// Base Glass Card with transparency tabs
+const BaseGlassCardShowcase = () => {
+  const [activeTab, setActiveTab] = useState<"light" | "frosted" | "solid">("light");
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Base Glass Card</h4>
+
+      {/* Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["light", "frosted", "solid"] as const).map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeTab === tab
+                ? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/50"
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card
+        size="md"
+        transparency={activeTab}
+        blur="md"
+        className={activeTab === "solid" ? "border-2 border-gray-400 dark:border-gray-600" : ""}
+      >
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">Card Title</h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          {activeTab === "light" && "Light glass - low opacity (8%), see grid through"}
+          {activeTab === "frosted" && "Frosted glass - white frosted in light mode, black frosted in dark mode"}
+          {activeTab === "solid" && "Solid - high opacity (90%), opaque background"}
+        </p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card transparency="${activeTab}" />`}
+      </p>
+    </div>
+  );
+};
+
+// Outer Glow Card with size tabs
+const OuterGlowCardShowcase = () => {
+  const [activeSize, setActiveSize] = useState<"sm" | "md" | "lg" | "xl">("md");
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Outer Glow Card</h4>
+
+      {/* Size Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["sm", "md", "lg", "xl"] as const).map((size) => (
+          <button
+            key={size}
+            type="button"
+            onClick={() => setActiveSize(size)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeSize === size
+                ? "bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/50"
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {size.toUpperCase()}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card glowColor="cyan" glowType="outer" glowSize={activeSize}>
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">Active Card</h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Outer glow - {activeSize.toUpperCase()} (hover for brighter, same size)
+        </p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card glowColor="cyan" glowType="outer" glowSize="${activeSize}" />`}
+      </p>
+    </div>
+  );
+};
+
+// Inner Glow Card with size tabs
+const InnerGlowCardShowcase = () => {
+  const [activeSize, setActiveSize] = useState<"sm" | "md" | "lg" | "xl">("md");
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Inner Glow Card</h4>
+
+      {/* Size Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["sm", "md", "lg", "xl"] as const).map((size) => (
+          <button
+            key={size}
+            type="button"
+            onClick={() => setActiveSize(size)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeSize === size
+                ? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/50"
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {size.toUpperCase()}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card glowColor="blue" glowType="inner" glowSize={activeSize}>
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">Featured Card</h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Inner glow - {activeSize.toUpperCase()} (hover for brighter, same size)
+        </p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card glowColor="blue" glowType="inner" glowSize="${activeSize}" />`}
+      </p>
+    </div>
+  );
+};
+
+// Edge-Lit Card with color tabs
+const EdgeLitCardShowcase = () => {
+  const [activeColor, setActiveColor] = useState<"cyan" | "purple" | "pink" | "blue">("cyan");
+
+  const colorDescriptions = {
+    cyan: "Technical web pages",
+    purple: "Uploaded documents",
+    pink: "Business content",
+    blue: "Information pages",
+  };
+
+  // Static color classes (NOT dynamic) - Tailwind requirement
+  const tabColorClasses = {
+    cyan: "bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/50",
+    purple: "bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/50",
+    pink: "bg-pink-500/20 text-pink-700 dark:text-pink-300 border border-pink-500/50",
+    blue: "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/50",
+  };
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Top Edge Glow Card</h4>
+
+      {/* Color Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["cyan", "purple", "pink", "blue"] as const).map((color) => (
+          <button
+            key={color}
+            type="button"
+            onClick={() => setActiveColor(color)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeColor === color
+                ? tabColorClasses[color]
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {color.charAt(0).toUpperCase() + color.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card edgePosition="top" edgeColor={activeColor}>
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">
+          {activeColor.charAt(0).toUpperCase() + activeColor.slice(1)} Edge Light
+        </h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">{colorDescriptions[activeColor]}</p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card edgePosition="top" edgeColor="${activeColor}" />`}
+      </p>
+    </div>
+  );
+};
+
+export const StaticCards = () => {
+  const [selectedCardId, setSelectedCardId] = useState("card-2");
+  const [draggableCards, setDraggableCards] = useState([
+    { id: "drag-1", label: "Draggable 1" },
+    { id: "drag-2", label: "Draggable 2" },
+    { id: "drag-3", label: "Draggable 3" },
+  ]);
+
+  const handleCardDrop = (draggedId: string, targetIndex: number) => {
+    setDraggableCards((cards) => {
+      const currentIndex = cards.findIndex((card) => card.id === draggedId);
+      if (currentIndex === -1 || currentIndex === targetIndex) {
+        return cards;
+      }
+      const updated = [...cards];
+      const [moved] = updated.splice(currentIndex, 1);
+      updated.splice(targetIndex, 0, moved);
+      return updated;
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Cards</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Glass card variants and advanced card components</p>
+      </div>
+
+      {/* Responsive Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Base Glass Card - Transparency Variants */}
+        <BaseGlassCardShowcase />
+
+        {/* Outer Glow Card - Size Variants */}
+        <OuterGlowCardShowcase />
+
+        {/* Inner Glow Card - Size Variants */}
+        <InnerGlowCardShowcase />
+
+        {/* Top Edge Glow Card - Color Variants */}
+        <EdgeLitCardShowcase />
+      </div>
+
+      {/* Advanced Card Components */}
+      <div className="space-y-6 mt-8">
+        <div>
+          <h3 className="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Advanced Card Components</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+            Specialized cards that extend the base Card primitive with additional behaviors
+          </p>
+        </div>
+
+        {/* Selectable Cards */}
+        <div>
+          <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">SelectableCard</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Card with selection states, hover effects, and optional aurora glow. Click cards to select.
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {["card-1", "card-2", "card-3"].map((id) => (
+              <SelectableCard
+                key={id}
+                isSelected={selectedCardId === id}
+                showAuroraGlow={selectedCardId === id}
+                onSelect={() => setSelectedCardId(id)}
+                size="sm"
+                className="min-h-[120px]"
+              >
+                <h5 className="font-medium text-gray-900 dark:text-white mb-2">
+                  {id === selectedCardId ? "Selected" : "Click to Select"}
+                </h5>
+                <p className="text-xs text-gray-600 dark:text-gray-400">Card {id.split("-")[1]}</p>
+              </SelectableCard>
+            ))}
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            {"<SelectableCard isSelected={...} showAuroraGlow onSelect={...} />"}
+          </p>
+        </div>
+
+        {/* Draggable Cards */}
+        <div>
+          <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">DraggableCard</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Card with drag-and-drop functionality. Try dragging cards to reorder.
+          </p>
+          <DndProvider backend={HTML5Backend}>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+              {draggableCards.map((card, index) => (
+                <DraggableCard
+                  key={card.id}
+                  itemType="example-card"
+                  itemId={card.id}
+                  index={index}
+                  onDrop={handleCardDrop}
+                  size="sm"
+                  className="min-h-[120px] cursor-move"
+                >
+                  <h5 className="font-medium text-gray-900 dark:text-white mb-2">{card.label}</h5>
+                  <p className="text-xs text-gray-600 dark:text-gray-400">Drag me to reorder</p>
+                </DraggableCard>
+              ))}
+            </div>
+          </DndProvider>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            {'<DraggableCard itemType="..." itemId="..." index={...} onDrop={...} />'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx
new file mode 100644
index 00000000..cbfcdc5f
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx
@@ -0,0 +1,94 @@
+import { Card } from "@/features/ui/primitives/card";
+import { cn } from "@/features/ui/primitives/styles";
+
+const GRAY_CLASSES: Record<number, string> = {
+  50: "bg-gray-50",
+  100: "bg-gray-100",
+  200: "bg-gray-200",
+  300: "bg-gray-300",
+  400: "bg-gray-400",
+  500: "bg-gray-500",
+  600: "bg-gray-600",
+  700: "bg-gray-700",
+  800: "bg-gray-800",
+  900: "bg-gray-900",
+};
+
+export const StaticColors = () => {
+  const semanticColors = [
+    { name: "Primary", hex: "#3b82f6", tailwind: "blue-500", usage: "Primary actions, links, focus states" },
+    { name: "Secondary", hex: "#6b7280", tailwind: "gray-500", usage: "Secondary actions, neutral elements" },
+    { name: "Success", hex: "#22c55e", tailwind: "green-500", usage: "Success states, confirmations" },
+    { name: "Warning", hex: "#f97316", tailwind: "orange-500", usage: "Warnings, cautions" },
+    { name: "Error", hex: "#ef4444", tailwind: "red-500", usage: "Errors, destructive actions" },
+  ];
+
+  const accentColors = [
+    { name: "Cyan", hex: "#06b6d4", tailwind: "cyan-500", usage: "Active states, highlights" },
+    { name: "Purple", hex: "#a855f7", tailwind: "purple-500", usage: "Creative elements, special features" },
+    { name: "Pink", hex: "#ec4899", tailwind: "pink-500", usage: "Emphasis, special content" },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Colors</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Color palette with semantic and accent colors</p>
+      </div>
+
+      {/* Semantic Colors */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Semantic Colors</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {semanticColors.map((color) => (
+            <Card key={color.name} className="p-4">
+              <div className="flex items-center gap-4">
+                <div className="w-16 h-16 rounded-lg border border-white/20" style={{ backgroundColor: color.hex }} />
+                <div className="flex-1">
+                  <h4 className="font-semibold text-gray-900 dark:text-white">{color.name}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 font-mono mt-1">{color.hex}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">{color.usage}</p>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Accent Colors */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Accent Colors</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {accentColors.map((color) => (
+            <Card key={color.name} className="p-4">
+              <div className="flex flex-col gap-3">
+                <div
+                  className={cn("w-full h-12 rounded-lg border border-white/20")}
+                  style={{ backgroundColor: color.hex }}
+                />
+                <div>
+                  <h4 className="font-semibold text-gray-900 dark:text-white text-sm">{color.name}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 font-mono">{color.hex}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">{color.usage}</p>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Grayscale */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Grayscale</h3>
+        <div className="flex gap-1">
+          {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((weight) => (
+            <div key={weight} className="flex-1">
+              <div className={cn("h-12 rounded", GRAY_CLASSES[weight])} />
+              <p className="text-xs text-center mt-1 text-gray-500 dark:text-gray-400">{weight}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx
new file mode 100644
index 00000000..0888e88b
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx
@@ -0,0 +1,110 @@
+import { motion } from "framer-motion";
+import { RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticEffects = () => {
+  const [animationKey, setAnimationKey] = useState(0);
+
+  const replayAnimation = () => {
+    setAnimationKey((prev) => prev + 1);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Effects & Animations</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Visual effects and animations used in the application</p>
+      </div>
+
+      {/* Hover Effects */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Hover Effects</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="p-6 hover:shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all duration-300 cursor-pointer">
+            <h4 className="text-sm font-semibold mb-2 text-gray-900 dark:text-white">Glow Hover</h4>
+            <p className="text-xs text-gray-600 dark:text-gray-400">Hover to see cyan glow</p>
+          </Card>
+
+          <Card className="p-6 hover:scale-105 transition-transform duration-200 cursor-pointer">
+            <h4 className="text-sm font-semibold mb-2 text-gray-900 dark:text-white">Scale Hover</h4>
+            <p className="text-xs text-gray-600 dark:text-gray-400">Hover to scale up</p>
+          </Card>
+
+          <Card className="p-6 hover:border-purple-500 hover:shadow-[0_0_15px_rgba(168,85,247,0.5)] transition-all duration-300 cursor-pointer">
+            <h4 className="text-sm font-semibold mb-2 text-gray-900 dark:text-white">Border Glow</h4>
+            <p className="text-xs text-gray-600 dark:text-gray-400">Hover for purple border glow</p>
+          </Card>
+        </div>
+      </div>
+
+      {/* Loading States */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Loading States</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="p-6">
+            <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Spinner</h4>
+            <div className="flex justify-center py-4">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500" />
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-center">animate-spin</p>
+          </Card>
+
+          <Card className="p-6">
+            <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Pulse</h4>
+            <div className="flex justify-center py-4">
+              <div className="w-8 h-8 bg-blue-500 rounded-full animate-pulse" />
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-center">animate-pulse</p>
+          </Card>
+
+          <Card className="p-6">
+            <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Progress Bar</h4>
+            <div className="py-4">
+              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+                <motion.div
+                  className="h-full bg-gradient-to-r from-cyan-500 to-blue-500"
+                  initial={{ width: "0%" }}
+                  animate={{ width: "70%" }}
+                  transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, repeatDelay: 0.5 }}
+                />
+              </div>
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-center">Framer Motion</p>
+          </Card>
+        </div>
+      </div>
+
+      {/* Entrance Animations */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Stagger Entrance</h3>
+          <Button size="sm" variant="outline" onClick={replayAnimation} className="flex items-center gap-2">
+            <RotateCcw className="w-4 h-4" />
+            Replay
+          </Button>
+        </div>
+        <div className="space-y-2" key={animationKey}>
+          {[1, 2, 3, 4].map((i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.4, delay: i * 0.1 }}
+            >
+              <Card className="p-4">
+                <p className="text-sm text-gray-700 dark:text-gray-300">
+                  Staggered item {i} - Fades in from left with delay
+                </p>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 font-mono">
+          Used for project cards, task lists, knowledge items
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx
new file mode 100644
index 00000000..17eaf1ce
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx
@@ -0,0 +1,154 @@
+import { useId } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { Card } from "@/features/ui/primitives/card";
+import { Checkbox } from "@/features/ui/primitives/checkbox";
+import { Input } from "@/features/ui/primitives/input";
+import { Label } from "@/features/ui/primitives/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/features/ui/primitives/select";
+import { Switch } from "@/features/ui/primitives/switch";
+
+export const StaticForms = () => {
+  const exampleInputId = useId();
+  const exampleDisabledId = useId();
+  const exampleTextareaId = useId();
+  const check1Id = useId();
+  const check2Id = useId();
+  const check3Id = useId();
+  const switch1Id = useId();
+  const switch2Id = useId();
+  const switch3Id = useId();
+  const selectCyanId = useId();
+  const selectPurpleId = useId();
+  const formInputId = useId();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Form Elements</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Form inputs and controls used in the application</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Text Input */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Text Input</h4>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor={exampleInputId}>Label</Label>
+              <Input id={exampleInputId} placeholder="Enter text..." className="mt-1" />
+            </div>
+            <div>
+              <Label htmlFor={exampleDisabledId}>Disabled</Label>
+              <Input id={exampleDisabledId} placeholder="Disabled..." disabled className="mt-1" />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Input />"}</p>
+        </Card>
+
+        {/* Textarea */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Textarea</h4>
+          <div>
+            <Label htmlFor={exampleTextareaId}>Description</Label>
+            <textarea
+              id={exampleTextareaId}
+              placeholder="Enter description..."
+              rows={4}
+              className="mt-1 w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-black/30 px-3 py-2 text-sm backdrop-blur-sm focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<textarea />"}</p>
+        </Card>
+
+        {/* Checkbox */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Checkbox</h4>
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Checkbox id={check1Id} defaultChecked color="cyan" />
+              <Label htmlFor={check1Id}>Checked</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id={check2Id} color="purple" />
+              <Label htmlFor={check2Id}>Unchecked</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id={check3Id} disabled defaultChecked />
+              <Label htmlFor={check3Id}>Disabled</Label>
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Checkbox />"}</p>
+        </Card>
+
+        {/* Switch Toggle */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Switch Toggle</h4>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor={switch1Id}>Enable Feature</Label>
+              <Switch id={switch1Id} defaultChecked />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label htmlFor={switch2Id}>Dark Mode</Label>
+              <Switch id={switch2Id} />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label htmlFor={switch3Id}>Disabled</Label>
+              <Switch id={switch3Id} disabled />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Switch />"}</p>
+        </Card>
+
+        {/* Select Dropdown */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Select Dropdown</h4>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor={selectCyanId}>Cyan Variant</Label>
+              <Select defaultValue="option2">
+                <SelectTrigger id={selectCyanId} color="cyan" className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="option1">Option 1</SelectItem>
+                  <SelectItem value="option2">Option 2</SelectItem>
+                  <SelectItem value="option3">Option 3</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor={selectPurpleId}>Purple Variant</Label>
+              <Select defaultValue="option1">
+                <SelectTrigger id={selectPurpleId} color="purple" className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent color="purple">
+                  <SelectItem value="option1">Option 1</SelectItem>
+                  <SelectItem value="option2">Option 2</SelectItem>
+                  <SelectItem value="option3">Option 3</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Select /> with color variants"}</p>
+        </Card>
+
+        {/* Submit Button */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Form Submission</h4>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor={formInputId}>Email</Label>
+              <Input id={formInputId} type="email" placeholder="email@example.com" className="mt-1" />
+            </div>
+            <Button variant="default" className="w-full">
+              Submit
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">Complete form example</p>
+        </Card>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx
new file mode 100644
index 00000000..1ff6ed0e
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx
@@ -0,0 +1,38 @@
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticSpacing = () => {
+  const spacingScale = [
+    { value: 1, px: 4, rem: 0.25 },
+    { value: 2, px: 8, rem: 0.5 },
+    { value: 3, px: 12, rem: 0.75 },
+    { value: 4, px: 16, rem: 1 },
+    { value: 6, px: 24, rem: 1.5 },
+    { value: 8, px: 32, rem: 2 },
+    { value: 12, px: 48, rem: 3 },
+    { value: 16, px: 64, rem: 4 },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Spacing</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Consistent spacing scale based on 4px increments</p>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {spacingScale.map((space) => (
+          <Card key={space.value} className="p-4">
+            <div className="mb-3">
+              <div className="bg-blue-500 rounded" style={{ height: `${space.px}px` }} />
+            </div>
+            <div className="text-xs space-y-1">
+              <div className="font-mono text-gray-900 dark:text-white">p-{space.value}</div>
+              <div className="text-gray-500 dark:text-gray-400">{space.px}px</div>
+              <div className="text-gray-500 dark:text-gray-400">{space.rem}rem</div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx
new file mode 100644
index 00000000..1c196d27
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx
@@ -0,0 +1,70 @@
+export const StaticTables = () => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Tables</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Table styles with glassmorphism and hover states</p>
+      </div>
+
+      {/* Standard Table - matching TaskView pattern */}
+      <div>
+        <h3 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Standard Table</h3>
+        <div className="w-full">
+          <div className="overflow-x-auto scrollbar-hide">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Name</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Status</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Count</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="bg-white/50 dark:bg-black/50 hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20 border-b border-gray-200 dark:border-gray-800 transition-all duration-200">
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">React Documentation</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="px-2 py-1 text-xs rounded-md font-medium bg-green-500/10 text-green-600 dark:text-green-400">
+                      Active
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">145</td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">2024-01-15</td>
+                </tr>
+                <tr className="bg-gray-50/80 dark:bg-gray-900/30 hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20 border-b border-gray-200 dark:border-gray-800 transition-all duration-200">
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">API Integration</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="px-2 py-1 text-xs rounded-md font-medium bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
+                      Processing
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">89</td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">2024-01-18</td>
+                </tr>
+                <tr className="bg-white/50 dark:bg-black/50 hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20 border-b border-gray-200 dark:border-gray-800 transition-all duration-200">
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">TypeScript Guide</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="px-2 py-1 text-xs rounded-md font-medium bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
+                      Complete
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">203</td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">2024-01-20</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-3">
+          Features: Gradient header, alternating rows, hover gradient, consistent spacing
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx
new file mode 100644
index 00000000..1c04dc0c
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx
@@ -0,0 +1,92 @@
+import { useId, useState } from "react";
+import { PowerButton } from "@/components/ui/PowerButton";
+import { Card } from "@/features/ui/primitives/card";
+import { Label } from "@/features/ui/primitives/label";
+import { Switch } from "@/features/ui/primitives/switch";
+
+export const StaticToggles = () => {
+  const toggle1Id = useId();
+  const toggle2Id = useId();
+
+  const [powerStates, setPowerStates] = useState({
+    purple: true,
+    cyan: false,
+    green: true,
+    orange: false,
+  });
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Toggles</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Toggle controls used in the application</p>
+      </div>
+
+      {/* Power Button */}
+      <Card className="p-6">
+        <h4 className="text-sm font-semibold mb-4 text-gray-900 dark:text-white">Power Button</h4>
+        <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+          Animated toggle with glowing power icon. Used for collapsible settings cards.
+        </p>
+        <div className="flex gap-6 items-center justify-center py-4">
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.purple}
+              onClick={() => setPowerStates((s) => ({ ...s, purple: !s.purple }))}
+              color="purple"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Purple</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.cyan}
+              onClick={() => setPowerStates((s) => ({ ...s, cyan: !s.cyan }))}
+              color="cyan"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Cyan</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.green}
+              onClick={() => setPowerStates((s) => ({ ...s, green: !s.green }))}
+              color="green"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Green</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.orange}
+              onClick={() => setPowerStates((s) => ({ ...s, orange: !s.orange }))}
+              color="orange"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Orange</span>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 font-mono">{"<PowerButton />"}</p>
+      </Card>
+
+      {/* Switch Toggle */}
+      <Card className="p-6">
+        <h4 className="text-sm font-semibold mb-4 text-gray-900 dark:text-white">Switch</h4>
+        <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+          Standard toggle switch for settings and binary options
+        </p>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label htmlFor={toggle1Id}>Enable Feature</Label>
+            <Switch id={toggle1Id} defaultChecked />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor={toggle2Id}>Auto Save</Label>
+            <Switch id={toggle2Id} />
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 font-mono">{"<Switch />"}</p>
+      </Card>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx
new file mode 100644
index 00000000..68951e69
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx
@@ -0,0 +1,61 @@
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticTypography = () => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Typography</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Typography scale used across the application</p>
+      </div>
+
+      <Card className="p-6 space-y-6">
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H1 • text-4xl font-bold</div>
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white">Heading 1</h1>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H2 • text-3xl font-bold</div>
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Heading 2</h2>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H3 • text-2xl font-semibold</div>
+          <h3 className="text-2xl font-semibold text-gray-900 dark:text-white">Heading 3</h3>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H4 • text-xl font-semibold</div>
+          <h4 className="text-xl font-semibold text-gray-900 dark:text-white">Heading 4</h4>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Body • text-base</div>
+          <p className="text-base text-gray-700 dark:text-gray-300">
+            Body text for paragraphs and general content. This is the default text style used throughout the
+            application.
+          </p>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Small • text-sm</div>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Small text for secondary information and descriptions
+          </p>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Caption • text-xs</div>
+          <p className="text-xs text-gray-500 dark:text-gray-500">Caption text for labels, timestamps, and metadata</p>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Code • font-mono</div>
+          <code className="font-mono text-sm bg-black/20 px-2 py-1 rounded text-cyan-400">
+            const example = "code text";
+          </code>
+        </div>
+      </Card>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/standards/modalStandards.ts b/archon-ui-main/src/features/style-guide/standards/modalStandards.ts
new file mode 100644
index 00000000..3c466636
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/standards/modalStandards.ts
@@ -0,0 +1,32 @@
+export const MODAL_TYPES = {
+  confirmation: {
+    size: "sm" as const,
+    glowColor: "red" as const,
+    purpose: "Destructive actions",
+  },
+  formCreate: {
+    size: "md" as const,
+    glowColor: "green" as const,
+    purpose: "Creating resources",
+  },
+  formEdit: {
+    size: "md" as const,
+    glowColor: "blue" as const,
+    purpose: "Editing resources",
+  },
+  display: {
+    size: "lg" as const,
+    glowColor: "purple" as const,
+    purpose: "Detailed information",
+  },
+  codeViewer: {
+    size: "xl" as const,
+    glowColor: "cyan" as const,
+    purpose: "Code display",
+  },
+  settings: {
+    size: "lg" as const,
+    glowColor: "blue" as const,
+    purpose: "App settings",
+  },
+};
diff --git a/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx b/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
new file mode 100644
index 00000000..64020666
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
@@ -0,0 +1,90 @@
+import { Database, FileText, FolderKanban, Navigation, Settings } from "lucide-react";
+import { useState } from "react";
+import { DocumentBrowserExample } from "../layouts/DocumentBrowserExample";
+import { KnowledgeLayoutExample } from "../layouts/KnowledgeLayoutExample";
+import { NavigationExplanation } from "../layouts/NavigationExplanation";
+import { ProjectsLayoutExample } from "../layouts/ProjectsLayoutExample";
+import { SettingsLayoutExample } from "../layouts/SettingsLayoutExample";
+import { SideNavigation, type SideNavigationSection } from "../shared/SideNavigation";
+
+export const LayoutsTab = () => {
+  const [activeSection, setActiveSection] = useState("navigation");
+
+  const sections: SideNavigationSection[] = [
+    { id: "navigation", label: "Navigation", icon: <Navigation className="w-4 h-4" /> },
+    { id: "projects", label: "Projects", icon: <FolderKanban className="w-4 h-4" /> },
+    { id: "settings", label: "Settings", icon: <Settings className="w-4 h-4" /> },
+    { id: "knowledge", label: "Knowledge", icon: <Database className="w-4 h-4" /> },
+    { id: "document-browser", label: "Document Browser", icon: <FileText className="w-4 h-4" /> },
+  ];
+
+  // Render content based on active section
+  const renderContent = () => {
+    switch (activeSection) {
+      case "navigation":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Navigation Patterns</h2>
+            <NavigationExplanation />
+          </div>
+        );
+      case "projects":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Projects Layout</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Project selection with Kanban board and table views. Uses orange pill navigation for Docs/Tasks tabs.
+            </p>
+            <ProjectsLayoutExample />
+          </div>
+        );
+      case "settings":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Settings Layout</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Bento grid (2-column responsive) with collapsible cards using PowerButton toggles.
+            </p>
+            <SettingsLayoutExample />
+          </div>
+        );
+      case "knowledge":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Knowledge Layout</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Switchable views (grid/table) with filters and search. Cards have top glass glow bars.
+            </p>
+            <KnowledgeLayoutExample />
+          </div>
+        );
+      case "document-browser":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Document Browser</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Modal or embedded display for documents and code with tabs, search, and expandable content.
+            </p>
+            <DocumentBrowserExample />
+          </div>
+        );
+      default:
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Navigation Patterns</h2>
+            <NavigationExplanation />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="flex gap-6">
+      {/* Side Navigation */}
+      <SideNavigation sections={sections} activeSection={activeSection} onSectionClick={setActiveSection} />
+
+      {/* Main Content */}
+      <div className="flex-1 min-w-0 max-w-6xl">{renderContent()}</div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx b/archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx
new file mode 100644
index 00000000..6f3bbbfc
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx
@@ -0,0 +1,74 @@
+import {
+  Box,
+  CreditCard,
+  FormInput,
+  MousePointer,
+  Palette,
+  Power,
+  Sparkles,
+  Table as TableIcon,
+  Type,
+} from "lucide-react";
+import { useState } from "react";
+import { SideNavigation, type SideNavigationSection } from "../shared/SideNavigation";
+import { StaticButtons } from "../showcases/StaticButtons";
+import { StaticCards } from "../showcases/StaticCards";
+import { StaticColors } from "../showcases/StaticColors";
+import { StaticEffects } from "../showcases/StaticEffects";
+import { StaticForms } from "../showcases/StaticForms";
+import { StaticSpacing } from "../showcases/StaticSpacing";
+import { StaticTables } from "../showcases/StaticTables";
+import { StaticToggles } from "../showcases/StaticToggles";
+import { StaticTypography } from "../showcases/StaticTypography";
+
+export const StyleGuideTab = () => {
+  const [activeSection, setActiveSection] = useState("typography");
+
+  const sections: SideNavigationSection[] = [
+    { id: "typography", label: "Typography", icon: <Type className="w-3 h-3" /> },
+    { id: "colors", label: "Colors", icon: <Palette className="w-3 h-3" /> },
+    { id: "spacing", label: "Spacing", icon: <Box className="w-3 h-3" /> },
+    { id: "buttons", label: "Buttons", icon: <MousePointer className="w-3 h-3" /> },
+    { id: "cards", label: "Cards", icon: <CreditCard className="w-3 h-3" /> },
+    { id: "tables", label: "Tables", icon: <TableIcon className="w-3 h-3" /> },
+    { id: "forms", label: "Forms", icon: <FormInput className="w-3 h-3" /> },
+    { id: "toggles", label: "Toggles", icon: <Power className="w-3 h-3" /> },
+    { id: "effects", label: "Effects", icon: <Sparkles className="w-3 h-3" /> },
+  ];
+
+  // Render content based on active section
+  const renderContent = () => {
+    switch (activeSection) {
+      case "typography":
+        return <StaticTypography />;
+      case "colors":
+        return <StaticColors />;
+      case "spacing":
+        return <StaticSpacing />;
+      case "buttons":
+        return <StaticButtons />;
+      case "cards":
+        return <StaticCards />;
+      case "tables":
+        return <StaticTables />;
+      case "forms":
+        return <StaticForms />;
+      case "toggles":
+        return <StaticToggles />;
+      case "effects":
+        return <StaticEffects />;
+      default:
+        return <StaticTypography />;
+    }
+  };
+
+  return (
+    <div className="flex gap-6">
+      {/* Side Navigation */}
+      <SideNavigation sections={sections} activeSection={activeSection} onSectionClick={setActiveSection} />
+
+      {/* Main Content */}
+      <div className="flex-1 max-w-5xl">{renderContent()}</div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/types/index.ts b/archon-ui-main/src/features/style-guide/types/index.ts
new file mode 100644
index 00000000..ae0ba183
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/types/index.ts
@@ -0,0 +1,25 @@
+// Type definitions for style guide components
+
+// Card types
+export type GlowColor = "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+export type GlowType = "none" | "inner" | "outer";
+export type EdgePosition = "none" | "top" | "left" | "right" | "bottom";
+export type EdgeColor = "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+export type CardSize = "sm" | "md" | "lg" | "xl";
+export type Transparency = "clear" | "light" | "medium" | "frosted" | "solid";
+export type BlurLevel = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export type GlassTint = "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+// Button types
+export type ButtonVariant = "default" | "destructive" | "outline" | "ghost" | "link" | "cyan" | "knowledge";
+export type ButtonSize = "xs" | "sm" | "default" | "lg" | "icon";
+
+// Form types
+export type InputType = "text" | "email" | "password" | "number" | "search" | "url" | "tel";
+export type LabelPosition = "left" | "right" | "top" | "bottom";
+
+// Modal types
+export type ModalSize = "sm" | "md" | "lg" | "xl";
+
+// Toggle types
+export type ToggleSize = "sm" | "md" | "lg";
diff --git a/archon-ui-main/src/features/ui/primitives/card.tsx b/archon-ui-main/src/features/ui/primitives/card.tsx
new file mode 100644
index 00000000..acb8ff68
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/card.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+import { cn, glassCard } from "./styles";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  // Glass properties
+  blur?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  transparency?: "clear" | "light" | "medium" | "frosted" | "solid";
+  glassTint?: "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Glow properties (uses pre-defined static classes from styles.ts)
+  glowColor?: "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+  glowType?: "outer" | "inner";
+  glowSize?: "sm" | "md" | "lg" | "xl";
+
+  // Edge-lit properties
+  edgePosition?: "none" | "top" | "left" | "right" | "bottom";
+  edgeColor?: "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Size (padding)
+  size?: "none" | "sm" | "md" | "lg" | "xl";
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      blur = "md",
+      transparency = "light",
+      glassTint = "none",
+      glowColor = "none",
+      glowType = "outer",
+      glowSize = "md",
+      edgePosition = "none",
+      edgeColor = "cyan",
+      size = "md",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasEdge = edgePosition !== "none";
+    const hasGlow = glowColor !== "none";
+
+    // Use pre-defined static classes from styles.ts
+    const glowVariant = glassCard.variants[glowColor] || glassCard.variants.none;
+
+    // Get glow class from static lookups in styles.ts
+    const getGlowClass = () => {
+      if (!hasGlow || hasEdge) return "";
+
+      if (glowType === "inner") {
+        return glassCard.innerGlowSizes?.[glowColor]?.[glowSize] || "";
+      }
+
+      // Outer glow
+      return glassCard.outerGlowSizes?.[glowColor]?.[glowSize] || glowVariant.glow;
+    };
+
+    // Get size-matched hover glow class
+    const getHoverGlowClass = () => {
+      if (!hasGlow || hasEdge) return "";
+
+      if (glowType === "inner") {
+        return glassCard.innerGlowHover?.[glowColor]?.[glowSize] || "";
+      }
+
+      // Outer glow hover
+      return glassCard.outerGlowHover?.[glowColor]?.[glowSize] || glowVariant.hover;
+    };
+
+    const edgeStyle = glassCard.edgeColors[edgeColor];
+
+    if (hasEdge) {
+      // Edge-lit card with actual div elements (not pseudo-elements)
+      // Extract flex/layout classes from className to apply to inner content div
+      const flexClasses =
+        className?.match(/(flex|flex-col|flex-row|flex-1|items-\S+|justify-\S+|gap-\S+)/g)?.join(" ") || "";
+      const otherClasses =
+        className?.replace(/(flex|flex-col|flex-row|flex-1|items-\S+|justify-\S+|gap-\S+)/g, "").trim() || "";
+
+      // Edge line and glow configuration per position
+      const edgeConfig = {
+        top: {
+          line: "absolute inset-x-0 top-0 h-[2px]",
+          glow: "absolute inset-x-0 top-0 h-16 bg-gradient-to-b to-transparent",
+        },
+        bottom: {
+          line: "absolute inset-x-0 bottom-0 h-[2px]",
+          glow: "absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t to-transparent",
+        },
+        left: {
+          line: "absolute inset-y-0 left-0 w-[2px]",
+          glow: "absolute inset-y-0 left-0 w-16 bg-gradient-to-r to-transparent",
+        },
+        right: {
+          line: "absolute inset-y-0 right-0 w-[2px]",
+          glow: "absolute inset-y-0 right-0 w-16 bg-gradient-to-l to-transparent",
+        },
+      };
+
+      const config = edgeConfig[edgePosition];
+
+      return (
+        <div ref={ref} className={cn("relative rounded-xl overflow-hidden", edgeStyle.border, otherClasses)} {...props}>
+          {/* Edge light bar */}
+          <div className={cn(config.line, "pointer-events-none z-10", edgeStyle.solid)} />
+          {/* Glow bleeding into card */}
+          <div className={cn(config.glow, "blur-lg pointer-events-none z-10", edgeStyle.gradient)} />
+          {/* Content with tinted background - INHERIT flex classes */}
+          <div className={cn("backdrop-blur-sm", edgeStyle.bg, glassCard.sizes[size], flexClasses)}>{children}</div>
+        </div>
+      );
+    }
+
+    // Standard card (no edge-lit) - use static classes from styles.ts
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          glassCard.base,
+          glassCard.blur[blur],
+          glassTint !== "none" ? glassCard.tints[glassTint][transparency] : glassCard.transparency[transparency],
+          glassCard.sizes[size],
+          // Border and glow classes from static lookups
+          !hasEdge && glowVariant.border,
+          !hasEdge && getGlowClass(),
+          !hasEdge && getHoverGlowClass(), // Size-matched hover
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";
diff --git a/archon-ui-main/src/features/ui/primitives/checkbox.tsx b/archon-ui-main/src/features/ui/primitives/checkbox.tsx
new file mode 100644
index 00000000..2994cdca
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/checkbox.tsx
@@ -0,0 +1,120 @@
+import * as CheckboxPrimitives from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import * as React from "react";
+import { cn, glassmorphism } from "./styles";
+
+export type CheckboxColor = "purple" | "blue" | "green" | "pink" | "orange" | "cyan";
+
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitives.Root> {
+  color?: CheckboxColor;
+  indeterminate?: boolean;
+}
+
+const checkboxVariants = {
+  purple: {
+    checked: "data-[state=checked]:bg-purple-500/20 data-[state=checked]:border-purple-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(168,85,247,0.5)]",
+    indicator: "text-purple-400 drop-shadow-[0_0_3px_rgba(168,85,247,0.7)]",
+    focusRing: "focus-visible:ring-purple-500",
+  },
+  blue: {
+    checked: "data-[state=checked]:bg-blue-500/20 data-[state=checked]:border-blue-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(59,130,246,0.5)]",
+    indicator: "text-blue-400 drop-shadow-[0_0_3px_rgba(59,130,246,0.7)]",
+    focusRing: "focus-visible:ring-blue-500",
+  },
+  green: {
+    checked: "data-[state=checked]:bg-green-500/20 data-[state=checked]:border-green-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(34,197,94,0.5)]",
+    indicator: "text-green-400 drop-shadow-[0_0_3px_rgba(34,197,94,0.7)]",
+    focusRing: "focus-visible:ring-green-500",
+  },
+  pink: {
+    checked: "data-[state=checked]:bg-pink-500/20 data-[state=checked]:border-pink-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(236,72,153,0.5)]",
+    indicator: "text-pink-400 drop-shadow-[0_0_3px_rgba(236,72,153,0.7)]",
+    focusRing: "focus-visible:ring-pink-500",
+  },
+  orange: {
+    checked: "data-[state=checked]:bg-orange-500/20 data-[state=checked]:border-orange-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(249,115,22,0.5)]",
+    indicator: "text-orange-400 drop-shadow-[0_0_3px_rgba(249,115,22,0.7)]",
+    focusRing: "focus-visible:ring-orange-500",
+  },
+  cyan: {
+    checked: "data-[state=checked]:bg-cyan-500/20 data-[state=checked]:border-cyan-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(34,211,238,0.5)]",
+    indicator: "text-cyan-400 drop-shadow-[0_0_3px_rgba(34,211,238,0.7)]",
+    focusRing: "focus-visible:ring-cyan-500",
+  },
+};
+
+/**
+ * 🤖 AI CONTEXT: Glassmorphic Checkbox Component
+ *
+ * DESIGN DECISIONS:
+ * 1. TRANSPARENCY - Glass effect with subtle background
+ *    - Unchecked: Almost invisible (bg-white/10)
+ *    - Checked: Color tinted glass (color-500/20)
+ *
+ * 2. NEON GLOW - Tron-style accent on activation
+ *    - Box shadow creates outer glow
+ *    - Drop shadow on check icon for depth
+ *
+ * 3. ANIMATION - Smooth state transitions
+ *    - Scale animation on check/uncheck
+ *    - Fade in/out for indicator
+ *    - 300ms transitions for smoothness
+ *
+ * 4. STATES - Support for three states
+ *    - Unchecked: Empty box
+ *    - Checked: Check icon with glow
+ *    - Indeterminate: Minus icon (partial selection)
+ */
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitives.Root>, CheckboxProps>(
+  ({ className, color = "cyan", indeterminate, checked, ...props }, ref) => {
+    const colorStyles = checkboxVariants[color];
+
+    return (
+      <CheckboxPrimitives.Root
+        className={cn(
+          "peer h-5 w-5 shrink-0 rounded-md",
+          "bg-black/10 dark:bg-white/10 backdrop-blur-xl",
+          "border-2 border-gray-300/30 dark:border-white/10",
+          "transition-all duration-300",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          colorStyles.focusRing,
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "hover:border-gray-400/50 dark:hover:border-white/20",
+          colorStyles.checked,
+          colorStyles.glow,
+          "data-[state=indeterminate]:bg-opacity-50",
+          glassmorphism.interactive.base,
+          className,
+        )}
+        checked={indeterminate ? "indeterminate" : checked}
+        {...props}
+        ref={ref}
+      >
+        <CheckboxPrimitives.Indicator
+          className={cn(
+            "flex items-center justify-center",
+            "data-[state=checked]:animate-in data-[state=checked]:zoom-in-0",
+            "data-[state=unchecked]:animate-out data-[state=unchecked]:zoom-out-0",
+            "data-[state=indeterminate]:animate-in data-[state=indeterminate]:zoom-in-0",
+          )}
+        >
+          {indeterminate ? (
+            <Minus className={cn("h-3.5 w-3.5", colorStyles.indicator)} />
+          ) : (
+            <Check className={cn("h-4 w-4", colorStyles.indicator)} />
+          )}
+        </CheckboxPrimitives.Indicator>
+      </CheckboxPrimitives.Root>
+    );
+  },
+);
+
+Checkbox.displayName = CheckboxPrimitives.Root.displayName;
+
+export { Checkbox, checkboxVariants };
diff --git a/archon-ui-main/src/features/ui/primitives/data-card.tsx b/archon-ui-main/src/features/ui/primitives/data-card.tsx
new file mode 100644
index 00000000..adab70b3
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/data-card.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import { cn, glassCard } from "./styles";
+
+interface DataCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  // Edge-lit properties
+  edgePosition?: "none" | "top" | "left" | "right" | "bottom";
+  edgeColor?: "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Glow properties
+  glowColor?: "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Glass properties
+  blur?: "none" | "sm" | "md" | "lg" | "xl";
+  transparency?: "clear" | "light" | "medium" | "frosted" | "solid";
+}
+
+interface DataCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface DataCardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface DataCardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
+  (
+    {
+      className,
+      edgePosition = "none",
+      edgeColor = "cyan",
+      glowColor = "none",
+      blur = "md",
+      transparency = "light",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasEdge = edgePosition !== "none";
+    const hasGlow = glowColor !== "none";
+    const glowVariant = glowColor !== "none" ? glassCard.variants[glowColor] : glassCard.variants.none;
+
+    if (hasEdge && edgePosition === "top") {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            glassCard.base,
+            glassCard.edgeColors[edgeColor].border || "border-gray-300/20 dark:border-white/10",
+            "min-h-[240px]",
+            className,
+          )}
+          {...props}
+        >
+          {/* Top edge light with glow */}
+          <div
+            className={cn(
+              "absolute inset-x-0 top-0 h-[2px] pointer-events-none z-10",
+              glassCard.edgeLit.position.top,
+              glassCard.edgeLit.color[edgeColor].line,
+              glassCard.edgeLit.color[edgeColor].glow,
+            )}
+          />
+          {/* Glow bleeding down */}
+          <div
+            className={cn(
+              "absolute inset-x-0 top-0 h-16 bg-gradient-to-b to-transparent blur-lg pointer-events-none z-10",
+              glassCard.edgeLit.color[edgeColor].gradient.vertical,
+            )}
+          />
+
+          {/* Content wrapper with flex layout */}
+          <div
+            className={cn(
+              "flex flex-col min-h-[240px]",
+              glassCard.blur[blur],
+              glassCard.tints[edgeColor]?.light || glassCard.transparency[transparency],
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      );
+    }
+
+    // Standard card (no edge-lit)
+    const glowClasses = !hasEdge && hasGlow ? [glowVariant.border, glowVariant.glow, glowVariant.hover] : [];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-xl overflow-hidden min-h-[240px]",
+          glassCard.blur[blur],
+          glassCard.transparency[transparency],
+          "flex flex-col",
+          hasGlow ? "" : "border border-gray-300/20 dark:border-white/10",
+          ...glowClasses,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCard.displayName = "DataCard";
+
+// Header component
+export const DataCardHeader = React.forwardRef<HTMLDivElement, DataCardHeaderProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("relative p-4 pb-2", className)} {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCardHeader.displayName = "DataCardHeader";
+
+// Content component (flexible - grows to fill space)
+export const DataCardContent = React.forwardRef<HTMLDivElement, DataCardContentProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex-1 px-4", className)} {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCardContent.displayName = "DataCardContent";
+
+// Footer component (anchored to bottom)
+export const DataCardFooter = React.forwardRef<HTMLDivElement, DataCardFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "px-4 py-3 bg-gray-100/50 dark:bg-black/30 border-t border-gray-200/50 dark:border-white/10",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCardFooter.displayName = "DataCardFooter";
diff --git a/archon-ui-main/src/features/ui/primitives/draggable-card.tsx b/archon-ui-main/src/features/ui/primitives/draggable-card.tsx
new file mode 100644
index 00000000..99d27e48
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/draggable-card.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { Card, type CardProps } from "./card";
+
+interface DraggableCardProps extends Omit<CardProps, "ref"> {
+  // Drag and drop
+  itemType: string;
+  itemId: string;
+  index: number;
+  onDrop?: (draggedId: string, targetIndex: number) => void;
+
+  // Visual states
+  isDragging?: boolean;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+}
+
+export const DraggableCard = React.forwardRef<HTMLDivElement, DraggableCardProps>(
+  ({ itemType, itemId, index, onDrop, onDragStart, onDragEnd, children, className, ...cardProps }, ref) => {
+    const [{ isDragging }, drag] = useDrag({
+      type: itemType,
+      item: { id: itemId, index },
+      collect: (monitor) => ({
+        isDragging: !!monitor.isDragging(),
+      }),
+      end: () => {
+        onDragEnd?.();
+      },
+    });
+
+    const [{ isOver }, drop] = useDrop({
+      accept: itemType,
+      hover: (draggedItem: { id: string; index: number }) => {
+        if (draggedItem.id === itemId) return;
+        if (draggedItem.index === index) return;
+
+        if (onDrop) {
+          onDrop(draggedItem.id, index);
+          draggedItem.index = index;
+        }
+      },
+      collect: (monitor) => ({
+        isOver: !!monitor.isOver(),
+      }),
+    });
+
+    const combinedRef = (node: HTMLDivElement | null) => {
+      drag(drop(node));
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
+    return (
+      <div ref={combinedRef} className={isDragging ? "opacity-50 scale-95 transition-all" : "transition-all"}>
+        <Card {...cardProps} className={className}>
+          {children}
+        </Card>
+      </div>
+    );
+  },
+);
+
+DraggableCard.displayName = "DraggableCard";
diff --git a/archon-ui-main/src/features/ui/primitives/grouped-card.tsx b/archon-ui-main/src/features/ui/primitives/grouped-card.tsx
new file mode 100644
index 00000000..0c1df9f4
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/grouped-card.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { DataCard } from "./data-card";
+import { cn } from "./styles";
+
+interface GroupedCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  cards: Array<{
+    id: string;
+    title: string;
+    edgeColor: "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+    children?: React.ReactNode;
+  }>;
+  maxVisible?: number;
+}
+
+/**
+ * GroupedCard - Stacked card component showing multiple cards in shuffle deck style
+ *
+ * Features:
+ * - Shows 2-3 cards stacked on top of each other
+ * - Top edge lights visible with fading effect
+ * - Progressive scaling (each card ~5% smaller)
+ * - Cards raised up behind top card with z-index layering
+ */
+export const GroupedCard = React.forwardRef<HTMLDivElement, GroupedCardProps>(
+  ({ cards, maxVisible = 3, className, ...props }, ref) => {
+    const visibleCards = cards.slice(0, maxVisible);
+    const cardCount = visibleCards.length;
+
+    return (
+      <div ref={ref} className={cn("relative", className)} {...props}>
+        {visibleCards.map((card, index) => {
+          const isTop = index === 0;
+          const zIndex = cardCount - index;
+          const scale = 1 - index * 0.03; // 3% smaller per card
+          const yOffset = index * 16; // 16px raised per card to show edge lights
+          const opacity = 1 - index * 0.15; // Fade background cards slightly
+
+          return (
+            <div
+              key={card.id}
+              className="absolute inset-0 transition-all duration-300"
+              style={{
+                zIndex,
+                transform: `scale(${scale}) translateY(-${yOffset}px)`,
+                opacity: isTop ? 1 : opacity,
+              }}
+            >
+              <DataCard
+                edgePosition="top"
+                edgeColor={card.edgeColor}
+                blur="lg"
+                className={cn("transition-all duration-300", !isTop && "pointer-events-none")}
+              >
+                {card.children || (
+                  <div className="p-4">
+                    <h4 className="font-medium text-white">{card.title}</h4>
+                  </div>
+                )}
+              </DataCard>
+            </div>
+          );
+        })}
+        {/* Spacer to maintain height based on bottom card */}
+        <div style={{ paddingBottom: `${(cardCount - 1) * 16}px`, opacity: 0 }}>
+          <DataCard edgePosition="top" edgeColor={visibleCards[0]?.edgeColor || "cyan"}>
+            <div className="p-4">
+              <h4>{visibleCards[0]?.title || "Placeholder"}</h4>
+            </div>
+          </DataCard>
+        </div>
+      </div>
+    );
+  },
+);
+
+GroupedCard.displayName = "GroupedCard";
diff --git a/archon-ui-main/src/features/ui/primitives/index.ts b/archon-ui-main/src/features/ui/primitives/index.ts
index 163ce03f..2d47e3b3 100644
--- a/archon-ui-main/src/features/ui/primitives/index.ts
+++ b/archon-ui-main/src/features/ui/primitives/index.ts
@@ -14,13 +14,19 @@ export * from "./alert-dialog";
 
 // Export all primitives
 export * from "./button";
+export * from "./card";
 export * from "./combobox";
+export * from "./data-card";
 export * from "./dialog";
+export * from "./draggable-card";
 export * from "./dropdown-menu";
+export * from "./grouped-card";
 export * from "./input";
 export * from "./inspector-dialog";
 export * from "./pill";
+export * from "./pill-navigation";
 export * from "./select";
+export * from "./selectable-card";
 // Export style utilities
 export * from "./styles";
 export * from "./tabs";
diff --git a/archon-ui-main/src/features/ui/primitives/label.tsx b/archon-ui-main/src/features/ui/primitives/label.tsx
new file mode 100644
index 00000000..d91c16b4
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/label.tsx
@@ -0,0 +1,20 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import React from "react";
+import { cn } from "./styles";
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none",
+      "text-gray-700 dark:text-gray-200",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
diff --git a/archon-ui-main/src/features/ui/primitives/pill-navigation.tsx b/archon-ui-main/src/features/ui/primitives/pill-navigation.tsx
new file mode 100644
index 00000000..2f3fae23
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/pill-navigation.tsx
@@ -0,0 +1,164 @@
+import { ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/features/ui/primitives/select";
+import { cn } from "@/features/ui/primitives/styles";
+
+export interface PillNavigationItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  items?: string[];
+}
+
+interface PillNavigationProps {
+  items: PillNavigationItem[];
+  activeSection: string;
+  activeItem?: string;
+  onSectionClick: (sectionId: string) => void;
+  onItemClick?: (item: string) => void;
+  colorVariant?: "blue" | "orange" | "cyan" | "purple" | "green";
+  size?: "small" | "default" | "large";
+  showIcons?: boolean;
+  showText?: boolean;
+  hasSubmenus?: boolean;
+  openDropdown?: string | null;
+}
+
+export const PillNavigation = ({
+  items,
+  activeSection,
+  activeItem,
+  onSectionClick,
+  onItemClick,
+  colorVariant = "cyan",
+  size = "default",
+  showIcons = true,
+  showText = true,
+  hasSubmenus = true,
+  openDropdown,
+}: PillNavigationProps) => {
+  const getColorClasses = (variant: string, isSelected: boolean) => {
+    const colors = {
+      blue: isSelected
+        ? "bg-blue-500/20 dark:bg-blue-400/20 text-blue-700 dark:text-blue-300 border border-blue-400/50 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      orange: isSelected
+        ? "bg-orange-500/20 dark:bg-orange-400/20 text-orange-700 dark:text-orange-300 border border-orange-400/50 shadow-[0_0_10px_rgba(251,146,60,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      cyan: isSelected
+        ? "bg-cyan-500/20 dark:bg-cyan-400/20 text-cyan-700 dark:text-cyan-300 border border-cyan-400/50 shadow-[0_0_10px_rgba(34,211,238,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      purple: isSelected
+        ? "bg-purple-500/20 dark:bg-purple-400/20 text-purple-700 dark:text-purple-300 border border-purple-400/50 shadow-[0_0_10px_rgba(147,51,234,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      green: isSelected
+        ? "bg-green-500/20 dark:bg-green-400/20 text-green-700 dark:text-green-300 border border-green-400/50 shadow-[0_0_10px_rgba(34,197,94,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+    };
+    return colors[variant as keyof typeof colors] || colors.cyan;
+  };
+
+  const getSizeClasses = (sizeVariant: string) => {
+    const sizes = {
+      small: "px-4 py-2 text-xs",
+      default: "px-6 py-3 text-sm",
+      large: "px-8 py-4 text-base",
+    };
+    return sizes[sizeVariant as keyof typeof sizes] || sizes.default;
+  };
+
+  return (
+    <div className="backdrop-blur-sm bg-white/40 dark:bg-white/5 border border-white/30 dark:border-white/15 rounded-full p-1 shadow-lg transition-all duration-300 ease-in-out">
+      <div className="flex gap-1 items-center">
+        {items.map((item) => {
+          const isSelected = activeSection === item.id;
+          const hasDropdown = hasSubmenus && item.items && item.items.length > 0;
+          const isThisExpanded = openDropdown === item.id && hasDropdown;
+
+          return (
+            <div key={item.id} className="relative">
+              {/* Extended pill for selected item with dropdown */}
+              {isSelected && hasDropdown ? (
+                <div
+                  className={cn(
+                    "flex items-center gap-2 rounded-full transition-all duration-200",
+                    "font-medium whitespace-nowrap",
+                    getSizeClasses(size),
+                    getColorClasses(colorVariant, true),
+                  )}
+                >
+                  {showIcons && item.icon}
+                  {showText && item.label}
+
+                  {/* Dropdown selector inside the pill */}
+                  {onItemClick && (
+                    <div className="flex items-center ml-4 pl-4 border-l border-current/30">
+                      <Select value={activeItem || ""} onValueChange={onItemClick}>
+                        <SelectTrigger
+                          className="bg-transparent border-none outline-none font-medium cursor-pointer text-inherit w-auto px-0 hover:border-none focus:border-none focus:shadow-none"
+                          showChevron={false}
+                          color={colorVariant}
+                        >
+                          <SelectValue placeholder="Select..." />
+                        </SelectTrigger>
+                        <SelectContent color={colorVariant}>
+                          {item.items?.map((subItem) => (
+                            <SelectItem key={subItem} value={subItem} color={colorVariant}>
+                              {subItem}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  <button
+                    type="button"
+                    className={cn(
+                      "ml-2 flex h-6 w-6 items-center justify-center rounded-full transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent focus:ring-current",
+                      isThisExpanded ? "-rotate-90" : "rotate-0",
+                    )}
+                    aria-label={isThisExpanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
+                    aria-expanded={isThisExpanded}
+                    onClick={() => onSectionClick(item.id)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        onSectionClick(item.id);
+                      }
+                    }}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
+                </div>
+              ) : (
+                /* Regular pill for non-selected items */
+                <button
+                  type="button"
+                  onClick={() => onSectionClick(item.id)}
+                  className={cn(
+                    "flex items-center gap-2 rounded-full transition-all duration-200",
+                    "font-medium whitespace-nowrap",
+                    getSizeClasses(size),
+                    getColorClasses(colorVariant, isSelected),
+                  )}
+                >
+                  {showIcons && item.icon}
+                  {showText && item.label}
+                  {hasDropdown && (
+                    <ChevronRight
+                      className={cn(
+                        "w-4 h-4 transition-transform duration-300",
+                        isThisExpanded ? "-rotate-90" : "rotate-0",
+                      )}
+                    />
+                  )}
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/ui/primitives/pill.tsx b/archon-ui-main/src/features/ui/primitives/pill.tsx
index 5c7a7040..597faa8d 100644
--- a/archon-ui-main/src/features/ui/primitives/pill.tsx
+++ b/archon-ui-main/src/features/ui/primitives/pill.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { cn } from "./styles";
 
-export type PillColor = "blue" | "orange" | "cyan" | "purple" | "pink" | "emerald" | "gray";
+export type PillColor = "blue" | "orange" | "cyan" | "purple" | "pink" | "green" | "gray";
 
 export interface StatPillProps extends React.HTMLAttributes<HTMLDivElement> {
   color?: PillColor;
@@ -47,11 +47,11 @@ const COLOR_MAP: Record<PillColor, { bg: string; text: string; border: string; g
     border: "border-pink-300/60 dark:border-purple-500/50",
     glow: "shadow-[0_0_10px_rgba(236,72,153,0.35)]",
   },
-  emerald: {
-    bg: "from-emerald-100/80 to-white/60 dark:from-emerald-500/20 dark:to-emerald-500/10",
-    text: "text-emerald-700 dark:text-emerald-200",
-    border: "border-emerald-300/60 dark:border-emerald-500/50",
-    glow: "shadow-[0_0_10px_rgba(16,185,129,0.35)]",
+  green: {
+    bg: "from-green-100/80 to-white/60 dark:from-green-500/20 dark:to-green-500/10",
+    text: "text-green-700 dark:text-green-200",
+    border: "border-green-300/60 dark:border-green-500/50",
+    glow: "shadow-[0_0_10px_rgba(34,197,94,0.35)]",
   },
   gray: {
     bg: "from-gray-100/80 to-white/60 dark:from-gray-500/20 dark:to-gray-500/10",
diff --git a/archon-ui-main/src/features/ui/primitives/radio-group.tsx b/archon-ui-main/src/features/ui/primitives/radio-group.tsx
new file mode 100644
index 00000000..b3349a09
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/radio-group.tsx
@@ -0,0 +1,32 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import React from "react";
+import { cn, glassmorphism } from "./styles";
+
+export const RadioGroup = RadioGroupPrimitive.Root;
+
+export const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "aspect-square h-4 w-4 rounded-full",
+      "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60",
+      "dark:from-white/10 dark:to-black/30",
+      glassmorphism.border.default,
+      glassmorphism.interactive.base,
+      "focus:outline-none focus:ring-2 focus:ring-cyan-500",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-cyan-500",
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <Circle className="h-2.5 w-2.5 fill-cyan-500 text-cyan-500" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
diff --git a/archon-ui-main/src/features/ui/primitives/select.tsx b/archon-ui-main/src/features/ui/primitives/select.tsx
index c9781b64..bc0fbe88 100644
--- a/archon-ui-main/src/features/ui/primitives/select.tsx
+++ b/archon-ui-main/src/features/ui/primitives/select.tsx
@@ -1,82 +1,152 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown } from "lucide-react";
 import React from "react";
-import { cn } from "./styles";
+import { cn, glassmorphism } from "./styles";
+
+export type SelectColor = "purple" | "blue" | "green" | "pink" | "orange" | "cyan";
 
 // Select Root - just re-export
 export const Select = SelectPrimitive.Root;
 export const SelectValue = SelectPrimitive.Value;
 
+const selectColorVariants = {
+  purple: {
+    trigger:
+      "hover:border-purple-400/50 hover:shadow-[0_0_15px_rgba(168,85,247,0.3)] focus:border-purple-500 focus:shadow-[0_0_20px_rgba(168,85,247,0.4)]",
+    item: "hover:bg-purple-500/20 dark:hover:bg-purple-400/20 data-[state=checked]:bg-purple-500/30 dark:data-[state=checked]:bg-purple-400/30 data-[state=checked]:text-purple-700 dark:data-[state=checked]:text-purple-300",
+  },
+  blue: {
+    trigger:
+      "hover:border-blue-400/50 hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] focus:border-blue-500 focus:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
+    item: "hover:bg-blue-500/20 dark:hover:bg-blue-400/20 data-[state=checked]:bg-blue-500/30 dark:data-[state=checked]:bg-blue-400/30 data-[state=checked]:text-blue-700 dark:data-[state=checked]:text-blue-300",
+  },
+  green: {
+    trigger:
+      "hover:border-green-400/50 hover:shadow-[0_0_15px_rgba(34,197,94,0.3)] focus:border-green-500 focus:shadow-[0_0_20px_rgba(34,197,94,0.4)]",
+    item: "hover:bg-green-500/20 dark:hover:bg-green-400/20 data-[state=checked]:bg-green-500/30 dark:data-[state=checked]:bg-green-400/30 data-[state=checked]:text-green-700 dark:data-[state=checked]:text-green-300",
+  },
+  pink: {
+    trigger:
+      "hover:border-pink-400/50 hover:shadow-[0_0_15px_rgba(236,72,153,0.3)] focus:border-pink-500 focus:shadow-[0_0_20px_rgba(236,72,153,0.4)]",
+    item: "hover:bg-pink-500/20 dark:hover:bg-pink-400/20 data-[state=checked]:bg-pink-500/30 dark:data-[state=checked]:bg-pink-400/30 data-[state=checked]:text-pink-700 dark:data-[state=checked]:text-pink-300",
+  },
+  orange: {
+    trigger:
+      "hover:border-orange-400/50 hover:shadow-[0_0_15px_rgba(249,115,22,0.3)] focus:border-orange-500 focus:shadow-[0_0_20px_rgba(249,115,22,0.4)]",
+    item: "hover:bg-orange-500/20 dark:hover:bg-orange-400/20 data-[state=checked]:bg-orange-500/30 dark:data-[state=checked]:bg-orange-400/30 data-[state=checked]:text-orange-700 dark:data-[state=checked]:text-orange-300",
+  },
+  cyan: {
+    trigger:
+      "hover:border-cyan-400/50 hover:shadow-[0_0_15px_rgba(34,211,238,0.3)] focus:border-cyan-500 focus:shadow-[0_0_20px_rgba(34,211,238,0.4)]",
+    item: "hover:bg-cyan-500/20 dark:hover:bg-cyan-400/20 data-[state=checked]:bg-cyan-500/30 dark:data-[state=checked]:bg-cyan-400/30 data-[state=checked]:text-cyan-700 dark:data-[state=checked]:text-cyan-300",
+  },
+};
+
+/**
+ * 🤖 AI CONTEXT: Enhanced Select Trigger
+ *
+ * GLASSMORPHISM ENHANCEMENTS:
+ * 1. TRANSPARENCY - True glass effect with backdrop blur
+ * 2. NEON BORDERS - Color-coded focus states
+ * 3. GLOW EFFECTS - Box shadows for depth
+ * 4. COLOR VARIANTS - Support for theme colors
+ */
 // Select Trigger with glassmorphism styling
 export const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     showChevron?: boolean;
+    color?: SelectColor;
   }
->(({ className = "", children, showChevron = true, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex items-center justify-between gap-2 px-3 py-2 rounded-lg",
-      "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60",
-      "dark:from-white/10 dark:to-black/30",
-      "border border-gray-200 dark:border-gray-700",
-      "transition-all duration-200",
-      "hover:border-cyan-400/50 hover:shadow-[0_0_10px_rgba(34,211,238,0.2)]",
-      "focus:outline-none focus:border-cyan-500 focus:shadow-[0_0_15px_rgba(34,211,238,0.3)]",
-      "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-gray-500 dark:data-[placeholder]:text-gray-400",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    {showChevron && (
-      <SelectPrimitive.Icon className="ml-auto">
-        <ChevronDown className="w-3 h-3 opacity-60" />
-      </SelectPrimitive.Icon>
-    )}
-  </SelectPrimitive.Trigger>
-));
+>(({ className = "", children, showChevron = true, color = "cyan", ...props }, ref) => {
+  const colorStyles = selectColorVariants[color];
+
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex items-center justify-between gap-2 px-3 py-2 rounded-lg",
+        "backdrop-blur-xl bg-black/10 dark:bg-white/10",
+        "border border-gray-300/30 dark:border-white/10",
+        "transition-all duration-300",
+        colorStyles.trigger,
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "data-[placeholder]:text-gray-500 dark:data-[placeholder]:text-gray-400",
+        glassmorphism.interactive.base,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showChevron && (
+        <SelectPrimitive.Icon className="ml-auto">
+          <ChevronDown className="w-3 h-3 opacity-60 transition-transform duration-300 data-[state=open]:rotate-180" />
+        </SelectPrimitive.Icon>
+      )}
+    </SelectPrimitive.Trigger>
+  );
+});
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
+/**
+ * 🤖 AI CONTEXT: Enhanced Select Content
+ *
+ * GLASS DROPDOWN DESIGN:
+ * 1. TRANSPARENCY - Full glass effect on dropdown
+ * 2. BACKDROP BLUR - Heavy blur for content behind
+ * 3. NEON GLOW - Subtle color-matched glow
+ * 4. PORTAL - Ensures z-index above all content
+ */
 // Select Content with glassmorphism and Portal for z-index solution
 export const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className = "", children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-[10000] min-w-[8rem] overflow-hidden rounded-lg",
-        // Matching our card glassmorphism
-        "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60",
-        "dark:from-white/10 dark:to-black/30",
-        "border border-gray-200 dark:border-zinc-800/50",
-        // Tron shadow with subtle cyan glow
-        "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
-        "shadow-cyan-500/5 dark:shadow-cyan-500/10",
-        // Text colors matching rest of app
-        "text-gray-900 dark:text-gray-100",
-        // Animation
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2",
-        "data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2",
-        "data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      position={position}
-      sideOffset={5}
-      {...props}
-    >
-      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    color?: SelectColor;
+  }
+>(({ className = "", children, position = "popper", color = "cyan", ...props }, ref) => {
+  const glowColor = {
+    purple: "shadow-purple-500/20 dark:shadow-purple-500/30",
+    blue: "shadow-blue-500/20 dark:shadow-blue-500/30",
+    green: "shadow-green-500/20 dark:shadow-green-500/30",
+    pink: "shadow-pink-500/20 dark:shadow-pink-500/30",
+    orange: "shadow-orange-500/20 dark:shadow-orange-500/30",
+    cyan: "shadow-cyan-500/20 dark:shadow-cyan-500/30",
+  }[color];
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          "relative z-[10000] min-w-[8rem] overflow-hidden rounded-lg",
+          // True glassmorphism
+          "backdrop-blur-xl bg-black/20 dark:bg-white/10",
+          "border border-gray-300/30 dark:border-white/10",
+          // Neon shadow with color glow
+          "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.3)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
+          glowColor,
+          // Text colors
+          "text-gray-900 dark:text-gray-100",
+          // Animation
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          glassmorphism.animation.fadeIn,
+          className,
+        )}
+        position={position}
+        sideOffset={5}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 // Select Item with hover effects
@@ -84,41 +154,43 @@ export const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
     icon?: React.ReactNode;
+    color?: SelectColor;
   }
->(({ className = "", children, icon, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex items-center text-sm outline-none",
-      "transition-all duration-150 cursor-pointer rounded-md",
-      "pl-8 pr-3 py-2", // Added left padding for checkmark space
-      // Text colors
-      "text-gray-700 dark:text-gray-200",
-      // Hover state with subtle cyan tint
-      "hover:bg-cyan-500/20 dark:hover:bg-cyan-400/20",
-      "hover:text-gray-900 dark:hover:text-white",
-      // Focus state
-      "focus:bg-cyan-500/20 dark:focus:bg-cyan-400/20",
-      "focus:text-gray-900 dark:focus:text-white",
-      // Disabled state
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      // Selected/checked state with stronger cyan
-      "data-[state=checked]:bg-cyan-500/30 dark:data-[state=checked]:bg-cyan-400/30",
-      "data-[state=checked]:text-cyan-700 dark:data-[state=checked]:text-cyan-300",
-      "data-[state=checked]:font-medium",
-      className,
-    )}
-    {...props}
-  >
-    <SelectPrimitive.ItemIndicator className="absolute left-2 flex h-4 w-4 items-center justify-center">
-      <Check className="h-4 w-4" />
-    </SelectPrimitive.ItemIndicator>
-    <SelectPrimitive.ItemText className="flex items-center gap-2">
-      {icon && <span className="flex-shrink-0">{icon}</span>}
-      {children}
-    </SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
+>(({ className = "", children, icon, color = "cyan", ...props }, ref) => {
+  const colorStyles = selectColorVariants[color];
+
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex items-center text-sm outline-none",
+        "transition-all duration-150 cursor-pointer rounded-md",
+        "pl-8 pr-3 py-2", // Added left padding for checkmark space
+        // Text colors
+        "text-gray-700 dark:text-gray-200",
+        // Hover and focus states with color tint
+        "hover:text-gray-900 dark:hover:text-white",
+        "focus:text-gray-900 dark:focus:text-white",
+        // Disabled state
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // Selected/checked state with stronger color
+        "data-[state=checked]:font-medium",
+        colorStyles.item,
+        glassmorphism.interactive.base,
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemIndicator className="absolute left-2 flex h-4 w-4 items-center justify-center">
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText className="flex items-center gap-2">
+        {icon && <span className="flex-shrink-0">{icon}</span>}
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 // Export group and label for completeness
@@ -129,7 +201,7 @@ export const SelectLabel = React.forwardRef<
 >(({ className = "", ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={`px-2 py-1.5 text-xs font-semibold text-gray-600 dark:text-gray-400 ${className}`}
+    className={cn("px-2 py-1.5 text-xs font-semibold text-gray-600 dark:text-gray-400", className)}
     {...props}
   />
 ));
diff --git a/archon-ui-main/src/features/ui/primitives/selectable-card.tsx b/archon-ui-main/src/features/ui/primitives/selectable-card.tsx
new file mode 100644
index 00000000..bf1dc043
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/selectable-card.tsx
@@ -0,0 +1,90 @@
+import { motion } from "framer-motion";
+import React from "react";
+import { Card, type CardProps } from "./card";
+import { cn } from "./styles";
+
+interface SelectableCardProps extends Omit<CardProps, "ref"> {
+  // Selection state
+  isSelected?: boolean;
+  onSelect?: () => void;
+
+  // Visual states
+  isPinned?: boolean;
+  showAuroraGlow?: boolean; // Aurora effect for selected state
+
+  // Selection colors
+  selectedBorderColor?: string;
+  selectedShadow?: string;
+  pinnedBorderColor?: string;
+  pinnedShadow?: string;
+}
+
+export const SelectableCard = React.forwardRef<HTMLDivElement, SelectableCardProps>(
+  (
+    {
+      isSelected = false,
+      isPinned = false,
+      showAuroraGlow = false,
+      onSelect,
+      selectedBorderColor = "border-purple-400/60 dark:border-purple-500/60",
+      selectedShadow = "shadow-[0_0_15px_rgba(168,85,247,0.4),0_0_10px_rgba(147,51,234,0.3)] dark:shadow-[0_0_20px_rgba(168,85,247,0.5),0_0_15px_rgba(147,51,234,0.4)]",
+      pinnedBorderColor = "border-purple-500/80 dark:border-purple-500/80",
+      pinnedShadow = "shadow-[0_0_15px_rgba(168,85,247,0.3)]",
+      children,
+      className,
+      ...cardProps
+    },
+    ref,
+  ) => {
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onSelect?.();
+      }
+    };
+
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: motion.div required for framer-motion animations - semantic button would break animation behavior
+      <motion.div
+        role="button"
+        tabIndex={0}
+        onClick={onSelect}
+        onKeyDown={handleKeyDown}
+        aria-selected={isSelected}
+        className={cn(
+          "cursor-pointer transition-all duration-300 overflow-visible",
+          isSelected ? "scale-[1.02]" : "hover:scale-[1.01]",
+        )}
+        whileHover={{ scale: isSelected ? 1.02 : 1.01 }}
+      >
+        <div className="relative">
+          {/* Aurora glow effect for selected state */}
+          {isSelected && showAuroraGlow && (
+            <div
+              aria-hidden="true"
+              className="absolute inset-0 rounded-xl overflow-hidden opacity-30 dark:opacity-40 pointer-events-none"
+            >
+              <div className="absolute -inset-[100px] bg-[radial-gradient(circle,rgba(168,85,247,0.8)_0%,rgba(147,51,234,0.6)_40%,transparent_70%)] blur-3xl animate-[pulse_8s_ease-in-out_infinite]" />
+            </div>
+          )}
+
+          <Card
+            ref={ref}
+            {...cardProps}
+            className={cn(
+              isPinned && pinnedBorderColor,
+              isPinned && pinnedShadow,
+              isSelected && !isPinned && selectedBorderColor,
+              isSelected && !isPinned && selectedShadow,
+              className,
+            )}
+          >
+            {children}
+          </Card>
+        </div>
+      </motion.div>
+    );
+  },
+);
+
+SelectableCard.displayName = "SelectableCard";
diff --git a/archon-ui-main/src/features/ui/primitives/styles.ts b/archon-ui-main/src/features/ui/primitives/styles.ts
index 26e2b1cf..aea974a4 100644
--- a/archon-ui-main/src/features/ui/primitives/styles.ts
+++ b/archon-ui-main/src/features/ui/primitives/styles.ts
@@ -8,28 +8,27 @@
  * - For runtime theme values, use useThemeAware hook
  */
 
-// Base glassmorphism classes with Tron aesthetic
+// Base glassmorphism classes with Tron aesthetic - TRUE GLASS EFFECT
 export const glassmorphism = {
-  // Background variations - matching existing Card.tsx patterns
+  // Background variations - TRUE TRANSPARENCY for glass effect
   background: {
-    subtle: "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
-    strong: "backdrop-blur-md bg-gradient-to-b from-white/95 to-white/90 dark:from-gray-800/95 dark:to-gray-900/95",
-    card: "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
-    // Tron-style colored backgrounds
-    cyan: "backdrop-blur-md bg-gradient-to-b from-cyan-100/80 dark:from-cyan-500/20 to-white/60 dark:to-cyan-500/5",
-    blue: "backdrop-blur-md bg-gradient-to-b from-blue-100/80 dark:from-blue-500/20 to-white/60 dark:to-blue-500/5",
-    purple:
-      "backdrop-blur-md bg-gradient-to-b from-purple-100/80 dark:from-purple-500/20 to-white/60 dark:to-purple-500/5",
+    subtle: "backdrop-blur-xl bg-white/5 dark:bg-white/10",
+    strong: "backdrop-blur-xl bg-white/10 dark:bg-white/20",
+    card: "backdrop-blur-xl bg-white/5 dark:bg-white/10",
+    // Tron-style colored backgrounds - VERY transparent with strong blur
+    cyan: "backdrop-blur-xl bg-cyan-400/5 dark:bg-cyan-400/10",
+    blue: "backdrop-blur-xl bg-blue-400/5 dark:bg-blue-400/10",
+    purple: "backdrop-blur-xl bg-purple-400/5 dark:bg-purple-400/10",
   },
 
-  // Border styles with neon glow
+  // Border styles for glass effect - more prominent for edge definition
   border: {
-    default: "border border-gray-200 dark:border-gray-700",
-    cyan: "border-cyan-300 dark:border-cyan-500/30",
-    blue: "border-blue-300 dark:border-blue-500/30",
-    purple: "border-purple-300 dark:border-purple-500/30",
-    focus: "focus:border-cyan-500 focus:shadow-[0_0_20px_5px_rgba(34,211,238,0.5)]",
-    hover: "hover:border-cyan-400/70 hover:shadow-[0_0_15px_rgba(34,211,238,0.4)]",
+    default: "border border-white/10 dark:border-white/[0.06]",
+    cyan: "border border-cyan-400/50 dark:border-cyan-400/40",
+    blue: "border border-blue-400/50 dark:border-blue-400/40",
+    purple: "border border-purple-400/50 dark:border-purple-400/40",
+    focus: "focus:border-cyan-400 focus:shadow-[0_0_30px_10px_rgba(34,211,238,0.6)]",
+    hover: "hover:border-cyan-400/80 hover:shadow-[0_0_25px_5px_rgba(34,211,238,0.5)]",
   },
 
   // Interactive states
@@ -59,14 +58,34 @@ export const glassmorphism = {
     md: "shadow-md dark:shadow-lg",
     lg: "shadow-lg dark:shadow-2xl",
     elevated: "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
-    // Neon glow effects matching Card.tsx
+    // Strong neon glow effects for true Tron aesthetic
     glow: {
-      cyan: "shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]",
-      blue: "shadow-[0_0_10px_2px_rgba(59,130,246,0.4)] dark:shadow-[0_0_20px_5px_rgba(59,130,246,0.7)]",
-      purple: "shadow-[0_0_10px_2px_rgba(168,85,247,0.4)] dark:shadow-[0_0_20px_5px_rgba(168,85,247,0.7)]",
-      green: "shadow-[0_0_10px_2px_rgba(16,185,129,0.4)] dark:shadow-[0_0_20px_5px_rgba(16,185,129,0.7)]",
-      pink: "shadow-[0_0_10px_2px_rgba(236,72,153,0.4)] dark:shadow-[0_0_20px_5px_rgba(236,72,153,0.7)]",
-      orange: "shadow-[0_0_10px_2px_rgba(251,146,60,0.4)] dark:shadow-[0_0_20px_5px_rgba(251,146,60,0.7)]",
+      purple: "shadow-[0_0_30px_10px_rgba(168,85,247,0.5)] dark:shadow-[0_0_40px_15px_rgba(168,85,247,0.7)]",
+      blue: "shadow-[0_0_30px_10px_rgba(59,130,246,0.5)] dark:shadow-[0_0_40px_15px_rgba(59,130,246,0.7)]",
+      green: "shadow-[0_0_30px_10px_rgba(34,197,94,0.5)] dark:shadow-[0_0_40px_15px_rgba(34,197,94,0.7)]",
+      red: "shadow-[0_0_30px_10px_rgba(239,68,68,0.5)] dark:shadow-[0_0_40px_15px_rgba(239,68,68,0.7)]",
+      orange: "shadow-[0_0_30px_10px_rgba(251,146,60,0.5)] dark:shadow-[0_0_40px_15px_rgba(251,146,60,0.7)]",
+      cyan: "shadow-[0_0_30px_10px_rgba(34,211,238,0.5)] dark:shadow-[0_0_40px_15px_rgba(34,211,238,0.7)]",
+      pink: "shadow-[0_0_30px_10px_rgba(236,72,153,0.5)] dark:shadow-[0_0_40px_15px_rgba(236,72,153,0.7)]",
+    },
+  },
+
+  // Edge glow positions - now part of glassCard for better integration
+  edgePositions: {
+    none: "",
+    top: "before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[2px]",
+    left: "before:content-[''] before:absolute before:top-0 before:left-0 before:bottom-0 before:w-[2px]",
+    right: "before:content-[''] before:absolute before:top-0 before:right-0 before:bottom-0 before:w-[2px]",
+    bottom: "before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[2px]",
+  },
+
+  // Configurable sizes for cards
+  sizes: {
+    card: {
+      sm: "p-4 max-w-sm",
+      md: "p-6 max-w-md",
+      lg: "p-8 max-w-lg",
+      xl: "p-10 max-w-xl",
     },
   },
 
@@ -99,6 +118,453 @@ export const glassmorphism = {
   },
 };
 
+// Card-specific glass styles with accent colors
+export const glassCard = {
+  // Base glass card (true transparency) - NO blur here, controlled separately
+  base: "relative rounded-lg overflow-hidden border transition-all duration-300",
+
+  // Blur intensity levels - Visible glass effect
+  blur: {
+    none: "backdrop-blur-none", // No blur (0px)
+    sm: "backdrop-blur-sm", // 4px - Light glass
+    md: "backdrop-blur-md", // 12px - Medium glass (visible blur)
+    lg: "backdrop-blur-lg", // 16px - Strong glass
+    xl: "backdrop-blur-xl", // 24px - Very strong glass
+    "2xl": "backdrop-blur-2xl", // 40px - Heavy glass
+    "3xl": "backdrop-blur-3xl", // 64px - Maximum glass
+  },
+
+  // Glass transparency levels - Theme-aware for better color visibility
+  transparency: {
+    clear: "bg-white/[0.02] dark:bg-white/[0.01]", // Very transparent - see through
+    light: "bg-white/[0.08] dark:bg-white/[0.05]", // Light glass - see through clearly
+    medium: "bg-white/[0.15] dark:bg-white/[0.08]", // Medium glass - lighter in dark mode
+    frosted: "bg-white/[0.40] dark:bg-black/[0.40]", // Frosted - white in light, black in dark
+    solid: "bg-white/[0.90] dark:bg-black/[0.95]", // Solid - opaque
+  },
+
+  // Edge color mappings for DataCard (edge-lit cards with colored gradients)
+  edgeColors: {
+    purple: {
+      solid: "bg-purple-500",
+      gradient: "from-purple-500/40",
+      border: "border-purple-500/30",
+      bg: "bg-gradient-to-br from-purple-500/8 to-purple-600/3",
+    },
+    blue: {
+      solid: "bg-blue-500",
+      gradient: "from-blue-500/40",
+      border: "border-blue-500/30",
+      bg: "bg-gradient-to-br from-blue-500/8 to-blue-600/3",
+    },
+    cyan: {
+      solid: "bg-cyan-500",
+      gradient: "from-cyan-500/40",
+      border: "border-cyan-500/30",
+      bg: "bg-gradient-to-br from-cyan-500/8 to-cyan-600/3",
+    },
+    green: {
+      solid: "bg-green-500",
+      gradient: "from-green-500/40",
+      border: "border-green-500/30",
+      bg: "bg-gradient-to-br from-green-500/8 to-green-600/3",
+    },
+    orange: {
+      solid: "bg-orange-500",
+      gradient: "from-orange-500/40",
+      border: "border-orange-500/30",
+      bg: "bg-gradient-to-br from-orange-500/8 to-orange-600/3",
+    },
+    pink: {
+      solid: "bg-pink-500",
+      gradient: "from-pink-500/40",
+      border: "border-pink-500/30",
+      bg: "bg-gradient-to-br from-pink-500/8 to-pink-600/3",
+    },
+    red: {
+      solid: "bg-red-500",
+      gradient: "from-red-500/40",
+      border: "border-red-500/30",
+      bg: "bg-gradient-to-br from-red-500/8 to-red-600/3",
+    },
+  },
+
+  // Colored glass tints - BRIGHT NEON COLORS with higher opacity
+  tints: {
+    none: "",
+    purple: {
+      clear: "bg-purple-500/[0.03] dark:bg-purple-400/[0.04]", // 3-4% - barely visible tint
+      light: "bg-purple-500/[0.08] dark:bg-purple-400/[0.10]", // 8-10% - subtle colored glass
+      medium: "bg-purple-500/[0.15] dark:bg-purple-400/[0.20]", // 15-20% - standard colored glass
+      frosted: "bg-purple-500/[0.25] dark:bg-purple-400/[0.35]", // 25-35% - frosted colored glass
+      solid: "bg-purple-500/[0.40] dark:bg-purple-400/[0.60]", // 40-60% - bright neon glow
+    },
+    blue: {
+      clear: "bg-blue-500/[0.03] dark:bg-blue-400/[0.04]",
+      light: "bg-blue-500/[0.08] dark:bg-blue-400/[0.10]",
+      medium: "bg-blue-500/[0.15] dark:bg-blue-400/[0.20]",
+      frosted: "bg-blue-500/[0.25] dark:bg-blue-400/[0.35]",
+      solid: "bg-blue-500/[0.40] dark:bg-blue-400/[0.60]",
+    },
+    cyan: {
+      clear: "bg-cyan-500/[0.03] dark:bg-cyan-400/[0.04]",
+      light: "bg-cyan-500/[0.08] dark:bg-cyan-400/[0.10]",
+      medium: "bg-cyan-500/[0.15] dark:bg-cyan-400/[0.20]",
+      frosted: "bg-cyan-500/[0.25] dark:bg-cyan-400/[0.35]",
+      solid: "bg-cyan-500/[0.40] dark:bg-cyan-400/[0.60]",
+    },
+    green: {
+      clear: "bg-green-500/[0.03] dark:bg-green-400/[0.04]",
+      light: "bg-green-500/[0.08] dark:bg-green-400/[0.10]",
+      medium: "bg-green-500/[0.15] dark:bg-green-400/[0.20]",
+      frosted: "bg-green-500/[0.25] dark:bg-green-400/[0.35]",
+      solid: "bg-green-500/[0.40] dark:bg-green-400/[0.60]",
+    },
+    orange: {
+      clear: "bg-orange-500/[0.03] dark:bg-orange-400/[0.04]",
+      light: "bg-orange-500/[0.08] dark:bg-orange-400/[0.10]",
+      medium: "bg-orange-500/[0.15] dark:bg-orange-400/[0.20]",
+      frosted: "bg-orange-500/[0.25] dark:bg-orange-400/[0.35]",
+      solid: "bg-orange-500/[0.40] dark:bg-orange-400/[0.60]",
+    },
+    pink: {
+      clear: "bg-pink-500/[0.03] dark:bg-pink-400/[0.04]",
+      light: "bg-pink-500/[0.08] dark:bg-pink-400/[0.10]",
+      medium: "bg-pink-500/[0.15] dark:bg-pink-400/[0.20]",
+      frosted: "bg-pink-500/[0.25] dark:bg-pink-400/[0.35]",
+      solid: "bg-pink-500/[0.40] dark:bg-pink-400/[0.60]",
+    },
+    red: {
+      clear: "bg-red-500/[0.03] dark:bg-red-400/[0.04]",
+      light: "bg-red-500/[0.08] dark:bg-red-400/[0.10]",
+      medium: "bg-red-500/[0.15] dark:bg-red-400/[0.20]",
+      frosted: "bg-red-500/[0.25] dark:bg-red-400/[0.35]",
+      solid: "bg-red-500/[0.40] dark:bg-red-400/[0.60]",
+    },
+  },
+
+  // Neon glow effects - BRIGHTER & MORE INTENSE (default = md size)
+  variants: {
+    none: {
+      border: "border-gray-300/20 dark:border-white/10",
+      glow: "",
+      hover: "hover:bg-white/[0.04] dark:hover:bg-white/[0.02]",
+    },
+    purple: {
+      border: "border-purple-500/50 dark:border-purple-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(168,85,247,0.4)] dark:shadow-[0_0_60px_25px_rgba(168,85,247,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(168,85,247,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(168,85,247,0.8)]",
+    },
+    blue: {
+      border: "border-blue-500/50 dark:border-blue-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(59,130,246,0.4)] dark:shadow-[0_0_60px_25px_rgba(59,130,246,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(59,130,246,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(59,130,246,0.8)]",
+    },
+    green: {
+      border: "border-green-500/50 dark:border-green-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(34,197,94,0.4)] dark:shadow-[0_0_60px_25px_rgba(34,197,94,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(34,197,94,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(34,197,94,0.8)]",
+    },
+    cyan: {
+      border: "border-cyan-500/50 dark:border-cyan-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(34,211,238,0.4)] dark:shadow-[0_0_60px_25px_rgba(34,211,238,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(34,211,238,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(34,211,238,0.8)]",
+    },
+    orange: {
+      border: "border-orange-500/50 dark:border-orange-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(251,146,60,0.4)] dark:shadow-[0_0_60px_25px_rgba(251,146,60,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(251,146,60,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(251,146,60,0.8)]",
+    },
+    pink: {
+      border: "border-pink-500/50 dark:border-pink-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(236,72,153,0.4)] dark:shadow-[0_0_60px_25px_rgba(236,72,153,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(236,72,153,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(236,72,153,0.8)]",
+    },
+    red: {
+      border: "border-red-500/50 dark:border-red-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(239,68,68,0.4)] dark:shadow-[0_0_60px_25px_rgba(239,68,68,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(239,68,68,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(239,68,68,0.8)]",
+    },
+  },
+
+  // Outer glow size variants (static classes for each color)
+  outerGlowSizes: {
+    cyan: {
+      sm: "shadow-[0_0_20px_rgba(34,211,238,0.3)]",
+      md: "shadow-[0_0_40px_rgba(34,211,238,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(34,211,238,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(34,211,238,0.6)]",
+    },
+    purple: {
+      sm: "shadow-[0_0_20px_rgba(168,85,247,0.3)]",
+      md: "shadow-[0_0_40px_rgba(168,85,247,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(168,85,247,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(168,85,247,0.6)]",
+    },
+    blue: {
+      sm: "shadow-[0_0_20px_rgba(59,130,246,0.3)]",
+      md: "shadow-[0_0_40px_rgba(59,130,246,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(59,130,246,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(59,130,246,0.6)]",
+    },
+    pink: {
+      sm: "shadow-[0_0_20px_rgba(236,72,153,0.3)]",
+      md: "shadow-[0_0_40px_rgba(236,72,153,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(236,72,153,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(236,72,153,0.6)]",
+    },
+    green: {
+      sm: "shadow-[0_0_20px_rgba(34,197,94,0.3)]",
+      md: "shadow-[0_0_40px_rgba(34,197,94,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(34,197,94,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(34,197,94,0.6)]",
+    },
+    orange: {
+      sm: "shadow-[0_0_20px_rgba(251,146,60,0.3)]",
+      md: "shadow-[0_0_40px_rgba(251,146,60,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(251,146,60,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(251,146,60,0.6)]",
+    },
+    red: {
+      sm: "shadow-[0_0_20px_rgba(239,68,68,0.3)]",
+      md: "shadow-[0_0_40px_rgba(239,68,68,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(239,68,68,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(239,68,68,0.6)]",
+    },
+  },
+
+  // Inner glow variants (static classes for each color) - WIDER range than outer
+  innerGlowSizes: {
+    cyan: {
+      sm: "shadow-[inset_0_0_15px_rgba(34,211,238,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(34,211,238,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(34,211,238,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(34,211,238,0.5)]",
+    },
+    purple: {
+      sm: "shadow-[inset_0_0_15px_rgba(168,85,247,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(168,85,247,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(168,85,247,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(168,85,247,0.5)]",
+    },
+    blue: {
+      sm: "shadow-[inset_0_0_15px_rgba(59,130,246,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(59,130,246,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(59,130,246,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(59,130,246,0.5)]",
+    },
+    pink: {
+      sm: "shadow-[inset_0_0_15px_rgba(236,72,153,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(236,72,153,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(236,72,153,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(236,72,153,0.5)]",
+    },
+    green: {
+      sm: "shadow-[inset_0_0_15px_rgba(34,197,94,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(34,197,94,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(34,197,94,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(34,197,94,0.5)]",
+    },
+    orange: {
+      sm: "shadow-[inset_0_0_15px_rgba(251,146,60,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(251,146,60,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(251,146,60,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(251,146,60,0.5)]",
+    },
+    red: {
+      sm: "shadow-[inset_0_0_15px_rgba(239,68,68,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(239,68,68,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(239,68,68,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(239,68,68,0.5)]",
+    },
+  },
+
+  // Hover glow variants - size-matched (brighter, same size)
+  outerGlowHover: {
+    cyan: {
+      sm: "hover:shadow-[0_0_20px_rgba(34,211,238,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(34,211,238,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(34,211,238,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(34,211,238,0.8)]",
+    },
+    purple: {
+      sm: "hover:shadow-[0_0_20px_rgba(168,85,247,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(168,85,247,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(168,85,247,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(168,85,247,0.8)]",
+    },
+    blue: {
+      sm: "hover:shadow-[0_0_20px_rgba(59,130,246,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(59,130,246,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(59,130,246,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(59,130,246,0.8)]",
+    },
+    pink: {
+      sm: "hover:shadow-[0_0_20px_rgba(236,72,153,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(236,72,153,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(236,72,153,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(236,72,153,0.8)]",
+    },
+    green: {
+      sm: "hover:shadow-[0_0_20px_rgba(34,197,94,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(34,197,94,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(34,197,94,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(34,197,94,0.8)]",
+    },
+    orange: {
+      sm: "hover:shadow-[0_0_20px_rgba(251,146,60,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(251,146,60,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(251,146,60,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(251,146,60,0.8)]",
+    },
+    red: {
+      sm: "hover:shadow-[0_0_20px_rgba(239,68,68,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(239,68,68,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(239,68,68,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(239,68,68,0.8)]",
+    },
+  },
+
+  innerGlowHover: {
+    cyan: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(34,211,238,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(34,211,238,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(34,211,238,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(34,211,238,0.7)]",
+    },
+    purple: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(168,85,247,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(168,85,247,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(168,85,247,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(168,85,247,0.7)]",
+    },
+    blue: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(59,130,246,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(59,130,246,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(59,130,246,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(59,130,246,0.7)]",
+    },
+    pink: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(236,72,153,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(236,72,153,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(236,72,153,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(236,72,153,0.7)]",
+    },
+    green: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(34,197,94,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(34,197,94,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(34,197,94,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(34,197,94,0.7)]",
+    },
+    orange: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(251,146,60,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(251,146,60,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(251,146,60,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(251,146,60,0.7)]",
+    },
+    red: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(239,68,68,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(239,68,68,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(239,68,68,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(239,68,68,0.7)]",
+    },
+  },
+
+  // Size variants
+  sizes: {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+    xl: "p-10",
+  },
+
+  // Edge-lit effects for cards (top, left, right, bottom edges)
+  edgeLit: {
+    position: {
+      none: "",
+      top: "before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[2px] before:rounded-t-lg",
+      left: "before:content-[''] before:absolute before:top-0 before:left-0 before:bottom-0 before:w-[2px] before:rounded-l-lg",
+      right:
+        "before:content-[''] before:absolute before:top-0 before:right-0 before:bottom-0 before:w-[2px] before:rounded-r-lg",
+      bottom:
+        "before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[2px] before:rounded-b-lg",
+    },
+    color: {
+      purple: {
+        line: "before:bg-purple-500 dark:before:bg-purple-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(168,85,247,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-purple-500 dark:before:via-purple-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-purple-500 dark:before:via-purple-400 before:to-transparent",
+        },
+      },
+      blue: {
+        line: "before:bg-blue-500 dark:before:bg-blue-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(59,130,246,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-blue-500 dark:before:via-blue-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-blue-500 dark:before:via-blue-400 before:to-transparent",
+        },
+      },
+      cyan: {
+        line: "before:bg-cyan-500 dark:before:bg-cyan-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(34,211,238,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-cyan-500 dark:before:via-cyan-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-cyan-500 dark:before:via-cyan-400 before:to-transparent",
+        },
+      },
+      green: {
+        line: "before:bg-green-500 dark:before:bg-green-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(34,197,94,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-green-500 dark:before:via-green-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-green-500 dark:before:via-green-400 before:to-transparent",
+        },
+      },
+      orange: {
+        line: "before:bg-orange-500 dark:before:bg-orange-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(251,146,60,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-orange-500 dark:before:via-orange-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-orange-500 dark:before:via-orange-400 before:to-transparent",
+        },
+      },
+      pink: {
+        line: "before:bg-pink-500 dark:before:bg-pink-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(236,72,153,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-pink-500 dark:before:via-pink-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-pink-500 dark:before:via-pink-400 before:to-transparent",
+        },
+      },
+      red: {
+        line: "before:bg-red-500 dark:before:bg-red-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(239,68,68,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-red-500 dark:before:via-red-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-red-500 dark:before:via-red-400 before:to-transparent",
+        },
+      },
+    },
+  },
+};
+
 // Compound styles for common patterns
 export const compoundStyles = {
   // Standard interactive element (buttons, menu items, etc.)
@@ -127,7 +593,7 @@ export const compoundStyles = {
     ${glassmorphism.interactive.disabled}
   `,
 
-  // Cards and containers
+  // Cards - use glassCard instead
   card: `
     ${glassmorphism.background.card}
     ${glassmorphism.border.default}
diff --git a/archon-ui-main/src/features/ui/primitives/switch.tsx b/archon-ui-main/src/features/ui/primitives/switch.tsx
new file mode 100644
index 00000000..714fde18
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/switch.tsx
@@ -0,0 +1,209 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn, glassmorphism } from "./styles";
+
+export type SwitchSize = "sm" | "md" | "lg";
+export type SwitchColor = "purple" | "blue" | "green" | "pink" | "orange" | "cyan";
+
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  size?: SwitchSize;
+  color?: SwitchColor;
+  icon?: React.ReactNode;
+  iconOn?: React.ReactNode;
+  iconOff?: React.ReactNode;
+}
+
+const switchVariants = {
+  size: {
+    sm: {
+      root: "h-4 w-8",
+      thumb: "h-3 w-3 data-[state=checked]:translate-x-4",
+      icon: "",
+    },
+    md: {
+      root: "h-6 w-11",
+      thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+      icon: "h-3 w-3",
+    },
+    lg: {
+      root: "h-8 w-14",
+      thumb: "h-7 w-7 data-[state=checked]:translate-x-6",
+      icon: "h-5 w-5",
+    },
+  },
+  color: {
+    purple: {
+      checked: "data-[state=checked]:bg-purple-500/20 data-[state=checked]:border-purple-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(168,85,247,0.5)]",
+      thumb: "data-[state=checked]:border-purple-400 data-[state=checked]:shadow-[0_0_10px_rgba(168,85,247,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-purple-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(168,85,247,0.7)]",
+      focusRing: "focus-visible:ring-purple-500",
+    },
+    blue: {
+      checked: "data-[state=checked]:bg-blue-500/20 data-[state=checked]:border-blue-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(59,130,246,0.5)]",
+      thumb: "data-[state=checked]:border-blue-400 data-[state=checked]:shadow-[0_0_10px_rgba(59,130,246,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-blue-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(59,130,246,0.7)]",
+      focusRing: "focus-visible:ring-blue-500",
+    },
+    green: {
+      checked: "data-[state=checked]:bg-green-500/20 data-[state=checked]:border-green-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(34,197,94,0.5)]",
+      thumb: "data-[state=checked]:border-green-400 data-[state=checked]:shadow-[0_0_10px_rgba(34,197,94,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-green-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(34,197,94,0.7)]",
+      focusRing: "focus-visible:ring-green-500",
+    },
+    pink: {
+      checked: "data-[state=checked]:bg-pink-500/20 data-[state=checked]:border-pink-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(236,72,153,0.5)]",
+      thumb: "data-[state=checked]:border-pink-400 data-[state=checked]:shadow-[0_0_10px_rgba(236,72,153,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-pink-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(236,72,153,0.7)]",
+      focusRing: "focus-visible:ring-pink-500",
+    },
+    orange: {
+      checked: "data-[state=checked]:bg-orange-500/20 data-[state=checked]:border-orange-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(249,115,22,0.5)]",
+      thumb: "data-[state=checked]:border-orange-400 data-[state=checked]:shadow-[0_0_10px_rgba(249,115,22,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-orange-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(249,115,22,0.7)]",
+      focusRing: "focus-visible:ring-orange-500",
+    },
+    cyan: {
+      checked: "data-[state=checked]:bg-cyan-500/20 data-[state=checked]:border-cyan-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(34,211,238,0.5)]",
+      thumb: "data-[state=checked]:border-cyan-400 data-[state=checked]:shadow-[0_0_10px_rgba(34,211,238,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-cyan-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(34,211,238,0.7)]",
+      focusRing: "focus-visible:ring-cyan-500",
+    },
+  },
+};
+
+/**
+ * 🤖 AI CONTEXT: Enhanced Switch Component
+ *
+ * GLASS PROPERTIES for true glassmorphism:
+ * 1. TRANSPARENCY - Subtle background opacity
+ *    - unchecked: Almost invisible (bg-white/10)
+ *    - checked: Color tinted glass (color-500/20)
+ *
+ * 2. SIZE VARIANTS - Three sizes for different use cases
+ *    - sm: 16px height, no icons
+ *    - md: 24px height, smaller icons (12x12px)
+ *    - lg: 32px height, full icons (20x20px)
+ *
+ * 3. GLOW EFFECTS - Neon accents that animate
+ *    - Box shadow for outer glow
+ *    - Drop shadow for icon glow
+ *    - Transition animations for smooth state changes
+ *
+ * 4. ICON SUPPORT - Dynamic icon switching
+ *    - iconOn: Displayed when checked
+ *    - iconOff: Displayed when unchecked
+ *    - icon: Same icon for both states
+ *
+ * 5. CONTROLLED/UNCONTROLLED MODE SUPPORT
+ *    - Controlled: Pass checked prop + onCheckedChange handler
+ *    - Uncontrolled: Pass defaultChecked, component manages own state
+ */
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+  (
+    {
+      className,
+      size = "md",
+      color = "cyan",
+      icon,
+      iconOn,
+      iconOff,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const sizeStyles = switchVariants.size[size];
+    const colorStyles = switchVariants.color[color];
+
+    // Detect controlled vs uncontrolled mode
+    const isControlled = checked !== undefined;
+
+    // Internal state for uncontrolled mode
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+
+    // Get the actual checked state (controlled or uncontrolled)
+    const actualChecked = isControlled ? checked : internalChecked;
+
+    // Handle state changes for both controlled and uncontrolled modes
+    const handleCheckedChange = React.useCallback(
+      (newChecked: boolean) => {
+        // Update internal state for uncontrolled mode
+        if (!isControlled) {
+          setInternalChecked(newChecked);
+        }
+        // Call parent's handler if provided
+        onCheckedChange?.(newChecked);
+      },
+      [isControlled, onCheckedChange],
+    );
+
+    const displayIcon = React.useMemo(() => {
+      if (size === "sm") return null;
+      return actualChecked ? iconOn || icon : iconOff || icon;
+    }, [size, actualChecked, icon, iconOn, iconOff]);
+
+    return (
+      <SwitchPrimitives.Root
+        className={cn(
+          "relative inline-flex shrink-0 cursor-pointer items-center rounded-full",
+          "bg-black/10 dark:bg-white/10 backdrop-blur-xl",
+          "border border-gray-300/30 dark:border-white/10",
+          "transition-all duration-500 ease-in-out",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          colorStyles.focusRing,
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          colorStyles.checked,
+          colorStyles.glow,
+          sizeStyles.root,
+          glassmorphism.interactive.base,
+          className,
+        )}
+        checked={actualChecked}
+        onCheckedChange={handleCheckedChange}
+        {...props}
+        ref={ref}
+      >
+        <SwitchPrimitives.Thumb
+          className={cn(
+            "pointer-events-none relative flex items-center justify-center rounded-full",
+            // Glass effect for thumb with proper fill
+            "bg-gradient-to-br from-gray-100/80 to-white/60 dark:from-gray-700/80 dark:to-gray-800/60",
+            "backdrop-blur-sm border-2",
+            "border-gray-400/50 dark:border-white/30",
+            "shadow-lg ring-0 transition-all duration-500 cubic-bezier(0.23, 1, 0.32, 1)",
+            "data-[state=unchecked]:translate-x-0",
+            // Checked state gets color tinted glass
+            "data-[state=checked]:from-white/90 data-[state=checked]:to-white/70 dark:data-[state=checked]:from-gray-100/20 dark:data-[state=checked]:to-gray-200/10",
+            colorStyles.thumb,
+            sizeStyles.thumb,
+          )}
+        >
+          {displayIcon && (
+            <div
+              className={cn(
+                "flex items-center justify-center transition-all duration-500",
+                // Icons have color in both states with different opacity
+                colorStyles.icon,
+                sizeStyles.icon,
+              )}
+            >
+              {displayIcon}
+            </div>
+          )}
+        </SwitchPrimitives.Thumb>
+      </SwitchPrimitives.Root>
+    );
+  },
+);
+
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch, switchVariants };
diff --git a/archon-ui-main/src/features/ui/primitives/tabs.tsx b/archon-ui-main/src/features/ui/primitives/tabs.tsx
index b74f7138..78d79ff5 100644
--- a/archon-ui-main/src/features/ui/primitives/tabs.tsx
+++ b/archon-ui-main/src/features/ui/primitives/tabs.tsx
@@ -5,82 +5,97 @@ import { cn } from "./styles";
 // Root
 export const Tabs = TabsPrimitive.Root;
 
-// List
+// List - styled like pill navigation
 export const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List ref={ref} className={cn("relative", className)} role="tablist" {...props}>
-    {/* Subtle neon glow effect */}
-    <div className="absolute inset-0 rounded-lg opacity-30 blur-[1px] bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 pointer-events-none" />
-    {props.children}
-  </TabsPrimitive.List>
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "backdrop-blur-sm bg-white/40 dark:bg-white/5 border border-white/30 dark:border-white/15",
+      "rounded-full p-1 shadow-lg inline-flex gap-1",
+      className,
+    )}
+    role="tablist"
+    {...props}
+  />
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 // Trigger
+type TabColor = "blue" | "purple" | "pink" | "orange" | "cyan" | "green";
+
 export const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-    color?: "blue" | "purple" | "pink" | "orange" | "cyan" | "green";
+    color?: TabColor;
   }
 >(({ className, color = "blue", ...props }, ref) => {
-  const colorMap = {
-    blue: {
-      text: "data-[state=active]:text-blue-600 dark:data-[state=active]:text-blue-400",
-      glow: "data-[state=active]:bg-blue-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(59,130,246,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(59,130,246,0.7)]",
-      hover: "hover:text-blue-500 dark:hover:text-blue-400/70",
-    },
-    purple: {
-      text: "data-[state=active]:text-purple-600 dark:data-[state=active]:text-purple-400",
-      glow: "data-[state=active]:bg-purple-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(168,85,247,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(168,85,247,0.7)]",
-      hover: "hover:text-purple-500 dark:hover:text-purple-400/70",
-    },
-    pink: {
-      text: "data-[state=active]:text-pink-600 dark:data-[state=active]:text-pink-400",
-      glow: "data-[state=active]:bg-pink-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(236,72,153,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(236,72,153,0.7)]",
-      hover: "hover:text-pink-500 dark:hover:text-pink-400/70",
-    },
-    orange: {
-      text: "data-[state=active]:text-orange-600 dark:data-[state=active]:text-orange-400",
-      glow: "data-[state=active]:bg-orange-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(249,115,22,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(249,115,22,0.7)]",
-      hover: "hover:text-orange-500 dark:hover:text-orange-400/70",
-    },
-    cyan: {
-      text: "data-[state=active]:text-cyan-600 dark:data-[state=active]:text-cyan-400",
-      glow: "data-[state=active]:bg-cyan-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]",
-      hover: "hover:text-cyan-500 dark:hover:text-cyan-400/70",
-    },
-    green: {
-      text: "data-[state=active]:text-emerald-600 dark:data-[state=active]:text-emerald-400",
-      glow: "data-[state=active]:bg-emerald-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(16,185,129,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(16,185,129,0.7)]",
-      hover: "hover:text-emerald-500 dark:hover:text-emerald-400/70",
-    },
-  };
+  const activeClasses = {
+    blue: [
+      "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20",
+      "data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300",
+      "data-[state=active]:border data-[state=active]:border-blue-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(59,130,246,0.5)]",
+    ].join(" "),
+    purple: [
+      "data-[state=active]:bg-purple-500/20 dark:data-[state=active]:bg-purple-400/20",
+      "data-[state=active]:text-purple-700 dark:data-[state=active]:text-purple-300",
+      "data-[state=active]:border data-[state=active]:border-purple-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(168,85,247,0.5)]",
+    ].join(" "),
+    pink: [
+      "data-[state=active]:bg-pink-500/20 dark:data-[state=active]:bg-pink-400/20",
+      "data-[state=active]:text-pink-700 dark:data-[state=active]:text-pink-300",
+      "data-[state=active]:border data-[state=active]:border-pink-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(236,72,153,0.5)]",
+    ].join(" "),
+    orange: [
+      "data-[state=active]:bg-orange-500/20 dark:data-[state=active]:bg-orange-400/20",
+      "data-[state=active]:text-orange-700 dark:data-[state=active]:text-orange-300",
+      "data-[state=active]:border data-[state=active]:border-orange-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(251,146,60,0.5)]",
+    ].join(" "),
+    cyan: [
+      "data-[state=active]:bg-cyan-500/20 dark:data-[state=active]:bg-cyan-400/20",
+      "data-[state=active]:text-cyan-700 dark:data-[state=active]:text-cyan-300",
+      "data-[state=active]:border data-[state=active]:border-cyan-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(34,211,238,0.5)]",
+    ].join(" "),
+    green: [
+      "data-[state=active]:bg-green-500/20 dark:data-[state=active]:bg-green-400/20",
+      "data-[state=active]:text-green-700 dark:data-[state=active]:text-green-300",
+      "data-[state=active]:border data-[state=active]:border-green-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(34,197,94,0.5)]",
+    ].join(" "),
+  } satisfies Record<TabColor, string>;
+
+  const focusRingClasses = {
+    blue: "focus-visible:ring-blue-500",
+    purple: "focus-visible:ring-purple-500",
+    pink: "focus-visible:ring-pink-500",
+    orange: "focus-visible:ring-orange-500",
+    cyan: "focus-visible:ring-cyan-500",
+    green: "focus-visible:ring-green-500",
+  } satisfies Record<TabColor, string>;
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "relative px-24 py-10 font-mono transition-all duration-300 z-10",
-        "text-gray-600 dark:text-gray-400",
+        "flex items-center gap-2 px-4 py-1.5 rounded-full transition-all duration-200",
+        "text-xs font-medium whitespace-nowrap",
+        "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        focusRingClasses[color],
         "disabled:pointer-events-none disabled:opacity-50",
-        colorMap[color].text,
-        colorMap[color].hover,
+        activeClasses[color],
         className,
       )}
       {...props}
     >
       {props.children}
-      {/* Active state neon indicator - only show when active */}
-      <span
-        className={cn(
-          "absolute bottom-0 left-0 right-0 w-full h-[2px]",
-          "data-[state=active]:block hidden",
-          colorMap[color].glow,
-        )}
-      />
     </TabsPrimitive.Trigger>
   );
 });
@@ -94,7 +109,8 @@ export const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2",
+      "focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}
diff --git a/archon-ui-main/src/features/ui/primitives/toggle-group.tsx b/archon-ui-main/src/features/ui/primitives/toggle-group.tsx
index 25133a48..83a8b10b 100644
--- a/archon-ui-main/src/features/ui/primitives/toggle-group.tsx
+++ b/archon-ui-main/src/features/ui/primitives/toggle-group.tsx
@@ -2,10 +2,14 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React from "react";
 import { cn, glassmorphism } from "./styles";
 
-export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> {
+type ToggleGroupProps = (
+  | ToggleGroupPrimitive.ToggleGroupSingleProps
+  | ToggleGroupPrimitive.ToggleGroupMultipleProps
+) & {
   variant?: "subtle" | "solid";
   size?: "sm" | "md";
-}
+  className?: string;
+};
 
 export const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, ToggleGroupProps>(
   ({ className, variant = "subtle", size = "sm", ...props }, ref) => {
diff --git a/archon-ui-main/src/index.css b/archon-ui-main/src/index.css
index 0dde10c9..803aa3f4 100644
--- a/archon-ui-main/src/index.css
+++ b/archon-ui-main/src/index.css
@@ -1,62 +1,111 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  :root {
-    /* Light mode variables */
-    --background: 0 0% 98%;
-    --foreground: 240 10% 3.9%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --primary: 271 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --accent: 271 91% 65%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --purple-accent: 271 91% 65%;
-    --green-accent: 160 84% 39%;
-    --pink-accent: 330 90% 65%;
-    --blue-accent: 217 91% 60%;
-  }
-  .dark {
-    /* Dark mode variables */
-    --background: 0 0% 0%;
-    --foreground: 0 0% 100%;
-    --muted: 240 4% 16%;
-    --muted-foreground: 240 5% 65%;
-    --popover: 0 0% 0%;
-    --popover-foreground: 0 0% 100%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --card: 0 0% 0%;
-    --card-foreground: 0 0% 100%;
-    --primary: 271 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --accent: 271 91% 65%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 240 3.7% 15.9%;
-    --radius: 0.5rem;
-    --purple-accent: 271 91% 65%;
-    --green-accent: 160 84% 39%;
-    --pink-accent: 330 90% 65%;
-    --blue-accent: 217 91% 60%;
-  }
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  /* Light mode variables - bare HSL values (Tailwind adds hsl() wrapper) */
+  --background: 0 0% 98%;
+  --foreground: 240 10% 3.9%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --primary: 271 91% 65%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --accent: 271 91% 65%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+
+  /* Tron accent colors */
+  --purple-accent: 271 91% 65%;
+  --green-accent: 160 84% 39%;
+  --pink-accent: 330 90% 65%;
+  --blue-accent: 217 91% 60%;
+
+  color-scheme: light;
 }
+
+.dark {
+  /* Dark mode variables - bare HSL values */
+  --background: 0 0% 0%;
+  --foreground: 0 0% 100%;
+  --muted: 240 4% 16%;
+  --muted-foreground: 240 5% 65%;
+  --popover: 0 0% 0%;
+  --popover-foreground: 0 0% 100%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --card: 0 0% 0%;
+  --card-foreground: 0 0% 100%;
+  --primary: 271 91% 65%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --accent: 271 91% 65%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 240 3.7% 15.9%;
+
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* Border radius */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/* Animations - defined outside @theme */
+@keyframes caret-blink {
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@keyframes shimmer {
+  100% { transform: translateX(100%); }
+}
+
 @layer base {
   * {
     @apply border-border;
@@ -66,15 +115,16 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
 @layer components {
-  /* Grid pattern for background (actually used in MainLayout) */
+  /* Grid pattern for background (used in MainLayout) */
   .neon-grid {
     background-image:
       linear-gradient(to right, #a855f720 1px, transparent 1px),
       linear-gradient(to bottom, #a855f720 1px, transparent 1px);
     background-size: 40px 40px;
   }
-  
+
   .dark .neon-grid {
     background-image:
       linear-gradient(to right, #a855f730 1px, transparent 1px),
@@ -82,6 +132,16 @@
   }
 }
 
+/* Hide scrollbar but keep scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* Animation delays (checked for usage) */
 .animation-delay-150 {
   animation-delay: 150ms;
diff --git a/archon-ui-main/src/pages/StyleGuidePage.tsx b/archon-ui-main/src/pages/StyleGuidePage.tsx
new file mode 100644
index 00000000..aa738af0
--- /dev/null
+++ b/archon-ui-main/src/pages/StyleGuidePage.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyleGuideView } from '@/features/style-guide';
+
+const StyleGuidePage: React.FC = () => {
+  return <StyleGuideView />;
+};
+
+export default StyleGuidePage;
\ No newline at end of file
diff --git a/archon-ui-main/src/services/credentialsService.ts b/archon-ui-main/src/services/credentialsService.ts
index f52d9679..b2d2da52 100644
--- a/archon-ui-main/src/services/credentialsService.ts
+++ b/archon-ui-main/src/services/credentialsService.ts
@@ -23,6 +23,7 @@ export interface RagSettings {
   OLLAMA_EMBEDDING_URL?: string;
   OLLAMA_EMBEDDING_INSTANCE_NAME?: string;
   EMBEDDING_MODEL?: string;
+  EMBEDDING_PROVIDER?: string;
   // Crawling Performance Settings
   CRAWL_BATCH_SIZE?: number;
   CRAWL_MAX_CONCURRENT?: number;
@@ -75,6 +76,16 @@ import { getApiUrl } from "../config/api";
 class CredentialsService {
   private baseUrl = getApiUrl();
 
+  private notifyCredentialUpdate(keys: string[]): void {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    window.dispatchEvent(
+      new CustomEvent("archon:credentials-updated", { detail: { keys } })
+    );
+  }
+
   private handleCredentialError(error: any, context: string): Error {
     const errorMessage = error instanceof Error ? error.message : String(error);
 
@@ -182,15 +193,16 @@ class CredentialsService {
       USE_CONTEXTUAL_EMBEDDINGS: false,
       CONTEXTUAL_EMBEDDINGS_MAX_WORKERS: 3,
       USE_HYBRID_SEARCH: true,
-      USE_AGENTIC_RAG: true,
-      USE_RERANKING: true,
-      MODEL_CHOICE: "gpt-4.1-nano",
-      LLM_PROVIDER: "openai",
-      LLM_BASE_URL: "",
-      LLM_INSTANCE_NAME: "",
-      OLLAMA_EMBEDDING_URL: "",
-      OLLAMA_EMBEDDING_INSTANCE_NAME: "",
-      EMBEDDING_MODEL: "",
+  USE_AGENTIC_RAG: true,
+  USE_RERANKING: true,
+  MODEL_CHOICE: "gpt-4.1-nano",
+  LLM_PROVIDER: "openai",
+  LLM_BASE_URL: "",
+  LLM_INSTANCE_NAME: "",
+  OLLAMA_EMBEDDING_URL: "",
+  OLLAMA_EMBEDDING_INSTANCE_NAME: "",
+  EMBEDDING_PROVIDER: "openai",
+  EMBEDDING_MODEL: "",
       // Crawling Performance Settings defaults
       CRAWL_BATCH_SIZE: 50,
       CRAWL_MAX_CONCURRENT: 10,
@@ -221,6 +233,7 @@ class CredentialsService {
             "LLM_INSTANCE_NAME",
             "OLLAMA_EMBEDDING_URL",
             "OLLAMA_EMBEDDING_INSTANCE_NAME",
+            "EMBEDDING_PROVIDER",
             "EMBEDDING_MODEL",
             "CRAWL_WAIT_STRATEGY",
           ].includes(cred.key)
@@ -278,7 +291,9 @@ class CredentialsService {
         throw new Error(`HTTP ${response.status}: ${errorText}`);
       }
 
-      return response.json();
+      const updated = await response.json();
+      this.notifyCredentialUpdate([credential.key]);
+      return updated;
     } catch (error) {
       throw this.handleCredentialError(
         error,
@@ -302,7 +317,9 @@ class CredentialsService {
         throw new Error(`HTTP ${response.status}: ${errorText}`);
       }
 
-      return response.json();
+      const created = await response.json();
+      this.notifyCredentialUpdate([credential.key]);
+      return created;
     } catch (error) {
       throw this.handleCredentialError(
         error,
@@ -321,6 +338,8 @@ class CredentialsService {
         const errorText = await response.text();
         throw new Error(`HTTP ${response.status}: ${errorText}`);
       }
+
+      this.notifyCredentialUpdate([key]);
     } catch (error) {
       throw this.handleCredentialError(error, `Deleting credential '${key}'`);
     }
diff --git a/archon-ui-main/tailwind.config.js b/archon-ui-main/tailwind.config.js
index d658626d..7c403ca3 100644
--- a/archon-ui-main/tailwind.config.js
+++ b/archon-ui-main/tailwind.config.js
@@ -1,80 +1,5 @@
-module.exports = {content: [
-  './index.html',
-  './src/**/*.{js,ts,jsx,tsx}'
-],
-  darkMode: "selector",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
-        },
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "shimmer": {
-          "100%": { transform: "translateX(100%)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
-        "shimmer": "shimmer 2s infinite",
-      },
-    },
-  },
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  // Tailwind v4 uses @theme in CSS for most configuration
+  // This config is minimal and only for content scanning
 }
\ No newline at end of file
diff --git a/archon-ui-main/vite.config.ts b/archon-ui-main/vite.config.ts
index 464f3cfb..536e56d1 100644
--- a/archon-ui-main/vite.config.ts
+++ b/archon-ui-main/vite.config.ts
@@ -2,6 +2,7 @@
 import path from "path";
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 import { exec } from 'child_process';
 import { readFile } from 'fs/promises';
 import { existsSync, mkdirSync } from 'fs';
@@ -25,6 +26,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
   
   return {
     plugins: [
+      tailwindcss(),
       react(),
       // Custom plugin to add test endpoint
       {
diff --git a/migration/0.1.0/009_add_cascade_delete_constraints.sql b/migration/0.1.0/009_add_cascade_delete_constraints.sql
new file mode 100644
index 00000000..a8e71a47
--- /dev/null
+++ b/migration/0.1.0/009_add_cascade_delete_constraints.sql
@@ -0,0 +1,67 @@
+-- =====================================================
+-- Migration 009: Add CASCADE DELETE constraints
+-- =====================================================
+-- This migration adds CASCADE DELETE to foreign key constraints
+-- for archon_crawled_pages and archon_code_examples tables
+-- to fix database timeout issues when deleting large sources
+--
+-- Issue: Deleting sources with thousands of crawled pages times out
+-- Solution: Let the database handle cascading deletes efficiently
+-- =====================================================
+
+-- Start transaction for atomic changes
+BEGIN;
+
+-- Drop existing foreign key constraints
+ALTER TABLE archon_crawled_pages
+    DROP CONSTRAINT IF EXISTS archon_crawled_pages_source_id_fkey;
+
+ALTER TABLE archon_code_examples
+    DROP CONSTRAINT IF EXISTS archon_code_examples_source_id_fkey;
+
+-- Re-add foreign key constraints with CASCADE DELETE
+ALTER TABLE archon_crawled_pages
+    ADD CONSTRAINT archon_crawled_pages_source_id_fkey
+    FOREIGN KEY (source_id)
+    REFERENCES archon_sources(source_id)
+    ON DELETE CASCADE;
+
+ALTER TABLE archon_code_examples
+    ADD CONSTRAINT archon_code_examples_source_id_fkey
+    FOREIGN KEY (source_id)
+    REFERENCES archon_sources(source_id)
+    ON DELETE CASCADE;
+
+-- Add comment explaining the CASCADE behavior
+COMMENT ON CONSTRAINT archon_crawled_pages_source_id_fkey ON archon_crawled_pages IS
+    'Foreign key with CASCADE DELETE - automatically deletes all crawled pages when source is deleted';
+
+COMMENT ON CONSTRAINT archon_code_examples_source_id_fkey ON archon_code_examples IS
+    'Foreign key with CASCADE DELETE - automatically deletes all code examples when source is deleted';
+
+-- Record the migration
+INSERT INTO archon_migrations (version, migration_name)
+VALUES ('0.1.0', '009_add_cascade_delete_constraints')
+ON CONFLICT (version, migration_name) DO NOTHING;
+
+-- Commit transaction
+COMMIT;
+
+-- =====================================================
+-- Verification queries (run separately if needed)
+-- =====================================================
+-- To verify the constraints after migration:
+--
+-- SELECT
+--     tc.table_name,
+--     tc.constraint_name,
+--     tc.constraint_type,
+--     rc.delete_rule
+-- FROM information_schema.table_constraints tc
+-- JOIN information_schema.referential_constraints rc
+--     ON tc.constraint_name = rc.constraint_name
+-- WHERE tc.table_name IN ('archon_crawled_pages', 'archon_code_examples')
+--     AND tc.constraint_type = 'FOREIGN KEY';
+--
+-- Expected result: Both constraints should show delete_rule = 'CASCADE'
+-- =====================================================
\ No newline at end of file
diff --git a/migration/0.1.0/010_add_provider_placeholders.sql b/migration/0.1.0/010_add_provider_placeholders.sql
new file mode 100644
index 00000000..a4b7b2d5
--- /dev/null
+++ b/migration/0.1.0/010_add_provider_placeholders.sql
@@ -0,0 +1,18 @@
+-- Migration: 009_add_provider_placeholders.sql
+-- Description: Add placeholder API key rows for OpenRouter, Anthropic, and Grok
+-- Version: 0.1.0
+-- Author: Archon Team
+-- Date: 2025
+
+-- Insert provider API key placeholders (idempotent)
+INSERT INTO archon_settings (key, encrypted_value, is_encrypted, category, description)
+VALUES
+    ('OPENROUTER_API_KEY', NULL, true, 'api_keys', 'OpenRouter API key for hosted community models. Get from: https://openrouter.ai/keys'),
+    ('ANTHROPIC_API_KEY', NULL, true, 'api_keys', 'Anthropic API key for Claude models. Get from: https://console.anthropic.com/account/keys'),
+    ('GROK_API_KEY', NULL, true, 'api_keys', 'Grok API key for xAI models. Get from: https://console.x.ai/')
+ON CONFLICT (key) DO NOTHING;
+
+-- Record migration application for tracking
+INSERT INTO archon_migrations (version, migration_name)
+VALUES ('0.1.0', '010_add_provider_placeholders')
+ON CONFLICT (version, migration_name) DO NOTHING;
diff --git a/migration/0.1.0/011_add_page_metadata_table.sql b/migration/0.1.0/011_add_page_metadata_table.sql
new file mode 100644
index 00000000..5a9924ac
--- /dev/null
+++ b/migration/0.1.0/011_add_page_metadata_table.sql
@@ -0,0 +1,79 @@
+-- =====================================================
+-- Add archon_page_metadata table for page-based RAG retrieval
+-- =====================================================
+-- This migration adds support for storing complete documentation pages
+-- alongside chunks for improved agent context retrieval.
+--
+-- Features:
+-- - Full page content storage with metadata
+-- - Support for llms-full.txt section-based pages
+-- - Foreign key relationship from chunks to pages
+-- =====================================================
+
+-- Create archon_page_metadata table
+CREATE TABLE IF NOT EXISTS archon_page_metadata (
+    -- Primary identification
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    source_id TEXT NOT NULL,
+    url TEXT NOT NULL,
+
+    -- Content
+    full_content TEXT NOT NULL,
+
+    -- Section metadata (for llms-full.txt H1 sections)
+    section_title TEXT,
+    section_order INT DEFAULT 0,
+
+    -- Statistics
+    word_count INT NOT NULL,
+    char_count INT NOT NULL,
+    chunk_count INT NOT NULL DEFAULT 0,
+
+    -- Timestamps
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW(),
+
+    -- Flexible metadata storage
+    metadata JSONB DEFAULT '{}'::jsonb,
+
+    -- Constraints
+    CONSTRAINT archon_page_metadata_url_unique UNIQUE(url),
+    CONSTRAINT archon_page_metadata_source_fk FOREIGN KEY (source_id)
+        REFERENCES archon_sources(source_id) ON DELETE CASCADE
+);
+
+-- Add page_id foreign key to archon_crawled_pages
+-- This links chunks back to their parent page
+-- NULLABLE because existing chunks won't have a page_id yet
+ALTER TABLE archon_crawled_pages
+ADD COLUMN IF NOT EXISTS page_id UUID REFERENCES archon_page_metadata(id) ON DELETE SET NULL;
+
+-- Create indexes for query performance
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_source_id ON archon_page_metadata(source_id);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_url ON archon_page_metadata(url);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_section ON archon_page_metadata(source_id, section_title, section_order);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_created_at ON archon_page_metadata(created_at);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_metadata ON archon_page_metadata USING GIN(metadata);
+CREATE INDEX IF NOT EXISTS idx_archon_crawled_pages_page_id ON archon_crawled_pages(page_id);
+
+-- Add comments to document the table structure
+COMMENT ON TABLE archon_page_metadata IS 'Stores complete documentation pages for agent retrieval';
+COMMENT ON COLUMN archon_page_metadata.source_id IS 'References the source this page belongs to';
+COMMENT ON COLUMN archon_page_metadata.url IS 'Unique URL of the page (synthetic for llms-full.txt sections with #anchor)';
+COMMENT ON COLUMN archon_page_metadata.full_content IS 'Complete markdown/text content of the page';
+COMMENT ON COLUMN archon_page_metadata.section_title IS 'H1 section title for llms-full.txt pages';
+COMMENT ON COLUMN archon_page_metadata.section_order IS 'Order of section in llms-full.txt file (0-based)';
+COMMENT ON COLUMN archon_page_metadata.word_count IS 'Number of words in full_content';
+COMMENT ON COLUMN archon_page_metadata.char_count IS 'Number of characters in full_content';
+COMMENT ON COLUMN archon_page_metadata.chunk_count IS 'Number of chunks created from this page';
+COMMENT ON COLUMN archon_page_metadata.metadata IS 'Flexible JSON metadata (page_type, knowledge_type, tags, etc)';
+COMMENT ON COLUMN archon_crawled_pages.page_id IS 'Foreign key linking chunk to parent page';
+
+-- Record migration application for tracking
+INSERT INTO archon_migrations (version, migration_name)
+VALUES ('0.1.0', '011_add_page_metadata_table')
+ON CONFLICT (version, migration_name) DO NOTHING;
+
+-- =====================================================
+-- MIGRATION COMPLETE
+-- =====================================================
diff --git a/migration/complete_setup.sql b/migration/complete_setup.sql
index 1609060c..609d38c1 100644
--- a/migration/complete_setup.sql
+++ b/migration/complete_setup.sql
@@ -100,7 +100,10 @@ ON CONFLICT (key) DO NOTHING;
 
 -- Add provider API key placeholders
 INSERT INTO archon_settings (key, encrypted_value, is_encrypted, category, description) VALUES
-('GOOGLE_API_KEY', NULL, true, 'api_keys', 'Google API Key for Gemini models. Get from: https://aistudio.google.com/apikey')
+('GOOGLE_API_KEY', NULL, true, 'api_keys', 'Google API key for Gemini models. Get from: https://aistudio.google.com/apikey'),
+('OPENROUTER_API_KEY', NULL, true, 'api_keys', 'OpenRouter API key for hosted community models. Get from: https://openrouter.ai/keys'),
+('ANTHROPIC_API_KEY', NULL, true, 'api_keys', 'Anthropic API key for Claude models. Get from: https://console.anthropic.com/account/keys'),
+('GROK_API_KEY', NULL, true, 'api_keys', 'Grok API key for xAI models. Get from: https://console.x.ai/')
 ON CONFLICT (key) DO NOTHING;
 
 -- Code Extraction Settings Migration
@@ -220,8 +223,8 @@ CREATE TABLE IF NOT EXISTS archon_crawled_pages (
     -- Add a unique constraint to prevent duplicate chunks for the same URL
     UNIQUE(url, chunk_number),
 
-    -- Add foreign key constraint to sources table
-    FOREIGN KEY (source_id) REFERENCES archon_sources(source_id)
+    -- Add foreign key constraint to sources table with CASCADE DELETE
+    FOREIGN KEY (source_id) REFERENCES archon_sources(source_id) ON DELETE CASCADE
 );
 
 -- Multi-dimensional indexes
@@ -269,10 +272,73 @@ CREATE TABLE IF NOT EXISTS archon_code_examples (
     -- Add a unique constraint to prevent duplicate chunks for the same URL
     UNIQUE(url, chunk_number),
 
-    -- Add foreign key constraint to sources table
-    FOREIGN KEY (source_id) REFERENCES archon_sources(source_id)
+    -- Add foreign key constraint to sources table with CASCADE DELETE
+    FOREIGN KEY (source_id) REFERENCES archon_sources(source_id) ON DELETE CASCADE
 );
 
+-- Create archon_page_metadata table
+-- This table stores complete documentation pages alongside chunks for improved agent context retrieval
+CREATE TABLE IF NOT EXISTS archon_page_metadata (
+    -- Primary identification
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    source_id TEXT NOT NULL,
+    url TEXT NOT NULL,
+
+    -- Content
+    full_content TEXT NOT NULL,
+
+    -- Section metadata (for llms-full.txt H1 sections)
+    section_title TEXT,
+    section_order INT DEFAULT 0,
+
+    -- Statistics
+    word_count INT NOT NULL,
+    char_count INT NOT NULL,
+    chunk_count INT NOT NULL DEFAULT 0,
+
+    -- Timestamps
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW(),
+
+    -- Flexible metadata storage
+    metadata JSONB DEFAULT '{}'::jsonb,
+
+    -- Constraints
+    CONSTRAINT archon_page_metadata_url_unique UNIQUE(url),
+    CONSTRAINT archon_page_metadata_source_fk FOREIGN KEY (source_id)
+        REFERENCES archon_sources(source_id) ON DELETE CASCADE
+);
+
+-- Add page_id foreign key to archon_crawled_pages
+-- This links chunks back to their parent page
+-- NULLABLE because existing chunks won't have a page_id yet
+ALTER TABLE archon_crawled_pages
+ADD COLUMN IF NOT EXISTS page_id UUID REFERENCES archon_page_metadata(id) ON DELETE SET NULL;
+
+-- Create indexes for query performance
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_source_id ON archon_page_metadata(source_id);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_url ON archon_page_metadata(url);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_section ON archon_page_metadata(source_id, section_title, section_order);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_created_at ON archon_page_metadata(created_at);
+CREATE INDEX IF NOT EXISTS idx_archon_page_metadata_metadata ON archon_page_metadata USING GIN(metadata);
+CREATE INDEX IF NOT EXISTS idx_archon_crawled_pages_page_id ON archon_crawled_pages(page_id);
+
+-- Add comments to document the table structure
+COMMENT ON TABLE archon_page_metadata IS 'Stores complete documentation pages for agent retrieval';
+COMMENT ON COLUMN archon_page_metadata.source_id IS 'References the source this page belongs to';
+COMMENT ON COLUMN archon_page_metadata.url IS 'Unique URL of the page (synthetic for llms-full.txt sections with #anchor)';
+COMMENT ON COLUMN archon_page_metadata.full_content IS 'Complete markdown/text content of the page';
+COMMENT ON COLUMN archon_page_metadata.section_title IS 'H1 section title for llms-full.txt pages';
+COMMENT ON COLUMN archon_page_metadata.section_order IS 'Order of section in llms-full.txt file (0-based)';
+COMMENT ON COLUMN archon_page_metadata.word_count IS 'Number of words in full_content';
+COMMENT ON COLUMN archon_page_metadata.char_count IS 'Number of characters in full_content';
+COMMENT ON COLUMN archon_page_metadata.chunk_count IS 'Number of chunks created from this page';
+COMMENT ON COLUMN archon_page_metadata.metadata IS 'Flexible JSON metadata (page_type, knowledge_type, tags, etc)';
+COMMENT ON COLUMN archon_crawled_pages.page_id IS 'Foreign key linking chunk to parent page';
+
+-- Enable RLS on archon_page_metadata
+ALTER TABLE archon_page_metadata ENABLE ROW LEVEL SECURITY;
+
 -- Multi-dimensional indexes
 CREATE INDEX IF NOT EXISTS idx_archon_code_examples_embedding_384 ON archon_code_examples USING ivfflat (embedding_384 vector_cosine_ops) WITH (lists = 100);
 CREATE INDEX IF NOT EXISTS idx_archon_code_examples_embedding_768 ON archon_code_examples USING ivfflat (embedding_768 vector_cosine_ops) WITH (lists = 100);
@@ -779,6 +845,12 @@ CREATE POLICY "Allow public read access to archon_code_examples"
   TO public
   USING (true);
 
+CREATE POLICY "Allow public read access to archon_page_metadata"
+  ON archon_page_metadata
+  FOR SELECT
+  TO public
+  USING (true);
+
 -- =====================================================
 -- SECTION 7: PROJECTS AND TASKS MODULE
 -- =====================================================
@@ -987,7 +1059,10 @@ VALUES
   ('0.1.0', '005_ollama_create_functions'),
   ('0.1.0', '006_ollama_create_indexes_optional'),
   ('0.1.0', '007_add_priority_column_to_tasks'),
-  ('0.1.0', '008_add_migration_tracking')
+  ('0.1.0', '008_add_migration_tracking'),
+  ('0.1.0', '009_add_cascade_delete_constraints'),
+  ('0.1.0', '010_add_provider_placeholders'),
+  ('0.1.0', '011_add_page_metadata_table')
 ON CONFLICT (version, migration_name) DO NOTHING;
 
 -- Enable Row Level Security on migrations table
diff --git a/python/Dockerfile.server b/python/Dockerfile.server
index 6e0ea558..c5ae5ec9 100644
--- a/python/Dockerfile.server
+++ b/python/Dockerfile.server
@@ -53,6 +53,7 @@ COPY --from=builder /venv /venv
 
 # Install Playwright browsers
 ENV PATH=/venv/bin:$PATH
+ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
 RUN playwright install chromium
 
 # Copy server code and tests
diff --git a/python/pyproject.toml b/python/pyproject.toml
index c4ce74c6..2c036d34 100644
--- a/python/pyproject.toml
+++ b/python/pyproject.toml
@@ -39,7 +39,7 @@ server = [
     "python-multipart>=0.0.20",
     "watchfiles>=0.18",
     # Web crawling
-    "crawl4ai==0.6.2",
+    "crawl4ai==0.7.4",
     # Database and storage
     "supabase==2.15.1",
     "asyncpg>=0.29.0",
@@ -104,7 +104,7 @@ all = [
     "uvicorn>=0.24.0",
     "python-multipart>=0.0.20",
     "watchfiles>=0.18",
-    "crawl4ai==0.6.2",
+    "crawl4ai==0.7.4",
     "supabase==2.15.1",
     "asyncpg>=0.29.0",
     "openai==1.71.0",
diff --git a/python/src/mcp_server/features/rag/rag_tools.py b/python/src/mcp_server/features/rag/rag_tools.py
index e171865c..85cadc29 100644
--- a/python/src/mcp_server/features/rag/rag_tools.py
+++ b/python/src/mcp_server/features/rag/rag_tools.py
@@ -77,7 +77,11 @@ def register_rag_tools(mcp: FastMCP):
 
     @mcp.tool()
     async def rag_search_knowledge_base(
-        ctx: Context, query: str, source_id: str | None = None, match_count: int = 5
+        ctx: Context,
+        query: str,
+        source_id: str | None = None,
+        match_count: int = 5,
+        return_mode: str = "pages"
     ) -> str:
         """
         Search knowledge base for relevant content using RAG.
@@ -90,20 +94,31 @@ def register_rag_tools(mcp: FastMCP):
                       This is the 'id' field from available sources, NOT a URL or domain name.
                       Example: "src_1234abcd" not "docs.anthropic.com"
             match_count: Max results (default: 5)
+            return_mode: "pages" (default, full pages with metadata) or "chunks" (raw text chunks)
 
         Returns:
             JSON string with structure:
             - success: bool - Operation success status
-            - results: list[dict] - Array of matching documents with content and metadata
+            - results: list[dict] - Array of pages/chunks with content and metadata
+                      Pages include: page_id, url, title, preview, word_count, chunk_matches
+                      Chunks include: content, metadata, similarity
+            - return_mode: str - Mode used ("pages" or "chunks")
             - reranked: bool - Whether results were reranked
             - error: str|null - Error description if success=false
+
+        Note: Use "pages" mode for better context (recommended), or "chunks" for raw granular results.
+        After getting pages, use rag_read_full_page() to retrieve complete page content.
         """
         try:
             api_url = get_api_url()
             timeout = httpx.Timeout(30.0, connect=5.0)
 
             async with httpx.AsyncClient(timeout=timeout) as client:
-                request_data = {"query": query, "match_count": match_count}
+                request_data = {
+                    "query": query,
+                    "match_count": match_count,
+                    "return_mode": return_mode
+                }
                 if source_id:
                     request_data["source"] = source_id
 
@@ -115,6 +130,7 @@ def register_rag_tools(mcp: FastMCP):
                         {
                             "success": True,
                             "results": result.get("results", []),
+                            "return_mode": result.get("return_mode", return_mode),
                             "reranked": result.get("reranked", False),
                             "error": None,
                         },
@@ -198,5 +214,148 @@ def register_rag_tools(mcp: FastMCP):
             logger.error(f"Error searching code examples: {e}")
             return json.dumps({"success": False, "results": [], "error": str(e)}, indent=2)
 
+    @mcp.tool()
+    async def rag_list_pages_for_source(
+        ctx: Context, source_id: str, section: str | None = None
+    ) -> str:
+        """
+        List all pages for a given knowledge source.
+
+        Use this after rag_get_available_sources() to see all pages in a source.
+        Useful for browsing documentation structure or finding specific pages.
+
+        Args:
+            source_id: Source ID from rag_get_available_sources() (e.g., "src_1234abcd")
+            section: Optional filter for llms-full.txt section title (e.g., "# Core Concepts")
+
+        Returns:
+            JSON string with structure:
+            - success: bool - Operation success status
+            - pages: list[dict] - Array of page objects with id, url, section_title, word_count
+            - total: int - Total number of pages
+            - source_id: str - The source ID that was queried
+            - error: str|null - Error description if success=false
+
+        Example workflow:
+            1. Call rag_get_available_sources() to get source_id
+            2. Call rag_list_pages_for_source(source_id) to see all pages
+            3. Call rag_read_full_page(page_id) to read specific pages
+        """
+        try:
+            api_url = get_api_url()
+            timeout = httpx.Timeout(30.0, connect=5.0)
+
+            async with httpx.AsyncClient(timeout=timeout) as client:
+                params = {"source_id": source_id}
+                if section:
+                    params["section"] = section
+
+                response = await client.get(
+                    urljoin(api_url, "/api/pages"),
+                    params=params
+                )
+
+                if response.status_code == 200:
+                    result = response.json()
+                    return json.dumps(
+                        {
+                            "success": True,
+                            "pages": result.get("pages", []),
+                            "total": result.get("total", 0),
+                            "source_id": result.get("source_id", source_id),
+                            "error": None,
+                        },
+                        indent=2,
+                    )
+                else:
+                    error_detail = response.text
+                    return json.dumps(
+                        {
+                            "success": False,
+                            "pages": [],
+                            "total": 0,
+                            "source_id": source_id,
+                            "error": f"HTTP {response.status_code}: {error_detail}",
+                        },
+                        indent=2,
+                    )
+
+        except Exception as e:
+            logger.error(f"Error listing pages for source {source_id}: {e}")
+            return json.dumps(
+                {
+                    "success": False,
+                    "pages": [],
+                    "total": 0,
+                    "source_id": source_id,
+                    "error": str(e)
+                },
+                indent=2
+            )
+
+    @mcp.tool()
+    async def rag_read_full_page(
+        ctx: Context, page_id: str | None = None, url: str | None = None
+    ) -> str:
+        """
+        Retrieve full page content from knowledge base.
+        Use this to get complete page content after RAG search.
+
+        Args:
+            page_id: Page UUID from search results (e.g., "550e8400-e29b-41d4-a716-446655440000")
+            url: Page URL (e.g., "https://docs.example.com/getting-started")
+
+        Note: Provide EITHER page_id OR url, not both.
+
+        Returns:
+            JSON string with structure:
+            - success: bool
+            - page: dict with full_content, title, url, metadata
+            - error: str|null
+        """
+        try:
+            if not page_id and not url:
+                return json.dumps(
+                    {"success": False, "error": "Must provide either page_id or url"},
+                    indent=2
+                )
+
+            api_url = get_api_url()
+            timeout = httpx.Timeout(30.0, connect=5.0)
+
+            async with httpx.AsyncClient(timeout=timeout) as client:
+                if page_id:
+                    response = await client.get(urljoin(api_url, f"/api/pages/{page_id}"))
+                else:
+                    response = await client.get(
+                        urljoin(api_url, "/api/pages/by-url"),
+                        params={"url": url}
+                    )
+
+                if response.status_code == 200:
+                    page_data = response.json()
+                    return json.dumps(
+                        {
+                            "success": True,
+                            "page": page_data,
+                            "error": None,
+                        },
+                        indent=2,
+                    )
+                else:
+                    error_detail = response.text
+                    return json.dumps(
+                        {
+                            "success": False,
+                            "page": None,
+                            "error": f"HTTP {response.status_code}: {error_detail}",
+                        },
+                        indent=2,
+                    )
+
+        except Exception as e:
+            logger.error(f"Error reading page: {e}")
+            return json.dumps({"success": False, "page": None, "error": str(e)}, indent=2)
+
     # Log successful registration
     logger.info("✓ RAG tools registered (HTTP-based version)")
diff --git a/python/src/server/api_routes/knowledge_api.py b/python/src/server/api_routes/knowledge_api.py
index 1f26dace..052f7521 100644
--- a/python/src/server/api_routes/knowledge_api.py
+++ b/python/src/server/api_routes/knowledge_api.py
@@ -84,39 +84,39 @@ async def _validate_provider_api_key(provider: str = None) -> None:
         safe_provider = provider[:20]  # Limit length
         logger.info(f"🔑 Testing {safe_provider.title()} API key with minimal embedding request...")
 
-        try:
-            # Test API key with minimal embedding request using provider-scoped configuration
-            from ..services.embeddings.embedding_service import create_embedding
-
-            test_result = await create_embedding(text="test", provider=provider)
-
-            if not test_result:
-                logger.error(
-                    f"❌ {provider.title()} API key validation failed - no embedding returned"
-                )
-                raise HTTPException(
-                    status_code=401,
-                    detail={
-                        "error": f"Invalid {provider.title()} API key",
-                        "message": f"Please verify your {provider.title()} API key in Settings.",
-                        "error_type": "authentication_failed",
-                        "provider": provider,
-                    },
-                )
-        except Exception as e:
-            logger.error(
-                f"❌ {provider.title()} API key validation failed: {e}",
-                exc_info=True,
-            )
-            raise HTTPException(
-                status_code=401,
-                detail={
-                    "error": f"Invalid {provider.title()} API key",
-                    "message": f"Please verify your {provider.title()} API key in Settings. Error: {str(e)[:100]}",
-                    "error_type": "authentication_failed",
-                    "provider": provider,
-                },
-            )
+        try:
+            # Test API key with minimal embedding request using provider-scoped configuration
+            from ..services.embeddings.embedding_service import create_embedding
+
+            test_result = await create_embedding(text="test", provider=provider)
+
+            if not test_result:
+                logger.error(
+                    f"❌ {provider.title()} API key validation failed - no embedding returned"
+                )
+                raise HTTPException(
+                    status_code=401,
+                    detail={
+                        "error": f"Invalid {provider.title()} API key",
+                        "message": f"Please verify your {provider.title()} API key in Settings.",
+                        "error_type": "authentication_failed",
+                        "provider": provider,
+                    },
+                )
+        except Exception as e:
+            logger.error(
+                f"❌ {provider.title()} API key validation failed: {e}",
+                exc_info=True,
+            )
+            raise HTTPException(
+                status_code=401,
+                detail={
+                    "error": f"Invalid {provider.title()} API key",
+                    "message": f"Please verify your {provider.title()} API key in Settings. Error: {str(e)[:100]}",
+                    "error_type": "authentication_failed",
+                    "provider": provider,
+                },
+            )
             
         logger.info(f"✅ {provider.title()} API key validation successful")
 
@@ -177,6 +177,7 @@ class RagQueryRequest(BaseModel):
     query: str
     source: str | None = None
     match_count: int = 5
+    return_mode: str = "chunks"  # "chunks" or "pages"
 
 
 @router.get("/crawl-progress/{progress_id}")
@@ -1116,10 +1117,13 @@ async def perform_rag_query(request: RagQueryRequest):
         raise HTTPException(status_code=422, detail="Query cannot be empty")
 
     try:
-        # Use RAGService for RAG query
+        # Use RAGService for unified RAG query with return_mode support
         search_service = RAGService(get_supabase_client())
         success, result = await search_service.perform_rag_query(
-            query=request.query, source=request.source, match_count=request.match_count
+            query=request.query,
+            source=request.source,
+            match_count=request.match_count,
+            return_mode=request.return_mode
         )
 
         if success:
@@ -1288,7 +1292,7 @@ async def stop_crawl_task(progress_id: str):
 
         found = False
         # Step 1: Cancel the orchestration service
-        orchestration = get_active_orchestration(progress_id)
+        orchestration = await get_active_orchestration(progress_id)
         if orchestration:
             orchestration.cancel()
             found = True
@@ -1306,7 +1310,7 @@ async def stop_crawl_task(progress_id: str):
             found = True
 
         # Step 3: Remove from active orchestrations registry
-        unregister_orchestration(progress_id)
+        await unregister_orchestration(progress_id)
 
         # Step 4: Update progress tracker to reflect cancellation (only if we found and cancelled something)
         if found:
diff --git a/python/src/server/api_routes/pages_api.py b/python/src/server/api_routes/pages_api.py
new file mode 100644
index 00000000..b6a20233
--- /dev/null
+++ b/python/src/server/api_routes/pages_api.py
@@ -0,0 +1,199 @@
+"""
+Pages API Module
+
+This module handles page retrieval operations for RAG:
+- List pages for a source
+- Get page by ID
+- Get page by URL
+"""
+
+from fastapi import APIRouter, HTTPException, Query
+from pydantic import BaseModel
+
+from ..config.logfire_config import get_logger, safe_logfire_error
+from ..utils import get_supabase_client
+
+# Get logger for this module
+logger = get_logger(__name__)
+
+# Create router
+router = APIRouter(prefix="/api", tags=["pages"])
+
+# Maximum character count for returning full page content
+MAX_PAGE_CHARS = 20_000
+
+
+class PageSummary(BaseModel):
+    """Summary model for page listings (no content)"""
+
+    id: str
+    url: str
+    section_title: str | None = None
+    section_order: int = 0
+    word_count: int
+    char_count: int
+    chunk_count: int
+
+
+class PageResponse(BaseModel):
+    """Response model for a single page (with content)"""
+
+    id: str
+    source_id: str
+    url: str
+    full_content: str
+    section_title: str | None = None
+    section_order: int = 0
+    word_count: int
+    char_count: int
+    chunk_count: int
+    metadata: dict
+    created_at: str
+    updated_at: str
+
+
+class PageListResponse(BaseModel):
+    """Response model for page listing"""
+
+    pages: list[PageSummary]
+    total: int
+    source_id: str
+
+
+def _handle_large_page_content(page_data: dict) -> dict:
+    """
+    Replace full_content with a helpful message if page is too large for LLM context.
+
+    Args:
+        page_data: Page data from database
+
+    Returns:
+        Page data with full_content potentially replaced
+    """
+    char_count = page_data.get("char_count", 0)
+
+    if char_count > MAX_PAGE_CHARS:
+        page_data["full_content"] = (
+            f"[Page too large for context - {char_count:,} characters]\n\n"
+            f"This page exceeds the {MAX_PAGE_CHARS:,} character limit for retrieval.\n\n"
+            f"To access content from this page, use a RAG search with return_mode='chunks' instead of 'pages'.\n"
+            f"This will retrieve specific relevant sections rather than the entire page.\n\n"
+            f"Page details:\n"
+            f"- URL: {page_data.get('url', 'N/A')}\n"
+            f"- Section: {page_data.get('section_title', 'N/A')}\n"
+            f"- Word count: {page_data.get('word_count', 0):,}\n"
+            f"- Character count: {char_count:,}\n"
+            f"- Available chunks: {page_data.get('chunk_count', 0)}"
+        )
+
+    return page_data
+
+
+@router.get("/pages")
+async def list_pages(
+    source_id: str = Query(..., description="Source ID to filter pages"),
+    section: str | None = Query(None, description="Filter by section title (for llms-full.txt)"),
+):
+    """
+    List all pages for a given source.
+
+    Args:
+        source_id: The source ID to filter pages
+        section: Optional H1 section title for llms-full.txt sources
+
+    Returns:
+        PageListResponse with list of pages and metadata
+    """
+    try:
+        client = get_supabase_client()
+
+        # Build query - select only summary fields (no full_content)
+        query = client.table("archon_page_metadata").select(
+            "id, url, section_title, section_order, word_count, char_count, chunk_count"
+        ).eq("source_id", source_id)
+
+        # Add section filter if provided
+        if section:
+            query = query.eq("section_title", section)
+
+        # Order by section_order and created_at
+        query = query.order("section_order").order("created_at")
+
+        # Execute query
+        result = query.execute()
+
+        # Use PageSummary (no content handling needed)
+        pages = [PageSummary(**page) for page in result.data]
+
+        return PageListResponse(pages=pages, total=len(pages), source_id=source_id)
+
+    except Exception as e:
+        logger.error(f"Error listing pages for source {source_id}: {e}", exc_info=True)
+        safe_logfire_error(f"Failed to list pages | source_id={source_id} | error={str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to list pages: {str(e)}") from e
+
+
+@router.get("/pages/by-url")
+async def get_page_by_url(url: str = Query(..., description="The URL of the page to retrieve")):
+    """
+    Get a single page by its URL.
+
+    This is useful for retrieving pages from RAG search results which return URLs.
+
+    Args:
+        url: The complete URL of the page (including anchors for llms-full.txt sections)
+
+    Returns:
+        PageResponse with complete page data
+    """
+    try:
+        client = get_supabase_client()
+
+        # Query by URL
+        result = client.table("archon_page_metadata").select("*").eq("url", url).single().execute()
+
+        if not result.data:
+            raise HTTPException(status_code=404, detail=f"Page not found for URL: {url}")
+
+        # Handle large pages
+        page_data = _handle_large_page_content(result.data.copy())
+        return PageResponse(**page_data)
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error getting page by URL {url}: {e}", exc_info=True)
+        safe_logfire_error(f"Failed to get page by URL | url={url} | error={str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to get page: {str(e)}") from e
+
+
+@router.get("/pages/{page_id}")
+async def get_page_by_id(page_id: str):
+    """
+    Get a single page by its ID.
+
+    Args:
+        page_id: The UUID of the page
+
+    Returns:
+        PageResponse with complete page data
+    """
+    try:
+        client = get_supabase_client()
+
+        # Query by ID
+        result = client.table("archon_page_metadata").select("*").eq("id", page_id).single().execute()
+
+        if not result.data:
+            raise HTTPException(status_code=404, detail=f"Page not found: {page_id}")
+
+        # Handle large pages
+        page_data = _handle_large_page_content(result.data.copy())
+        return PageResponse(**page_data)
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error getting page {page_id}: {e}", exc_info=True)
+        safe_logfire_error(f"Failed to get page | page_id={page_id} | error={str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to get page: {str(e)}") from e
diff --git a/python/src/server/main.py b/python/src/server/main.py
index 19456e06..bd23dfa1 100644
--- a/python/src/server/main.py
+++ b/python/src/server/main.py
@@ -25,6 +25,7 @@ from .api_routes.knowledge_api import router as knowledge_router
 from .api_routes.mcp_api import router as mcp_router
 from .api_routes.migration_api import router as migration_router
 from .api_routes.ollama_api import router as ollama_router
+from .api_routes.pages_api import router as pages_router
 from .api_routes.progress_api import router as progress_router
 from .api_routes.projects_api import router as projects_router
 from .api_routes.providers_api import router as providers_router
@@ -183,6 +184,7 @@ app.include_router(settings_router)
 app.include_router(mcp_router)
 # app.include_router(mcp_client_router)  # Removed - not part of new architecture
 app.include_router(knowledge_router)
+app.include_router(pages_router)
 app.include_router(ollama_router)
 app.include_router(projects_router)
 app.include_router(progress_router)
diff --git a/python/src/server/services/crawling/code_extraction_service.py b/python/src/server/services/crawling/code_extraction_service.py
index 1a540f57..b1705b02 100644
--- a/python/src/server/services/crawling/code_extraction_service.py
+++ b/python/src/server/services/crawling/code_extraction_service.py
@@ -140,6 +140,7 @@ class CodeExtractionService:
         progress_callback: Callable | None = None,
         cancellation_check: Callable[[], None] | None = None,
         provider: str | None = None,
+        embedding_provider: str | None = None,
     ) -> int:
         """
         Extract code examples from crawled documents and store them.
@@ -150,6 +151,8 @@ class CodeExtractionService:
             source_id: The unique source_id for all documents
             progress_callback: Optional async callback for progress updates
             cancellation_check: Optional function to check for cancellation
+            provider: Optional LLM provider identifier for summary generation
+            embedding_provider: Optional embedding provider override for vector creation
 
         Returns:
             Number of code examples stored
@@ -158,9 +161,16 @@ class CodeExtractionService:
         extraction_callback = None
         if progress_callback:
             async def extraction_progress(data: dict):
-                # Scale progress to 0-20% range
-                raw_progress = data.get("progress", 0)
-                scaled_progress = int(raw_progress * 0.2)  # 0-20%
+                # Scale progress to 0-20% range with normalization similar to later phases
+                raw = data.get("progress", data.get("percentage", 0))
+                try:
+                    raw_num = float(raw)
+                except (TypeError, ValueError):
+                    raw_num = 0.0
+                if 0.0 <= raw_num <= 1.0:
+                    raw_num *= 100.0
+                # 0-20% with clamping
+                scaled_progress = min(20, max(0, int(raw_num * 0.2)))
                 data["progress"] = scaled_progress
                 await progress_callback(data)
             extraction_callback = extraction_progress
@@ -197,8 +207,15 @@ class CodeExtractionService:
         if progress_callback:
             async def summary_progress(data: dict):
                 # Scale progress to 20-90% range
-                raw_progress = data.get("progress", 0)
-                scaled_progress = 20 + int(raw_progress * 0.7)  # 20-90%
+                raw = data.get("progress", data.get("percentage", 0))
+                try:
+                    raw_num = float(raw)
+                except (TypeError, ValueError):
+                    raw_num = 0.0
+                if 0.0 <= raw_num <= 1.0:
+                    raw_num *= 100.0
+                # 20-90% with clamping
+                scaled_progress = min(90, max(20, 20 + int(raw_num * 0.7)))
                 data["progress"] = scaled_progress
                 await progress_callback(data)
             summary_callback = summary_progress
@@ -216,15 +233,26 @@ class CodeExtractionService:
         if progress_callback:
             async def storage_progress(data: dict):
                 # Scale progress to 90-100% range
-                raw_progress = data.get("progress", 0)
-                scaled_progress = 90 + int(raw_progress * 0.1)  # 90-100%
+                raw = data.get("progress", data.get("percentage", 0))
+                try:
+                    raw_num = float(raw)
+                except (TypeError, ValueError):
+                    raw_num = 0.0
+                if 0.0 <= raw_num <= 1.0:
+                    raw_num *= 100.0
+                # 90-100% with clamping
+                scaled_progress = min(100, max(90, 90 + int(raw_num * 0.1)))
                 data["progress"] = scaled_progress
                 await progress_callback(data)
             storage_callback = storage_progress
 
         # Store code examples in database
         return await self._store_code_examples(
-            storage_data, url_to_full_document, storage_callback, provider
+            storage_data,
+            url_to_full_document,
+            storage_callback,
+            provider,
+            embedding_provider,
         )
 
     async def _extract_code_blocks_from_documents(
@@ -880,9 +908,20 @@ class CodeExtractionService:
                         current_indent = indent
                         block_start_idx = i
                     current_block.append(line)
-                elif current_block and len("\n".join(current_block)) >= min_length:
+                elif current_block:
+                    block_text = "\n".join(current_block)
+                    threshold = (
+                        min_length
+                        if min_length is not None
+                        else await self._get_min_code_length()
+                    )
+                    if len(block_text) < threshold:
+                        current_block = []
+                        current_indent = None
+                        continue
+
                     # End of indented block, check if it's code
-                    code_content = "\n".join(current_block)
+                    code_content = block_text
 
                     # Try to detect language from content
                     language = self._detect_language_from_content(code_content)
@@ -1670,12 +1709,20 @@ class CodeExtractionService:
         url_to_full_document: dict[str, str],
         progress_callback: Callable | None = None,
         provider: str | None = None,
+        embedding_provider: str | None = None,
     ) -> int:
         """
         Store code examples in the database.
 
         Returns:
             Number of code examples stored
+
+        Args:
+            storage_data: Prepared code example payloads
+            url_to_full_document: Mapping of URLs to their full document content
+            progress_callback: Optional callback for progress updates
+            provider: Optional LLM provider identifier for summaries
+            embedding_provider: Optional embedding provider override for vector storage
         """
         # Create progress callback for storage phase
         storage_progress_callback = None
@@ -1713,6 +1760,7 @@ class CodeExtractionService:
                 url_to_full_document=url_to_full_document,
                 progress_callback=storage_progress_callback,
                 provider=provider,
+                embedding_provider=embedding_provider,
             )
 
             # Report completion of code extraction/storage phase
diff --git a/python/src/server/services/crawling/crawling_service.py b/python/src/server/services/crawling/crawling_service.py
index 562dcdf7..eaa9ab1b 100644
--- a/python/src/server/services/crawling/crawling_service.py
+++ b/python/src/server/services/crawling/crawling_service.py
@@ -14,11 +14,13 @@ from typing import Any, Optional
 from ...config.logfire_config import get_logger, safe_logfire_error, safe_logfire_info
 from ...utils import get_supabase_client
 from ...utils.progress.progress_tracker import ProgressTracker
+from ..credential_service import credential_service
 
 # Import strategies
 # Import operations
 from .discovery_service import DiscoveryService
 from .document_storage_operations import DocumentStorageOperations
+from .page_storage_operations import PageStorageOperations
 from .helpers.site_config import SiteConfig
 
 # Import helpers
@@ -33,22 +35,35 @@ logger = get_logger(__name__)
 
 # Global registry to track active orchestration services for cancellation support
 _active_orchestrations: dict[str, "CrawlingService"] = {}
+_orchestration_lock: asyncio.Lock | None = None
 
 
-def get_active_orchestration(progress_id: str) -> Optional["CrawlingService"]:
+def _ensure_orchestration_lock() -> asyncio.Lock:
+    global _orchestration_lock
+    if _orchestration_lock is None:
+        _orchestration_lock = asyncio.Lock()
+    return _orchestration_lock
+
+
+async def get_active_orchestration(progress_id: str) -> Optional["CrawlingService"]:
     """Get an active orchestration service by progress ID."""
-    return _active_orchestrations.get(progress_id)
+    lock = _ensure_orchestration_lock()
+    async with lock:
+        return _active_orchestrations.get(progress_id)
 
 
-def register_orchestration(progress_id: str, orchestration: "CrawlingService"):
+async def register_orchestration(progress_id: str, orchestration: "CrawlingService"):
     """Register an active orchestration service."""
-    _active_orchestrations[progress_id] = orchestration
+    lock = _ensure_orchestration_lock()
+    async with lock:
+        _active_orchestrations[progress_id] = orchestration
 
 
-def unregister_orchestration(progress_id: str):
+async def unregister_orchestration(progress_id: str):
     """Unregister an orchestration service."""
-    if progress_id in _active_orchestrations:
-        del _active_orchestrations[progress_id]
+    lock = _ensure_orchestration_lock()
+    async with lock:
+        _active_orchestrations.pop(progress_id, None)
 
 
 class CrawlingService:
@@ -86,6 +101,7 @@ class CrawlingService:
         # Initialize operations
         self.doc_storage_ops = DocumentStorageOperations(self.supabase_client)
         self.discovery_service = DiscoveryService()
+        self.page_storage_ops = PageStorageOperations(self.supabase_client)
 
         # Track progress state across all stages to prevent UI resets
         self.progress_state = {"progressId": self.progress_id} if self.progress_id else {}
@@ -203,6 +219,7 @@ class CrawlingService:
         urls: list[str],
         max_concurrent: int | None = None,
         progress_callback: Callable[[str, int, str], Awaitable[None]] | None = None,
+        link_text_fallbacks: dict[str, str] | None = None,
     ) -> list[dict[str, Any]]:
         """Batch crawl multiple URLs in parallel."""
         return await self.batch_strategy.crawl_batch_with_progress(
@@ -212,6 +229,7 @@ class CrawlingService:
             max_concurrent,
             progress_callback,
             self._check_cancellation,  # Pass cancellation check
+            link_text_fallbacks,  # Pass link text fallbacks
         )
 
     async def crawl_recursive_with_progress(
@@ -251,7 +269,7 @@ class CrawlingService:
 
         # Register this orchestration service for cancellation support
         if self.progress_id:
-            register_orchestration(self.progress_id, self)
+            await register_orchestration(self.progress_id, self)
 
         # Start the crawl as an async task in the main event loop
         # Store the task reference for proper cancellation
@@ -494,6 +512,7 @@ class CrawlingService:
                 self._check_cancellation,
                 source_url=url,
                 source_display_name=source_display_name,
+                url_to_page_id=None,  # Will be populated after page storage
             )
 
             # Update progress tracker with source_id now that it's created
@@ -554,15 +573,27 @@ class CrawlingService:
                 try:
                     # Extract provider from request or use credential service default
                     provider = request.get("provider")
+                    embedding_provider = None
+
                     if not provider:
                         try:
-                            from ..credential_service import credential_service
                             provider_config = await credential_service.get_active_provider("llm")
                             provider = provider_config.get("provider", "openai")
                         except Exception as e:
-                            logger.warning(f"Failed to get provider from credential service: {e}, defaulting to openai")
+                            logger.warning(
+                                f"Failed to get provider from credential service: {e}, defaulting to openai"
+                            )
                             provider = "openai"
 
+                    try:
+                        embedding_config = await credential_service.get_active_provider("embedding")
+                        embedding_provider = embedding_config.get("provider")
+                    except Exception as e:
+                        logger.warning(
+                            f"Failed to get embedding provider from credential service: {e}. Using configured default."
+                        )
+                        embedding_provider = None
+
                     code_examples_count = await self.doc_storage_ops.extract_and_store_code_examples(
                         crawl_results,
                         storage_results["url_to_full_document"],
@@ -570,6 +601,7 @@ class CrawlingService:
                         code_progress_callback,
                         self._check_cancellation,
                         provider,
+                        embedding_provider,
                     )
                 except RuntimeError as e:
                     # Code extraction failed, continue crawl with warning
@@ -625,7 +657,7 @@ class CrawlingService:
 
             # Unregister after successful completion
             if self.progress_id:
-                unregister_orchestration(self.progress_id)
+                await unregister_orchestration(self.progress_id)
                 safe_logfire_info(
                     f"Unregistered orchestration service after completion | progress_id={self.progress_id}"
                 )
@@ -644,7 +676,7 @@ class CrawlingService:
             )
             # Unregister on cancellation
             if self.progress_id:
-                unregister_orchestration(self.progress_id)
+                await unregister_orchestration(self.progress_id)
                 safe_logfire_info(
                     f"Unregistered orchestration service on cancellation | progress_id={self.progress_id}"
                 )
@@ -668,7 +700,7 @@ class CrawlingService:
                 await self.progress_tracker.error(error_message)
             # Unregister on error
             if self.progress_id:
-                unregister_orchestration(self.progress_id)
+                await unregister_orchestration(self.progress_id)
                 safe_logfire_info(
                     f"Unregistered orchestration service on error | progress_id={self.progress_id}"
                 )
@@ -773,45 +805,46 @@ class CrawlingService:
                         logger.info(f"Discovery file crawling completed: {len(crawl_results)} result")
                         return crawl_results, crawl_type
 
-                    # Extract links from the content for non-discovery files
-                    extracted_links = self.url_handler.extract_markdown_links(content, url)
+                    # Extract links WITH text from the content
+                    extracted_links_with_text = self.url_handler.extract_markdown_links_with_text(content, url)
 
                     # Filter out self-referential links to avoid redundant crawling
-                    if extracted_links:
-                        original_count = len(extracted_links)
-                        extracted_links = [
-                            link for link in extracted_links
+                    if extracted_links_with_text:
+                        original_count = len(extracted_links_with_text)
+                        extracted_links_with_text = [
+                            (link, text) for link, text in extracted_links_with_text
                             if not self._is_self_link(link, url)
                         ]
-                        self_filtered_count = original_count - len(extracted_links)
+                        self_filtered_count = original_count - len(extracted_links_with_text)
                         if self_filtered_count > 0:
                             logger.info(f"Filtered out {self_filtered_count} self-referential links from {original_count} extracted links")
 
                     # For discovery targets, only follow same-domain links
-                    if extracted_links and request.get("is_discovery_target"):
+                    if extracted_links_with_text and request.get("is_discovery_target"):
                         original_domain = request.get("original_domain")
                         if original_domain:
-                            original_count = len(extracted_links)
-                            extracted_links = [
-                                link for link in extracted_links
+                            original_count = len(extracted_links_with_text)
+                            extracted_links_with_text = [
+                                (link, text) for link, text in extracted_links_with_text
                                 if self._is_same_domain(link, original_domain)
                             ]
-                            domain_filtered_count = original_count - len(extracted_links)
+                            domain_filtered_count = original_count - len(extracted_links_with_text)
                             if domain_filtered_count > 0:
-                                safe_logfire_info(f"Discovery mode: filtered out {domain_filtered_count} external links, keeping {len(extracted_links)} same-domain links")
+                                safe_logfire_info(f"Discovery mode: filtered out {domain_filtered_count} external links, keeping {len(extracted_links_with_text)} same-domain links")
 
                     # Filter out binary files (PDFs, images, archives, etc.) to avoid wasteful crawling
-                    if extracted_links:
-                        original_count = len(extracted_links)
-                        extracted_links = [link for link in extracted_links if not self.url_handler.is_binary_file(link)]
-                        filtered_count = original_count - len(extracted_links)
+                    if extracted_links_with_text:
+                        original_count = len(extracted_links_with_text)
+                        extracted_links_with_text = [(link, text) for link, text in extracted_links_with_text if not self.url_handler.is_binary_file(link)]
+                        filtered_count = original_count - len(extracted_links_with_text)
                         if filtered_count > 0:
                             logger.info(f"Filtered out {filtered_count} binary files from {original_count} extracted links")
 
-                        # Deduplicate to reduce redundant work
-                        extracted_links = list(dict.fromkeys(extracted_links))
+                    if extracted_links_with_text:
+                        # Build mapping of URL -> link text for title fallback
+                        url_to_link_text = {link: text for link, text in extracted_links_with_text}
+                        extracted_links = [link for link, _ in extracted_links_with_text]
 
-                    if extracted_links:
                         # For discovery targets, respect max_depth for same-domain links
                         max_depth = request.get('max_depth', 2) if request.get("is_discovery_target") else request.get('max_depth', 1)
 
@@ -825,27 +858,20 @@ class CrawlingService:
                                 progress_callback=await self._create_crawl_progress_callback("crawling"),
                             )
                         else:
-                            # Depth limit reached, just crawl the immediate links without following further
-                            logger.info(f"Max depth reached, crawling {len(extracted_links)} links without further recursion")
+                            # Use normal batch crawling (with link text fallbacks)
+                            logger.info(f"Crawling {len(extracted_links)} extracted links from {url}")
                             batch_results = await self.crawl_batch_with_progress(
                                 extracted_links,
-                                max_concurrent=request.get('max_concurrent'),
+                                max_concurrent=request.get('max_concurrent'),  # None -> use DB settings
                                 progress_callback=await self._create_crawl_progress_callback("crawling"),
+                                link_text_fallbacks=url_to_link_text,  # Pass link text for title fallback
                             )
-                    else:
-                        # Use normal batch crawling for non-discovery targets
-                        logger.info(f"Crawling {len(extracted_links)} extracted links from {url}")
-                        batch_results = await self.crawl_batch_with_progress(
-                            extracted_links,
-                            max_concurrent=request.get('max_concurrent'),  # None -> use DB settings
-                            progress_callback=await self._create_crawl_progress_callback("crawling"),
-                        )
 
-                    # Combine original text file results with batch results
-                    crawl_results.extend(batch_results)
-                    crawl_type = "link_collection_with_crawled_links"
+                        # Combine original text file results with batch results
+                        crawl_results.extend(batch_results)
+                        crawl_type = "link_collection_with_crawled_links"
 
-                    logger.info(f"Link collection crawling completed: {len(crawl_results)} total results (1 text file + {len(batch_results)} extracted links)")
+                        logger.info(f"Link collection crawling completed: {len(crawl_results)} total results (1 text file + {len(batch_results)} extracted links)")
                 else:
                     logger.info(f"No valid links found in link collection file: {url}")
                     logger.info(f"Text file crawling completed: {len(crawl_results)} results")
diff --git a/python/src/server/services/crawling/document_storage_operations.py b/python/src/server/services/crawling/document_storage_operations.py
index 88ed8e80..669a9f65 100644
--- a/python/src/server/services/crawling/document_storage_operations.py
+++ b/python/src/server/services/crawling/document_storage_operations.py
@@ -44,6 +44,7 @@ class DocumentStorageOperations:
         cancellation_check: Callable | None = None,
         source_url: str | None = None,
         source_display_name: str | None = None,
+        url_to_page_id: dict[str, str] | None = None,
     ) -> dict[str, Any]:
         """
         Process crawled documents and store them in the database.
@@ -128,7 +129,7 @@ class DocumentStorageOperations:
                 all_chunk_numbers.append(i)
                 all_contents.append(chunk)
 
-                # Create metadata for each chunk
+                # Create metadata for each chunk (page_id will be set later)
                 word_count = len(chunk.split())
                 metadata = {
                     "url": doc_url,
@@ -136,6 +137,7 @@ class DocumentStorageOperations:
                     "description": doc.get("description", ""),
                     "source_id": source_id,
                     "knowledge_type": request.get("knowledge_type", "documentation"),
+                    "page_id": None,  # Will be set after pages are stored
                     "crawl_type": crawl_type,
                     "word_count": word_count,
                     "char_count": len(chunk),
@@ -155,13 +157,101 @@ class DocumentStorageOperations:
             if doc_index > 0 and doc_index % 5 == 0:
                 await asyncio.sleep(0)
 
-        # Create/update source record FIRST before storing documents
+        # Create/update source record FIRST (required for FK constraints on pages and chunks)
         if all_contents and all_metadatas:
             await self._create_source_records(
                 all_metadatas, all_contents, source_word_counts, request,
                 source_url, source_display_name
             )
 
+        # Store pages AFTER source is created but BEFORE chunks (FK constraint requirement)
+        from .page_storage_operations import PageStorageOperations
+        page_storage_ops = PageStorageOperations(self.supabase_client)
+
+        # Check if this is an llms-full.txt file
+        is_llms_full = crawl_type == "llms-txt" or (
+            len(url_to_full_document) == 1 and
+            next(iter(url_to_full_document.keys())).endswith("llms-full.txt")
+        )
+
+        if is_llms_full and url_to_full_document:
+            # Handle llms-full.txt with section-based pages
+            base_url = next(iter(url_to_full_document.keys()))
+            content = url_to_full_document[base_url]
+
+            # Store section pages
+            url_to_page_id = await page_storage_ops.store_llms_full_sections(
+                base_url,
+                content,
+                original_source_id,
+                request,
+                crawl_type="llms_full",
+            )
+
+            # Parse sections and re-chunk each section
+            from .helpers.llms_full_parser import parse_llms_full_sections
+            sections = parse_llms_full_sections(content, base_url)
+
+            # Clear existing chunks and re-create from sections
+            all_urls.clear()
+            all_chunk_numbers.clear()
+            all_contents.clear()
+            all_metadatas.clear()
+            url_to_full_document.clear()
+
+            # Chunk each section separately
+            for section in sections:
+                # Update url_to_full_document with section content
+                url_to_full_document[section.url] = section.content
+                section_chunks = await storage_service.smart_chunk_text_async(
+                    section.content, chunk_size=5000
+                )
+
+                for i, chunk in enumerate(section_chunks):
+                    all_urls.append(section.url)
+                    all_chunk_numbers.append(i)
+                    all_contents.append(chunk)
+
+                    word_count = len(chunk.split())
+                    metadata = {
+                        "url": section.url,
+                        "title": section.section_title,
+                        "description": "",
+                        "source_id": original_source_id,
+                        "knowledge_type": request.get("knowledge_type", "documentation"),
+                        "page_id": url_to_page_id.get(section.url),
+                        "crawl_type": "llms_full",
+                        "word_count": word_count,
+                        "char_count": len(chunk),
+                        "chunk_index": i,
+                        "tags": request.get("tags", []),
+                    }
+                    all_metadatas.append(metadata)
+        else:
+            # Handle regular pages
+            reconstructed_crawl_results = []
+            for url, markdown in url_to_full_document.items():
+                reconstructed_crawl_results.append({
+                    "url": url,
+                    "markdown": markdown,
+                })
+
+            if reconstructed_crawl_results:
+                url_to_page_id = await page_storage_ops.store_pages(
+                    reconstructed_crawl_results,
+                    original_source_id,
+                    request,
+                    crawl_type,
+                )
+            else:
+                url_to_page_id = {}
+
+            # Update all chunk metadata with correct page_id
+            for metadata in all_metadatas:
+                chunk_url = metadata.get("url")
+                if chunk_url and chunk_url in url_to_page_id:
+                    metadata["page_id"] = url_to_page_id[chunk_url]
+
         safe_logfire_info(f"url_to_full_document keys: {list(url_to_full_document.keys())[:5]}")
 
         # Log chunking results
@@ -183,6 +273,7 @@ class DocumentStorageOperations:
             enable_parallel_batches=True,  # Enable parallel processing
             provider=None,  # Use configured provider
             cancellation_check=cancellation_check,  # Pass cancellation check
+            url_to_page_id=url_to_page_id,  # Link chunks to pages
         )
 
         # Calculate chunk counts
@@ -352,6 +443,7 @@ class DocumentStorageOperations:
         progress_callback: Callable | None = None,
         cancellation_check: Callable[[], None] | None = None,
         provider: str | None = None,
+        embedding_provider: str | None = None,
     ) -> int:
         """
         Extract code examples from crawled documents and store them.
@@ -363,12 +455,19 @@ class DocumentStorageOperations:
             progress_callback: Optional callback for progress updates
             cancellation_check: Optional function to check for cancellation
             provider: Optional LLM provider to use for code summaries
+            embedding_provider: Optional embedding provider override for code example embeddings
 
         Returns:
             Number of code examples stored
         """
         result = await self.code_extraction_service.extract_and_store_code_examples(
-            crawl_results, url_to_full_document, source_id, progress_callback, cancellation_check, provider
+            crawl_results,
+            url_to_full_document,
+            source_id,
+            progress_callback,
+            cancellation_check,
+            provider,
+            embedding_provider,
         )
 
         return result
diff --git a/python/src/server/services/crawling/helpers/llms_full_parser.py b/python/src/server/services/crawling/helpers/llms_full_parser.py
new file mode 100644
index 00000000..8af3c371
--- /dev/null
+++ b/python/src/server/services/crawling/helpers/llms_full_parser.py
@@ -0,0 +1,262 @@
+"""
+LLMs-full.txt Section Parser
+
+Parses llms-full.txt files by splitting on H1 headers (# ) to create separate
+"pages" for each section. Each section gets a synthetic URL with a slug anchor.
+"""
+
+import re
+
+from pydantic import BaseModel
+
+
+class LLMsFullSection(BaseModel):
+    """Parsed section from llms-full.txt file"""
+
+    section_title: str  # Raw H1 text: "# Core Concepts"
+    section_order: int  # Position in document: 0, 1, 2, ...
+    content: str  # Section content (including H1 header)
+    url: str  # Synthetic URL: base.txt#core-concepts
+    word_count: int
+
+
+def create_section_slug(h1_heading: str) -> str:
+    """
+    Generate URL slug from H1 heading.
+
+    Args:
+        h1_heading: H1 text like "# Core Concepts" or "# Getting Started"
+
+    Returns:
+        Slug like "core-concepts" or "getting-started"
+
+    Examples:
+        "# Core Concepts" -> "core-concepts"
+        "# API Reference" -> "api-reference"
+        "# Getting Started!" -> "getting-started"
+    """
+    # Remove "# " prefix if present
+    slug_text = h1_heading.replace("# ", "").strip()
+
+    # Convert to lowercase
+    slug = slug_text.lower()
+
+    # Replace spaces with hyphens
+    slug = slug.replace(" ", "-")
+
+    # Remove special characters (keep only alphanumeric and hyphens)
+    slug = re.sub(r"[^a-z0-9-]", "", slug)
+
+    # Remove consecutive hyphens
+    slug = re.sub(r"-+", "-", slug)
+
+    # Remove leading/trailing hyphens
+    slug = slug.strip("-")
+
+    return slug
+
+
+def create_section_url(base_url: str, h1_heading: str, section_order: int) -> str:
+    """
+    Generate synthetic URL with slug anchor for a section.
+
+    Args:
+        base_url: Base URL like "https://example.com/llms-full.txt"
+        h1_heading: H1 text like "# Core Concepts"
+        section_order: Section position (0-based)
+
+    Returns:
+        Synthetic URL like "https://example.com/llms-full.txt#section-0-core-concepts"
+    """
+    slug = create_section_slug(h1_heading)
+    return f"{base_url}#section-{section_order}-{slug}"
+
+
+def parse_llms_full_sections(content: str, base_url: str) -> list[LLMsFullSection]:
+    """
+    Split llms-full.txt content by H1 headers to create separate sections.
+
+    Each H1 (lines starting with "# " but not "##") marks a new section.
+    Sections are given synthetic URLs with slug anchors.
+
+    Args:
+        content: Full text content of llms-full.txt file
+        base_url: Base URL of the file (e.g., "https://example.com/llms-full.txt")
+
+    Returns:
+        List of LLMsFullSection objects, one per H1 section
+
+    Edge cases:
+        - No H1 headers: Returns single section with entire content
+        - Multiple consecutive H1s: Creates separate sections correctly
+        - Empty sections: Skipped (not included in results)
+
+    Example:
+        Input content:
+        '''
+        # Core Concepts
+        Claude is an AI assistant...
+
+        # Getting Started
+        To get started...
+        '''
+
+        Returns:
+        [
+            LLMsFullSection(
+                section_title="# Core Concepts",
+                section_order=0,
+                content="# Core Concepts\\nClaude is...",
+                url="https://example.com/llms-full.txt#core-concepts",
+                word_count=5
+            ),
+            LLMsFullSection(
+                section_title="# Getting Started",
+                section_order=1,
+                content="# Getting Started\\nTo get started...",
+                url="https://example.com/llms-full.txt#getting-started",
+                word_count=4
+            )
+        ]
+    """
+    lines = content.split("\n")
+
+    # Pre-scan: mark which lines are inside code blocks
+    inside_code_block = set()
+    in_block = False
+    for i, line in enumerate(lines):
+        if line.strip().startswith("```"):
+            in_block = not in_block
+        if in_block:
+            inside_code_block.add(i)
+
+    # Parse sections, ignoring H1 headers inside code blocks
+    sections: list[LLMsFullSection] = []
+    current_h1: str | None = None
+    current_content: list[str] = []
+    section_order = 0
+
+    for i, line in enumerate(lines):
+        # Detect H1 (starts with "# " but not "##") - but ONLY if not in code block
+        is_h1 = line.startswith("# ") and not line.startswith("## ")
+        if is_h1 and i not in inside_code_block:
+            # Save previous section if it exists
+            if current_h1 is not None:
+                section_text = "\n".join(current_content)
+                # Skip empty sections (only whitespace)
+                if section_text.strip():
+                    section_url = create_section_url(base_url, current_h1, section_order)
+                    word_count = len(section_text.split())
+
+                    sections.append(
+                        LLMsFullSection(
+                            section_title=current_h1,
+                            section_order=section_order,
+                            content=section_text,
+                            url=section_url,
+                            word_count=word_count,
+                        )
+                    )
+                    section_order += 1
+
+            # Start new section
+            current_h1 = line
+            current_content = [line]
+        else:
+            # Only accumulate if we've seen an H1
+            if current_h1 is not None:
+                current_content.append(line)
+
+    # Save last section
+    if current_h1 is not None:
+        section_text = "\n".join(current_content)
+        if section_text.strip():
+            section_url = create_section_url(base_url, current_h1, section_order)
+            word_count = len(section_text.split())
+            sections.append(
+                LLMsFullSection(
+                    section_title=current_h1,
+                    section_order=section_order,
+                    content=section_text,
+                    url=section_url,
+                    word_count=word_count,
+                )
+            )
+
+    # Edge case: No H1 headers found, treat entire file as single page
+    if not sections and content.strip():
+        sections.append(
+            LLMsFullSection(
+                section_title="Full Document",
+                section_order=0,
+                content=content,
+                url=base_url,  # No anchor for single-page
+                word_count=len(content.split()),
+            )
+        )
+
+    # Fix sections that were split inside code blocks - merge them with next section
+    if sections:
+        fixed_sections: list[LLMsFullSection] = []
+        i = 0
+        while i < len(sections):
+            current = sections[i]
+
+            # Count ``` at start of lines only (proper code fences)
+            code_fence_count = sum(
+                1 for line in current.content.split('\n')
+                if line.strip().startswith('```')
+            )
+
+            # If odd number, we're inside an unclosed code block - merge with next
+            while code_fence_count % 2 == 1 and i + 1 < len(sections):
+                next_section = sections[i + 1]
+                # Combine content
+                combined_content = current.content + "\n\n" + next_section.content
+                # Update current with combined content
+                current = LLMsFullSection(
+                    section_title=current.section_title,
+                    section_order=current.section_order,
+                    content=combined_content,
+                    url=current.url,
+                    word_count=len(combined_content.split()),
+                )
+                # Move to next section and recount ``` at start of lines
+                i += 1
+                code_fence_count = sum(
+                    1 for line in current.content.split('\n')
+                    if line.strip().startswith('```')
+                )
+
+            fixed_sections.append(current)
+            i += 1
+
+        sections = fixed_sections
+
+    # Combine consecutive small sections (<200 chars) together
+    if sections:
+        combined_sections: list[LLMsFullSection] = []
+        i = 0
+        while i < len(sections):
+            current = sections[i]
+            combined_content = current.content
+
+            # Keep combining while current is small and there are more sections
+            while len(combined_content) < 200 and i + 1 < len(sections):
+                i += 1
+                combined_content = combined_content + "\n\n" + sections[i].content
+
+            # Create combined section with first section's metadata
+            combined = LLMsFullSection(
+                section_title=current.section_title,
+                section_order=current.section_order,
+                content=combined_content,
+                url=current.url,
+                word_count=len(combined_content.split()),
+            )
+            combined_sections.append(combined)
+            i += 1
+
+        sections = combined_sections
+
+    return sections
diff --git a/python/src/server/services/crawling/helpers/url_handler.py b/python/src/server/services/crawling/helpers/url_handler.py
index 042ff1c5..f9955e4d 100644
--- a/python/src/server/services/crawling/helpers/url_handler.py
+++ b/python/src/server/services/crawling/helpers/url_handler.py
@@ -281,14 +281,30 @@ class URLHandler:
     def extract_markdown_links(content: str, base_url: str | None = None) -> list[str]:
         """
         Extract markdown-style links from text content.
-        
+
         Args:
             content: Text content to extract links from
             base_url: Base URL to resolve relative links against
-            
+
         Returns:
             List of absolute URLs found in the content
         """
+        # Extract with text and return only URLs for backward compatibility
+        links_with_text = URLHandler.extract_markdown_links_with_text(content, base_url)
+        return [url for url, _ in links_with_text]
+
+    @staticmethod
+    def extract_markdown_links_with_text(content: str, base_url: Optional[str] = None) -> List[tuple[str, str]]:
+        """
+        Extract markdown-style links from text content with their link text.
+
+        Args:
+            content: Text content to extract links from
+            base_url: Base URL to resolve relative links against
+
+        Returns:
+            List of (url, link_text) tuples
+        """
         try:
             if not content:
                 return []
@@ -316,7 +332,7 @@ class URLHandler:
                 cleaned = ''.join(c for c in cleaned if unicodedata.category(c) not in ('Cf', 'Cc'))
                 return cleaned
 
-            urls = []
+            links = []
             for match in re.finditer(combined_pattern, content):
                 url = (
                     match.group('md')
@@ -349,21 +365,24 @@ class URLHandler:
 
                 # Only include HTTP/HTTPS URLs
                 if url.startswith(('http://', 'https://')):
-                    urls.append(url)
+                    # Extract link text if available (from markdown links)
+                    link_text = match.group('text') if match.group('md') else ''
+                    link_text = link_text.strip() if link_text else ''
+                    links.append((url, link_text))
 
-            # Remove duplicates while preserving order
+            # Remove duplicates while preserving order (first occurrence wins)
             seen = set()
-            unique_urls = []
-            for url in urls:
+            unique_links = []
+            for url, text in links:
                 if url not in seen:
                     seen.add(url)
-                    unique_urls.append(url)
+                    unique_links.append((url, text))
 
-            logger.info(f"Extracted {len(unique_urls)} unique links from content")
-            return unique_urls
+            logger.info(f"Extracted {len(unique_links)} unique links from content")
+            return unique_links
 
         except Exception as e:
-            logger.error(f"Error extracting markdown links: {e}", exc_info=True)
+            logger.error(f"Error extracting markdown links with text: {e}", exc_info=True)
             return []
 
     @staticmethod
diff --git a/python/src/server/services/crawling/page_storage_operations.py b/python/src/server/services/crawling/page_storage_operations.py
new file mode 100644
index 00000000..a0e8a331
--- /dev/null
+++ b/python/src/server/services/crawling/page_storage_operations.py
@@ -0,0 +1,248 @@
+"""
+Page Storage Operations
+
+Handles the storage of complete documentation pages in the archon_page_metadata table.
+Pages are stored BEFORE chunking to maintain full context for agent retrieval.
+"""
+
+from typing import Any
+
+from postgrest.exceptions import APIError
+
+from ...config.logfire_config import get_logger, safe_logfire_error, safe_logfire_info
+from .helpers.llms_full_parser import parse_llms_full_sections
+
+logger = get_logger(__name__)
+
+
+class PageStorageOperations:
+    """
+    Handles page storage operations for crawled content.
+
+    Pages are stored in the archon_page_metadata table with full content and metadata.
+    This enables agents to retrieve complete documentation pages instead of just chunks.
+    """
+
+    def __init__(self, supabase_client):
+        """
+        Initialize page storage operations.
+
+        Args:
+            supabase_client: The Supabase client for database operations
+        """
+        self.supabase_client = supabase_client
+
+    async def store_pages(
+        self,
+        crawl_results: list[dict],
+        source_id: str,
+        request: dict[str, Any],
+        crawl_type: str,
+    ) -> dict[str, str]:
+        """
+        Store pages in archon_page_metadata table from regular crawl results.
+
+        Args:
+            crawl_results: List of crawled documents with url, markdown, title, etc.
+            source_id: The source ID these pages belong to
+            request: The original crawl request with knowledge_type, tags, etc.
+            crawl_type: Type of crawl performed (sitemap, url, link_collection, etc.)
+
+        Returns:
+            {url: page_id} mapping for FK references in chunks
+        """
+        safe_logfire_info(
+            f"store_pages called | source_id={source_id} | crawl_type={crawl_type} | num_results={len(crawl_results)}"
+        )
+
+        url_to_page_id: dict[str, str] = {}
+        pages_to_insert: list[dict[str, Any]] = []
+
+        for doc in crawl_results:
+            url = doc.get("url", "").strip()
+            markdown = doc.get("markdown", "").strip()
+
+            # Skip documents with empty content or missing URLs
+            if not url or not markdown:
+                continue
+
+            # Prepare page record
+            word_count = len(markdown.split())
+            char_count = len(markdown)
+
+            page_record = {
+                "source_id": source_id,
+                "url": url,
+                "full_content": markdown,
+                "section_title": None,  # Regular page, not a section
+                "section_order": 0,
+                "word_count": word_count,
+                "char_count": char_count,
+                "chunk_count": 0,  # Will be updated after chunking
+                "metadata": {
+                    "knowledge_type": request.get("knowledge_type", "documentation"),
+                    "crawl_type": crawl_type,
+                    "page_type": "documentation",
+                    "tags": request.get("tags", []),
+                },
+            }
+            pages_to_insert.append(page_record)
+
+        # Batch upsert pages
+        if pages_to_insert:
+            try:
+                safe_logfire_info(
+                    f"Upserting {len(pages_to_insert)} pages into archon_page_metadata table"
+                )
+                result = (
+                    self.supabase_client.table("archon_page_metadata")
+                    .upsert(pages_to_insert, on_conflict="url")
+                    .execute()
+                )
+
+                # Build url → page_id mapping
+                for page in result.data:
+                    url_to_page_id[page["url"]] = page["id"]
+
+                safe_logfire_info(
+                    f"Successfully stored {len(url_to_page_id)}/{len(pages_to_insert)} pages in archon_page_metadata"
+                )
+
+            except APIError as e:
+                safe_logfire_error(
+                    f"Database error upserting pages | source_id={source_id} | attempted={len(pages_to_insert)} | error={str(e)}"
+                )
+                logger.error(f"Failed to upsert pages for source {source_id}: {e}", exc_info=True)
+                # Don't raise - allow chunking to continue even if page storage fails
+
+            except Exception as e:
+                safe_logfire_error(
+                    f"Unexpected error upserting pages | source_id={source_id} | attempted={len(pages_to_insert)} | error={str(e)}"
+                )
+                logger.error(f"Unexpected error upserting pages for source {source_id}: {e}", exc_info=True)
+                # Don't raise - allow chunking to continue
+
+        return url_to_page_id
+
+    async def store_llms_full_sections(
+        self,
+        base_url: str,
+        content: str,
+        source_id: str,
+        request: dict[str, Any],
+        crawl_type: str = "llms_full",
+    ) -> dict[str, str]:
+        """
+        Store llms-full.txt sections as separate pages.
+
+        Each H1 section gets its own page record with a synthetic URL.
+
+        Args:
+            base_url: Base URL of the llms-full.txt file
+            content: Full text content of the file
+            source_id: The source ID these sections belong to
+            request: The original crawl request
+            crawl_type: Type of crawl (defaults to "llms_full")
+
+        Returns:
+            {url: page_id} mapping for FK references in chunks
+        """
+        url_to_page_id: dict[str, str] = {}
+
+        # Parse sections from content
+        sections = parse_llms_full_sections(content, base_url)
+
+        if not sections:
+            logger.warning(f"No sections found in llms-full.txt file: {base_url}")
+            return url_to_page_id
+
+        safe_logfire_info(
+            f"Parsed {len(sections)} sections from llms-full.txt file: {base_url}"
+        )
+
+        # Prepare page records for each section
+        pages_to_insert: list[dict[str, Any]] = []
+
+        for section in sections:
+            page_record = {
+                "source_id": source_id,
+                "url": section.url,
+                "full_content": section.content,
+                "section_title": section.section_title,
+                "section_order": section.section_order,
+                "word_count": section.word_count,
+                "char_count": len(section.content),
+                "chunk_count": 0,  # Will be updated after chunking
+                "metadata": {
+                    "knowledge_type": request.get("knowledge_type", "documentation"),
+                    "crawl_type": crawl_type,
+                    "page_type": "llms_full_section",
+                    "tags": request.get("tags", []),
+                    "section_metadata": {
+                        "section_title": section.section_title,
+                        "section_order": section.section_order,
+                        "base_url": base_url,
+                    },
+                },
+            }
+            pages_to_insert.append(page_record)
+
+        # Batch upsert pages
+        if pages_to_insert:
+            try:
+                safe_logfire_info(
+                    f"Upserting {len(pages_to_insert)} section pages into archon_page_metadata"
+                )
+                result = (
+                    self.supabase_client.table("archon_page_metadata")
+                    .upsert(pages_to_insert, on_conflict="url")
+                    .execute()
+                )
+
+                # Build url → page_id mapping
+                for page in result.data:
+                    url_to_page_id[page["url"]] = page["id"]
+
+                safe_logfire_info(
+                    f"Successfully stored {len(url_to_page_id)}/{len(pages_to_insert)} section pages"
+                )
+
+            except APIError as e:
+                safe_logfire_error(
+                    f"Database error upserting sections | base_url={base_url} | attempted={len(pages_to_insert)} | error={str(e)}"
+                )
+                logger.error(f"Failed to upsert sections for {base_url}: {e}", exc_info=True)
+                # Don't raise - allow process to continue
+
+            except Exception as e:
+                safe_logfire_error(
+                    f"Unexpected error upserting sections | base_url={base_url} | attempted={len(pages_to_insert)} | error={str(e)}"
+                )
+                logger.error(f"Unexpected error upserting sections for {base_url}: {e}", exc_info=True)
+                # Don't raise - allow process to continue
+
+        return url_to_page_id
+
+    async def update_page_chunk_count(self, page_id: str, chunk_count: int) -> None:
+        """
+        Update the chunk_count field for a page after chunking is complete.
+
+        Args:
+            page_id: The UUID of the page to update
+            chunk_count: Number of chunks created from this page
+        """
+        try:
+            self.supabase_client.table("archon_page_metadata").update(
+                {"chunk_count": chunk_count}
+            ).eq("id", page_id).execute()
+
+            safe_logfire_info(f"Updated chunk_count={chunk_count} for page_id={page_id}")
+
+        except APIError as e:
+            logger.warning(
+                f"Database error updating chunk_count for page {page_id}: {e}", exc_info=True
+            )
+        except Exception as e:
+            logger.warning(
+                f"Unexpected error updating chunk_count for page {page_id}: {e}", exc_info=True
+            )
diff --git a/python/src/server/services/crawling/strategies/batch.py b/python/src/server/services/crawling/strategies/batch.py
index 1457fdca..16aea020 100644
--- a/python/src/server/services/crawling/strategies/batch.py
+++ b/python/src/server/services/crawling/strategies/batch.py
@@ -38,6 +38,7 @@ class BatchCrawlStrategy:
         max_concurrent: int | None = None,
         progress_callback: Callable[..., Awaitable[None]] | None = None,
         cancellation_check: Callable[[], None] | None = None,
+        link_text_fallbacks: dict[str, str] | None = None,
     ) -> list[dict[str, Any]]:
         """
         Batch crawl multiple URLs in parallel with progress reporting.
@@ -49,6 +50,7 @@ class BatchCrawlStrategy:
             max_concurrent: Maximum concurrent crawls
             progress_callback: Optional callback for progress updates
             cancellation_check: Optional function to check for cancellation
+            link_text_fallbacks: Optional dict mapping URLs to link text for title fallback
 
         Returns:
             List of crawl results
@@ -234,10 +236,30 @@ class BatchCrawlStrategy:
                 if result.success and result.markdown and result.markdown.fit_markdown:
                     # Map back to original URL
                     original_url = url_mapping.get(result.url, result.url)
+
+                    # Extract title from HTML <title> tag
+                    title = "Untitled"
+                    if result.html:
+                        import re
+                        title_match = re.search(r'<title[^>]*>(.*?)</title>', result.html, re.IGNORECASE | re.DOTALL)
+                        if title_match:
+                            extracted_title = title_match.group(1).strip()
+                            # Clean up HTML entities
+                            extracted_title = extracted_title.replace('&amp;', '&').replace('&lt;', '<').replace('&gt;', '>').replace('&quot;', '"')
+                            if extracted_title:
+                                title = extracted_title
+
+                    # Fallback to link text if HTML title extraction failed
+                    if title == "Untitled" and link_text_fallbacks:
+                        fallback_text = link_text_fallbacks.get(original_url, "")
+                        if fallback_text:
+                            title = fallback_text
+
                     successful_results.append({
                         "url": original_url,
                         "markdown": result.markdown.fit_markdown,
                         "html": result.html,  # Use raw HTML
+                        "title": title,
                     })
                 else:
                     logger.warning(
diff --git a/python/src/server/services/crawling/strategies/recursive.py b/python/src/server/services/crawling/strategies/recursive.py
index d13b51d4..3cdee750 100644
--- a/python/src/server/services/crawling/strategies/recursive.py
+++ b/python/src/server/services/crawling/strategies/recursive.py
@@ -277,10 +277,23 @@ class RecursiveCrawlStrategy:
                     total_processed += 1
 
                     if result.success and result.markdown and result.markdown.fit_markdown:
+                        # Extract title from HTML <title> tag
+                        title = "Untitled"
+                        if result.html:
+                            import re
+                            title_match = re.search(r'<title[^>]*>(.*?)</title>', result.html, re.IGNORECASE | re.DOTALL)
+                            if title_match:
+                                extracted_title = title_match.group(1).strip()
+                                # Clean up HTML entities
+                                extracted_title = extracted_title.replace('&amp;', '&').replace('&lt;', '<').replace('&gt;', '>').replace('&quot;', '"')
+                                if extracted_title:
+                                    title = extracted_title
+
                         results_all.append({
                             "url": original_url,
                             "markdown": result.markdown.fit_markdown,
                             "html": result.html,  # Always use raw HTML for code extraction
+                            "title": title,
                         })
                         depth_successful += 1
 
diff --git a/python/src/server/services/crawling/strategies/single_page.py b/python/src/server/services/crawling/strategies/single_page.py
index 6a2cc1cc..58610d01 100644
--- a/python/src/server/services/crawling/strategies/single_page.py
+++ b/python/src/server/services/crawling/strategies/single_page.py
@@ -179,12 +179,24 @@ class SinglePageCrawlStrategy:
                 if 'getting-started' in url:
                     logger.info(f"Markdown sample for getting-started: {markdown_sample}")
 
+                # Extract title from HTML <title> tag
+                title = "Untitled"
+                if result.html:
+                    import re
+                    title_match = re.search(r'<title[^>]*>(.*?)</title>', result.html, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        extracted_title = title_match.group(1).strip()
+                        # Clean up HTML entities
+                        extracted_title = extracted_title.replace('&amp;', '&').replace('&lt;', '<').replace('&gt;', '>').replace('&quot;', '"')
+                        if extracted_title:
+                            title = extracted_title
+
                 return {
                     "success": True,
                     "url": original_url,  # Use original URL for tracking
                     "markdown": result.markdown,
                     "html": result.html,  # Use raw HTML instead of cleaned_html for code extraction
-                    "title": result.title or "Untitled",
+                    "title": title,
                     "links": result.links,
                     "content_length": len(result.markdown)
                 }
diff --git a/python/src/server/services/credential_service.py b/python/src/server/services/credential_service.py
index 62fbb47a..a8aee849 100644
--- a/python/src/server/services/credential_service.py
+++ b/python/src/server/services/credential_service.py
@@ -36,42 +36,6 @@ class CredentialItem:
     description: str | None = None
 
 
-def _detect_embedding_provider_from_model(embedding_model: str) -> str:
-    """
-    Detect the appropriate embedding provider based on model name.
-
-    Args:
-        embedding_model: The embedding model name
-
-    Returns:
-        Provider name: 'google', 'openai', or 'openai' (default)
-    """
-    if not embedding_model:
-        return "openai"  # Default
-
-    model_lower = embedding_model.lower()
-
-    # Google embedding models
-    google_patterns = [
-        "text-embedding-004",
-        "text-embedding-005",
-        "text-multilingual-embedding",
-        "gemini-embedding",
-        "multimodalembedding"
-    ]
-
-    if any(pattern in model_lower for pattern in google_patterns):
-        return "google"
-
-    # OpenAI embedding models (and default for unknown)
-    openai_patterns = [
-        "text-embedding-ada-002",
-        "text-embedding-3-small",
-        "text-embedding-3-large"
-    ]
-
-    # Default to OpenAI for OpenAI models or unknown models
-    return "openai"
 
 
 class CredentialService:
@@ -475,26 +439,24 @@ class CredentialService:
 
             # Get the selected provider based on service type
             if service_type == "embedding":
-                # Get the LLM provider setting to determine embedding provider
-                llm_provider = rag_settings.get("LLM_PROVIDER", "openai")
-                embedding_model = rag_settings.get("EMBEDDING_MODEL", "text-embedding-3-small")
+                # First check for explicit EMBEDDING_PROVIDER setting (new split provider approach)
+                explicit_embedding_provider = rag_settings.get("EMBEDDING_PROVIDER")
 
-                # Determine embedding provider based on LLM provider
-                if llm_provider == "google":
-                    provider = "google"
-                elif llm_provider == "ollama":
-                    provider = "ollama"
-                elif llm_provider == "openrouter":
-                    # OpenRouter supports both OpenAI and Google embedding models
-                    provider = _detect_embedding_provider_from_model(embedding_model)
-                elif llm_provider in ["anthropic", "grok"]:
-                    # Anthropic and Grok support both OpenAI and Google embedding models
-                    provider = _detect_embedding_provider_from_model(embedding_model)
+                # Validate that embedding provider actually supports embeddings
+                embedding_capable_providers = {"openai", "google", "ollama"}
+
+                if (explicit_embedding_provider and
+                    explicit_embedding_provider != "" and
+                    explicit_embedding_provider in embedding_capable_providers):
+                    # Use the explicitly set embedding provider
+                    provider = explicit_embedding_provider
+                    logger.debug(f"Using explicit embedding provider: '{provider}'")
                 else:
-                    # Default case (openai, or unknown providers)
+                    # Fall back to OpenAI as default embedding provider for backward compatibility
+                    if explicit_embedding_provider and explicit_embedding_provider not in embedding_capable_providers:
+                        logger.warning(f"Invalid embedding provider '{explicit_embedding_provider}' doesn't support embeddings, defaulting to OpenAI")
                     provider = "openai"
-
-                logger.debug(f"Determined embedding provider '{provider}' from LLM provider '{llm_provider}' and embedding model '{embedding_model}'")
+                    logger.debug(f"No explicit embedding provider set, defaulting to OpenAI for backward compatibility")
             else:
                 provider = rag_settings.get("LLM_PROVIDER", "openai")
                 # Ensure provider is a valid string, not a boolean or other type
diff --git a/python/src/server/services/embeddings/embedding_service.py b/python/src/server/services/embeddings/embedding_service.py
index 4f825f1d..87ce390b 100644
--- a/python/src/server/services/embeddings/embedding_service.py
+++ b/python/src/server/services/embeddings/embedding_service.py
@@ -5,15 +5,19 @@ Handles all OpenAI embedding operations with proper rate limiting and error hand
 """
 
 import asyncio
+import inspect
 import os
+from abc import ABC, abstractmethod
 from dataclasses import dataclass, field
 from typing import Any
 
+import httpx
+import numpy as np
 import openai
 
 from ...config.logfire_config import safe_span, search_logger
 from ..credential_service import credential_service
-from ..llm_provider_service import get_embedding_model, get_llm_client, is_google_embedding_model, is_openai_embedding_model
+from ..llm_provider_service import get_embedding_model, get_llm_client
 from ..threading_service import get_threading_service
 from .embedding_exceptions import (
     EmbeddingAPIError,
@@ -64,6 +68,167 @@ class EmbeddingBatchResult:
         return self.success_count + self.failure_count
 
 
+class EmbeddingProviderAdapter(ABC):
+    """Adapter interface for embedding providers."""
+
+    @abstractmethod
+    async def create_embeddings(
+        self,
+        texts: list[str],
+        model: str,
+        dimensions: int | None = None,
+    ) -> list[list[float]]:
+        """Create embeddings for the given texts."""
+
+
+class OpenAICompatibleEmbeddingAdapter(EmbeddingProviderAdapter):
+    """Adapter for providers using the OpenAI embeddings API shape."""
+    
+    def __init__(self, client: Any):
+        self._client = client
+    
+    async def create_embeddings(
+        self,
+        texts: list[str],
+        model: str,
+        dimensions: int | None = None,
+    ) -> list[list[float]]:
+        request_args: dict[str, Any] = {
+            "model": model,
+            "input": texts,
+        }
+        if dimensions is not None:
+            request_args["dimensions"] = dimensions
+            
+        response = await self._client.embeddings.create(**request_args)
+        return [item.embedding for item in response.data]
+
+
+class GoogleEmbeddingAdapter(EmbeddingProviderAdapter):
+    """Adapter for Google's native embedding endpoint."""
+
+    async def create_embeddings(
+        self,
+        texts: list[str],
+        model: str,
+        dimensions: int | None = None,
+    ) -> list[list[float]]:
+        try:
+            google_api_key = await credential_service.get_credential("GOOGLE_API_KEY")
+            if not google_api_key:
+                raise EmbeddingAPIError("Google API key not found")
+
+            async with httpx.AsyncClient(timeout=30.0) as http_client:
+                embeddings = await asyncio.gather(
+                    *(
+                        self._fetch_single_embedding(http_client, google_api_key, model, text, dimensions)
+                        for text in texts
+                    )
+                )
+
+            return embeddings
+
+        except httpx.HTTPStatusError as error:
+            error_content = error.response.text
+            search_logger.error(
+                f"Google embedding API returned {error.response.status_code} - {error_content}",
+                exc_info=True,
+            )
+            raise EmbeddingAPIError(
+                f"Google embedding API error: {error.response.status_code} - {error_content}",
+                original_error=error,
+            ) from error
+        except Exception as error:
+            search_logger.error(f"Error calling Google embedding API: {error}", exc_info=True)
+            raise EmbeddingAPIError(
+                f"Google embedding error: {str(error)}", original_error=error
+            ) from error
+
+    async def _fetch_single_embedding(
+        self,
+        http_client: httpx.AsyncClient,
+        api_key: str,
+        model: str,
+        text: str,
+        dimensions: int | None = None,
+    ) -> list[float]:
+        if model.startswith("models/"):
+            url_model = model[len("models/") :]
+            payload_model = model
+        else:
+            url_model = model
+            payload_model = f"models/{model}"
+        url = f"https://generativelanguage.googleapis.com/v1beta/models/{url_model}:embedContent"
+        headers = {
+            "x-goog-api-key": api_key,
+            "Content-Type": "application/json",
+        }
+        payload = {
+            "model": payload_model,
+            "content": {"parts": [{"text": text}]},
+        }
+
+        # Add output_dimensionality parameter if dimensions are specified and supported
+        if dimensions is not None and dimensions > 0:
+            model_name = payload_model.removeprefix("models/")
+            if model_name.startswith("textembedding-gecko"):
+                supported_dimensions = {128, 256, 512, 768}
+            else:
+                supported_dimensions = {128, 256, 512, 768, 1024, 1536, 2048, 3072}
+
+            if dimensions in supported_dimensions:
+                payload["outputDimensionality"] = dimensions
+            else:
+                search_logger.warning(
+                    f"Requested dimension {dimensions} is not supported by Google model '{model_name}'. "
+                    "Falling back to the provider default."
+                )
+
+        response = await http_client.post(url, headers=headers, json=payload)
+        response.raise_for_status()
+
+        result = response.json()
+        embedding = result.get("embedding", {})
+        values = embedding.get("values") if isinstance(embedding, dict) else None
+        if not isinstance(values, list):
+            raise EmbeddingAPIError(f"Invalid embedding payload from Google: {result}")
+
+        # Normalize embeddings for dimensions < 3072 as per Google's documentation
+        actual_dimension = len(values)
+        if actual_dimension > 0 and actual_dimension < 3072:
+            values = self._normalize_embedding(values)
+
+        return values
+
+    def _normalize_embedding(self, embedding: list[float]) -> list[float]:
+        """Normalize embedding vector for dimensions < 3072."""
+        try:
+            embedding_array = np.array(embedding, dtype=np.float32)
+            norm = np.linalg.norm(embedding_array)
+            if norm > 0:
+                normalized = embedding_array / norm
+                return normalized.tolist()
+            else:
+                search_logger.warning("Zero-norm embedding detected, returning unnormalized")
+                return embedding
+        except Exception as e:
+            search_logger.error(f"Failed to normalize embedding: {e}")
+            # Return original embedding if normalization fails
+            return embedding
+
+
+def _get_embedding_adapter(provider: str, client: Any) -> EmbeddingProviderAdapter:
+    provider_name = (provider or "").lower()
+    if provider_name == "google":
+        return GoogleEmbeddingAdapter()
+    return OpenAICompatibleEmbeddingAdapter(client)
+
+
+async def _maybe_await(value: Any) -> Any:
+    """Await the value if it is awaitable, otherwise return as-is."""
+
+    return await value if inspect.isawaitable(value) else value
+
 # Provider-aware client factory
 get_openai_client = get_llm_client
 
@@ -185,27 +350,25 @@ async def create_embeddings_batch(
         "create_embeddings_batch", text_count=len(texts), total_chars=sum(len(t) for t in texts)
     ) as span:
         try:
-            # Intelligent embedding provider routing based on model type
-            # Get the embedding model first to determine the correct provider
-            embedding_model = await get_embedding_model(provider=provider)
+            embedding_config = await _maybe_await(
+                credential_service.get_active_provider(service_type="embedding")
+            )
 
-            # Route to correct provider based on model type
-            if is_google_embedding_model(embedding_model):
-                embedding_provider = "google"
-                search_logger.info(f"Routing to Google for embedding model: {embedding_model}")
-            elif is_openai_embedding_model(embedding_model) or "openai/" in embedding_model.lower():
+            embedding_provider = provider or embedding_config.get("provider")
+
+            if not isinstance(embedding_provider, str) or not embedding_provider.strip():
                 embedding_provider = "openai"
-                search_logger.info(f"Routing to OpenAI for embedding model: {embedding_model}")
-            else:
-                # Keep original provider for ollama and other providers
-                embedding_provider = provider
-                search_logger.info(f"Using original provider '{provider}' for embedding model: {embedding_model}")
 
+            if not embedding_provider:
+                search_logger.error("No embedding provider configured")
+                raise ValueError("No embedding provider configured. Please set EMBEDDING_PROVIDER environment variable.")
+
+            search_logger.info(f"Using embedding provider: '{embedding_provider}' (from EMBEDDING_PROVIDER setting)")
             async with get_llm_client(provider=embedding_provider, use_embedding_provider=True) as client:
                 # Load batch size and dimensions from settings
                 try:
-                    rag_settings = await credential_service.get_credentials_by_category(
-                        "rag_strategy"
+                    rag_settings = await _maybe_await(
+                        credential_service.get_credentials_by_category("rag_strategy")
                     )
                     batch_size = int(rag_settings.get("EMBEDDING_BATCH_SIZE", "100"))
                     embedding_dimensions = int(rag_settings.get("EMBEDDING_DIMENSIONS", "1536"))
@@ -215,6 +378,8 @@ async def create_embeddings_batch(
                     embedding_dimensions = 1536
 
                 total_tokens_used = 0
+                adapter = _get_embedding_adapter(embedding_provider, client)
+                dimensions_to_use = embedding_dimensions if embedding_dimensions > 0 else None
 
                 for i in range(0, len(texts), batch_size):
                     batch = texts[i : i + batch_size]
@@ -243,16 +408,14 @@ async def create_embeddings_batch(
                                 try:
                                     # Create embeddings for this batch
                                     embedding_model = await get_embedding_model(provider=embedding_provider)
-
-                                    response = await client.embeddings.create(
-                                        model=embedding_model,
-                                        input=batch,
-                                        dimensions=embedding_dimensions,
+                                    embeddings = await adapter.create_embeddings(
+                                        batch,
+                                        embedding_model,
+                                        dimensions=dimensions_to_use,
                                     )
 
-                                    # Add successful embeddings
-                                    for text, item in zip(batch, response.data, strict=False):
-                                        result.add_success(item.embedding, text)
+                                    for text, vector in zip(batch, embeddings, strict=False):
+                                        result.add_success(vector, text)
 
                                     break  # Success, exit retry loop
 
@@ -297,6 +460,17 @@ async def create_embeddings_batch(
                                             await asyncio.sleep(wait_time)
                                         else:
                                             raise  # Will be caught by outer try
+                                except EmbeddingRateLimitError as e:
+                                    retry_count += 1
+                                    if retry_count < max_retries:
+                                        wait_time = 2**retry_count
+                                        search_logger.warning(
+                                            f"Embedding rate limit for batch {batch_index}: {e}. "
+                                            f"Waiting {wait_time}s before retry {retry_count}/{max_retries}"
+                                        )
+                                        await asyncio.sleep(wait_time)
+                                    else:
+                                        raise
 
                     except Exception as e:
                         # This batch failed - track failures but continue with next batch
diff --git a/python/src/server/services/search/rag_service.py b/python/src/server/services/search/rag_service.py
index cf89cffe..825f2df0 100644
--- a/python/src/server/services/search/rag_service.py
+++ b/python/src/server/services/search/rag_service.py
@@ -172,21 +172,91 @@ class RAGService:
             use_enhancement=True,
         )
 
+    async def _group_chunks_by_pages(
+        self, chunk_results: list[dict[str, Any]], match_count: int
+    ) -> list[dict[str, Any]]:
+        """Group chunk results by page_id (if available) or URL and fetch page metadata."""
+        page_groups: dict[str, dict[str, Any]] = {}
+
+        for result in chunk_results:
+            metadata = result.get("metadata", {})
+            page_id = metadata.get("page_id")
+            url = metadata.get("url")
+
+            # Use page_id as key if available, otherwise URL
+            group_key = page_id if page_id else url
+            if not group_key:
+                continue
+
+            if group_key not in page_groups:
+                page_groups[group_key] = {
+                    "page_id": page_id,
+                    "url": url,
+                    "chunk_matches": 0,
+                    "total_similarity": 0.0,
+                    "best_chunk_content": result.get("content", ""),
+                    "source_id": metadata.get("source_id"),
+                }
+
+            page_groups[group_key]["chunk_matches"] += 1
+            page_groups[group_key]["total_similarity"] += result.get("similarity_score", 0.0)
+
+        page_results = []
+        for group_key, data in page_groups.items():
+            avg_similarity = data["total_similarity"] / data["chunk_matches"]
+            match_boost = min(0.2, data["chunk_matches"] * 0.02)
+            aggregate_score = avg_similarity * (1 + match_boost)
+
+            # Query page by page_id if available, otherwise by URL
+            if data["page_id"]:
+                page_info = (
+                    self.supabase_client.table("archon_page_metadata")
+                    .select("id, url, section_title, word_count")
+                    .eq("id", data["page_id"])
+                    .maybe_single()
+                    .execute()
+                )
+            else:
+                # Regular pages - exact URL match
+                page_info = (
+                    self.supabase_client.table("archon_page_metadata")
+                    .select("id, url, section_title, word_count")
+                    .eq("url", data["url"])
+                    .maybe_single()
+                    .execute()
+                )
+
+            if page_info and page_info.data is not None:
+                page_results.append({
+                    "page_id": page_info.data["id"],
+                    "url": page_info.data["url"],
+                    "section_title": page_info.data.get("section_title"),
+                    "word_count": page_info.data.get("word_count", 0),
+                    "chunk_matches": data["chunk_matches"],
+                    "aggregate_similarity": aggregate_score,
+                    "average_similarity": avg_similarity,
+                    "source_id": data["source_id"],
+                })
+
+        page_results.sort(key=lambda x: x["aggregate_similarity"], reverse=True)
+        return page_results[:match_count]
+
     async def perform_rag_query(
-        self, query: str, source: str = None, match_count: int = 5
+        self, query: str, source: str = None, match_count: int = 5, return_mode: str = "chunks"
     ) -> tuple[bool, dict[str, Any]]:
         """
-        Perform a comprehensive RAG query that combines all enabled strategies.
+        Unified RAG query with all strategies.
 
         Pipeline:
-        1. Start with vector search
-        2. Apply hybrid search if enabled
-        3. Apply reranking if enabled
+        1. Vector/Hybrid Search (based on settings)
+        2. Reranking (if enabled)
+        3. Page Grouping (if return_mode="pages")
 
         Args:
             query: The search query
             source: Optional source domain to filter results
             match_count: Maximum number of results to return
+            return_mode: "chunks" (default) or "pages"
 
         Returns:
             Tuple of (success, result_dict)
@@ -256,6 +326,23 @@ class RAGService:
                         if len(formatted_results) > match_count:
                             formatted_results = formatted_results[:match_count]
 
+                # Step 4: Group by pages if return_mode="pages" AND pages exist
+                actual_return_mode = return_mode
+                if return_mode == "pages":
+                    # Check if any chunks have page_id set
+                    has_page_ids = any(
+                        result.get("metadata", {}).get("page_id") is not None
+                        for result in formatted_results
+                    )
+
+                    if has_page_ids:
+                        # Group by pages when page_ids exist
+                        formatted_results = await self._group_chunks_by_pages(formatted_results, match_count)
+                    else:
+                        # Fall back to chunks when no page_ids (pre-migration data)
+                        actual_return_mode = "chunks"
+                        logger.info("No page_ids found in results, returning chunks instead of pages")
+
                 # Build response
                 response_data = {
                     "results": formatted_results,
@@ -266,13 +353,15 @@ class RAGService:
                     "execution_path": "rag_service_pipeline",
                     "search_mode": "hybrid" if use_hybrid_search else "vector",
                     "reranking_applied": reranking_applied,
+                    "return_mode": actual_return_mode,
                 }
 
                 span.set_attribute("final_results_count", len(formatted_results))
                 span.set_attribute("reranking_applied", reranking_applied)
+                span.set_attribute("return_mode", return_mode)
                 span.set_attribute("success", True)
 
-                logger.info(f"RAG query completed - {len(formatted_results)} results found")
+                logger.info(f"RAG query completed - {len(formatted_results)} {return_mode} found")
                 return True, response_data
 
             except Exception as e:
diff --git a/python/src/server/services/source_management_service.py b/python/src/server/services/source_management_service.py
index f8a27023..cc06bd0a 100644
--- a/python/src/server/services/source_management_service.py
+++ b/python/src/server/services/source_management_service.py
@@ -11,7 +11,7 @@ from supabase import Client
 
 from ..config.logfire_config import get_logger, search_logger
 from .client_manager import get_supabase_client
-from .llm_provider_service import extract_message_text, get_llm_client
+from .llm_provider_service import extract_message_text, get_llm_client
 
 logger = get_logger(__name__)
 
@@ -72,21 +72,21 @@ The above content is from the documentation for '{source_id}'. Please provide a
             )
 
             # Extract the generated summary with proper error handling
-            if not response or not response.choices or len(response.choices) == 0:
-                search_logger.error(f"Empty or invalid response from LLM for {source_id}")
-                return default_summary
-
-            choice = response.choices[0]
-            summary_text, _, _ = extract_message_text(choice)
-            if not summary_text:
-                search_logger.error(f"LLM returned None content for {source_id}")
-                return default_summary
-
-            summary = summary_text.strip()
-
-            # Ensure the summary is not too long
-            if len(summary) > max_length:
-                summary = summary[:max_length] + "..."
+            if not response or not response.choices or len(response.choices) == 0:
+                search_logger.error(f"Empty or invalid response from LLM for {source_id}")
+                return default_summary
+
+            choice = response.choices[0]
+            summary_text, _, _ = extract_message_text(choice)
+            if not summary_text:
+                search_logger.error(f"LLM returned None content for {source_id}")
+                return default_summary
+
+            summary = summary_text.strip()
+
+            # Ensure the summary is not too long
+            if len(summary) > max_length:
+                summary = summary[:max_length] + "..."
 
             return summary
 
@@ -188,9 +188,9 @@ Generate only the title, nothing else."""
                     ],
                 )
 
-                choice = response.choices[0]
-                generated_title, _, _ = extract_message_text(choice)
-                generated_title = generated_title.strip()
+                choice = response.choices[0]
+                generated_title, _, _ = extract_message_text(choice)
+                generated_title = generated_title.strip()
                 # Clean up the title
                 generated_title = generated_title.strip("\"'")
                 if len(generated_title) < 50:  # Sanity check
@@ -273,26 +273,22 @@ async def update_source_info(
             if original_url:
                 metadata["original_url"] = original_url
 
-            # Update existing source (preserving title)
-            update_data = {
+            # Use upsert to handle race conditions
+            upsert_data = {
+                "source_id": source_id,
+                "title": existing_title,
                 "summary": summary,
                 "total_word_count": word_count,
                 "metadata": metadata,
-                "updated_at": "now()",
             }
 
             # Add new fields if provided
             if source_url:
-                update_data["source_url"] = source_url
+                upsert_data["source_url"] = source_url
             if source_display_name:
-                update_data["source_display_name"] = source_display_name
+                upsert_data["source_display_name"] = source_display_name
 
-            result = (
-                client.table("archon_sources")
-                .update(update_data)
-                .eq("source_id", source_id)
-                .execute()
-            )
+            client.table("archon_sources").upsert(upsert_data).execute()
 
             search_logger.info(
                 f"Updated source {source_id} while preserving title: {existing_title}"
@@ -400,7 +396,10 @@ class SourceManagementService:
 
     def delete_source(self, source_id: str) -> tuple[bool, dict[str, Any]]:
         """
-        Delete a source and all associated crawled pages and code examples from the database.
+        Delete a source from the database.
+
+        With CASCADE DELETE constraints in place (migration 009), deleting the source
+        will automatically delete all associated crawled_pages and code_examples.
 
         Args:
             source_id: The source ID to delete
@@ -411,61 +410,31 @@ class SourceManagementService:
         try:
             logger.info(f"Starting delete_source for source_id: {source_id}")
 
-            # Delete from crawled_pages table
-            try:
-                logger.info(f"Deleting from crawled_pages table for source_id: {source_id}")
-                pages_response = (
-                    self.supabase_client.table("archon_crawled_pages")
-                    .delete()
-                    .eq("source_id", source_id)
-                    .execute()
-                )
-                pages_deleted = len(pages_response.data) if pages_response.data else 0
-                logger.info(f"Deleted {pages_deleted} pages from crawled_pages")
-            except Exception as pages_error:
-                logger.error(f"Failed to delete from crawled_pages: {pages_error}")
-                return False, {"error": f"Failed to delete crawled pages: {str(pages_error)}"}
+            # With CASCADE DELETE, we only need to delete from the sources table
+            # The database will automatically handle deleting related records
+            logger.info(f"Deleting source {source_id} (CASCADE will handle related records)")
 
-            # Delete from code_examples table
-            try:
-                logger.info(f"Deleting from code_examples table for source_id: {source_id}")
-                code_response = (
-                    self.supabase_client.table("archon_code_examples")
-                    .delete()
-                    .eq("source_id", source_id)
-                    .execute()
-                )
-                code_deleted = len(code_response.data) if code_response.data else 0
-                logger.info(f"Deleted {code_deleted} code examples")
-            except Exception as code_error:
-                logger.error(f"Failed to delete from code_examples: {code_error}")
-                return False, {"error": f"Failed to delete code examples: {str(code_error)}"}
+            source_response = (
+                self.supabase_client.table("archon_sources")
+                .delete()
+                .eq("source_id", source_id)
+                .execute()
+            )
 
-            # Delete from sources table
-            try:
-                logger.info(f"Deleting from sources table for source_id: {source_id}")
-                source_response = (
-                    self.supabase_client.table("archon_sources")
-                    .delete()
-                    .eq("source_id", source_id)
-                    .execute()
-                )
-                source_deleted = len(source_response.data) if source_response.data else 0
-                logger.info(f"Deleted {source_deleted} source records")
-            except Exception as source_error:
-                logger.error(f"Failed to delete from sources: {source_error}")
-                return False, {"error": f"Failed to delete source: {str(source_error)}"}
+            source_deleted = len(source_response.data) if source_response.data else 0
 
-            logger.info("Delete operation completed successfully")
-            return True, {
-                "source_id": source_id,
-                "pages_deleted": pages_deleted,
-                "code_examples_deleted": code_deleted,
-                "source_records_deleted": source_deleted,
-            }
+            if source_deleted > 0:
+                logger.info(f"Successfully deleted source {source_id} and all related data via CASCADE")
+                return True, {
+                    "source_id": source_id,
+                    "message": "Source and all related data deleted successfully via CASCADE DELETE"
+                }
+            else:
+                logger.warning(f"No source found with ID {source_id}")
+                return False, {"error": f"Source {source_id} not found"}
 
         except Exception as e:
-            logger.error(f"Unexpected error in delete_source: {e}")
+            logger.error(f"Error deleting source {source_id}: {e}")
             return False, {"error": f"Error deleting source: {str(e)}"}
 
     def update_source_metadata(
diff --git a/python/src/server/services/storage/base_storage_service.py b/python/src/server/services/storage/base_storage_service.py
index 66332f4f..0a66e849 100644
--- a/python/src/server/services/storage/base_storage_service.py
+++ b/python/src/server/services/storage/base_storage_service.py
@@ -100,6 +100,23 @@ class BaseStorageService(ABC):
             # Move start position for next chunk
             start = end
 
+        # Combine consecutive small chunks (<200 chars) together
+        if chunks:
+            combined_chunks: list[str] = []
+            i = 0
+            while i < len(chunks):
+                current = chunks[i]
+
+                # Keep combining while current is small and there are more chunks
+                while len(current) < 200 and i + 1 < len(chunks):
+                    i += 1
+                    current = current + "\n\n" + chunks[i]
+
+                combined_chunks.append(current)
+                i += 1
+
+            chunks = combined_chunks
+
         return chunks
 
     async def smart_chunk_text_async(
diff --git a/python/src/server/services/storage/code_storage_service.py b/python/src/server/services/storage/code_storage_service.py
index a993bc70..c38918e7 100644
--- a/python/src/server/services/storage/code_storage_service.py
+++ b/python/src/server/services/storage/code_storage_service.py
@@ -82,6 +82,10 @@ def _is_reasoning_text_response(text: str) -> bool:
 
     text_lower = text.lower().strip()
 
+    # Check for XML-style thinking tags (common in models with extended thinking)
+    if text_lower.startswith("<think>") or "<think>" in text_lower[:100]:
+        return True
+
     # Check if it's clearly not JSON (starts with reasoning text)
     starts_with_reasoning = any(text_lower.startswith(starter) for starter in REASONING_STARTERS)
 
@@ -592,10 +596,23 @@ def generate_code_example_summary(
 
 
 async def _generate_code_example_summary_async(
-    code: str, context_before: str, context_after: str, language: str = "", provider: str = None
+    code: str,
+    context_before: str,
+    context_after: str,
+    language: str = "",
+    provider: str = None,
+    client = None
 ) -> dict[str, str]:
     """
     Async version of generate_code_example_summary using unified LLM provider service.
+
+    Args:
+        code: The code example to summarize
+        context_before: Context before the code block
+        context_after: Context after the code block
+        language: Programming language of the code
+        provider: LLM provider to use (optional)
+        client: Pre-initialized LLM client for reuse (optional, improves performance)
     """
 
     # Get model choice from credential service (RAG setting)
@@ -647,283 +664,312 @@ Format your response as JSON:
         + "\n\nSecond attempt enforcement: Return JSON only with the exact schema. No additional text or reasoning content."
     )
 
+    # Use provided client or create a new one
+    if client is not None:
+        # Reuse provided client for better performance
+        return await _generate_summary_with_client(
+            client, code, context_before, context_after, language, provider,
+            model_choice, guard_prompt, strict_prompt
+        )
+    else:
+        # Create new client (backward compatibility)
+        async with get_llm_client(provider=provider) as new_client:
+            return await _generate_summary_with_client(
+                new_client, code, context_before, context_after, language, provider,
+                model_choice, guard_prompt, strict_prompt
+            )
+
+
+async def _generate_summary_with_client(
+    llm_client, code: str, context_before: str, context_after: str,
+    language: str, provider: str, model_choice: str,
+    guard_prompt: str, strict_prompt: str
+) -> dict[str, str]:
+    """Helper function that generates summary using a provided client."""
+    search_logger.info(
+        f"Generating summary for {hash(code) & 0xffffff:06x} using model: {model_choice}"
+    )
+
+    provider_lower = provider.lower()
+    is_grok_model = (provider_lower == "grok") or ("grok" in model_choice.lower())
+    is_ollama = provider_lower == "ollama"
+
+    supports_response_format_base = (
+        provider_lower in {"openai", "google", "anthropic"}
+        or (provider_lower == "openrouter" and model_choice.startswith("openai/"))
+    )
+
+    last_response_obj = None
+    last_elapsed_time = None
+    last_response_content = ""
+    last_json_error: json.JSONDecodeError | None = None
+
     try:
-        # Use unified LLM provider service
-        async with get_llm_client(provider=provider) as client:
-            search_logger.info(
-                f"Generating summary for {hash(code) & 0xffffff:06x} using model: {model_choice}"
-            )
+        for enforce_json, current_prompt in ((False, guard_prompt), (True, strict_prompt)):
+            request_params = {
+                "model": model_choice,
+                "messages": [
+                    {
+                        "role": "system",
+                        "content": "You are a helpful assistant that analyzes code examples and provides JSON responses with example names and summaries.",
+                    },
+                    {"role": "user", "content": current_prompt},
+                ],
+                "max_tokens": 2000,
+                "temperature": 0.3,
+            }
 
-            provider_lower = provider.lower()
-            is_grok_model = (provider_lower == "grok") or ("grok" in model_choice.lower())
+            should_use_response_format = False
+            if enforce_json:
+                if not is_grok_model and (supports_response_format_base or provider_lower == "openrouter"):
+                    should_use_response_format = True
+            else:
+                if supports_response_format_base:
+                    should_use_response_format = True
 
-            supports_response_format_base = (
-                provider_lower in {"openai", "google", "anthropic"}
-                or (provider_lower == "openrouter" and model_choice.startswith("openai/"))
-            )
+            if should_use_response_format:
+                request_params["response_format"] = {"type": "json_object"}
 
-            last_response_obj = None
-            last_elapsed_time = None
-            last_response_content = ""
-            last_json_error: json.JSONDecodeError | None = None
+            # Ollama uses a different parameter format for JSON mode
+            if is_ollama and enforce_json:
+                # Remove response_format if it was set (shouldn't be for ollama)
+                request_params.pop("response_format", None)
+                # Ollama expects "format": "json" parameter
+                request_params["format"] = "json"
+                search_logger.debug("Using Ollama-specific JSON format parameter")
 
-            for enforce_json, current_prompt in ((False, guard_prompt), (True, strict_prompt)):
-                request_params = {
-                    "model": model_choice,
-                    "messages": [
-                        {
-                            "role": "system",
-                            "content": "You are a helpful assistant that analyzes code examples and provides JSON responses with example names and summaries.",
-                        },
-                        {"role": "user", "content": current_prompt},
-                    ],
-                    "max_tokens": 2000,
-                    "temperature": 0.3,
-                }
+            if is_grok_model:
+                unsupported_params = ["presence_penalty", "frequency_penalty", "stop", "reasoning_effort"]
+                for param in unsupported_params:
+                    if param in request_params:
+                        removed_value = request_params.pop(param)
+                        search_logger.warning(f"Removed unsupported Grok parameter '{param}': {removed_value}")
 
-                should_use_response_format = False
-                if enforce_json:
-                    if not is_grok_model and (supports_response_format_base or provider_lower == "openrouter"):
-                        should_use_response_format = True
-                else:
-                    if supports_response_format_base:
-                        should_use_response_format = True
+                supported_params = ["model", "messages", "max_tokens", "temperature", "response_format", "stream", "tools", "tool_choice"]
+                for param in list(request_params.keys()):
+                    if param not in supported_params:
+                        search_logger.warning(f"Parameter '{param}' may not be supported by Grok reasoning models")
 
-                if should_use_response_format:
-                    request_params["response_format"] = {"type": "json_object"}
+            start_time = time.time()
+            max_retries = 3 if is_grok_model else 1
+            retry_delay = 1.0
+            response_content_local = ""
+            reasoning_text_local = ""
+            json_error_occurred = False
 
-                if is_grok_model:
-                    unsupported_params = ["presence_penalty", "frequency_penalty", "stop", "reasoning_effort"]
-                    for param in unsupported_params:
-                        if param in request_params:
-                            removed_value = request_params.pop(param)
-                            search_logger.warning(f"Removed unsupported Grok parameter '{param}': {removed_value}")
+            for attempt in range(max_retries):
+                try:
+                    if is_grok_model and attempt > 0:
+                        search_logger.info(f"Grok retry attempt {attempt + 1}/{max_retries} after {retry_delay:.1f}s delay")
+                        await asyncio.sleep(retry_delay)
 
-                    supported_params = ["model", "messages", "max_tokens", "temperature", "response_format", "stream", "tools", "tool_choice"]
-                    for param in list(request_params.keys()):
-                        if param not in supported_params:
-                            search_logger.warning(f"Parameter '{param}' may not be supported by Grok reasoning models")
+                    final_params = prepare_chat_completion_params(model_choice, request_params)
+                    response = await llm_client.chat.completions.create(**final_params)
+                    last_response_obj = response
 
-                start_time = time.time()
-                max_retries = 3 if is_grok_model else 1
-                retry_delay = 1.0
-                response_content_local = ""
-                reasoning_text_local = ""
-                json_error_occurred = False
+                    choice = response.choices[0] if response.choices else None
+                    message = choice.message if choice and hasattr(choice, "message") else None
+                    response_content_local = ""
+                    reasoning_text_local = ""
 
-                for attempt in range(max_retries):
-                    try:
-                        if is_grok_model and attempt > 0:
-                            search_logger.info(f"Grok retry attempt {attempt + 1}/{max_retries} after {retry_delay:.1f}s delay")
-                            await asyncio.sleep(retry_delay)
+                    if choice:
+                        response_content_local, reasoning_text_local, _ = extract_message_text(choice)
 
-                        final_params = prepare_chat_completion_params(model_choice, request_params)
-                        response = await client.chat.completions.create(**final_params)
-                        last_response_obj = response
+                    # Enhanced logging for response analysis
+                    if message and reasoning_text_local:
+                        content_preview = response_content_local[:100] if response_content_local else "None"
+                        reasoning_preview = reasoning_text_local[:100] if reasoning_text_local else "None"
+                        search_logger.debug(
+                            f"Response has reasoning content - content: '{content_preview}', reasoning: '{reasoning_preview}'"
+                        )
 
-                        choice = response.choices[0] if response.choices else None
-                        message = choice.message if choice and hasattr(choice, "message") else None
-                        response_content_local = ""
-                        reasoning_text_local = ""
+                    if response_content_local:
+                        last_response_content = response_content_local.strip()
 
-                        if choice:
-                            response_content_local, reasoning_text_local, _ = extract_message_text(choice)
-
-                        # Enhanced logging for response analysis
-                        if message and reasoning_text_local:
-                            content_preview = response_content_local[:100] if response_content_local else "None"
-                            reasoning_preview = reasoning_text_local[:100] if reasoning_text_local else "None"
-                            search_logger.debug(
-                                f"Response has reasoning content - content: '{content_preview}', reasoning: '{reasoning_preview}'"
-                            )
-
-                        if response_content_local:
-                            last_response_content = response_content_local.strip()
-
-                            # Pre-validate response before processing
-                            if len(last_response_content) < 20 or (len(last_response_content) < 50 and not last_response_content.strip().startswith('{')):
-                                # Very minimal response - likely "Okay\nOkay" type
-                                search_logger.debug(f"Minimal response detected: {repr(last_response_content)}")
-                                # Generate fallback directly from context
-                                fallback_json = synthesize_json_from_reasoning("", code, language)
-                                if fallback_json:
-                                    try:
-                                        result = json.loads(fallback_json)
-                                        final_result = {
-                                            "example_name": result.get("example_name", f"Code Example{f' ({language})' if language else ''}"),
-                                            "summary": result.get("summary", "Code example for demonstration purposes."),
-                                        }
-                                        search_logger.info(f"Generated fallback summary from context - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}")
-                                        return final_result
-                                    except json.JSONDecodeError:
-                                        pass  # Continue to normal error handling
-                                else:
-                                    # Even synthesis failed - provide hardcoded fallback for minimal responses
+                        # Pre-validate response before processing
+                        if len(last_response_content) < 20 or (len(last_response_content) < 50 and not last_response_content.strip().startswith('{')):
+                            # Very minimal response - likely "Okay\nOkay" type
+                            search_logger.debug(f"Minimal response detected: {repr(last_response_content)}")
+                            # Generate fallback directly from context
+                            fallback_json = synthesize_json_from_reasoning("", code, language)
+                            if fallback_json:
+                                try:
+                                    result = json.loads(fallback_json)
                                     final_result = {
-                                        "example_name": f"Code Example{f' ({language})' if language else ''}",
-                                        "summary": "Code example extracted from development context.",
+                                        "example_name": result.get("example_name", f"Code Example{f' ({language})' if language else ''}"),
+                                        "summary": result.get("summary", "Code example for demonstration purposes."),
                                     }
-                                    search_logger.info(f"Used hardcoded fallback for minimal response - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}")
+                                    search_logger.info(f"Generated fallback summary from context - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}")
                                     return final_result
-
-                            payload = _extract_json_payload(last_response_content, code, language)
-                            if payload != last_response_content:
-                                search_logger.debug(
-                                    f"Sanitized LLM response payload before parsing: {repr(payload[:200])}..."
-                                )
-
-                            try:
-                                result = json.loads(payload)
-
-                                if not result.get("example_name") or not result.get("summary"):
-                                    search_logger.warning(f"Incomplete response from LLM: {result}")
-
+                                except json.JSONDecodeError:
+                                    pass  # Continue to normal error handling
+                            else:
+                                # Even synthesis failed - provide hardcoded fallback for minimal responses
                                 final_result = {
-                                    "example_name": result.get(
-                                        "example_name", f"Code Example{f' ({language})' if language else ''}"
-                                    ),
-                                    "summary": result.get("summary", "Code example for demonstration purposes."),
+                                    "example_name": f"Code Example{f' ({language})' if language else ''}",
+                                    "summary": "Code example extracted from development context.",
                                 }
-
-                                search_logger.info(
-                                    f"Generated code example summary - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}"
-                                )
+                                search_logger.info(f"Used hardcoded fallback for minimal response - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}")
                                 return final_result
 
-                            except json.JSONDecodeError as json_error:
-                                last_json_error = json_error
-                                json_error_occurred = True
-                                snippet = last_response_content[:200]
-                                if not enforce_json:
-                                    # Check if this was reasoning text that couldn't be parsed
-                                    if _is_reasoning_text_response(last_response_content):
-                                        search_logger.debug(
-                                            f"Reasoning text detected but no JSON extracted. Response snippet: {repr(snippet)}"
-                                        )
-                                    else:
-                                        search_logger.warning(
-                                            f"Failed to parse JSON response from LLM (non-strict attempt). Error: {json_error}. Response snippet: {repr(snippet)}"
-                                        )
-                                    break
-                                else:
-                                    search_logger.error(
-                                        f"Strict JSON enforcement still failed to produce valid JSON: {json_error}. Response snippet: {repr(snippet)}"
+                        payload = _extract_json_payload(last_response_content, code, language)
+                        if payload != last_response_content:
+                            search_logger.debug(
+                                f"Sanitized LLM response payload before parsing: {repr(payload[:200])}..."
+                            )
+
+                        try:
+                            result = json.loads(payload)
+
+                            if not result.get("example_name") or not result.get("summary"):
+                                search_logger.warning(f"Incomplete response from LLM: {result}")
+
+                            final_result = {
+                                "example_name": result.get(
+                                    "example_name", f"Code Example{f' ({language})' if language else ''}"
+                                ),
+                                "summary": result.get("summary", "Code example for demonstration purposes."),
+                            }
+
+                            search_logger.info(
+                                f"Generated code example summary - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}"
+                            )
+                            return final_result
+
+                        except json.JSONDecodeError as json_error:
+                            last_json_error = json_error
+                            json_error_occurred = True
+                            snippet = last_response_content[:200]
+                            if not enforce_json:
+                                # Check if this was reasoning text that couldn't be parsed
+                                if _is_reasoning_text_response(last_response_content):
+                                    search_logger.debug(
+                                        f"Reasoning text detected but no JSON extracted. Response snippet: {repr(snippet)}"
                                     )
-                                    break
+                                else:
+                                    search_logger.warning(
+                                        f"Failed to parse JSON response from LLM (non-strict attempt). Error: {json_error}. Response snippet: {repr(snippet)}"
+                                    )
+                                break
+                            else:
+                                search_logger.error(
+                                    f"Strict JSON enforcement still failed to produce valid JSON: {json_error}. Response snippet: {repr(snippet)}"
+                                )
+                                break
 
-                        elif is_grok_model and attempt < max_retries - 1:
-                            search_logger.warning(f"Grok empty response on attempt {attempt + 1}, retrying...")
-                            retry_delay *= 2
-                            continue
-                        else:
-                            break
-
-                    except Exception as e:
-                        if is_grok_model and attempt < max_retries - 1:
-                            search_logger.error(f"Grok request failed on attempt {attempt + 1}: {e}, retrying...")
-                            retry_delay *= 2
-                            continue
-                        else:
-                            raise
-
-                if is_grok_model:
-                    elapsed_time = time.time() - start_time
-                    last_elapsed_time = elapsed_time
-                    search_logger.debug(f"Grok total response time: {elapsed_time:.2f}s")
-
-                if json_error_occurred:
-                    if not enforce_json:
+                    elif is_grok_model and attempt < max_retries - 1:
+                        search_logger.warning(f"Grok empty response on attempt {attempt + 1}, retrying...")
+                        retry_delay *= 2
                         continue
                     else:
                         break
 
-                if response_content_local:
-                    # We would have returned already on success; if we reach here, parsing failed but we are not retrying
+                except Exception as e:
+                    if is_grok_model and attempt < max_retries - 1:
+                        search_logger.error(f"Grok request failed on attempt {attempt + 1}: {e}, retrying...")
+                        retry_delay *= 2
+                        continue
+                    else:
+                        raise
+
+            if is_grok_model:
+                elapsed_time = time.time() - start_time
+                last_elapsed_time = elapsed_time
+                search_logger.debug(f"Grok total response time: {elapsed_time:.2f}s")
+
+            if json_error_occurred:
+                if not enforce_json:
                     continue
-
-            response_content = last_response_content
-            response = last_response_obj
-            elapsed_time = last_elapsed_time if last_elapsed_time is not None else 0.0
-
-            if last_json_error is not None and response_content:
-                search_logger.error(
-                    f"LLM response after strict enforcement was still not valid JSON: {last_json_error}. Clearing response to trigger error handling."
-                )
-                response_content = ""
-
-            if not response_content:
-                search_logger.error(f"Empty response from LLM for model: {model_choice} (provider: {provider})")
-                if is_grok_model:
-                    search_logger.error("Grok empty response debugging:")
-                    search_logger.error(f"  - Request took: {elapsed_time:.2f}s")
-                    search_logger.error(f"  - Response status: {getattr(response, 'status_code', 'N/A')}")
-                    search_logger.error(f"  - Response headers: {getattr(response, 'headers', 'N/A')}")
-                    search_logger.error(f"  - Full response: {response}")
-                    search_logger.error(f"  - Response choices length: {len(response.choices) if response.choices else 0}")
-                    if response.choices:
-                        search_logger.error(f"  - First choice: {response.choices[0]}")
-                        search_logger.error(f"  - Message content: '{response.choices[0].message.content}'")
-                        search_logger.error(f"  - Message role: {response.choices[0].message.role}")
-                    search_logger.error("Check: 1) API key validity, 2) rate limits, 3) model availability")
-
-                    # Implement fallback for Grok failures
-                    search_logger.warning("Attempting fallback to OpenAI due to Grok failure...")
-                    try:
-                        # Use OpenAI as fallback with similar parameters
-                        fallback_params = {
-                            "model": "gpt-4o-mini",
-                            "messages": request_params["messages"],
-                            "temperature": request_params.get("temperature", 0.1),
-                            "max_tokens": request_params.get("max_tokens", 500),
-                        }
-
-                        async with get_llm_client(provider="openai") as fallback_client:
-                            fallback_response = await fallback_client.chat.completions.create(**fallback_params)
-                            fallback_content = fallback_response.choices[0].message.content
-                            if fallback_content and fallback_content.strip():
-                                search_logger.info("gpt-4o-mini fallback succeeded")
-                                response_content = fallback_content.strip()
-                            else:
-                                search_logger.error("gpt-4o-mini fallback also returned empty response")
-                                raise ValueError(f"Both {model_choice} and gpt-4o-mini fallback failed")
-
-                    except Exception as fallback_error:
-                        search_logger.error(f"gpt-4o-mini fallback failed: {fallback_error}")
-                        raise ValueError(f"{model_choice} failed and fallback to gpt-4o-mini also failed: {fallback_error}") from fallback_error
                 else:
-                    search_logger.debug(f"Full response object: {response}")
-                    raise ValueError("Empty response from LLM")
+                    break
 
-            if not response_content:
-                # This should not happen after fallback logic, but safety check
-                raise ValueError("No valid response content after all attempts")
+            if response_content_local:
+                # We would have returned already on success; if we reach here, parsing failed but we are not retrying
+                continue
 
-            response_content = response_content.strip()
-            search_logger.debug(f"LLM API response: {repr(response_content[:200])}...")
+        response_content = last_response_content
+        response = last_response_obj
+        elapsed_time = last_elapsed_time if last_elapsed_time is not None else 0.0
 
-            payload = _extract_json_payload(response_content, code, language)
-            if payload != response_content:
-                search_logger.debug(
-                    f"Sanitized LLM response payload before parsing: {repr(payload[:200])}..."
-                )
-
-            result = json.loads(payload)
-
-            # Validate the response has the required fields
-            if not result.get("example_name") or not result.get("summary"):
-                search_logger.warning(f"Incomplete response from LLM: {result}")
-
-            final_result = {
-                "example_name": result.get(
-                    "example_name", f"Code Example{f' ({language})' if language else ''}"
-                ),
-                "summary": result.get("summary", "Code example for demonstration purposes."),
-            }
-
-            search_logger.info(
-                f"Generated code example summary - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}"
+        if last_json_error is not None and response_content:
+            search_logger.error(
+                f"LLM response after strict enforcement was still not valid JSON: {last_json_error}. Clearing response to trigger error handling."
             )
-            return final_result
+            response_content = ""
+
+        if not response_content:
+            search_logger.error(f"Empty response from LLM for model: {model_choice} (provider: {provider})")
+            if is_grok_model:
+                search_logger.error("Grok empty response debugging:")
+                search_logger.error(f"  - Request took: {elapsed_time:.2f}s")
+                search_logger.error(f"  - Response status: {getattr(response, 'status_code', 'N/A')}")
+                search_logger.error(f"  - Response headers: {getattr(response, 'headers', 'N/A')}")
+                search_logger.error(f"  - Full response: {response}")
+                search_logger.error(f"  - Response choices length: {len(response.choices) if response.choices else 0}")
+                if response.choices:
+                    search_logger.error(f"  - First choice: {response.choices[0]}")
+                    search_logger.error(f"  - Message content: '{response.choices[0].message.content}'")
+                    search_logger.error(f"  - Message role: {response.choices[0].message.role}")
+                search_logger.error("Check: 1) API key validity, 2) rate limits, 3) model availability")
+
+                # Implement fallback for Grok failures
+                search_logger.warning("Attempting fallback to OpenAI due to Grok failure...")
+                try:
+                    # Use OpenAI as fallback with similar parameters
+                    fallback_params = {
+                        "model": "gpt-4o-mini",
+                        "messages": request_params["messages"],
+                        "temperature": request_params.get("temperature", 0.1),
+                        "max_tokens": request_params.get("max_tokens", 500),
+                    }
+
+                    async with get_llm_client(provider="openai") as fallback_client:
+                        fallback_response = await fallback_client.chat.completions.create(**fallback_params)
+                        fallback_content = fallback_response.choices[0].message.content
+                        if fallback_content and fallback_content.strip():
+                            search_logger.info("gpt-4o-mini fallback succeeded")
+                            response_content = fallback_content.strip()
+                        else:
+                            search_logger.error("gpt-4o-mini fallback also returned empty response")
+                            raise ValueError(f"Both {model_choice} and gpt-4o-mini fallback failed")
+
+                except Exception as fallback_error:
+                    search_logger.error(f"gpt-4o-mini fallback failed: {fallback_error}")
+                    raise ValueError(f"{model_choice} failed and fallback to gpt-4o-mini also failed: {fallback_error}") from fallback_error
+            else:
+                search_logger.debug(f"Full response object: {response}")
+                raise ValueError("Empty response from LLM")
+
+        if not response_content:
+            # This should not happen after fallback logic, but safety check
+            raise ValueError("No valid response content after all attempts")
+
+        response_content = response_content.strip()
+        search_logger.debug(f"LLM API response: {repr(response_content[:200])}...")
+
+        payload = _extract_json_payload(response_content, code, language)
+        if payload != response_content:
+            search_logger.debug(
+                f"Sanitized LLM response payload before parsing: {repr(payload[:200])}..."
+            )
+
+        result = json.loads(payload)
+
+        # Validate the response has the required fields
+        if not result.get("example_name") or not result.get("summary"):
+            search_logger.warning(f"Incomplete response from LLM: {result}")
+
+        final_result = {
+            "example_name": result.get(
+                "example_name", f"Code Example{f' ({language})' if language else ''}"
+            ),
+            "summary": result.get("summary", "Code example for demonstration purposes."),
+        }
+
+        search_logger.info(
+            f"Generated code example summary - Name: '{final_result['example_name']}', Summary length: {len(final_result['summary'])}"
+        )
+        return final_result
 
     except json.JSONDecodeError as e:
         search_logger.error(
@@ -934,7 +980,7 @@ Format your response as JSON:
             fallback_json = synthesize_json_from_reasoning("", code, language)
             if fallback_json:
                 fallback_result = json.loads(fallback_json)
-                search_logger.info(f"Generated context-aware fallback summary")
+                search_logger.info("Generated context-aware fallback summary")
                 return {
                     "example_name": fallback_result.get("example_name", f"Code Example{f' ({language})' if language else ''}"),
                     "summary": fallback_result.get("summary", "Code example for demonstration purposes."),
@@ -953,7 +999,7 @@ Format your response as JSON:
             fallback_json = synthesize_json_from_reasoning("", code, language)
             if fallback_json:
                 fallback_result = json.loads(fallback_json)
-                search_logger.info(f"Generated context-aware fallback summary after error")
+                search_logger.info("Generated context-aware fallback summary after error")
                 return {
                     "example_name": fallback_result.get("example_name", f"Code Example{f' ({language})' if language else ''}"),
                     "summary": fallback_result.get("summary", "Code example for demonstration purposes."),
@@ -1002,82 +1048,84 @@ async def generate_code_summaries_batch(
         f"Generating summaries for {len(code_blocks)} code blocks with max_workers={max_workers}"
     )
 
-    # Semaphore to limit concurrent requests
-    semaphore = asyncio.Semaphore(max_workers)
-    completed_count = 0
-    lock = asyncio.Lock()
+    # Create a shared LLM client for all summaries (performance optimization)
+    async with get_llm_client(provider=provider) as shared_client:
+        search_logger.debug("Created shared LLM client for batch summary generation")
 
-    async def generate_single_summary_with_limit(block: dict[str, Any]) -> dict[str, str]:
-        nonlocal completed_count
-        async with semaphore:
-            # Add delay between requests to avoid rate limiting
-            await asyncio.sleep(0.5)  # 500ms delay between requests
+        # Semaphore to limit concurrent requests
+        semaphore = asyncio.Semaphore(max_workers)
+        completed_count = 0
+        lock = asyncio.Lock()
 
-            # Run the synchronous function in a thread
-            loop = asyncio.get_event_loop()
-            result = await loop.run_in_executor(
-                None,
-                generate_code_example_summary,
-                block["code"],
-                block["context_before"],
-                block["context_after"],
-                block.get("language", ""),
-                provider,
+        async def generate_single_summary_with_limit(block: dict[str, Any]) -> dict[str, str]:
+            nonlocal completed_count
+            async with semaphore:
+                # Add delay between requests to avoid rate limiting
+                await asyncio.sleep(0.5)  # 500ms delay between requests
+
+                # Call async version directly with shared client (no event loop overhead)
+                result = await _generate_code_example_summary_async(
+                    block["code"],
+                    block["context_before"],
+                    block["context_after"],
+                    block.get("language", ""),
+                    provider,
+                    shared_client  # Pass shared client for reuse
+                )
+
+                # Update progress
+                async with lock:
+                    completed_count += 1
+                    if progress_callback:
+                        # Simple progress based on summaries completed
+                        progress_percentage = int((completed_count / len(code_blocks)) * 100)
+                        await progress_callback({
+                            "status": "code_extraction",
+                            "percentage": progress_percentage,
+                            "log": f"Generated {completed_count}/{len(code_blocks)} code summaries",
+                            "completed_summaries": completed_count,
+                            "total_summaries": len(code_blocks),
+                        })
+
+                return result
+
+        # Process all blocks concurrently but with rate limiting
+        try:
+            summaries = await asyncio.gather(
+                *[generate_single_summary_with_limit(block) for block in code_blocks],
+                return_exceptions=True,
             )
 
-            # Update progress
-            async with lock:
-                completed_count += 1
-                if progress_callback:
-                    # Simple progress based on summaries completed
-                    progress_percentage = int((completed_count / len(code_blocks)) * 100)
-                    await progress_callback({
-                        "status": "code_extraction",
-                        "percentage": progress_percentage,
-                        "log": f"Generated {completed_count}/{len(code_blocks)} code summaries",
-                        "completed_summaries": completed_count,
-                        "total_summaries": len(code_blocks),
-                    })
+            # Handle any exceptions in the results
+            final_summaries = []
+            for i, summary in enumerate(summaries):
+                if isinstance(summary, Exception):
+                    search_logger.error(f"Error generating summary for code block {i}: {summary}")
+                    # Use fallback summary
+                    language = code_blocks[i].get("language", "")
+                    fallback = {
+                        "example_name": f"Code Example{f' ({language})' if language else ''}",
+                        "summary": "Code example for demonstration purposes.",
+                    }
+                    final_summaries.append(fallback)
+                else:
+                    final_summaries.append(summary)
 
-            return result
+            search_logger.info(f"Successfully generated {len(final_summaries)} code summaries")
+            return final_summaries
 
-    # Process all blocks concurrently but with rate limiting
-    try:
-        summaries = await asyncio.gather(
-            *[generate_single_summary_with_limit(block) for block in code_blocks],
-            return_exceptions=True,
-        )
-
-        # Handle any exceptions in the results
-        final_summaries = []
-        for i, summary in enumerate(summaries):
-            if isinstance(summary, Exception):
-                search_logger.error(f"Error generating summary for code block {i}: {summary}")
-                # Use fallback summary
-                language = code_blocks[i].get("language", "")
+        except Exception as e:
+            search_logger.error(f"Error in batch summary generation: {e}")
+            # Return fallback summaries for all blocks
+            fallback_summaries = []
+            for block in code_blocks:
+                language = block.get("language", "")
                 fallback = {
                     "example_name": f"Code Example{f' ({language})' if language else ''}",
                     "summary": "Code example for demonstration purposes.",
                 }
-                final_summaries.append(fallback)
-            else:
-                final_summaries.append(summary)
-
-        search_logger.info(f"Successfully generated {len(final_summaries)} code summaries")
-        return final_summaries
-
-    except Exception as e:
-        search_logger.error(f"Error in batch summary generation: {e}")
-        # Return fallback summaries for all blocks
-        fallback_summaries = []
-        for block in code_blocks:
-            language = block.get("language", "")
-            fallback = {
-                "example_name": f"Code Example{f' ({language})' if language else ''}",
-                "summary": "Code example for demonstration purposes.",
-            }
-            fallback_summaries.append(fallback)
-        return fallback_summaries
+                fallback_summaries.append(fallback)
+            return fallback_summaries
 
 
 async def add_code_examples_to_supabase(
@@ -1091,6 +1139,7 @@ async def add_code_examples_to_supabase(
     url_to_full_document: dict[str, str] | None = None,
     progress_callback: Callable | None = None,
     provider: str | None = None,
+    embedding_provider: str | None = None,
 ):
     """
     Add code examples to the Supabase code_examples table in batches.
@@ -1105,6 +1154,8 @@ async def add_code_examples_to_supabase(
         batch_size: Size of each batch for insertion
         url_to_full_document: Optional mapping of URLs to full document content
         progress_callback: Optional async callback for progress updates
+        provider: Optional LLM provider used for summary generation tracking
+        embedding_provider: Optional embedding provider override for vector generation
     """
     if not urls:
         return
@@ -1183,8 +1234,8 @@ async def add_code_examples_to_supabase(
             # Use original combined texts
             batch_texts = combined_texts
 
-        # Create embeddings for the batch
-        result = await create_embeddings_batch(batch_texts, provider=provider)
+        # Create embeddings for the batch (optionally overriding the embedding provider)
+        result = await create_embeddings_batch(batch_texts, provider=embedding_provider)
 
         # Log any failures
         if result.has_failures:
@@ -1201,7 +1252,7 @@ async def add_code_examples_to_supabase(
         from ..llm_provider_service import get_embedding_model
 
         # Get embedding model name
-        embedding_model_name = await get_embedding_model(provider=provider)
+        embedding_model_name = await get_embedding_model(provider=embedding_provider)
 
         # Get LLM chat model (used for code summaries and contextual embeddings if enabled)
         llm_chat_model = None
diff --git a/python/src/server/services/storage/document_storage_service.py b/python/src/server/services/storage/document_storage_service.py
index 4cf02dc4..89841758 100644
--- a/python/src/server/services/storage/document_storage_service.py
+++ b/python/src/server/services/storage/document_storage_service.py
@@ -25,6 +25,7 @@ async def add_documents_to_supabase(
     enable_parallel_batches: bool = True,
     provider: str | None = None,
     cancellation_check: Any | None = None,
+    url_to_page_id: dict[str, str] | None = None,
 ) -> dict[str, int]:
     """
     Add documents to Supabase with threading optimizations.
@@ -399,6 +400,9 @@ async def add_documents_to_supabase(
                     search_logger.warning(f"Unsupported embedding dimension {embedding_dim}, using embedding_1536")
                     embedding_column = "embedding_1536"
                 
+                # Get page_id for this URL if available
+                page_id = url_to_page_id.get(batch_urls[j]) if url_to_page_id else None
+
                 data = {
                     "url": batch_urls[j],
                     "chunk_number": batch_chunk_numbers[j],
@@ -409,6 +413,7 @@ async def add_documents_to_supabase(
                     "llm_chat_model": llm_chat_model,  # Add LLM model tracking
                     "embedding_model": embedding_model_name,  # Add embedding model tracking
                     "embedding_dimension": embedding_dim,  # Add dimension tracking
+                    "page_id": page_id,  # Link chunk to page
                 }
                 batch_data.append(data)
 
diff --git a/python/tests/server/services/test_llms_full_parser.py b/python/tests/server/services/test_llms_full_parser.py
new file mode 100644
index 00000000..ff87d3f2
--- /dev/null
+++ b/python/tests/server/services/test_llms_full_parser.py
@@ -0,0 +1,195 @@
+"""
+Tests for LLMs-full.txt Section Parser
+"""
+
+import pytest
+
+from src.server.services.crawling.helpers.llms_full_parser import (
+    create_section_slug,
+    create_section_url,
+    parse_llms_full_sections,
+)
+
+
+def test_create_section_slug():
+    """Test slug generation from H1 headings"""
+    assert create_section_slug("# Core Concepts") == "core-concepts"
+    assert create_section_slug("# Getting Started!") == "getting-started"
+    assert create_section_slug("# API Reference (v2)") == "api-reference-v2"
+    assert create_section_slug("# Hello World") == "hello-world"
+    assert create_section_slug("#   Spaces   ") == "spaces"
+
+
+def test_create_section_url():
+    """Test synthetic URL generation with slug anchor"""
+    base_url = "https://example.com/llms-full.txt"
+    url = create_section_url(base_url, "# Core Concepts", 0)
+    assert url == "https://example.com/llms-full.txt#section-0-core-concepts"
+
+    url = create_section_url(base_url, "# Getting Started", 1)
+    assert url == "https://example.com/llms-full.txt#section-1-getting-started"
+
+
+def test_parse_single_section():
+    """Test parsing a single H1 section"""
+    content = """# Core Concepts
+Claude is an AI assistant built by Anthropic.
+It can help with various tasks.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 1
+    assert sections[0].section_title == "# Core Concepts"
+    assert sections[0].section_order == 0
+    assert sections[0].url == "https://example.com/llms-full.txt#section-0-core-concepts"
+    assert "Claude is an AI assistant" in sections[0].content
+    assert sections[0].word_count > 0
+
+
+def test_parse_multiple_sections():
+    """Test parsing multiple H1 sections"""
+    content = """# Core Concepts
+Claude is an AI assistant built by Anthropic that can help with various tasks.
+It uses advanced language models to understand and respond to queries.
+This section provides an overview of the core concepts and capabilities.
+
+# Getting Started
+To get started with Claude, you'll need to create an account and obtain API credentials.
+Follow the setup instructions and configure your development environment properly.
+This will enable you to make your first API calls and start building applications.
+
+# API Reference
+The API uses REST principles and supports standard HTTP methods like GET, POST, PUT, and DELETE.
+Authentication is handled through API keys that should be kept secure at all times.
+Comprehensive documentation is available for all endpoints and response formats.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 3
+    assert sections[0].section_title == "# Core Concepts"
+    assert sections[1].section_title == "# Getting Started"
+    assert sections[2].section_title == "# API Reference"
+
+    assert sections[0].section_order == 0
+    assert sections[1].section_order == 1
+    assert sections[2].section_order == 2
+
+    assert sections[0].url == "https://example.com/llms-full.txt#section-0-core-concepts"
+    assert sections[1].url == "https://example.com/llms-full.txt#section-1-getting-started"
+    assert sections[2].url == "https://example.com/llms-full.txt#section-2-api-reference"
+
+
+def test_no_h1_headers():
+    """Test handling content with no H1 headers"""
+    content = """This is some documentation.
+It has no H1 headers.
+Just regular content.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 1
+    assert sections[0].section_title == "Full Document"
+    assert sections[0].url == "https://example.com/llms-full.txt"
+    assert "This is some documentation" in sections[0].content
+
+
+def test_h2_not_treated_as_section():
+    """Test that H2 headers (##) are not treated as section boundaries"""
+    content = """# Main Section
+This is the main section.
+
+## Subsection
+This is a subsection.
+
+## Another Subsection
+This is another subsection.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 1
+    assert sections[0].section_title == "# Main Section"
+    assert "## Subsection" in sections[0].content
+    assert "## Another Subsection" in sections[0].content
+
+
+def test_empty_sections_skipped():
+    """Test that empty sections are skipped"""
+    content = """# Section 1
+This is the first section with enough content to prevent automatic combination.
+It contains multiple sentences and provides substantial information for testing purposes.
+The section has several lines to ensure it exceeds the minimum character threshold.
+
+#
+
+# Section 2
+This is the second section with enough content to prevent automatic combination.
+It also contains multiple sentences and provides substantial information for testing.
+The section has several lines to ensure it exceeds the minimum character threshold.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    # Should only have 2 sections (empty one skipped)
+    assert len(sections) == 2
+    assert sections[0].section_title == "# Section 1"
+    assert sections[1].section_title == "# Section 2"
+
+
+def test_consecutive_h1_headers():
+    """Test handling multiple consecutive H1 headers"""
+    content = """# Section 1
+The first section contains enough content to prevent automatic combination with subsequent sections.
+It has multiple sentences and provides substantial information for proper testing functionality.
+This ensures that the section exceeds the minimum character threshold requirement.
+# Section 2
+This section also has enough content to prevent automatic combination with the previous section.
+It contains multiple sentences and provides substantial information for proper testing.
+The content here ensures that the section exceeds the minimum character threshold.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    # Both sections should be parsed
+    assert len(sections) == 2
+    assert sections[0].section_title == "# Section 1"
+    assert sections[1].section_title == "# Section 2"
+    assert "The first section contains enough content" in sections[0].content
+    assert "This section also has enough content" in sections[1].content
+
+
+def test_word_count_calculation():
+    """Test word count calculation for sections"""
+    content = """# Test Section
+This is a test section with exactly ten words here.
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 1
+    # Word count includes the H1 heading
+    assert sections[0].word_count > 10
+
+
+def test_empty_content():
+    """Test handling empty content"""
+    content = ""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 0
+
+
+def test_whitespace_only_content():
+    """Test handling whitespace-only content"""
+    content = """
+
+
+"""
+    base_url = "https://example.com/llms-full.txt"
+    sections = parse_llms_full_sections(content, base_url)
+
+    assert len(sections) == 0
diff --git a/python/tests/test_code_extraction_source_id.py b/python/tests/test_code_extraction_source_id.py
index 05405ee7..7899c7fc 100644
--- a/python/tests/test_code_extraction_source_id.py
+++ b/python/tests/test_code_extraction_source_id.py
@@ -111,8 +111,8 @@ class TestCodeExtractionSourceId:
         assert args[2] == source_id
         assert args[3] is None
         assert args[4] is None
-        if len(args) > 5:
-            assert args[5] is None
+        assert args[5] is None
+        assert args[6] is None
         assert result == 5
 
     @pytest.mark.asyncio
diff --git a/python/tests/test_source_race_condition.py b/python/tests/test_source_race_condition.py
index 5864db28..a6ff4116 100644
--- a/python/tests/test_source_race_condition.py
+++ b/python/tests/test_source_race_condition.py
@@ -119,8 +119,8 @@ class TestSourceRaceCondition:
         assert "upsert" in methods_called, "Should use upsert for new sources"
         assert "insert" not in methods_called, "Should not use insert to avoid race conditions"
 
-    def test_existing_source_uses_update(self):
-        """Test that existing sources still use UPDATE (not affected by change)."""
+    def test_existing_source_uses_upsert(self):
+        """Test that existing sources use UPSERT to handle race conditions."""
         mock_client = Mock()
         
         methods_called = []
@@ -158,9 +158,9 @@ class TestSourceRaceCondition:
         ))
         loop.close()
         
-        # Should use update for existing sources
-        assert "update" in methods_called, "Should use update for existing sources"
-        assert "upsert" not in methods_called, "Should not use upsert for existing sources"
+        # Should use upsert for existing sources to handle race conditions
+        assert "upsert" in methods_called, "Should use upsert for existing sources"
+        assert "update" not in methods_called, "Should not use update (upsert handles race conditions)"
 
     @pytest.mark.asyncio
     async def test_async_concurrent_creation(self):
diff --git a/python/uv.lock b/python/uv.lock
index 5c6662dd..274564d2 100644
--- a/python/uv.lock
+++ b/python/uv.lock
@@ -99,6 +99,25 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/f5/10/6c25ed6de94c49f88a91fa5018cb4c0f3625f31d5be9f771ebe5cc7cd506/aiosqlite-0.21.0-py3-none-any.whl", hash = "sha256:2549cf4057f95f53dcba16f2b64e8e2791d7e1adedb13197dd8ed77bb226d7d0", size = 15792 },
 ]
 
+[[package]]
+name = "alphashape"
+version = "1.3.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "click" },
+    { name = "click-log" },
+    { name = "networkx" },
+    { name = "numpy" },
+    { name = "rtree" },
+    { name = "scipy" },
+    { name = "shapely" },
+    { name = "trimesh" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/2e/83/67ff905694df5b34a777123b59fdfd05998d5a31766f188aafbf5b340055/alphashape-1.3.1.tar.gz", hash = "sha256:7a27340afc5f8ed301577acec46bb0cf2bada5410045f7289142e735ef6977ec", size = 26316 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/e4/ad/77fad9d6f974ec58d837cb49fb9b483d6227a420c4f908c3578633de1d47/alphashape-1.3.1-py2.py3-none-any.whl", hash = "sha256:96a5ddd5f09534a35f03a8916aeeaac00fe4d6bec2f9ad78f87f57be3007f795", size = 13122 },
+]
+
 [[package]]
 name = "annotated-types"
 version = "0.7.0"
@@ -252,7 +271,7 @@ agents = [
 ]
 all = [
     { name = "asyncpg", specifier = ">=0.29.0" },
-    { name = "crawl4ai", specifier = "==0.6.2" },
+    { name = "crawl4ai", specifier = "==0.7.4" },
     { name = "cryptography", specifier = ">=41.0.0" },
     { name = "docker", specifier = ">=6.1.0" },
     { name = "factory-boy", specifier = ">=3.3.0" },
@@ -303,7 +322,7 @@ mcp = [
 ]
 server = [
     { name = "asyncpg", specifier = ">=0.29.0" },
-    { name = "crawl4ai", specifier = "==0.6.2" },
+    { name = "crawl4ai", specifier = "==0.7.4" },
     { name = "cryptography", specifier = ">=41.0.0" },
     { name = "docker", specifier = ">=6.1.0" },
     { name = "fastapi", specifier = ">=0.104.0" },
@@ -560,6 +579,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/7e/d4/7ebdbd03970677812aac39c869717059dbb71a4cfc033ca6e5221787892c/click-8.1.8-py3-none-any.whl", hash = "sha256:63c132bbbed01578a06712a2d1f497bb62d9c1c0d329b7903a866228027263b2", size = 98188 },
 ]
 
+[[package]]
+name = "click-log"
+version = "0.4.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "click" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/32/32/228be4f971e4bd556c33d52a22682bfe318ffe57a1ddb7a546f347a90260/click-log-0.4.0.tar.gz", hash = "sha256:3970f8570ac54491237bcdb3d8ab5e3eef6c057df29f8c3d1151a51a9c23b975", size = 9985 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ae/5a/4f025bc751087833686892e17e7564828e409c43b632878afeae554870cd/click_log-0.4.0-py2.py3-none-any.whl", hash = "sha256:a43e394b528d52112af599f2fc9e4b7cf3c15f94e53581f74fa6867e68c91756", size = 4273 },
+]
+
 [[package]]
 name = "cohere"
 version = "5.15.0"
@@ -655,42 +686,45 @@ wheels = [
 
 [[package]]
 name = "crawl4ai"
-version = "0.6.2"
+version = "0.7.4"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "aiofiles" },
     { name = "aiohttp" },
     { name = "aiosqlite" },
+    { name = "alphashape" },
+    { name = "anyio" },
     { name = "beautifulsoup4" },
     { name = "brotli" },
     { name = "chardet" },
     { name = "click" },
-    { name = "colorama" },
-    { name = "cssselect" },
     { name = "fake-useragent" },
-    { name = "httpx" },
+    { name = "httpx", extra = ["http2"] },
     { name = "humanize" },
+    { name = "lark" },
     { name = "litellm" },
     { name = "lxml" },
     { name = "nltk" },
     { name = "numpy" },
+    { name = "patchright" },
     { name = "pillow" },
     { name = "playwright" },
     { name = "psutil" },
     { name = "pydantic" },
     { name = "pyopenssl" },
-    { name = "pyperclip" },
     { name = "python-dotenv" },
+    { name = "pyyaml" },
     { name = "rank-bm25" },
     { name = "requests" },
     { name = "rich" },
+    { name = "shapely" },
     { name = "snowballstemmer" },
     { name = "tf-playwright-stealth" },
     { name = "xxhash" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/7e/9d/0f63b4f8ea487843b33a6da4b1ffff9e77dc4eee32cd25fb8bb52f3e6e04/crawl4ai-0.6.2.tar.gz", hash = "sha256:f52acee539500ec5fc8edbb7d3a3378a1b26f79017a52117bd10673a90a0f562", size = 291051 }
+sdist = { url = "https://files.pythonhosted.org/packages/e3/85/39761e1b269d30ddd5c5ee59e74e03605308f304a1a7d7e4f9d12cac1923/crawl4ai-0.7.4.tar.gz", hash = "sha256:68974cab5ef318c45f58657b0b23741e9cdd3df61b5824f024e506fee12bf99f", size = 437139 }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/de/35/a604b5bc889c23f0960823092a75241fe81d1c7ae0762c5277583da08c5b/crawl4ai-0.6.2-py3-none-any.whl", hash = "sha256:f52ae16081afcd4b398c023fb9c9c8d31c592047bade4a97054a82c2271c54e6", size = 287248 },
+    { url = "https://files.pythonhosted.org/packages/1a/7e/0681b76f4b59e5b7d54c16595fe5642972ab1bbbdf6dd6ac1013a526d2a5/crawl4ai-0.7.4-py3-none-any.whl", hash = "sha256:d845b062a989cf43338d30cc8efdcd2701304cea7e3e15122c826d92eee88334", size = 426242 },
 ]
 
 [[package]]
@@ -728,15 +762,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/c9/ad/51f212198681ea7b0deaaf8846ee10af99fba4e894f67b353524eab2bbe5/cryptography-44.0.3-cp39-abi3-win_amd64.whl", hash = "sha256:5d186f32e52e66994dce4f766884bcb9c68b8da62d61d9d215bfe5fb56d21334", size = 3210375 },
 ]
 
-[[package]]
-name = "cssselect"
-version = "1.3.0"
-source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/72/0a/c3ea9573b1dc2e151abfe88c7fe0c26d1892fe6ed02d0cdb30f0d57029d5/cssselect-1.3.0.tar.gz", hash = "sha256:57f8a99424cfab289a1b6a816a43075a4b00948c86b4dcf3ef4ee7e15f7ab0c7", size = 42870 }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/ee/58/257350f7db99b4ae12b614a36256d9cc870d71d9e451e79c2dc3b23d7c3c/cssselect-1.3.0-py3-none-any.whl", hash = "sha256:56d1bf3e198080cc1667e137bc51de9cadfca259f03c2d4e09037b3e01e30f0d", size = 18786 },
-]
-
 [[package]]
 name = "deprecated"
 version = "1.2.18"
@@ -1307,6 +1332,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/01/0e/b27cdbaccf30b890c40ed1da9fd4a3593a5cf94dae54fb34f8a4b74fcd3f/jsonschema_specifications-2025.4.1-py3-none-any.whl", hash = "sha256:4653bffbd6584f7de83a67e0d620ef16900b390ddc7939d56684d6c81e33f1af", size = 18437 },
 ]
 
+[[package]]
+name = "lark"
+version = "1.3.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/1d/37/a13baf0135f348af608c667633cbe5d13aa2c5c15a56ae9ad3e6cba45ae3/lark-1.3.0.tar.gz", hash = "sha256:9a3839d0ca5e1faf7cfa3460e420e859b66bcbde05b634e73c369c8244c5fa48", size = 259551 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/a8/3e/1c6b43277de64fc3c0333b0e72ab7b52ddaaea205210d60d9b9f83c3d0c7/lark-1.3.0-py3-none-any.whl", hash = "sha256:80661f261fb2584a9828a097a2432efd575af27d20be0fd35d17f0fe37253831", size = 113002 },
+]
+
 [[package]]
 name = "limits"
 version = "5.2.0"
@@ -1809,6 +1843,25 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/20/12/38679034af332785aac8774540895e234f4d07f7545804097de4b666afd8/packaging-25.0-py3-none-any.whl", hash = "sha256:29572ef2b1f17581046b3a2227d5c611fb25ec70ca1ba8554b24b0e69331a484", size = 66469 },
 ]
 
+[[package]]
+name = "patchright"
+version = "1.55.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "greenlet" },
+    { name = "pyee" },
+]
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/33/94/b02c620444cfe65aace1a7189f0d45b43ccabee5df6e7be36adbb464377b/patchright-1.55.2-py3-none-macosx_10_13_x86_64.whl", hash = "sha256:329c6c94e19181d59cb3fdfb126ea1156b218f57450bdca1eba3d0e98f8ccc45", size = 40410889 },
+    { url = "https://files.pythonhosted.org/packages/dd/8e/4e6f513d87876f643f3523ab789b6aefda04b5f4202d5aea0caf94538053/patchright-1.55.2-py3-none-macosx_11_0_arm64.whl", hash = "sha256:8e0f3f3d1cff7e31f93d1725af35748e6ab77899244e5764a56450bcc52d9ef8", size = 38670039 },
+    { url = "https://files.pythonhosted.org/packages/ad/8d/8acd6e078082155eb416773cbda90921a89e21a470a5b000d0f4b7350fb2/patchright-1.55.2-py3-none-macosx_11_0_universal2.whl", hash = "sha256:f9f5b7a386f18357c567905aaf4f26bb58b9c1d54f2f13e727a69be5fd06ef39", size = 40410889 },
+    { url = "https://files.pythonhosted.org/packages/31/2c/4da1001c4c0d0c8b269f8e2aaffc4d810cb8601370e4473c0756bceb7405/patchright-1.55.2-py3-none-manylinux1_x86_64.whl", hash = "sha256:9f4ee976895a7083a253de1bfabfa36801e719800a7e98c39f7535924ba1c8b1", size = 45888432 },
+    { url = "https://files.pythonhosted.org/packages/65/06/fa03fe1717e1ef25a65c0e352adf955f9e823e19bb6340fb5f3fbc554560/patchright-1.55.2-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8771ec426f8b19098426b00322043d93127490ff15a639933baed37bdafd75d5", size = 45279432 },
+    { url = "https://files.pythonhosted.org/packages/73/18/1b499548864461f56fa557f4e6f975179ae6732fa7e957104c44b5e5957e/patchright-1.55.2-py3-none-win32.whl", hash = "sha256:b4e36ec235f4a4e5845763327f6dd552866f96ab7fedda121d89ea95b62386d2", size = 35458833 },
+    { url = "https://files.pythonhosted.org/packages/19/06/57ecc1bce388bdb970141aedb45ebc6f91e3914e0fb92d4a8aa1535c8ca4/patchright-1.55.2-py3-none-win_amd64.whl", hash = "sha256:7018eb12650077e87d8608fa3d0523f2328997c3973407cfa993014b254a705c", size = 35458836 },
+    { url = "https://files.pythonhosted.org/packages/ba/3e/763eab982ba23887f0564af5fc599323880f169390a17f724d4aec475ea1/patchright-1.55.2-py3-none-win_arm64.whl", hash = "sha256:64d10d3ef080acfed63b27b94106b380d85ec3d2577154ca1a5853d453451f3d", size = 31208325 },
+]
+
 [[package]]
 name = "pathspec"
 version = "0.12.1"
@@ -2285,12 +2338,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e1/6b/2706497c86e8d69fb76afe5ea857fe1794621aa0f3b1d863feb953fe0f22/pypdfium2-4.30.1-py3-none-win_arm64.whl", hash = "sha256:c2b6d63f6d425d9416c08d2511822b54b8e3ac38e639fc41164b1d75584b3a8c", size = 2814810 },
 ]
 
-[[package]]
-name = "pyperclip"
-version = "1.9.0"
-source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/30/23/2f0a3efc4d6a32f3b63cdff36cd398d9701d26cda58e3ab97ac79fb5e60d/pyperclip-1.9.0.tar.gz", hash = "sha256:b7de0142ddc81bfc5c7507eea19da920b92252b548b96186caf94a5e2527d310", size = 20961 }
-
 [[package]]
 name = "pytest"
 version = "8.3.5"
@@ -2626,6 +2673,22 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/64/8d/0133e4eb4beed9e425d9a98ed6e081a55d195481b7632472be1af08d2f6b/rsa-4.9.1-py3-none-any.whl", hash = "sha256:68635866661c6836b8d39430f97a996acbd61bfa49406748ea243539fe239762", size = 34696 },
 ]
 
+[[package]]
+name = "rtree"
+version = "1.4.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/95/09/7302695875a019514de9a5dd17b8320e7a19d6e7bc8f85dcfb79a4ce2da3/rtree-1.4.1.tar.gz", hash = "sha256:c6b1b3550881e57ebe530cc6cffefc87cd9bf49c30b37b894065a9f810875e46", size = 52425 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/04/d9/108cd989a4c0954e60b3cdc86fd2826407702b5375f6dfdab2802e5fed98/rtree-1.4.1-py3-none-macosx_10_9_x86_64.whl", hash = "sha256:d672184298527522d4914d8ae53bf76982b86ca420b0acde9298a7a87d81d4a4", size = 468484 },
+    { url = "https://files.pythonhosted.org/packages/f3/cf/2710b6fd6b07ea0aef317b29f335790ba6adf06a28ac236078ed9bd8a91d/rtree-1.4.1-py3-none-macosx_11_0_arm64.whl", hash = "sha256:a7e48d805e12011c2cf739a29d6a60ae852fb1de9fc84220bbcef67e6e595d7d", size = 436325 },
+    { url = "https://files.pythonhosted.org/packages/55/e1/4d075268a46e68db3cac51846eb6a3ab96ed481c585c5a1ad411b3c23aad/rtree-1.4.1-py3-none-manylinux_2_24_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:efa8c4496e31e9ad58ff6c7df89abceac7022d906cb64a3e18e4fceae6b77f65", size = 459789 },
+    { url = "https://files.pythonhosted.org/packages/d1/75/e5d44be90525cd28503e7f836d077ae6663ec0687a13ba7810b4114b3668/rtree-1.4.1-py3-none-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:12de4578f1b3381a93a655846900be4e3d5f4cd5e306b8b00aa77c1121dc7e8c", size = 507644 },
+    { url = "https://files.pythonhosted.org/packages/fd/85/b8684f769a142163b52859a38a486493b05bafb4f2fb71d4f945de28ebf9/rtree-1.4.1-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:b558edda52eca3e6d1ee629042192c65e6b7f2c150d6d6cd207ce82f85be3967", size = 1454478 },
+    { url = "https://files.pythonhosted.org/packages/e9/a4/c2292b95246b9165cc43a0c3757e80995d58bc9b43da5cb47ad6e3535213/rtree-1.4.1-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:f155bc8d6bac9dcd383481dee8c130947a4866db1d16cb6dff442329a038a0dc", size = 1555140 },
+    { url = "https://files.pythonhosted.org/packages/74/25/5282c8270bfcd620d3e73beb35b40ac4ab00f0a898d98ebeb41ef0989ec8/rtree-1.4.1-py3-none-win_amd64.whl", hash = "sha256:efe125f416fd27150197ab8521158662943a40f87acab8028a1aac4ad667a489", size = 389358 },
+    { url = "https://files.pythonhosted.org/packages/3f/50/0a9e7e7afe7339bd5e36911f0ceb15fed51945836ed803ae5afd661057fd/rtree-1.4.1-py3-none-win_arm64.whl", hash = "sha256:3d46f55729b28138e897ffef32f7ce93ac335cb67f9120125ad3742a220800f0", size = 355253 },
+]
+
 [[package]]
 name = "ruff"
 version = "0.12.5"
@@ -2780,6 +2843,57 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/a3/dc/17031897dae0efacfea57dfd3a82fdd2a2aeb58e0ff71b77b87e44edc772/setuptools-80.9.0-py3-none-any.whl", hash = "sha256:062d34222ad13e0cc312a4c02d73f059e86a4acbfbdea8f8f76b28c99f306922", size = 1201486 },
 ]
 
+[[package]]
+name = "shapely"
+version = "2.1.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "numpy" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/4d/bc/0989043118a27cccb4e906a46b7565ce36ca7b57f5a18b78f4f1b0f72d9d/shapely-2.1.2.tar.gz", hash = "sha256:2ed4ecb28320a433db18a5bf029986aa8afcfd740745e78847e330d5d94922a9", size = 315489 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/24/c0/f3b6453cf2dfa99adc0ba6675f9aaff9e526d2224cbd7ff9c1a879238693/shapely-2.1.2-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:fe2533caae6a91a543dec62e8360fe86ffcdc42a7c55f9dfd0128a977a896b94", size = 1833550 },
+    { url = "https://files.pythonhosted.org/packages/86/07/59dee0bc4b913b7ab59ab1086225baca5b8f19865e6101db9ebb7243e132/shapely-2.1.2-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:ba4d1333cc0bc94381d6d4308d2e4e008e0bd128bdcff5573199742ee3634359", size = 1643556 },
+    { url = "https://files.pythonhosted.org/packages/26/29/a5397e75b435b9895cd53e165083faed5d12fd9626eadec15a83a2411f0f/shapely-2.1.2-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:0bd308103340030feef6c111d3eb98d50dc13feea33affc8a6f9fa549e9458a3", size = 2988308 },
+    { url = "https://files.pythonhosted.org/packages/b9/37/e781683abac55dde9771e086b790e554811a71ed0b2b8a1e789b7430dd44/shapely-2.1.2-cp312-cp312-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:1e7d4d7ad262a48bb44277ca12c7c78cb1b0f56b32c10734ec9a1d30c0b0c54b", size = 3099844 },
+    { url = "https://files.pythonhosted.org/packages/d8/f3/9876b64d4a5a321b9dc482c92bb6f061f2fa42131cba643c699f39317cb9/shapely-2.1.2-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:e9eddfe513096a71896441a7c37db72da0687b34752c4e193577a145c71736fc", size = 3988842 },
+    { url = "https://files.pythonhosted.org/packages/d1/a0/704c7292f7014c7e74ec84eddb7b109e1fbae74a16deae9c1504b1d15565/shapely-2.1.2-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:980c777c612514c0cf99bc8a9de6d286f5e186dcaf9091252fcd444e5638193d", size = 4152714 },
+    { url = "https://files.pythonhosted.org/packages/53/46/319c9dc788884ad0785242543cdffac0e6530e4d0deb6c4862bc4143dcf3/shapely-2.1.2-cp312-cp312-win32.whl", hash = "sha256:9111274b88e4d7b54a95218e243282709b330ef52b7b86bc6aaf4f805306f454", size = 1542745 },
+    { url = "https://files.pythonhosted.org/packages/ec/bf/cb6c1c505cb31e818e900b9312d514f381fbfa5c4363edfce0fcc4f8c1a4/shapely-2.1.2-cp312-cp312-win_amd64.whl", hash = "sha256:743044b4cfb34f9a67205cee9279feaf60ba7d02e69febc2afc609047cb49179", size = 1722861 },
+    { url = "https://files.pythonhosted.org/packages/c3/90/98ef257c23c46425dc4d1d31005ad7c8d649fe423a38b917db02c30f1f5a/shapely-2.1.2-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:b510dda1a3672d6879beb319bc7c5fd302c6c354584690973c838f46ec3e0fa8", size = 1832644 },
+    { url = "https://files.pythonhosted.org/packages/6d/ab/0bee5a830d209adcd3a01f2d4b70e587cdd9fd7380d5198c064091005af8/shapely-2.1.2-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:8cff473e81017594d20ec55d86b54bc635544897e13a7cfc12e36909c5309a2a", size = 1642887 },
+    { url = "https://files.pythonhosted.org/packages/2d/5e/7d7f54ba960c13302584c73704d8c4d15404a51024631adb60b126a4ae88/shapely-2.1.2-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:fe7b77dc63d707c09726b7908f575fc04ff1d1ad0f3fb92aec212396bc6cfe5e", size = 2970931 },
+    { url = "https://files.pythonhosted.org/packages/f2/a2/83fc37e2a58090e3d2ff79175a95493c664bcd0b653dd75cb9134645a4e5/shapely-2.1.2-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:7ed1a5bbfb386ee8332713bf7508bc24e32d24b74fc9a7b9f8529a55db9f4ee6", size = 3082855 },
+    { url = "https://files.pythonhosted.org/packages/44/2b/578faf235a5b09f16b5f02833c53822294d7f21b242f8e2d0cf03fb64321/shapely-2.1.2-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:a84e0582858d841d54355246ddfcbd1fce3179f185da7470f41ce39d001ee1af", size = 3979960 },
+    { url = "https://files.pythonhosted.org/packages/4d/04/167f096386120f692cc4ca02f75a17b961858997a95e67a3cb6a7bbd6b53/shapely-2.1.2-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:dc3487447a43d42adcdf52d7ac73804f2312cbfa5d433a7d2c506dcab0033dfd", size = 4142851 },
+    { url = "https://files.pythonhosted.org/packages/48/74/fb402c5a6235d1c65a97348b48cdedb75fb19eca2b1d66d04969fc1c6091/shapely-2.1.2-cp313-cp313-win32.whl", hash = "sha256:9c3a3c648aedc9f99c09263b39f2d8252f199cb3ac154fadc173283d7d111350", size = 1541890 },
+    { url = "https://files.pythonhosted.org/packages/41/47/3647fe7ad990af60ad98b889657a976042c9988c2807cf322a9d6685f462/shapely-2.1.2-cp313-cp313-win_amd64.whl", hash = "sha256:ca2591bff6645c216695bdf1614fca9c82ea1144d4a7591a466fef64f28f0715", size = 1722151 },
+    { url = "https://files.pythonhosted.org/packages/3c/49/63953754faa51ffe7d8189bfbe9ca34def29f8c0e34c67cbe2a2795f269d/shapely-2.1.2-cp313-cp313t-macosx_10_13_x86_64.whl", hash = "sha256:2d93d23bdd2ed9dc157b46bc2f19b7da143ca8714464249bef6771c679d5ff40", size = 1834130 },
+    { url = "https://files.pythonhosted.org/packages/7f/ee/dce001c1984052970ff60eb4727164892fb2d08052c575042a47f5a9e88f/shapely-2.1.2-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:01d0d304b25634d60bd7cf291828119ab55a3bab87dc4af1e44b07fb225f188b", size = 1642802 },
+    { url = "https://files.pythonhosted.org/packages/da/e7/fc4e9a19929522877fa602f705706b96e78376afb7fad09cad5b9af1553c/shapely-2.1.2-cp313-cp313t-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:8d8382dd120d64b03698b7298b89611a6ea6f55ada9d39942838b79c9bc89801", size = 3018460 },
+    { url = "https://files.pythonhosted.org/packages/a1/18/7519a25db21847b525696883ddc8e6a0ecaa36159ea88e0fef11466384d0/shapely-2.1.2-cp313-cp313t-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:19efa3611eef966e776183e338b2d7ea43569ae99ab34f8d17c2c054d3205cc0", size = 3095223 },
+    { url = "https://files.pythonhosted.org/packages/48/de/b59a620b1f3a129c3fecc2737104a0a7e04e79335bd3b0a1f1609744cf17/shapely-2.1.2-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:346ec0c1a0fcd32f57f00e4134d1200e14bf3f5ae12af87ba83ca275c502498c", size = 4030760 },
+    { url = "https://files.pythonhosted.org/packages/96/b3/c6655ee7232b417562bae192ae0d3ceaadb1cc0ffc2088a2ddf415456cc2/shapely-2.1.2-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:6305993a35989391bd3476ee538a5c9a845861462327efe00dd11a5c8c709a99", size = 4170078 },
+    { url = "https://files.pythonhosted.org/packages/a0/8e/605c76808d73503c9333af8f6cbe7e1354d2d238bda5f88eea36bfe0f42a/shapely-2.1.2-cp313-cp313t-win32.whl", hash = "sha256:c8876673449f3401f278c86eb33224c5764582f72b653a415d0e6672fde887bf", size = 1559178 },
+    { url = "https://files.pythonhosted.org/packages/36/f7/d317eb232352a1f1444d11002d477e54514a4a6045536d49d0c59783c0da/shapely-2.1.2-cp313-cp313t-win_amd64.whl", hash = "sha256:4a44bc62a10d84c11a7a3d7c1c4fe857f7477c3506e24c9062da0db0ae0c449c", size = 1739756 },
+    { url = "https://files.pythonhosted.org/packages/fc/c4/3ce4c2d9b6aabd27d26ec988f08cb877ba9e6e96086eff81bfea93e688c7/shapely-2.1.2-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:9a522f460d28e2bf4e12396240a5fc1518788b2fcd73535166d748399ef0c223", size = 1831290 },
+    { url = "https://files.pythonhosted.org/packages/17/b9/f6ab8918fc15429f79cb04afa9f9913546212d7fb5e5196132a2af46676b/shapely-2.1.2-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:1ff629e00818033b8d71139565527ced7d776c269a49bd78c9df84e8f852190c", size = 1641463 },
+    { url = "https://files.pythonhosted.org/packages/a5/57/91d59ae525ca641e7ac5551c04c9503aee6f29b92b392f31790fcb1a4358/shapely-2.1.2-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:f67b34271dedc3c653eba4e3d7111aa421d5be9b4c4c7d38d30907f796cb30df", size = 2970145 },
+    { url = "https://files.pythonhosted.org/packages/8a/cb/4948be52ee1da6927831ab59e10d4c29baa2a714f599f1f0d1bc747f5777/shapely-2.1.2-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:21952dc00df38a2c28375659b07a3979d22641aeb104751e769c3ee825aadecf", size = 3073806 },
+    { url = "https://files.pythonhosted.org/packages/03/83/f768a54af775eb41ef2e7bec8a0a0dbe7d2431c3e78c0a8bdba7ab17e446/shapely-2.1.2-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:1f2f33f486777456586948e333a56ae21f35ae273be99255a191f5c1fa302eb4", size = 3980803 },
+    { url = "https://files.pythonhosted.org/packages/9f/cb/559c7c195807c91c79d38a1f6901384a2878a76fbdf3f1048893a9b7534d/shapely-2.1.2-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:cf831a13e0d5a7eb519e96f58ec26e049b1fad411fc6fc23b162a7ce04d9cffc", size = 4133301 },
+    { url = "https://files.pythonhosted.org/packages/80/cd/60d5ae203241c53ef3abd2ef27c6800e21afd6c94e39db5315ea0cbafb4a/shapely-2.1.2-cp314-cp314-win32.whl", hash = "sha256:61edcd8d0d17dd99075d320a1dd39c0cb9616f7572f10ef91b4b5b00c4aeb566", size = 1583247 },
+    { url = "https://files.pythonhosted.org/packages/74/d4/135684f342e909330e50d31d441ace06bf83c7dc0777e11043f99167b123/shapely-2.1.2-cp314-cp314-win_amd64.whl", hash = "sha256:a444e7afccdb0999e203b976adb37ea633725333e5b119ad40b1ca291ecf311c", size = 1773019 },
+    { url = "https://files.pythonhosted.org/packages/a3/05/a44f3f9f695fa3ada22786dc9da33c933da1cbc4bfe876fe3a100bafe263/shapely-2.1.2-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:5ebe3f84c6112ad3d4632b1fd2290665aa75d4cef5f6c5d77c4c95b324527c6a", size = 1834137 },
+    { url = "https://files.pythonhosted.org/packages/52/7e/4d57db45bf314573427b0a70dfca15d912d108e6023f623947fa69f39b72/shapely-2.1.2-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:5860eb9f00a1d49ebb14e881f5caf6c2cf472c7fd38bd7f253bbd34f934eb076", size = 1642884 },
+    { url = "https://files.pythonhosted.org/packages/5a/27/4e29c0a55d6d14ad7422bf86995d7ff3f54af0eba59617eb95caf84b9680/shapely-2.1.2-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:b705c99c76695702656327b819c9660768ec33f5ce01fa32b2af62b56ba400a1", size = 3018320 },
+    { url = "https://files.pythonhosted.org/packages/9f/bb/992e6a3c463f4d29d4cd6ab8963b75b1b1040199edbd72beada4af46bde5/shapely-2.1.2-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:a1fd0ea855b2cf7c9cddaf25543e914dd75af9de08785f20ca3085f2c9ca60b0", size = 3094931 },
+    { url = "https://files.pythonhosted.org/packages/9c/16/82e65e21070e473f0ed6451224ed9fa0be85033d17e0c6e7213a12f59d12/shapely-2.1.2-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:df90e2db118c3671a0754f38e36802db75fe0920d211a27481daf50a711fdf26", size = 4030406 },
+    { url = "https://files.pythonhosted.org/packages/7c/75/c24ed871c576d7e2b64b04b1fe3d075157f6eb54e59670d3f5ffb36e25c7/shapely-2.1.2-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:361b6d45030b4ac64ddd0a26046906c8202eb60d0f9f53085f5179f1d23021a0", size = 4169511 },
+    { url = "https://files.pythonhosted.org/packages/b1/f7/b3d1d6d18ebf55236eec1c681ce5e665742aab3c0b7b232720a7d43df7b6/shapely-2.1.2-cp314-cp314t-win32.whl", hash = "sha256:b54df60f1fbdecc8ebc2c5b11870461a6417b3d617f555e5033f1505d36e5735", size = 1602607 },
+    { url = "https://files.pythonhosted.org/packages/9a/f6/f09272a71976dfc138129b8faf435d064a811ae2f708cb147dccdf7aacdb/shapely-2.1.2-cp314-cp314t-win_amd64.whl", hash = "sha256:0036ac886e0923417932c2e6369b6c52e38e0ff5d9120b90eef5cd9a5fc5cae9", size = 1796682 },
+]
+
 [[package]]
 name = "six"
 version = "1.17.0"
@@ -3015,9 +3129,9 @@ dependencies = [
     { name = "typing-extensions", marker = "sys_platform == 'darwin'" },
 ]
 wheels = [
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0-cp312-none-macosx_11_0_arm64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0-cp313-cp313t-macosx_14_0_arm64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0-cp313-none-macosx_11_0_arm64.whl" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0-cp312-none-macosx_11_0_arm64.whl", hash = "sha256:a47b7986bee3f61ad217d8a8ce24605809ab425baf349f97de758815edd2ef54" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0-cp313-cp313t-macosx_14_0_arm64.whl", hash = "sha256:fbe2e149c5174ef90d29a5f84a554dfaf28e003cb4f61fa2c8c024c17ec7ca58" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0-cp313-none-macosx_11_0_arm64.whl", hash = "sha256:057efd30a6778d2ee5e2374cd63a63f63311aa6f33321e627c655df60abdd390" },
 ]
 
 [[package]]
@@ -3038,19 +3152,19 @@ dependencies = [
     { name = "typing-extensions", marker = "sys_platform != 'darwin'" },
 ]
 wheels = [
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-linux_s390x.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-manylinux_2_28_aarch64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-manylinux_2_28_x86_64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-win_amd64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-win_arm64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-linux_s390x.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-manylinux_2_28_aarch64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-manylinux_2_28_x86_64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-win_amd64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-win_arm64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313t-manylinux_2_28_aarch64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313t-manylinux_2_28_x86_64.whl" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313t-win_amd64.whl" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-linux_s390x.whl", hash = "sha256:0e34e276722ab7dd0dffa9e12fe2135a9b34a0e300c456ed7ad6430229404eb5" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-manylinux_2_28_aarch64.whl", hash = "sha256:610f600c102386e581327d5efc18c0d6edecb9820b4140d26163354a99cd800d" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-manylinux_2_28_x86_64.whl", hash = "sha256:cb9a8ba8137ab24e36bf1742cb79a1294bd374db570f09fc15a5e1318160db4e" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-win_amd64.whl", hash = "sha256:2be20b2c05a0cce10430cc25f32b689259640d273232b2de357c35729132256d" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp312-cp312-win_arm64.whl", hash = "sha256:99fc421a5d234580e45957a7b02effbf3e1c884a5dd077afc85352c77bf41434" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-linux_s390x.whl", hash = "sha256:8b5882276633cf91fe3d2d7246c743b94d44a7e660b27f1308007fdb1bb89f7d" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-manylinux_2_28_aarch64.whl", hash = "sha256:a5064b5e23772c8d164068cc7c12e01a75faf7b948ecd95a0d4007d7487e5f25" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-manylinux_2_28_x86_64.whl", hash = "sha256:8f81dedb4c6076ec325acc3b47525f9c550e5284a18eae1d9061c543f7b6e7de" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-win_amd64.whl", hash = "sha256:e1ee1b2346ade3ea90306dfbec7e8ff17bc220d344109d189ae09078333b0856" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313-win_arm64.whl", hash = "sha256:64c187345509f2b1bb334feed4666e2c781ca381874bde589182f81247e61f88" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313t-manylinux_2_28_aarch64.whl", hash = "sha256:af81283ac671f434b1b25c95ba295f270e72db1fad48831eb5e4748ff9840041" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313t-manylinux_2_28_x86_64.whl", hash = "sha256:a9dbb6f64f63258bc811e2c0c99640a81e5af93c531ad96e95c5ec777ea46dab" },
+    { url = "https://download.pytorch.org/whl/cpu/torch-2.8.0%2Bcpu-cp313-cp313t-win_amd64.whl", hash = "sha256:6d93a7165419bc4b2b907e859ccab0dea5deeab261448ae9a5ec5431f14c0e64" },
 ]
 
 [[package]]
@@ -3086,6 +3200,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/96/f2/25b27b396af03d5b64e61976b14f7209e2939e9e806c10749b6d277c273e/transformers-4.52.4-py3-none-any.whl", hash = "sha256:203f5c19416d5877e36e88633943761719538a25d9775977a24fe77a1e5adfc7", size = 10460375 },
 ]
 
+[[package]]
+name = "trimesh"
+version = "4.8.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "numpy" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/be/17/9799bd734de0aa75332727b10ecf56e2c93efa70dfc7a2966bed33539ef5/trimesh-4.8.3.tar.gz", hash = "sha256:d2a1974efccb0737a1faac14d69740c644bb6738a99c790c1df752fe72c2a759", size = 831222 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/8e/bc/f36afd1ad03d09cd0d311be5951f2dd705a824f34dd871779d42c277d741/trimesh-4.8.3-py3-none-any.whl", hash = "sha256:f9f1622ecac5f3bed5b65d3a748bb536481f52cd4e4e120e0b637cabe6cf1542", size = 735464 },
+]
+
 [[package]]
 name = "types-requests"
 version = "2.32.0.20250602"