diff --git a/CLAUDE.md b/CLAUDE.md
index 3083701d..3cb84dfd 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-GraphDone is a graph-native project management system that reimagines work coordination through dependencies and democratic prioritization rather than hierarchical assignments. The project is in active development (v0.2.1-alpha) with core architecture implemented and working foundation.
+GraphDone is a graph-native project management system that reimagines work coordination through dependencies and democratic prioritization rather than hierarchical assignments. The project is in active development (v0.2.2-alpha) with a fully working foundation across web application, GraphQL API, and graph database.
 
 ## Core Philosophy
 
@@ -13,265 +13,1228 @@ GraphDone is a graph-native project management system that reimagines work coord
 - Human and AI agents collaborate as peers through the same graph interface
 - Designed for neurodivergent individuals and those who think differently about work
 
-## Planned Architecture
+## Technology Stack
 
-### Technology Stack
-- **Frontend**: React 18 with TypeScript, React Native for mobile, D3.js for graph visualization
-- **Backend**: Node.js with TypeScript, GraphQL with Apollo Server, Neo4j with @neo4j/graphql
-- **State Management**: Zustand
-- **Styling**: Tailwind CSS
-- **Build Tool**: Vite
-- **Real-time**: WebSocket subscriptions
-- **Infrastructure**: Docker, Kubernetes, GitHub Actions for CI/CD
-- **Testing**: Playwright for E2E testing, Vitest for unit tests
+**Core Stack:**
+- **Frontend**: React 18 + TypeScript + Vite + Tailwind CSS + D3.js
+- **Backend**: Node.js + TypeScript + Apollo Server + GraphQL
+- **Database**: Neo4j 5.15-community with @neo4j/graphql auto-generated resolvers
+- **Build System**: Turbo monorepo with npm workspaces
+- **Testing**: Playwright (E2E) + Vitest (unit tests)
+- **Infrastructure**: Docker + Docker Compose
 
-### Project Structure (Implemented)
-```
-packages/
-├── core/           # Graph engine and algorithms (✅ Complete)
-├── web/            # React web application (✅ Complete)
-├── server/         # GraphQL API server (✅ Complete)
-└── agent-sdk/      # SDK for AI agent integration (🔄 Planned)
+**Key Libraries:**
+- `@neo4j/graphql` - Auto-generates GraphQL schema and resolvers from Neo4j
+- `@apollo/client` - GraphQL client with caching and real-time subscriptions
+- `lucide-react` - Consistent icon system throughout UI
+- `d3` - Graph visualization and force simulation
 
-Additional:
-├── docs/           # Comprehensive documentation
-├── scripts/        # Development and deployment scripts
-└── .github/        # CI/CD workflows
-```
+## Essential Commands
 
-## Development Commands
+### Quick Start
+```bash
+# Single command to get everything running
+./start
 
-The project has a fully implemented monorepo structure with these commands:
+# Alternative quick start without full setup checks
+./start quick
 
+# Manual setup (advanced)
+./tools/setup.sh && ./tools/run.sh
+```
+
+### Development Workflow
 ```bash
-# Quick setup (recommended)
-./tools/setup.sh                    # Complete environment setup
-./tools/run.sh                      # Start all development servers
+# Start all development servers (web on :3127, API on :4127)
+npm run dev
 
-# Manual setup
-npm install                   # Install dependencies
-cp .env.example .env          # Create environment file
-docker-compose up -d postgres # Start PostgreSQL
-npm run db:migrate            # Run database migrations
+# Run tests
+npm run test              # All tests including E2E
+npm run test:unit         # Unit tests only  
+npm run test:e2e          # E2E tests only
+npm run test:coverage     # With coverage report
 
-# Development
-npm run dev                   # Start all development servers (Turbo)
-npm run test                  # Run all tests
-npm run lint                  # Lint all packages
-npm run typecheck             # Type check all packages
-npm run build                 # Build all packages
+# Code quality
+npm run lint              # ESLint all packages
+npm run typecheck         # TypeScript check all packages
+npm run build             # Build all packages for production
+```
 
-# Database operations
-npm run db:seed               # Seed Neo4j database with test data
+### Database Operations
+```bash
+# Seed Neo4j with sample data (32 work items + relationships)
+npm run db:seed
 
-# Docker development
-docker-compose -f deployment/docker-compose.dev.yml up  # With hot reload
-docker-compose up             # Production-like environment
+# Access Neo4j Browser
+# http://localhost:7474 (neo4j/graphdone_password)
 ```
 
-## Key Concepts
+### Package-Specific Development
+```bash
+# Core graph engine
+cd packages/core && npm run dev
 
-### Graph Structure
-- **Nodes**: Outcomes, tasks, milestones, contributors (human and AI)
-- **Edges**: Dependencies, relationships, priorities
-- **Spherical Coordinates**: 3D positioning based on priority (center = highest priority)
+# GraphQL API server  
+cd packages/server && npm run dev
 
-### Priority System
-- Executive flags create gravity wells but don't control entire structure
-- Individual contributors can establish small gravity wells on periphery
-- Anonymous democratic rating system for idea validation
-- Priority determines resource allocation and position in spherical model
+# React web application
+cd packages/web && npm run dev
 
-### Agent Integration
-Agents are first-class citizens that:
-- Read/write graph state through standard GraphQL endpoints
-- Receive real-time notifications for graph changes
-- Request compute resources based on node priority
-- Coordinate with humans through the same interface
+# MCP server for Claude Code integration
+cd packages/mcp-server && npm run dev
+```
+
+## Architecture Overview
 
-## Implementation Guidelines
+### Monorepo Structure
+```
+packages/
+├── core/           # Graph algorithms and data structures
+├── server/         # GraphQL API with Neo4j integration
+├── web/            # React frontend with D3.js visualization
+└── mcp-server/     # Claude Code integration server
+```
 
-When implementing features:
+### Core Graph Engine (`packages/core/`)
 
-1. **Graph-First Design**: All features should work within the graph paradigm
-2. **Mobile-First UI**: Touch interactions must be primary, not an afterthought
-3. **Agent Parity**: Any action a human can take, an agent should be able to take via API
-4. **Democratic by Default**: Community validation mechanisms should be built into core features
-5. **Accessibility**: Design for neurodiversity and different cognitive styles
+The heart of GraphDone is a custom graph implementation:
 
-## Development Commands
+**Key Classes:**
+- `Graph` - Main container with adjacency lists, pathfinding, cycle detection
+- `Node` - Individual graph nodes with spherical positioning based on priority  
+- `Edge` - Typed connections (DEPENDS_ON, BLOCKS, ENABLES, etc.)
+- `Priority` - Multi-dimensional priority system (executive, individual, community)
 
-```bash
-# Initial setup
-./tools/setup.sh                    # Set up development environment
-./tools/run.sh                      # Start development servers
-./tools/test.sh                     # Run test suite with linting and type checking
-./tools/build.sh                    # Build all packages
-./tools/deploy.sh                   # Deploy to staging/production
-./tools/document.sh                 # Generate and deploy documentation
-
-# Docker development
-./tools/run.sh --docker-dev         # Start with Docker (development)
-./tools/run.sh --docker             # Start with Docker (production)
-
-# Package-specific testing
-./tools/test.sh --package core      # Test specific package
-./tools/test.sh --coverage          # Run with coverage report
-./tools/test.sh --watch             # Run in watch mode
-
-# Turbo commands (alternative)
-npm run dev                   # Start all development servers
-npm run build                 # Build all packages
-npm run test                  # Run all tests
-npm run lint                  # Lint all packages
-npm run typecheck             # Type check all packages
-```
-
-## Current Implementation Status
-
-✅ **Completed:**
-- Monorepo structure with Turbo for build orchestration
-- Core graph engine with Node, Edge, Priority calculation, and full graph operations
-- Neo4j integration with @neo4j/graphql auto-generated resolvers
-- GraphQL API server with comprehensive schema and WebSocket subscriptions
-- React web application with D3.js graph visualization and user-friendly error handling
-- TypeScript configuration across all packages
-- Playwright and Vitest testing infrastructure with E2E tests
-- Docker development and production configurations with Neo4j 5.15-community
-- Enhanced development scripts with automatic dependency management
-- GitHub Actions CI/CD workflows for testing, building, and deployment
-- Comprehensive documentation structure and branding (favicon, logos)
-
-🏗️ **Architecture Implemented:**
-- `packages/core/` - Graph engine with priority calculation, node/edge management, path finding, cycle detection
-- `packages/server/` - GraphQL API with Neo4j schema, Apollo Server with @neo4j/graphql, WebSocket subscriptions
-- `packages/web/` - React app with Vite, Tailwind CSS, D3.js visualization, Apollo Client, enhanced error handling
-- Docker configurations for development and production with Neo4j 5.15-community
-- Kubernetes-ready manifests (planned in deployment docs)
-- Full CI/CD pipeline with testing, security scanning, and deployment
-- Production deployment verified and tested
-
-🎯 **Ready for Development:**
-All foundation pieces are in place. To continue development:
-1. Run `./start` to initialize the development environment automatically
-2. Access the working application at http://localhost:3127
-3. Use GraphQL Playground at http://localhost:4127/graphql
-4. Backend status at http://localhost:3127/backend shows Neo4j architecture
-5. Begin implementing specific features using the established patterns
-6. Add more comprehensive tests using the Playwright and Vitest setup
-7. Enhance the Neo4j schema and GraphQL resolvers as needed
-
-## Core Architecture
-
-### Graph Engine (`packages/core/`)
-The heart of GraphDone is a custom graph engine with these key classes:
-
-- **Graph**: Main graph container with nodes/edges, adjacency lists, pathfinding, cycle detection
-- **Node**: Individual graph nodes with priority calculation, spherical positioning 
-- **Edge**: Connections between nodes with types (DEPENDENCY, BLOCKS, etc.)
-- **Priority**: Multi-dimensional priority system (executive, individual, community)
-- **PriorityCalculator**: Algorithms for computing weighted priorities and spherical positions
-
-Key files:
-- `packages/core/src/graph.ts` - Main Graph class with all operations
-- `packages/core/src/node.ts` - Node implementation with priority management
-- `packages/core/src/priority.ts` - Priority calculation logic
-- `packages/core/src/types.ts` - TypeScript definitions
+**Core Types:**
+- `NodeType` - OUTCOME, TASK, MILESTONE, IDEA
+- `NodeStatus` - PROPOSED, ACTIVE, IN_PROGRESS, BLOCKED, COMPLETED, ARCHIVED
+- `EdgeType` - 11 relationship types for complex dependency modeling
+- `SphericalCoordinate` - 3D positioning where radius = inverse priority
 
 ### GraphQL API (`packages/server/`)
-Apollo Server with real-time subscriptions:
 
-- **Database**: Neo4j 5.15-community with APOC plugins
-- **Schema**: Auto-generated GraphQL schema with @neo4j/graphql
-- **Resolvers**: Automatically generated from Neo4j schema
-- **Subscriptions**: Real-time WebSocket updates
-- **Health Check**: `/health` endpoint for monitoring
+**Architecture:**
+- Auto-generated schema using `@neo4j/graphql` from database constraints
+- Real-time subscriptions for live updates
+- Direct Neo4j authentication (no Prisma/PostgreSQL dependencies)
+- Authentication with Passport.js (Google OAuth, GitHub OAuth, LinkedIn OAuth + local)
+- Health check endpoint at `/health`
 
-Key files:
-- `packages/server/src/index.ts` - Apollo Server setup with WebSocket support
-- `packages/server/src/schema/neo4j-schema.ts` - Neo4j GraphQL schema definitions
-- `packages/server/src/scripts/seed.ts` - Database seeding script
-- `packages/server/src/context.ts` - GraphQL context with Neo4j driver
+**Key Files:**
+- `src/schema/neo4j-schema.ts` - Core GraphQL type definitions
+- `src/schema/auth-schema.ts` - Authentication GraphQL schema extensions
+- `src/resolvers/auth.ts` - Authentication resolvers and OAuth handlers
+- `src/index.ts` - Apollo Server setup with WebSocket support
+- `src/scripts/seed.ts` - Database seeding with realistic test data
 
 ### Web Application (`packages/web/`)
-React app with D3.js visualization:
 
-- **Framework**: React 18 + TypeScript + Vite
-- **Styling**: Tailwind CSS
-- **Visualization**: D3.js for interactive graph rendering
-- **State**: Apollo Client for GraphQL state management
-- **Routing**: React Router for navigation
+**Component Architecture:**
+- `InteractiveGraphVisualization` - Enhanced D3.js force-directed graph with advanced interactions
+- `SafeGraphVisualization` - Error-boundary wrapped graph visualization
+- `ViewManager` - Orchestrates dashboard, table, kanban, gantt, calendar, and card views
+- `Workspace` - Main layout with graph selector, view modes, and data issues tracking
+- `useDialogManager` - Centralized hook for managing all dialogs/overlays lifecycle
+- Multiple modal components for CRUD operations (Create, Edit, Delete, Connect, etc.)
+
+**Key Features:**
+- Graph selector with hierarchical tree navigation (Team/Personal/Templates)
+- Real-time updates via Apollo Client subscriptions
+- Multiple visualization modes (graph, dashboard, table, kanban, gantt, calendar, card)
+- Responsive design with tropical lagoon animated background
+- Dialog manager for efficient click-outside-to-close behavior
+- Right sidebar with contextual information and actions
+- Activity feed for real-time collaboration awareness
+
+**Constants and Styling:**
+- `workItemConstants.tsx` - Centralized icon mappings, color schemes, and gradients
+- Priority-based coloring system with animated elements
+- Consistent Tailwind classes with transparency and backdrop blur
+- Modern card-based layouts with dynamic theming
+
+### Database Schema (Neo4j)
+
+**Core Node Types:**
+- `WorkItem` - Primary nodes with title, description, type, status, priority
+- `Graph` - Container nodes for organizing work items  
+- `Team` - Organizational structure
+- `User` - Authentication and ownership
+
+**Relationships:**
+- `DEPENDS_ON` - Core dependency relationships
+- `ASSIGNED_TO` - Work assignment
+- `BELONGS_TO` - Graph membership
+- Plus 8 other relationship types for complex modeling
+
+## Key Implementation Patterns
+
+### Graph-First Design
+All features work within the graph paradigm. Every action creates or modifies nodes and edges rather than traditional hierarchical structures.
+
+### Democratic Prioritization
+Priority is multi-dimensional:
+- Individual priority (personal importance)
+- Community priority (democratic validation)
+- Executive priority (strategic flags)
+- Computed priority (algorithmic combination)
+
+### Agent Integration
+AI agents are first-class citizens accessing the same GraphQL endpoints as humans. The MCP server provides natural language interface for Claude Code.
 
-Key files:
-- `packages/web/src/App.tsx` - Main application router
-- `packages/web/src/components/GraphVisualization.tsx` - D3.js graph component
-- `packages/web/src/lib/apollo.ts` - GraphQL client configuration
+### Real-Time Collaboration
+WebSocket subscriptions ensure all users see live updates to the graph structure and work item status.
+
+### Mobile-First UI
+Touch interactions are primary, with hover states as enhancements. All components work on mobile screens.
+
+### Dialog Management System
+**CRITICAL DESIGN PATTERN**: All dialogs, overlays, dropdowns, and temporary UI elements use a centralized dialog manager for consistent behavior.
+
+**Dialog Manager Philosophy:**
+- Dialogs should close when users click outside them (on empty graph space)
+- Users shouldn't have to hunt for X buttons - click-outside-to-close is more efficient
+- Centralized management ensures proper cleanup and prevents memory leaks
+- All temporary UI elements register/unregister with the global manager
+
+**Implementation via `useDialogManager` Hook:**
+```jsx
+import { useDialog, useDialogManager } from '@/hooks/useDialogManager';
+
+// Component using a dialog
+const MyComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  // Register this dialog with the manager
+  useDialog(isOpen, () => setIsOpen(false));
+  
+  return (
+    <>
+      {isOpen && (
+        <div className="dialog">
+          {/* Dialog content */}
+        </div>
+      )}
+    </>
+  );
+};
+
+// Component that needs to close all dialogs
+const GraphView = () => {
+  const { closeAllDialogs } = useDialogManager();
+  
+  const handleBackgroundClick = () => {
+    closeAllDialogs(); // Closes all registered dialogs
+  };
+};
+```
+
+**Current Dialog Implementations:**
+- Graph selector dropdown in `Workspace.tsx`
+- Data Issues panel in `Workspace.tsx`
+- All modal dialogs (Create, Edit, Delete, Connect, etc.)
+- Right sidebar panels and overlays
+- Filter/search dropdowns in views
+
+**Dialog Requirements:**
+- Register all temporary UI with `useDialog` hook
+- Implement click-outside-to-close behavior
+- Clean up properly on unmount
+- Use React portals for z-index issues when needed
 
 ## Testing Strategy
 
-All packages use Vitest for testing:
+**Unit Tests (Vitest):**
+- Graph algorithms and priority calculations
+- Component logic and utility functions
+- GraphQL resolver behavior
+
+**E2E Tests (Playwright):**
+- Full user workflows across graph visualization
+- Error handling and recovery scenarios
+- Multi-browser compatibility
+- Screenshot comparisons for visual regression
 
+**Test Commands:**
 ```bash
-# Run all tests
-npm run test
+# Run specific test suites
+npm run test:e2e:core          # Core functionality
+npm run test:e2e:error-handling # Error scenarios
+playwright test --ui           # Interactive test runner
+```
+
+## Current Development Focus
+
+### UI/UX Design Language Standardization
+The project is actively establishing a cohesive design language across all views:
+
+**Layout Standards:**
+- **Left Sidebar**: Consistent navigation with collapsible sections
+- **Top Bar**: Graph selector (left) + view mode buttons (center) + actions (right)
+- **Transparent Backgrounds**: Semi-transparent panels with backdrop blur for "zen mode"
+- **Tropical Lagoon Animation**: Consistent animated background across all views
+
+**Visual Consistency:**
+- Standardized spacing, typography, and color schemes
+- Consistent hover states and interaction patterns
+- Unified modal and dropdown styling
+- Priority-based coloring system with animated elements
+
+### Graph vs View Conceptual Clarification
+
+**Graphs are Dynamic Filters, Not Static Views:**
+A "graph" in GraphDone represents a specific filtered view of your data, not just the visualization mode. Examples:
+
+- **Project Graph**: Filters to show only nodes related to "Mobile App Redesign"
+- **Team Graph**: Shows all work items assigned to or owned by the Design Team
+- **Epic Graph**: Filters to show tasks, outcomes, and milestones under a specific epic
+- **Custom User Graph**: Personal filtered view like "My High Priority Tasks"
+- **Custom Team Graph**: Shared filtered view like "This Sprint's Deliverables"
+
+**Graph Organization:**
+- Organized in hierarchical folders (Team/Personal/Templates)
+- Navigable via the prominent dropdown selector in the top bar
+- Each graph can be viewed in multiple visualization modes (graph, table, kanban, etc.)
+- The same underlying filtered dataset appears consistently across all view modes
+
+### Inline Editing Priority
+
+**Current UX Problem**: Users must open full edit dialogs to modify node properties
+**Target UX**: Click-to-edit any property directly from any view
+
+**Implementation Needs:**
+- **Table View**: Click on type, status, contributor, priority, due date cells to edit inline
+- **Graph View**: Click on node badges/indicators to edit properties without opening modal
+- **Kanban View**: Drag-and-drop status changes, click-to-edit other properties on cards
+- **Dashboard View**: Click on metrics/stats to filter or edit related items
+
+**Technical Requirements:**
+- Consistent inline editing components across all views
+- Real-time updates via GraphQL subscriptions
+- Optimistic UI updates with rollback on failure
+- Keyboard navigation support for accessibility
+
+## Development Philosophy
+
+From the codebase philosophy: "You are building tools that help everyone. Take it seriously, take pride in your work, don't fake tests, we are building open source software which will help people connect with each other and work together."
 
-# Run specific package tests
-npm run test --filter=@graphdone/core
-npm run test --filter=@graphdone/server
-npm run test --filter=@graphdone/web
+The future is decentralized, free, and compassionate. This guides all architectural decisions toward democratic coordination rather than hierarchical control.
 
-# Run with coverage
-npm run test -- --coverage
+## Current UI Evolution: Slick Dialog Revolution
+
+GraphDone is undergoing a **major UI transformation** moving away from heavy modal dialogs toward slick, contextual, inline-style editors. This shift prioritizes **immediate feedback, minimal context switching, and delightful micro-interactions**.
+
+### The New Dialog Paradigm: Select Relationship Type
+
+**🎯 Target Design Pattern**: The **Select Relationship Type dialog** (`InteractiveGraphVisualization.tsx:3520-3681`) represents the new gold standard for GraphDone dialogs:
+
+**Key Characteristics:**
+- **Contextual positioning**: Appears directly next to the element being edited
+- **Immediate visual feedback**: Real-time updates with smooth animations
+- **Minimal chrome**: No heavy borders, headers, or separate modals
+- **Rich micro-interactions**: Hover effects, scaling, gradient overlays
+- **Elegant selection states**: Current selection clearly indicated with animated pulse
+- **Sophisticated styling**: Gradient backgrounds, backdrop blur, modern rounded corners
+- **Professional animations**: Staggered reveal (30ms delays), scale transforms, smooth transitions
+
+```jsx
+// NEW PATTERN: Slick contextual editor
+{editingEdge && createPortal(
+  <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[999999]">
+    <div className="absolute bg-black/90 backdrop-blur-xl rounded-2xl border border-white/10"
+         style={{ transform: `translate(${position.x}px, ${position.y}px)` }}>
+      <div className="p-5">
+        {RELATIONSHIP_OPTIONS.map((option, index) => (
+          <button className="w-full flex items-center px-4 py-3 rounded-xl 
+                           bg-gradient-to-br from-blue-500/20 via-purple-500/10 to-blue-500/5
+                           hover:scale-105 transition-all duration-200"
+                  style={{ animationDelay: `${index * 30}ms` }}>
+            {/* Rich content with icons, descriptions, selection indicators */}
+          </button>
+        ))}
+      </div>
+    </div>
+  </div>,
+  document.body
+)}
 ```
 
-Current test files:
-- `packages/core/tests/` - Graph engine unit tests
-- `packages/server/tests/` - API integration tests
-- `packages/web/src/test/` - React component tests
+### The Old Pattern Being Replaced: Heavy Modal Dialogs
 
-## Database Schema
+**❌ Legacy Pattern**: Traditional modals like `EditNodeModal.tsx` with:
+- Full-screen overlays requiring dedicated focus
+- Heavy form structures with multiple sections
+- Save/Cancel button patterns
+- Context switching away from the graph
+- Verbose layouts with lots of whitespace
 
-Neo4j with these main node types and relationships:
-- **WorkItem**: Graph nodes with spherical coordinates and priorities  
-- **Edge**: Connections between nodes with types (DEPENDS_ON, BLOCKS, etc.)
-- **Contributor**: Users and AI agents in the system
-- **WORKS_ON**: Relationships between contributors and work items
+### Planned Dialog Transformations
 
-Key database operations:
-```bash
-npm run db:seed       # Add test data with 32 work items and relationships
-# Access Neo4j Browser at http://localhost:7474 (neo4j/graphdone_password)
+**🚀 Migration Strategy**: Replace heavy dialogs with contextual, inline-style editors:
+
+1. **Node Editing** → Context menu with expandable sections
+2. **Status Changes** → Dropdown selector with immediate effect
+3. **Type Selection** → Icon grid with hover previews  
+4. **Priority Adjustment** → Inline slider with real-time visual feedback
+5. **Connection Management** → Drag-and-drop with contextual relationship picker
+
+## Visual Language Consistency: The Calm Environment System
+
+GraphDone implements a **cohesive visual language** designed to create a calm, unified environment rather than aggressive full-screen takeovers. All pages follow consistent patterns to maintain visual harmony with the tropical lagoon background.
+
+### The Three-Section Top Bar Pattern
+
+**🎯 Standard Layout** (`Workspace.tsx:202-644`): Every page should implement this top bar structure:
+
+```jsx
+<div className="bg-gray-800/30 backdrop-blur-sm border-b border-gray-700/20">
+  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-3">
+    <div className="hidden lg:block relative w-full h-16 flex items-center">
+      {/* LEFT SECTION: Primary Action/Selector */}
+      <div className="absolute left-0 top-1/2 transform -translate-y-1/2 w-1/3">
+        {/* Graph selector, search, primary navigation */}
+      </div>
+
+      {/* CENTER SECTION: Mode/View Buttons */}
+      <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+        <div className="flex bg-gray-700/30 backdrop-blur-sm rounded-lg p-2 gap-1">
+          {/* Clear icon buttons for different views/modes */}
+        </div>
+      </div>
+
+      {/* RIGHT SECTION: Status/Actions */}
+      <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-1/3 flex justify-end">
+        {/* Connection status, data health, secondary actions */}
+      </div>
+    </div>
+  </div>
+</div>
 ```
 
-## Package-Specific Commands
+**Visual Characteristics:**
+- **Semi-transparent background**: `bg-gray-800/30 backdrop-blur-sm` allows lagoon animation to show through
+- **Clear sectioning**: Left (primary), Center (modes), Right (status/actions)
+- **Consistent height**: `h-16` for all top bars
+- **Subtle borders**: `border-b border-gray-700/20` for gentle separation
 
-### Core Package (`packages/core/`)
-```bash
-cd packages/core
-npm run build        # Build TypeScript
-npm run dev          # Watch mode
-npm run test         # Run Vitest tests
-npm run lint         # ESLint
-npm run typecheck    # TypeScript check
+### The Transparent Sidebar Pattern
+
+**🌊 Zen Mode Sidebar** (`Layout.tsx:74-155`): Left sidebar with generous transparency:
+
+```jsx
+<div className="bg-gray-800/95 backdrop-blur-sm border-r border-gray-700/50">
+  <div className="flex flex-col h-full">
+    {/* Logo section with consistent branding */}
+    <div className="flex items-center h-16 px-6 border-b border-gray-700">
+      <img src="/favicon.svg" alt="GraphDone Logo" className="h-8 w-8" />
+      <Link className="ml-3 text-xl font-bold text-green-300">GraphDone</Link>
+    </div>
+
+    {/* Navigation with modern tab styling */}
+    <nav className="flex-1 px-4 py-6 space-y-2">
+      {navigation.map((item) => (
+        <Link className={`group flex items-center px-3 py-2 rounded-lg transition-all ${
+          isActive 
+            ? 'bg-green-600/20 text-green-300 border-l-4 border-l-green-400' 
+            : 'text-gray-300 hover:bg-gray-700/50 hover:text-white'
+        }`}>
+          <Icon className="h-5 w-5" />
+          <span className="ml-3 font-medium">{item.name}</span>
+        </Link>
+      ))}
+    </nav>
+  </div>
+</div>
 ```
 
-### Server Package (`packages/server/`)
+**Design Principles:**
+- **High transparency**: `bg-gray-800/95` allows subtle animation visibility
+- **Backdrop blur**: Creates depth while maintaining readability
+- **Active state styling**: Green accent with left border for current page
+- **Consistent spacing**: `space-y-2` for navigation items, `px-4 py-6` for container
+
+### Universal Background Animation
+
+**🏝️ Tropical Lagoon System** (`Layout.tsx:31-53` & `index.css:6-175`):
+
+Every page includes the same calming background animation:
+```jsx
+<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative overflow-hidden">
+  <div className="lagoon-caustics">
+    <div className="caustic-layer caustic-layer-1"></div>
+    <div className="caustic-layer caustic-layer-2"></div>
+    {/* ... 10 caustic layers + 10 shimmer layers */}
+  </div>
+  {/* Page content with transparency to show animation */}
+</div>
+```
+
+**Animation Characteristics:**
+- **10 caustic layers**: Overlapping organic motion patterns
+- **10 shimmer layers**: Subtle light scattering effects
+- **Parameterized timing**: 40+ CSS custom properties for easy theming
+- **Performance optimized**: Uses `transform` and `opacity` only
+
+### Visual Consistency Requirements
+
+**🎨 All Pages Must Follow**: This visual language creates a cohesive environment where users feel they're in one calm application rather than jumping between different interfaces.
+
+**Implementation Checklist for New Pages:**
+- ✅ **Transparent top bar**: `bg-gray-800/30 backdrop-blur-sm` 
+- ✅ **Three-section layout**: Left (primary), Center (modes), Right (status)
+- ✅ **Consistent height**: `h-16` top bar
+- ✅ **Universal background**: Include lagoon caustic animation layers
+- ✅ **Transparent sidebar**: `bg-gray-800/95 backdrop-blur-sm` if applicable
+- ✅ **Green accent system**: Active states use `green-600/20` backgrounds
+- ✅ **Backdrop blur everywhere**: Maintain depth while showing animation
+- ✅ **Subtle borders**: Use `border-gray-700/20` for gentle separation
+
+**Current Implementation Status:**
+- ✅ **Workspace**: Full three-section pattern with center view modes
+- ✅ **Layout**: Universal sidebar with transparent design
+- ❌ **Ontology**: Needs top bar transparency and center mode buttons
+- ❌ **AI & Agents**: Needs visual language consistency
+- ❌ **Analytics**: Needs top bar three-section pattern
+- ❌ **Settings**: Needs transparent styling integration  
+- ❌ **Admin**: Needs visual consistency with workspace pattern
+- ❌ **Backend Status**: Needs top bar with right-aligned status indicators
+
+**Anti-Patterns to Avoid:**
+- ❌ **Solid backgrounds**: Blocks the calming lagoon animation
+- ❌ **Heavy modal takeovers**: Breaks the zen-like environment
+- ❌ **Inconsistent heights**: Creates jarring visual jumps
+- ❌ **Missing backdrop blur**: Reduces depth and visual hierarchy
+- ❌ **Different accent colors**: Breaks the green-focused brand consistency
+
+## Theme Pack Plugin Architecture
+
+GraphDone implements a **sophisticated theme system** designed for extensibility via plugin architecture:
+
+### Current Theme Structure
+
+**🎨 Centralized Theme System** (`workItemConstants.tsx:934-1049`):
+- **Multi-context gradients**: Different styles for table, card, kanban, dashboard views
+- **Static Tailwind classes**: Ensures proper compilation and performance
+- **Centralized color mapping**: Hex colors mapped to Tailwind utility classes
+- **View-specific styling**: Each view type gets optimized gradient patterns
+
+```typescript
+export type GradientStyle = 'table' | 'card' | 'kanban' | 'dashboard';
+
+export const getTypeGradientBackground = (type: WorkItemType, style: GradientStyle): string => {
+  const gradientMap: Record<string, string> = {
+    'green-500': 'bg-gradient-to-r from-green-500/15 via-green-500/5 to-green-500/15',
+    'blue-500': 'bg-gradient-to-r from-blue-500/15 via-blue-500/5 to-blue-500/15',
+    // ... full color palette
+  };
+  return gradientMap[tailwindColor] || fallback;
+};
+```
+
+### Tropical Lagoon Animation System
+
+**🌊 CSS Custom Properties** (`index.css:6-43`):
+- **Parameterized animations**: Easy to modify via CSS variables
+- **Layer-based caustics**: Multiple overlapping animation layers
+- **Configurable timing**: Independent duration, amplitude, opacity controls
+- **Theme-agnostic structure**: Animation parameters separate from color schemes
+
+```css
+:root {
+  --lagoon-1-duration: 45s;
+  --lagoon-1-x-amplitude: 20%;
+  --lagoon-shimmer-opacity-max: 0.24;
+  /* ... 40+ customizable parameters */
+}
+```
+
+### Plugin Architecture Readiness
+
+**🔌 Theme Pack Extensions** (planned):
+```typescript
+interface ThemePackManifest {
+  name: string;
+  version: string;
+  gradients: GradientStyleMap;
+  animations: AnimationConfigMap;
+  customProperties: CSSCustomPropertyMap;
+  components?: ComponentOverrideMap;
+}
+
+// Load theme pack dynamically
+const loadThemePack = async (themePack: ThemePackManifest) => {
+  // Inject CSS custom properties
+  // Override gradient mappings
+  // Apply component style overrides
+};
+```
+
+## Next Priority Tasks
+
+### 1. Graph View Architecture Refactoring (URGENT - 4,015 lines)
+- [ ] **Phase 1: Extract Core GraphEngine** - Pure D3 visualization without UI state
+- [ ] **Phase 2: Extract MiniMapPlugin** - Swappable themes/backgrounds as plugin
+- [ ] **Phase 3: Extract NodeEditorPlugin** - Contextual editing as composition
+- [ ] **Phase 4: Extract RelationshipSelectorPlugin** - Slick selector as plugin
+- [ ] **Phase 5: Create Plugin System** - Renderer with priority/z-index management
+- [ ] **Phase 6: Theme Integration** - Plugin-aware theme switching
+
+### 2. Complete Node Editing Simplification (Critical Path)
+- [ ] **Replace EditNodeModal with contextual editor** using Select Relationship Type pattern
+- [ ] Implement inline property editing (status, type, priority) in graph view
+- [ ] Add drag-to-reposition for contextual dialogs
+- [ ] Test click-outside-to-close behavior with dialog manager integration
+
+### 3. Slick Dialog Migration Strategy
+- [ ] **Create reusable SlickSelector component** based on Select Relationship Type pattern
+- [ ] **Port node context menu** from EditNodeModal to contextual overlay
+- [ ] **Implement inline status changer** with immediate visual feedback
+- [ ] **Add priority slider widget** with real-time node repositioning
+- [ ] **Create type selector grid** with icon hover previews and instant updates
+
+### 4. Clean Architecture Guidelines
+
+**🏗️ Anti-Pattern: Monolithic Components**
+- ❌ Components over 500 lines require architectural review
+- ❌ More than 10 useState hooks in a single component
+- ❌ Mixing UI state with business logic in one place
+- ❌ Global window functions for component communication
+
+**✅ Recommended Patterns**:
+- **Composition over Configuration**: Build complex UIs from small, focused components
+- **Plugin Architecture**: Major features as swappable plugins with clean interfaces
+- **Theme Awareness**: All UI elements consume theme context for swappable styling
+- **Event-Driven Communication**: Use context and callbacks, not global state
+- **Single Responsibility**: Each component has one clear purpose
+
+## File Structure & Documentation Standards
+
+### 🗂️ Complete Modular Architecture File Structure
+
+**Root Level Organization:**
+```
+packages/web/src/
+├── components/
+│   ├── graph/                    # Complex feature modules
+│   ├── ui/                       # Simple reusable components  
+│   └── slick/                    # Slick dialog components
+├── pages/                        # Route-level page components
+├── hooks/                        # Shared business logic hooks
+├── contexts/                     # React context providers
+├── themes/                       # Theme configurations
+├── types/                        # TypeScript type definitions
+└── utils/                        # Pure utility functions
+```
+
+### 🎯 Graph Feature Module Structure (Reference Pattern)
+
+```
+packages/web/src/components/graph/
+├── index.ts                      # Public API exports
+├── README.md                     # Feature documentation
+├── GraphView.tsx                 # Composition root (< 100 lines)
+├── GraphEngine.tsx               # Core D3 logic (< 300 lines)  
+├── GraphProvider.tsx             # Context & state management
+├── GraphContext.ts               # TypeScript context definitions
+├── hooks/
+│   ├── index.ts                  # Hook exports
+│   ├── useGraphState.ts          # State management (< 150 lines)
+│   ├── useGraphTheme.ts          # Theme switching logic
+│   ├── useGraphEvents.ts         # Event handling logic
+│   └── useGraphAnimation.ts      # Animation utilities
+├── plugins/
+│   ├── index.ts                  # Plugin registry & exports
+│   ├── PluginRenderer.tsx        # Plugin orchestration
+│   ├── BasePlugin.types.ts       # Plugin interface definitions
+│   ├── MiniMapPlugin/
+│   │   ├── index.ts              # Plugin export
+│   │   ├── MiniMapPlugin.tsx     # Main plugin component (< 200 lines)
+│   │   ├── MiniMapCanvas.tsx     # Canvas rendering logic
+│   │   ├── MiniMapControls.tsx   # Interactive controls
+│   │   ├── MiniMapTheme.types.ts # Plugin-specific themes
+│   │   └── README.md             # Plugin documentation
+│   ├── NodeEditorPlugin/
+│   │   ├── index.ts
+│   │   ├── NodeEditorPlugin.tsx  # Slick editor component
+│   │   ├── PropertyEditors/      # Individual property editors
+│   │   │   ├── StatusEditor.tsx
+│   │   │   ├── TypeEditor.tsx
+│   │   │   └── PriorityEditor.tsx
+│   │   └── README.md
+│   └── RelationshipSelectorPlugin/
+│       ├── index.ts
+│       ├── RelationshipSelectorPlugin.tsx
+│       ├── RelationshipOption.tsx
+│       └── README.md
+├── themes/
+│   ├── index.ts                  # Theme exports
+│   ├── GraphTheme.types.ts       # Theme interface definitions
+│   ├── TropicalTheme.ts          # Default lagoon theme
+│   ├── CosmicTheme.ts            # Space theme example
+│   └── MinimalTheme.ts           # Clean theme example
+├── utils/
+│   ├── graphCalculations.ts      # Pure calculation functions
+│   ├── d3Helpers.ts              # D3 utility functions
+│   └── pluginHelpers.ts          # Plugin development utilities
+└── types/
+    ├── Graph.types.ts            # Core graph interfaces
+    ├── Plugin.types.ts           # Plugin system types
+    └── Theme.types.ts            # Theme system types
+```
+
+### 📋 Component Documentation Requirements
+
+**Every component must include:**
+
+#### 1. Component Header Documentation
+```typescript
+/**
+ * MiniMapPlugin - Interactive mini-map overlay for graph navigation
+ * 
+ * @feature Graph Navigation
+ * @complexity Medium (150 lines)
+ * @dependencies GraphContext, Theme System
+ * @plugin-priority 10
+ * 
+ * Provides real-time mini-map with:
+ * - Node positioning visualization
+ * - Viewport indicator with pan/zoom
+ * - Swappable background themes
+ * - Click-to-navigate functionality
+ * 
+ * @example
+ * ```tsx
+ * const plugins = [
+ *   {
+ *     ...MiniMapPlugin,
+ *     config: { position: 'bottom-right', theme: 'cosmic' }
+ *   }
+ * ];
+ * ```
+ */
+```
+
+#### 2. Interface Documentation
+```typescript
+/**
+ * Plugin configuration interface for MiniMap
+ */
+interface MiniMapPluginConfig {
+  /** Position of mini-map overlay */
+  position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Size variant */
+  size: 'small' | 'medium' | 'large';
+  /** Theme override */
+  theme?: Partial<MiniMapTheme>;
+  /** Enable/disable specific features */
+  features: {
+    nodeLabels: boolean;
+    gridLines: boolean;
+    panControls: boolean;
+  };
+}
+```
+
+#### 3. README.md for Each Module
+```markdown
+# MiniMapPlugin
+
+Interactive navigation overlay for the graph visualization system.
+
+## Features
+- Real-time node position tracking
+- Viewport visualization with pan/zoom controls
+- Themeable backgrounds (lagoon, space, minimal)
+- Click-to-navigate functionality
+
+## Usage
+```tsx
+import { MiniMapPlugin } from './plugins/MiniMapPlugin';
+
+const graphPlugins = [MiniMapPlugin];
+```
+
+## Theme Configuration
+```typescript
+const customTheme: MiniMapTheme = {
+  background: 'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
+  nodeColors: { TASK: '#10b981', OUTCOME: '#3b82f6' },
+  gridPattern: 'dots'
+};
+```
+
+## Dependencies
+- GraphContext for viewport state
+- Theme system for styling
+- D3 for coordinate transformations
+
+## Performance Notes
+- Uses requestAnimationFrame for smooth updates
+- Debounced resize handling
+- Optimized SVG rendering
+```
+
+### 🔌 Plugin Development Guidelines
+
+#### Plugin Interface Contract
+```typescript
+interface GraphPlugin {
+  /** Unique plugin identifier */
+  id: string;
+  /** Display name for plugin management UI */
+  name: string;
+  /** Plugin description */
+  description: string;
+  /** Semantic version */
+  version: string;
+  /** Z-index priority for overlay ordering */
+  priority: number;
+  /** Render function with access to graph context */
+  render: (context: GraphContext) => React.ReactNode;
+  /** Plugin configuration schema */
+  configSchema?: PluginConfigSchema;
+  /** Cleanup function for unmounting */
+  cleanup?: () => void;
+  /** Plugin dependencies */
+  dependencies?: string[];
+}
+```
+
+#### Plugin Development Checklist
+- ✅ **Single Responsibility**: Plugin does one thing well
+- ✅ **Theme Aware**: Consumes theme context for styling
+- ✅ **Size Limit**: Individual plugins < 200 lines
+- ✅ **Documentation**: README.md with usage examples
+- ✅ **Type Safety**: Full TypeScript interfaces
+- ✅ **Performance**: No unnecessary re-renders
+- ✅ **Accessibility**: ARIA labels and keyboard navigation
+- ✅ **Testing**: Unit tests for plugin logic
+
+### 📏 File Size Limits & Guidelines
+
+**Component Size Limits:**
+- **Core Engine**: < 300 lines (pure D3 visualization)
+- **Composition Root**: < 100 lines (plugin orchestration)
+- **Individual Plugins**: < 200 lines (focused functionality)
+- **Hook Files**: < 150 lines (single concern)
+- **Theme Files**: < 100 lines (configuration only)
+
+**When to Split Components:**
+- More than 10 useState hooks → Extract custom hook
+- More than 5 useEffect hooks → Consider splitting concerns
+- More than 200 lines JSX → Break into sub-components
+- Complex conditional rendering → Extract conditional components
+
+### 🚀 Implementation Timeline & Migration Strategy
+
+**Step 1: Preparation**
+- Create `components/graph/` directory structure
+- Set up plugin type definitions and interfaces
+- Create base theme system
+
+**Step 2: Core Engine Extraction**
+- Extract pure D3 logic to `GraphEngine.tsx`
+- Remove UI state management from visualization
+- Create `GraphProvider` context system
+
+**Step 3: Plugin System Foundation**
+- Build `PluginRenderer` component
+- Implement plugin priority/z-index system
+- Create plugin development utilities
+
+**Step 4: Major Plugin Extraction**
+- Convert mini-map to `MiniMapPlugin`
+- Convert node editing to `NodeEditorPlugin`  
+- Convert relationship selector to plugin
+
+**Step 5: Theme Integration**
+- Connect plugins to theme system
+- Test theme switching functionality
+- Document theme development
+
+**Step 6: Testing & Documentation**
+- Write plugin unit tests
+- Complete all README.md files
+- Validate architectural goals
+
+
+### 5. Theme Pack System Implementation
+- [ ] **Extract theme configuration** to separate theme manifest files
+- [ ] **Implement dynamic theme loading** mechanism
+- [ ] **Create theme pack validation** and hot-reloading system
+- [ ] **Document theme pack creation guide** for community contributions
+- [ ] **Build theme pack marketplace** integration points
+
+### 6. Visual Language Consistency (High Priority)
+- [x] **Workspace**: Implement complete three-section top bar pattern
+- [x] **Layout**: Universal transparent sidebar with lagoon background
+- [ ] **Ontology page**: Add transparent top bar with three-section layout
+- [ ] **AI & Agents page**: Implement visual consistency with workspace pattern
+- [ ] **Analytics page**: Add top bar three-section layout with center mode buttons
+- [ ] **Settings page**: Integrate transparent styling and backdrop blur
+- [ ] **Admin page**: Apply workspace visual language consistently  
+- [ ] **Backend Status page**: Add top bar with right-aligned status indicators
+
+### 7. Design Language Final Polish
+- [x] Transform Dashboard with modern card-based layout and themed gradients
+- [x] Transform RightSidebar with dynamic CardView styling
+- [x] Standardize hover effects across project
+- [ ] **Migrate all remaining heavy modals** to slick contextual patterns
+- [ ] **Ensure consistent backdrop blur** across all UI elements
+- [ ] **Audit for solid backgrounds** that block lagoon animation
+
+### 8. Authentication System Enhancement
+- [x] Remove PostgreSQL/Prisma dependencies
+- [x] Implement direct Neo4j authentication
+- [ ] Test and complete GitHub and LinkedIn OAuth providers (code exists but needs testing)
+- [ ] Add user profile management UI using slick dialog patterns
+- [ ] Implement team invitation flow with contextual overlays
+- [ ] Add role-based access control
+
+### 9. Graph Conceptual Model Clarity
+- [ ] Improve graph selector to show filter details (not just name)
+- [ ] Add filter indicators showing what criteria define each graph
+- [ ] Implement graph templates for common filter patterns
+- [ ] Better onboarding to explain graphs-as-filters concept
+
+### 10. Performance and Scalability
+- [ ] Optimize D3.js force simulation for large graphs
+- [ ] Implement virtual scrolling in table and card views
+- [ ] Add pagination for GraphQL queries
+- [ ] Optimize bundle size with code splitting
+- [ ] Add service worker for offline support
+
+## Graph View Architecture Crisis & Refactoring Strategy
+
+### 🚨 Current Architectural Problems
+
+**The Monolithic Graph Component Crisis:**
+- **4,015 lines** in `InteractiveGraphVisualization.tsx`
+- **50+ hooks** (useState, useEffect, useMutation, useQuery)
+- **25+ state variables** managing everything from modals to mini-maps
+- **Massive render method** with complex conditional JSX
+- **Tight coupling** between D3 visualization, UI overlays, and business logic
+- **Global window functions** for communication between components
+
+**Specific Issues:**
+```typescript
+// Current state explosion in InteractiveGraphVisualization.tsx:199-225
+const [nodeMenu, setNodeMenu] = useState<NodeMenuState>({...});
+const [edgeMenu, setEdgeMenu] = useState<EdgeMenuState>({...});
+const [isConnecting, setIsConnecting] = useState(false);
+const [selectedRelationType, setSelectedRelationType] = useState<RelationshipType>('DEFAULT_EDGE');
+const [showDeleteModal, setShowDeleteModal] = useState(false);
+const [showCreateNodeModal, setShowCreateNodeModal] = useState(false);
+const [showNodeDetailsModal, setShowNodeDetailsModal] = useState(false);
+const [showConnectModal, setShowConnectModal] = useState(false);
+// ... 15+ more modal states
+const [showDataHealth, setShowDataHealth] = useState(false);
+const [selectedNode, setSelectedNode] = useState<WorkItem | null>(null);
+const [selectedEdge, setSelectedEdge] = useState<WorkItemEdge | null>(null);
+// ... Mini-map communication via global window functions
+```
+
+### 🏗️ Proposed Modular Architecture
+
+**Core Principle**: **Composition over Configuration** with **Plugin-Style Architecture**
+
+#### 1. Base Graph Engine (Core Visualization)
+
+```typescript
+// packages/web/src/components/graph/GraphEngine.tsx
+interface GraphEngineProps {
+  nodes: WorkItem[];
+  edges: WorkItemEdge[];
+  onNodeSelect?: (node: WorkItem) => void;
+  onEdgeSelect?: (edge: WorkItemEdge) => void;
+  onBackgroundClick?: (position: {x: number, y: number}) => void;
+  children?: React.ReactNode; // For overlay plugins
+}
+
+const GraphEngine = ({ nodes, edges, onNodeSelect, onEdgeSelect, children }: GraphEngineProps) => {
+  // Pure D3 visualization logic only
+  // Emit events, don't manage UI state
+  // Provide context for position/zoom state
+};
+```
+
+#### 2. Plugin System for Overlays
+
+```typescript
+// packages/web/src/components/graph/plugins/
+interface GraphPlugin {
+  id: string;
+  render: (context: GraphContext) => React.ReactNode;
+  priority: number; // z-index ordering
+}
+
+interface GraphContext {
+  selectedNode: WorkItem | null;
+  selectedEdge: WorkItemEdge | null;
+  viewportTransform: Transform;
+  graphBounds: Bounds;
+  theme: ThemeConfig;
+}
+```
+
+**Plugin Examples:**
+```typescript
+// MiniMapPlugin.tsx - Swappable themes/backgrounds
+const MiniMapPlugin: GraphPlugin = {
+  id: 'minimap',
+  priority: 10,
+  render: (context) => (
+    <MiniMap 
+      context={context}
+      theme={context.theme.miniMap} // Swappable backgrounds
+      position="bottom-right"
+    />
+  )
+};
+
+// NodeContextMenuPlugin.tsx
+const NodeContextMenuPlugin: GraphPlugin = {
+  id: 'node-menu',
+  priority: 100,
+  render: (context) => context.selectedNode ? (
+    <SlickNodeEditor 
+      node={context.selectedNode}
+      position={getNodeScreenPosition(context.selectedNode)}
+      theme={context.theme.nodeEditor}
+    />
+  ) : null
+};
+
+// RelationshipSelectorPlugin.tsx  
+const RelationshipSelectorPlugin: GraphPlugin = {
+  id: 'relationship-selector',
+  priority: 50,
+  render: (context) => context.isConnecting ? (
+    <SlickRelationshipSelector
+      theme={context.theme.relationshipSelector}
+      position="center-top"
+    />
+  ) : null
+};
+```
+
+#### 3. Composed Graph View
+
+```typescript
+// packages/web/src/components/graph/GraphView.tsx
+const GraphView = ({ theme = defaultTheme }: { theme?: GraphTheme }) => {
+  const plugins = [
+    MiniMapPlugin,
+    NodeContextMenuPlugin, 
+    RelationshipSelectorPlugin,
+    DataHealthPlugin,
+    // Easy to add/remove/reorder
+  ];
+
+  return (
+    <GraphProvider theme={theme}>
+      <GraphEngine>
+        <PluginRenderer plugins={plugins} />
+      </GraphEngine>
+    </GraphProvider>
+  );
+};
+```
+
+#### 4. Theme-Aware Plugin System
+
+```typescript
+// packages/web/src/themes/GraphTheme.ts
+interface GraphTheme {
+  background: 'lagoon' | 'space' | 'minimal';
+  miniMap: {
+    background: string;
+    nodeColors: Record<WorkItemType, string>;
+    gridPattern: 'dots' | 'lines' | 'none';
+  };
+  nodeEditor: {
+    backdropBlur: string;
+    backgroundColor: string;
+    borderRadius: string;
+  };
+  relationshipSelector: {
+    layout: 'vertical' | 'horizontal' | 'grid';
+    animations: boolean;
+  };
+}
+
+// Swappable theme packs
+const themes = {
+  tropical: { background: 'lagoon', miniMap: { background: 'caustic-blue' } },
+  cosmic: { background: 'space', miniMap: { background: 'star-field' } },
+  minimal: { background: 'minimal', miniMap: { background: 'clean-grid' } }
+};
+```
+
+#### 5. Clean State Management
+
+```typescript
+// packages/web/src/hooks/useGraphState.ts
+const useGraphState = () => {
+  const [selectedNode, setSelectedNode] = useState<WorkItem | null>(null);
+  const [selectedEdge, setSelectedEdge] = useState<WorkItemEdge | null>(null);
+  const [viewportTransform, setViewportTransform] = useState<Transform>(identity);
+  
+  // Centralized state, distributed via context
+  return {
+    selectedNode, setSelectedNode,
+    selectedEdge, setSelectedEdge,
+    viewportTransform, setViewportTransform,
+    // Clean event handlers
+    handleNodeSelect: (node: WorkItem) => setSelectedNode(node),
+    handleEdgeSelect: (edge: WorkItemEdge) => setSelectedEdge(edge),
+    handleBackgroundClick: () => {
+      setSelectedNode(null);
+      setSelectedEdge(null);
+    }
+  };
+};
+```
+
+### 🎯 Refactoring Strategy
+
+**Phase 1: Extract Core Engine**
+- Move pure D3 visualization logic to `GraphEngine.tsx`
+- Remove all UI state management from D3 component
+- Create clean event-based API
+
+**Phase 2: Plugin-ify Major Features**
+- Extract mini-map as `MiniMapPlugin`
+- Extract node editing as `NodeEditorPlugin`
+- Extract relationship selector as `RelationshipPlugin`
+
+**Phase 3: Theme System Integration**
+- Create swappable theme configurations
+- Allow plugins to consume theme context
+- Enable runtime theme switching
+
+**Phase 4: Advanced Composition**
+- Plugin dependency system
+- Plugin configuration UI
+- User-customizable plugin layouts
+
+## Implementation Guidelines for Slick Dialogs
+
+**🎯 When creating new dialogs, follow these patterns:**
+
+### ✅ DO: Slick Contextual Pattern
+```jsx
+// Position near the element being edited
+const SlickPropertyEditor = ({ position, onClose, initialValue }) => {
+  return createPortal(
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[999999]">
+      <div 
+        className="absolute bg-black/90 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl"
+        style={{ transform: `translate(${position.x}px, ${position.y}px)` }}
+      >
+        {/* Immediate visual feedback */}
+        {options.map((option, index) => (
+          <button
+            key={option.id}
+            className="hover:scale-105 transition-all duration-200"
+            style={{ animationDelay: `${index * 30}ms` }}
+            onClick={() => updateImmediately(option)}
+          >
+            {/* Rich content with gradients */}
+          </button>
+        ))}
+      </div>
+    </div>,
+    document.body
+  );
+};
+```
+
+### ❌ DON'T: Heavy Modal Pattern
+```jsx
+// Avoid full-screen modals for simple property changes
+const HeavyEditModal = ({ isOpen, onSave, onCancel }) => (
+  <div className="fixed inset-0 bg-black/75 z-50">
+    <div className="max-w-md mx-auto mt-20 bg-white rounded-lg">
+      <form onSubmit={handleSubmit}>
+        {/* Multiple form fields */}
+        <button type="submit">Save Changes</button>
+        <button type="button" onClick={onCancel}>Cancel</button>
+      </form>
+    </div>
+  </div>
+);
+```
+
+**Key Differences:**
+- **Positioning**: Near element vs center screen
+- **Feedback**: Immediate vs delayed (save button)
+- **Visual weight**: Minimal chrome vs heavy borders/headers
+- **Interaction model**: Direct manipulation vs form submission
+
+## Common Gotchas
+
+1. **Neo4j Connection**: Ensure Docker is running and Neo4j is accessible on port 7687
+2. **Dialog Positioning**: Always use `createPortal(element, document.body)` for overlays to avoid z-index conflicts
+3. **Slick Dialog z-index**: Use `z-[999999]` string value for maximum overlay priority
+4. **Dialog Manager Integration**: Register all dialogs with `useDialog` hook for click-outside-to-close
+5. **Immediate Updates**: For slick dialogs, update both local state and GraphQL immediately (optimistic updates)
+6. **Animation Performance**: Use `transform` and `opacity` for animations, avoid layout-affecting properties
+7. **Gradient Classes**: Use static Tailwind classes from gradient maps, not dynamic interpolation
+8. **Backdrop Blur**: Combine `backdrop-blur-sm` with semi-transparent backgrounds for depth
+9. **Hot Reloading**: Vite HMR requires manual refresh after GraphQL schema changes
+10. **D3.js Integration**: Force simulation requires careful cleanup in React useEffect hooks
+
+## 🚨 Production Readiness & Security
+
+### **CRITICAL FOR RELEASE**: TLS/HTTPS Implementation
+- **Documentation**: [docs/security/tls-implementation-plan.md](./docs/security/tls-implementation-plan.md)
+- **Current Status**: Development HTTP only - **NOT PRODUCTION READY**
+- **Security Gaps**: Hardcoded passwords, no TLS, default secrets
+
+### **Current Insecure Configuration**:
 ```bash
-cd packages/server
-npm run dev          # Start with hot reload (tsx)
-npm run build        # Build TypeScript
-npm run start        # Start production server
-npm run db:seed      # Seed Neo4j database with test data
-# Neo4j Browser available at http://localhost:7474
+# These MUST be fixed before production:
+NEO4J_AUTH: neo4j/graphdone_password          # Hardcoded in docker-compose.yml
+JWT_SECRET = 'your-secret-key-change-in-production'  # Default in auth.ts
+CORS_ORIGIN=http://localhost:3127             # HTTP only, no encryption
 ```
 
-### Web Package (`packages/web/`)
+### **Required Security Implementation**:
+1. **HTTPS/TLS encryption** for all traffic (web, API, WebSocket)
+2. **Secure secrets management** (Docker secrets, environment variables)
+3. **Free SSL certificates** without browser warnings (Let's Encrypt/Caddy)
+4. **Database encryption** (Neo4j + Redis TLS)
+5. **Production security validation** (automated security checklist)
+
+**Next Step**: Follow [TLS Implementation Plan](./docs/security/tls-implementation-plan.md) for complete security roadmap.
+
+## URLs and Services
+
+**Development Environment (INSECURE - Development Only):**
+- Web Application: http://localhost:3127  ⚠️ HTTP only
+- GraphQL API: http://localhost:4127/graphql  ⚠️ HTTP only
+- Health Check: http://localhost:4127/health  ⚠️ HTTP only
+- Neo4j Browser: http://localhost:7474  ⚠️ HTTP only
+- MCP Server: http://localhost:3128 (optional)
+
+**Production Environment (After TLS Implementation):**
+- Web Application: https://your-domain.com  ✅ HTTPS
+- GraphQL API: https://your-domain.com/graphql  ✅ HTTPS
+- WebSocket: wss://your-domain.com/graphql  ✅ Secure WebSocket
+- Neo4j Browser: https://your-domain.com:7473  ✅ HTTPS
+
+## Claude Code Integration
+
+The MCP server in `packages/mcp-server/` provides natural language access to your GraphDone graph:
+
 ```bash
-cd packages/web
-npm run dev          # Start Vite dev server
-npm run build        # Build for production
-npm run preview      # Preview production build
-npm run test         # Run Vitest tests
-```
-- you are building tools that help everyone. take it seriously, take pride in your work, don't fake tests, we are building open source software which will help people connect with each other and work together.
-- Remember this and apply it towards your daily philosophy: The future is decentralized. The future is free. The future is compassionate. You need to take care of others regardless of their ability to help you. Dogs are as alive as people are and have a whole universe of their own, all creatures matter. So we work, as hard as we can, every day, honestly and steadily, building friendships and networks of humble experts, to help all living creatures enjoy a fulfilling life without unnecessary suffering.
\ No newline at end of file
+# Build and register MCP server
+./scripts/setup-mcp.sh
+
+# Manual registration
+cd packages/mcp-server && npm run build
+claude mcp add graphdone node dist/index.js \
+  --env "NEO4J_URI=bolt://localhost:7687" \
+  --env "NEO4J_USER=neo4j" \
+  --env "NEO4J_PASSWORD=graphdone_password"
+```
\ No newline at end of file
diff --git a/README.md b/README.md
index f30660f9..e0e00d8b 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,8 @@
 ![Version](https://img.shields.io/badge/version-0.2.2--alpha-orange.svg)
 ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
 
+> 🚨 **PRODUCTION SECURITY WARNING**: This project is currently configured for development only with HTTP and hardcoded passwords. See [TLS Implementation Plan](./docs/security/tls-implementation-plan.md) for required security changes before production deployment.
+
 ## What is GraphDone?
 
 GraphDone reimagines project management as a collaborative graph where work flows through natural dependencies rather than artificial hierarchies. It's designed for high-quality individual contributors who thrive on autonomy, teams that include AI agents, and organizations ready to embrace democratic coordination.
@@ -257,6 +259,7 @@ Anyone can propose ideas and assign personal priority. The community validates t
 - 🎯 **[Project Philosophy](./docs/philosophy.md)** - Core beliefs and design principles  
 - 🚀 **[Getting Started Guide](./docs/guides/getting-started.md)** - Step-by-step setup and first steps
 - 🏗️ **[Architecture Overview](./docs/guides/architecture-overview.md)** - System design and technical decisions
+- 🤖 **[AI Agents Integration](./docs/guides/ai-agents-integration.md)** - Multi-agent AI system with tamagotchi-style companions
 - 👥 **[User Flows](./docs/guides/user-flows.md)** - How teams actually use GraphDone
 - 🔌 **[API Documentation](./docs/api/graphql.md)** - GraphQL schema and integration guide
 - 🚀 **[Deployment Guide](./docs/deployment/README.md)** - Self-hosted and cloud deployment options
diff --git a/deployment/docker-compose.dev.yml b/deployment/docker-compose.dev.yml
index 9b07763a..c4c6774d 100644
--- a/deployment/docker-compose.dev.yml
+++ b/deployment/docker-compose.dev.yml
@@ -1,74 +1,167 @@
-version: '3.8'
+name: graphdone-dev
+
+networks:
+  graphdone-internal:
+    driver: bridge
 
 services:
-  postgres:
-    image: postgres:15-alpine
+  graphdone-neo4j:
+    container_name: graphdone-neo4j
+    image: neo4j:5.26.12
     environment:
-      POSTGRES_DB: graphdone_dev
-      POSTGRES_USER: graphdone
-      POSTGRES_PASSWORD: graphdone_password
-    ports:
-      - "5432:5432"
+      NEO4J_AUTH: neo4j/graphdone_password
+      NEO4J_PLUGINS: '["graph-data-science", "apoc"]'
+      NEO4J_dbms_security_procedures_unrestricted: "gds.*,apoc.*"
+      NEO4J_dbms_security_procedures_allowlist: "gds.*,apoc.*"
+    # No external ports - internal network only
+    expose:
+      - "7474"
+      - "7687"
     volumes:
-      - postgres_dev_data:/var/lib/postgresql/data
-      - ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init-db.sql
+      - neo4j_data:/data
+      - logs:/logs
+    networks:
+      - graphdone-internal
+    # Security configurations
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - DAC_OVERRIDE
+      - FOWNER
+      - SETGID
+      - SETUID
+    restart: unless-stopped
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U graphdone"]
+      test: ["CMD", "cypher-shell", "-u", "neo4j", "-p", "graphdone_password", "RETURN 1"]
       interval: 10s
       timeout: 5s
       retries: 5
+      start_period: 30s
 
-  redis:
-    image: redis:7-alpine
-    ports:
-      - "6379:6379"
+  graphdone-redis:
+    container_name: graphdone-redis
+    image: redis:8-alpine
+    # No external ports - internal network only
+    expose:
+      - "6379"
     volumes:
-      - redis_dev_data:/data
+      - redis_data:/data
+    networks:
+      - graphdone-internal
+    # Security configurations
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - SETGID
+      - SETUID
+    restart: unless-stopped
+    user: "999:999"  # Redis user
+    read_only: true
+    tmpfs:
+      - /tmp:noexec,nosuid,size=100m
     healthcheck:
       test: ["CMD", "redis-cli", "ping"]
       interval: 10s
       timeout: 5s
       retries: 5
+      start_period: 10s
 
-  server-dev:
+  graphdone-api:
+    container_name: graphdone-api
     build:
-      context: .
+      context: ..
       dockerfile: packages/server/Dockerfile.dev
     environment:
       - NODE_ENV=development
-      - DATABASE_URL=postgresql://graphdone:graphdone_password@postgres:5432/graphdone_dev
-      - PORT=4000
-      - CORS_ORIGIN=http://localhost:3000
-    ports:
-      - "4000:4000"
+      - NEO4J_URI=bolt://graphdone-neo4j:7687
+      - NEO4J_USER=neo4j
+      - NEO4J_PASSWORD=graphdone_password
+      - PORT=4127
+      - CORS_ORIGIN=http://localhost:3127
+    # No external ports - internal network only
+    expose:
+      - "4127"
     depends_on:
-      postgres:
+      graphdone-neo4j:
         condition: service_healthy
-      redis:
+      graphdone-redis:
         condition: service_healthy
     volumes:
-      - .:/app
-      - /app/node_modules
-      - /app/packages/server/node_modules
-    command: npm run dev
+      - logs:/app/logs
+      - sqlite_auth_data:/app/data
+    networks:
+      - graphdone-internal
+    # Security configurations
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - DAC_OVERRIDE
+      - FOWNER
+      - SETGID
+      - SETUID
+    restart: unless-stopped
+    user: "1001:1001"  # Non-root user
+    tmpfs:
+      - /tmp:noexec,nosuid,size=100m
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:4127/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
 
-  web-dev:
+  graphdone-web:
+    container_name: graphdone-web
     build:
-      context: .
+      context: ..
       dockerfile: packages/web/Dockerfile.dev
     environment:
-      - VITE_GRAPHQL_URL=http://localhost:4000/graphql
-      - VITE_GRAPHQL_WS_URL=ws://localhost:4000/graphql
+      - PORT=3127
+      - VITE_PROXY_TARGET=http://graphdone-api:4127
+      - VITE_GRAPHQL_URL=http://localhost:3127/graphql
+      - VITE_GRAPHQL_WS_URL=ws://localhost:3127/graphql
+    # Only expose web UI to host
     ports:
-      - "3000:3000"
+      - "3127:3127"
     depends_on:
-      - server-dev
+      - graphdone-api
     volumes:
-      - .:/app
-      - /app/node_modules
-      - /app/packages/web/node_modules
-    command: npm run dev
+      - logs:/app/logs
+    networks:
+      - graphdone-internal
+    # Security configurations
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - DAC_OVERRIDE
+      - FOWNER
+      - SETGID
+      - SETUID
+    restart: unless-stopped
+    user: "1001:1001"  # Non-root user
+    tmpfs:
+      - /tmp:noexec,nosuid,size=100m
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3127"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
 
 volumes:
-  postgres_dev_data:
-  redis_dev_data:
\ No newline at end of file
+  neo4j_data:
+  redis_data:
+  logs:
+  sqlite_auth_data:
\ No newline at end of file
diff --git a/deployment/docker-compose.yml b/deployment/docker-compose.yml
index 80cbbf69..664049a5 100644
--- a/deployment/docker-compose.yml
+++ b/deployment/docker-compose.yml
@@ -1,6 +1,9 @@
+name: graphdone
+
 services:
-  neo4j:
-    image: neo4j:5.15-community
+  graphdone-neo4j:
+    container_name: graphdone-neo4j-prod
+    image: neo4j:5.26.12
     environment:
       NEO4J_AUTH: neo4j/graphdone_password
       NEO4J_PLUGINS: '["graph-data-science", "apoc"]'
@@ -11,15 +14,16 @@ services:
       - "7687:7687"  # Bolt
     volumes:
       - neo4j_data:/data
-      - neo4j_logs:/logs
+      - logs:/logs
     healthcheck:
       test: ["CMD", "cypher-shell", "-u", "neo4j", "-p", "graphdone_password", "RETURN 1"]
       interval: 10s
       timeout: 5s
       retries: 5
 
-  redis:
-    image: redis:7-alpine
+  graphdone-redis:
+    container_name: graphdone-redis-prod
+    image: redis:8-alpine
     ports:
       - "6379:6379"
     volumes:
@@ -30,13 +34,14 @@ services:
       timeout: 5s
       retries: 5
 
-  server:
+  graphdone-api:
+    container_name: graphdone-api-prod
     build:
       context: ..
       dockerfile: packages/server/Dockerfile
     environment:
       - NODE_ENV=production
-      - NEO4J_URI=bolt://neo4j:7687
+      - NEO4J_URI=bolt://graphdone-neo4j:7687
       - NEO4J_USER=neo4j
       - NEO4J_PASSWORD=graphdone_password
       - PORT=4127
@@ -44,19 +49,22 @@ services:
     ports:
       - "4127:4127"
     depends_on:
-      neo4j:
+      graphdone-neo4j:
         condition: service_healthy
-      redis:
+      graphdone-redis:
         condition: service_healthy
     volumes:
       - ../packages/server/.env:/app/.env
+      - logs:/app/logs
+      - sqlite_auth_data:/app/data
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:4127/health"]
       interval: 30s
       timeout: 10s
       retries: 3
 
-  web:
+  graphdone-web:
+    container_name: graphdone-web-prod
     build:
       context: ..
       dockerfile: packages/web/Dockerfile
@@ -66,11 +74,13 @@ services:
     ports:
       - "3127:3127"
     depends_on:
-      - server
+      - graphdone-api
     volumes:
       - ../packages/web/.env:/app/.env
+      - logs:/app/logs
 
 volumes:
   neo4j_data:
-  neo4j_logs:
-  redis_data:
\ No newline at end of file
+  redis_data:
+  logs:
+  sqlite_auth_data:
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
index 336e0714..f4f6aa91 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,7 +1,5 @@
 # GraphDone Documentation
 
-**AI-Generated Content Warning: This documentation contains AI-generated content. Verify information before depending on it for decision making.**
-
 Welcome to the GraphDone documentation! This directory contains comprehensive guides, API references, and deployment information for working with GraphDone.
 
 ## 📚 Documentation Structure
@@ -13,16 +11,31 @@ Welcome to the GraphDone documentation! This directory contains comprehensive gu
 - Authentication and authorization
 
 ### [Developer Guides](./guides/)
-- Getting started
-- Core concepts
-- Architecture overview
-- Contributing guidelines
+- [Getting Started](./guides/getting-started.md) - Setup and first steps
+- [Architecture Overview](./guides/architecture-overview.md) - System design and technical decisions
+- [SQLite Deployment Modes](./guides/sqlite-deployment-modes.md) - Local dev vs Docker authentication storage
+- [User Flows](./guides/user-flows.md) - How teams actually use GraphDone
+
+### 🤖 AI Agents Documentation
+> **Start here**: [Simple AI Agent Reality Check](./simple-agent-reality.md) - **What we're actually building**
+
+**Implementation Guides**:
+- [Simple AI Agent Reality Check](./simple-agent-reality.md) - 🎯 **THE PLAN**: Smart chia pet with Ollama
+- [AI Agents Technical Spec](./ai-agents-tech-spec.md) - 📚 Complete technical implementation (advanced)
+- [Agent Planning Scenarios](./agent-planning-scenarios.md) - 🎪 Interactive planning examples (future)
+
+### 🔒 Security & Production
+> **CRITICAL FOR RELEASE**: [TLS Implementation Plan](./security/tls-implementation-plan.md) - **Required before production**
+
+**Security Documentation**:
+- [TLS Implementation Plan](./security/tls-implementation-plan.md) - 🚨 **MUST READ**: HTTPS, SSL certificates, secrets management
+- [Production Security Checklist](./security/tls-implementation-plan.md#deployment-security-checklist) - Pre-launch security validation
 
 ### [Deployment](./deployment/)
 - Docker setup
-- Kubernetes manifests
+- Kubernetes manifests  
 - Cloud provider guides
-- Production considerations
+- Production considerations (see Security section above for TLS)
 
 ## 🚀 Quick Start
 
@@ -51,7 +64,7 @@ Welcome to the GraphDone documentation! This directory contains comprehensive gu
 - **Graph-native collaboration** - Work flows through natural dependencies
 - **Spherical priority model** - Ideas migrate from periphery to center
 - **Democratic prioritization** - Community validation guides resource allocation
-- **Human-AI coordination** - Agents participate as first-class citizens
+- **Human-AI coordination** - Smart chia pets that help with planning (see AI docs above)
 
 ## 🔗 Quick Links
 
diff --git a/docs/agent-planning-scenarios.md b/docs/agent-planning-scenarios.md
new file mode 100644
index 00000000..ef368ace
--- /dev/null
+++ b/docs/agent-planning-scenarios.md
@@ -0,0 +1,816 @@
+# AI Agent Planning Scenarios
+
+> **🎪 FUTURE PLANNING WORKFLOWS** - Interactive examples for when agents get smarter
+
+**Read first**: [Simple AI Agent Reality Check](./simple-agent-reality.md) - The actual plan we're implementing
+
+**This doc contains**: Inspirational examples of advanced agent planning workflows for future development.
+
+> **Interactive Planning**: Assign agents to nodes, let them break down work, and quickly approve/reject their ideas with thumbs up/down
+
+## Core Concept: Agent Assignment Workflow
+
+### Step 1: Right-Click → "Ask Agent to Plan This"
+
+User right-clicks any node and sees:
+
+```
+┌─────────────────────────────┐
+│ 📋 Edit Node                │
+│ 🔗 Add Relationship         │  
+│ 🎯 Set Priority            │
+│ ─────────────────────────  │
+│ 🤖 Ask Agent to Plan This  │ ← New option
+│ 💡 Get AI Suggestions      │
+└─────────────────────────────┘
+```
+
+### Step 2: Agent Assignment Dialog
+
+```jsx
+// Agent Assignment Modal
+const AgentPlanningDialog = ({ targetNode, onClose }) => (
+  <div className="slick-dialog">
+    <div className="dialog-header">
+      <div className="flex items-center space-x-3">
+        <div className="node-preview">
+          <span className="node-icon">{getNodeIcon(targetNode.type)}</span>
+          <span className="node-title">{targetNode.title}</span>
+        </div>
+        <span className="text-gray-400">→</span>
+        <div className="available-agents">
+          {agents.map(agent => (
+            <AgentButton 
+              key={agent.id}
+              agent={agent}
+              onClick={() => assignAgentToNode(agent.id, targetNode.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+    
+    <div className="planning-prompt">
+      <textarea
+        placeholder="Tell the agent what you want them to plan... 
+        
+Examples:
+• Break this feature into development tasks
+• Plan a marketing campaign for this product
+• Create a research plan for this investigation
+• Design a testing strategy for this component"
+        className="planning-textarea"
+      />
+      
+      <div className="quick-prompts">
+        <QuickPromptButton text="Break into subtasks" />
+        <QuickPromptButton text="Plan dependencies" />
+        <QuickPromptButton text="Estimate timeline" />
+        <QuickPromptButton text="Identify risks" />
+      </div>
+    </div>
+  </div>
+);
+```
+
+### Step 3: Agent Planning in Action
+
+Once assigned, the agent:
+1. **Moves to the target node** with speech: *"Alright, let me think about this one..."*
+2. **Shows thinking animation** (purple glow, thought bubble)
+3. **Speaks their planning process**: *"I see this is about building a new API. Let me break this into logical steps..."*
+4. **Generates child nodes** with relationships as they think
+
+## Planning Scenarios
+
+### Scenario 1: "Plan Mobile App Development"
+
+**User**: Right-clicks "Build Mobile App" node → "Ask Agent to Plan This"
+**Prompt**: "Break this feature into development tasks"
+
+**Agent Response** (with live generation using tools):
+
+```
+🤖 Agent speaks: "Let me analyze the current graph and break down mobile app development..."
+
+[Agent calls GraphDone MCP server tools with detailed narration]
+
+Agent: "First, let me check what related work already exists in your graphs..."
+→ Tool Call: mcp.read_graph_data({
+    query: "MATCH (n:WorkItem) WHERE n.title CONTAINS 'mobile' OR n.title CONTAINS 'app' RETURN n",
+    graph_ids: ["current_graph"]
+  })
+→ Tool Response: Found 3 related nodes: "Mobile Login Fix", "App Store Review Process", "Mobile Testing Framework"
+
+Agent: "Great! I found some mobile work history to learn from. Now let me check the current target node details..."
+→ Tool Call: mcp.read_node_details({ node_id: "build-mobile-app" })
+→ Tool Response: { title: "Build Mobile App", type: "OUTCOME", description: "Create iOS and Android apps for GraphDone", priority: { individual: 0.9 } }
+
+Agent: "I see this is a high-priority outcome. Let me create a systematic breakdown with proper dependencies..."
+
+[Agent creates nodes using GraphQL mutations with speech narration]
+
+Agent: "First, we absolutely need design and planning..." 
+→ Tool Call: mcp.create_work_item({
+    title: "UI/UX Design & Wireframes",
+    type: "TASK", 
+    description: "Create user interface designs and wireframes for mobile app",
+    parent_id: "build-mobile-app",
+    priority: { individual: 0.8 }
+  })
+→ Agent speaks: "✓ Created design phase"
+
+Agent: "Then we need to set up the development environment..."
+→ Tool Call: mcp.create_work_item({
+    title: "Development Environment Setup",
+    type: "TASK",
+    description: "Set up React Native/Flutter development environment, CI/CD pipeline",
+    parent_id: "build-mobile-app"
+  })
+→ Agent speaks: "✓ Created dev environment setup"
+
+Agent: "Let me analyze the best dependencies between these phases using graph analysis..."
+→ Tool Call: mcp.analyze_node_dependencies({
+    target_node_id: "build-mobile-app",
+    analysis_type: "optimal_ordering"
+  })
+→ Tool Response: Recommended sequence: Design → Environment → Core Features → Testing → Deployment
+
+Agent: "Perfect! The analysis confirms my thinking. Now for the core features..."
+→ Tool Call: mcp.create_work_item({
+    title: "Core App Features",
+    type: "MILESTONE",
+    description: "Implement core functionality: authentication, graph viewing, basic editing",
+    parent_id: "build-mobile-app",
+    priority: { individual: 0.9, community: 0.7 }
+  })
+
+Agent: "And comprehensive testing - this is critical for mobile..."
+→ Tool Call: mcp.create_work_item({
+    title: "Testing & QA",
+    type: "TASK", 
+    description: "Unit tests, integration tests, device testing across iOS/Android",
+    parent_id: "build-mobile-app"
+  })
+
+Agent: "Now let me create the logical dependencies between these phases..."
+→ Tool Call: mcp.create_relationships([
+    { from: "ui-ux-design", to: "dev-environment-setup", type: "ENABLES" },
+    { from: "dev-environment-setup", to: "core-app-features", type: "BLOCKS" },
+    { from: "core-app-features", to: "testing-qa", type: "BLOCKS" }
+  ])
+
+Agent: "Let me check for any similar effort estimates in your historical data..."
+→ Tool Call: mcp.estimate_effort({
+    node_ids: ["ui-ux-design", "dev-environment-setup", "core-app-features", "testing-qa"],
+    estimation_method: "similar_completed_tasks",
+    similarity_factors: ["mobile", "development", "testing"]
+  })
+→ Tool Response: Based on "Mobile Testing Framework" (2 weeks) and "App Store Review Process" (1 week): estimated 8-10 weeks total
+
+Agent: "Based on your team's previous mobile work, this should take about 8-10 weeks total. Finally, let me add deployment..."
+→ Tool Call: mcp.create_work_item({
+    title: "App Store Deployment", 
+    type: "MILESTONE",
+    description: "Deploy to iOS App Store and Google Play Store",
+    parent_id: "build-mobile-app"
+  })
+→ Tool Call: mcp.create_relationship({
+    from: "testing-qa", to: "app-store-deployment", type: "BLOCKS"
+  })
+
+Agent speaks: "Done! I've analyzed your existing mobile work, created 5 main phases with effort estimates based on your team's history, and mapped all the logical dependencies. The GraphQL analysis shows this creates a clean critical path. Want me to break any of these phases down further?"
+```
+
+**Relationships Created**:
+- `Build Mobile App` DEPENDS_ON `UI/UX Design & Wireframes`
+- `Development Environment Setup` ENABLES `Core App Features`  
+- `Core App Features` BLOCKS `Testing & QA`
+- `Testing & QA` BLOCKS `App Store Deployment`
+
+### Scenario 2: "Plan Marketing Campaign"
+
+**User**: Right-clicks "Product Launch Campaign" node
+**Prompt**: "Plan a marketing campaign for this product"
+
+**Agent Response**:
+
+```
+🤖 Agent: "I'll create a comprehensive marketing plan..."
+
+Creates nodes with dependencies:
+📊 "Market Research & Analysis"
+🎯 "Target Audience Definition"  
+📝 "Content Strategy & Creation"
+📱 "Social Media Campaign"
+📧 "Email Marketing Sequence"
+🎉 "Launch Event Planning"
+📈 "Success Metrics & Tracking"
+
+Agent: "I've connected these based on what typically needs to happen first. 
+The market research should inform everything else."
+```
+
+**Smart Relationships**:
+- Market Research ENABLES Target Audience Definition
+- Target Audience ENABLES Content Strategy
+- Content Strategy ENABLES Social Media + Email campaigns
+- All campaigns CONTRIBUTE_TO Launch Event
+- Launch Event BLOCKS Success Metrics tracking
+
+### Scenario 3: "Research Project Planning"
+
+**User**: Right-clicks "User Authentication Security Review" 
+**Prompt**: "Create a research plan for this investigation"
+
+**Agent Response** (using multiple tools including external APIs):
+
+```
+🤖 Agent: "Security reviews need a systematic approach. Let me research current best practices and create a comprehensive plan..."
+
+[Agent uses multiple tools for informed planning]
+
+Agent: "First, let me check what authentication system we're currently using..."
+→ Tool Call: mcp.read_node_details({ node_id: "user-authentication-security-review" })
+→ Tool Response: { description: "Review security of current JWT + OAuth implementation" }
+
+Agent: "JWT + OAuth - got it. Let me research the latest security vulnerabilities for these technologies..."
+→ Tool Call: web_search.search({ 
+    query: "JWT OAuth security vulnerabilities 2025 OWASP recommendations",
+    max_results: 5 
+  })
+→ Tool Response: Found recent OWASP guidelines, 3 new JWT vulnerabilities discovered in 2024
+
+Agent: "Excellent, I found some recent security updates to consider. Now let me check if we have any existing security documentation..."
+→ Tool Call: mcp.read_graph_data({
+    query: "MATCH (n:WorkItem) WHERE n.title CONTAINS 'security' OR n.description CONTAINS 'audit' RETURN n",
+    graph_ids: ["current_graph", "templates"]
+  })
+→ Tool Response: Found 2 related items: "API Security Checklist", "Previous Audit Results Q3 2024"
+
+Agent: "Perfect! There's existing security work to build on. Let me create a structured research plan..."
+
+[Agent creates comprehensive research structure with tool-informed content]
+
+Agent: "Creating the analysis phase first..."
+→ Tool Call: mcp.create_work_item({
+    title: "Current System Analysis",
+    type: "TASK",
+    description: "Comprehensive analysis of existing JWT + OAuth implementation based on 2025 OWASP guidelines",
+    parent_id: "user-authentication-security-review"
+  })
+
+Agent: "Now breaking down the technical analysis components..."
+→ Tool Call: mcp.create_work_item({
+    title: "Code Review - Auth Components",
+    type: "TASK", 
+    description: "Review authentication middleware, token validation, refresh token handling",
+    parent_id: "current-system-analysis"
+  })
+
+Agent: "Let me check the latest penetration testing methodologies..."
+→ Tool Call: web_search.search({
+    query: "authentication penetration testing methodology 2025 tools",
+    max_results: 3
+  })
+→ Tool Response: NIST guidelines updated, new tools: Burp Suite Professional 2025, OWASP ZAP 2.15
+
+Agent: "Based on the latest testing methods, I'll create comprehensive testing phases..."
+→ Tool Call: mcp.create_work_item({
+    title: "Security Testing Suite",
+    type: "MILESTONE",
+    description: "Execute penetration testing using NIST 2025 guidelines and latest tools (Burp Suite Pro 2025, OWASP ZAP 2.15)",
+    parent_id: "user-authentication-security-review"
+  })
+
+Agent: "Let me also check our existing API documentation to plan endpoint testing..."
+→ Tool Call: file_system.read({ 
+    path: "./packages/server/src/schema/auth-schema.ts",
+    purpose: "analyze authentication endpoints for testing plan"
+  })
+→ Tool Response: Found 8 auth endpoints: /login, /refresh, /logout, /register, /verify, /reset-password, /change-password, /oauth-callback
+
+Agent: "Great! I found 8 authentication endpoints to test. Creating specific testing tasks..."
+→ Tool Call: mcp.create_work_item({
+    title: "API Endpoint Vulnerability Scan", 
+    type: "TASK",
+    description: "Test all 8 auth endpoints for common vulnerabilities: injection, broken auth, sensitive data exposure",
+    parent_id: "security-testing-suite"
+  })
+
+Agent: "Now creating the documentation and reporting structure..."
+→ Tool Call: mcp.create_work_item({
+    title: "Security Assessment Report",
+    type: "OUTCOME",
+    description: "Comprehensive security report with vulnerability findings, risk ratings, and remediation roadmap",
+    parent_id: "user-authentication-security-review"
+  })
+
+Agent: "Finally, let me set up the logical dependencies based on security assessment best practices..."
+→ Tool Call: mcp.create_relationships([
+    { from: "current-system-analysis", to: "security-testing-suite", type: "BLOCKS" },
+    { from: "security-testing-suite", to: "security-assessment-report", type: "BLOCKS" },
+    { from: "code-review-auth-components", to: "api-endpoint-vulnerability-scan", type: "ENABLES" }
+  ])
+
+Agent speaks: "I've created a comprehensive security review plan based on the latest 2025 OWASP guidelines and NIST methodologies. The plan incorporates your existing security work and targets all 8 authentication endpoints I found in your codebase. The research shows 3 new JWT vulnerabilities discovered in 2024 that we'll specifically test for. Ready to proceed?"
+```
+
+## Quick Approval System: Thumbs Up/Down
+
+### Visual Design
+
+When agent creates nodes, each appears with approval controls:
+
+```jsx
+const GeneratedNodeApproval = ({ node, onApprove, onReject, onModify }) => (
+  <div className="generated-node-preview">
+    <div className="node-content">
+      <span className="node-icon">{getNodeIcon(node.type)}</span>
+      <span className="node-title">{node.title}</span>
+      <span className="ai-badge">AI</span>
+    </div>
+    
+    <div className="approval-controls">
+      <button 
+        onClick={() => onApprove(node.id)}
+        className="approve-btn"
+        title="Keep this node"
+      >
+        👍
+      </button>
+      
+      <button 
+        onClick={() => onReject(node.id)}
+        className="reject-btn"
+        title="Remove this node"
+      >
+        👎
+      </button>
+      
+      <button 
+        onClick={() => onModify(node.id)}
+        className="modify-btn" 
+        title="Edit this node"
+      >
+        ✏️
+      </button>
+    </div>
+  </div>
+);
+```
+
+### Approval Workflow
+
+**Thumbs Up (👍)**:
+- Node becomes permanent in graph
+- Agent says: *"Great! I'll keep that one."*
+- Node styling changes from "AI preview" to normal
+- Relationships become permanent
+
+**Thumbs Down (👎)**:
+- Node disappears with animation
+- Agent says: *"No problem, removing that one."*
+- Related relationships are cleaned up
+- Agent learns preference for future planning
+
+**Edit (✏️)**:
+- Opens quick edit dialog
+- Agent says: *"Want to improve that one? Let me adjust it..."*
+- User can modify title, type, description
+- Agent incorporates feedback into learning
+
+### Batch Approval Interface
+
+For multiple nodes, show approval summary:
+
+```jsx
+const BatchApprovalSummary = ({ generatedNodes, onApproveAll, onReviewEach }) => (
+  <div className="batch-approval-bar">
+    <div className="summary">
+      <span className="ai-avatar">🤖</span>
+      <span>I created {generatedNodes.length} nodes for you</span>
+    </div>
+    
+    <div className="batch-controls">
+      <button onClick={onApproveAll} className="approve-all-btn">
+        👍 Keep All ({generatedNodes.length})
+      </button>
+      
+      <button onClick={onReviewEach} className="review-btn">
+        👁️ Review Each
+      </button>
+      
+      <button onClick={onRejectAll} className="reject-all-btn">
+        👎 Start Over
+      </button>
+    </div>
+  </div>
+);
+```
+
+## Interactive Planning Dialog
+
+### Conversation Flow
+
+```
+Agent: "I've created a plan for your mobile app. Let me walk you through it..."
+
+[Shows 5 generated nodes with relationships]
+
+User: 👍 on "UI/UX Design", 👍 on "Core Features", 👎 on "App Store Deployment"
+
+Agent: "Got it! I see you're not ready for deployment planning yet. 
+       Want me to break down 'Core Features' into more detail instead?"
+
+User: "Yes, focus on the core features"
+
+Agent: "Perfect! Let me expand the core features..."
+       
+[Creates 6 more specific feature nodes under "Core Features"]
+
+Agent: "I've added login, navigation, data sync, push notifications, 
+       offline mode, and settings. Does this cover what you had in mind?"
+
+User: 👍👍👍👎👍👍 (rejects push notifications)
+
+Agent: "No push notifications, noted! Should I connect the offline mode 
+       to data sync? They usually work together."
+
+User: "Yes, make that connection"
+
+Agent: *Creates relationship* "Done! Offline mode now depends on data sync."
+```
+
+### Smart Relationship Creation
+
+Agent automatically creates logical relationships based on:
+
+**Temporal Dependencies**:
+- Research → Planning → Implementation → Testing → Deployment
+
+**Logical Prerequisites**:  
+- Authentication → User Management → Permissions
+- Design → Development → Testing
+
+**Resource Dependencies**:
+- Budget Approval → Resource Allocation → Project Start
+- Infrastructure → Development Environment → Coding
+
+**Risk Mitigation**:
+- Security Review BLOCKS Public Launch
+- Testing BLOCKS Deployment
+- Legal Review BLOCKS Marketing
+
+### Relationship Suggestions Dialog
+
+```jsx
+const RelationshipSuggestionDialog = ({ sourceNode, targetNode, suggestedType }) => (
+  <div className="relationship-suggestion">
+    <div className="relationship-preview">
+      <NodePreview node={sourceNode} />
+      <div className="relationship-arrow">
+        <span className="relationship-type">{suggestedType}</span>
+        →
+      </div>
+      <NodePreview node={targetNode} />
+    </div>
+    
+    <div className="suggestion-reasoning">
+      <p>💡 Agent suggests: "{getRelationshipReasoning(sourceNode, targetNode, suggestedType)}"</p>
+    </div>
+    
+    <div className="approval-buttons">
+      <button className="approve">👍 Make Connection</button>
+      <button className="modify">🔄 Different Type</button>
+      <button className="reject">👎 No Connection</button>
+    </div>
+  </div>
+);
+```
+
+## Advanced Planning Scenarios
+
+### Iterative Refinement
+
+**Round 1**: Agent creates high-level plan
+**User Feedback**: Approves some, rejects others
+**Round 2**: Agent refines based on feedback
+**User Feedback**: Requests more detail on specific areas  
+**Round 3**: Agent deep-dives into approved areas
+
+### Scenario 4: Multi-Agent Collaboration with Tool Orchestration
+
+**User**: Right-clicks "Launch SaaS Product" → assigns both agents
+**Prompt**: "One agent handle technical, one handle business - coordinate together"
+
+**Multi-Agent Response** (agents communicate and use tools collaboratively):
+
+```
+🤖 Technical Agent "Syntax": "I'll handle the technical implementation track..."
+🤖 Business Agent "Spark": "I'll handle go-to-market strategy..."
+
+[Both agents coordinate tool usage and share information]
+
+Syntax: "Let me analyze the current technical architecture..."
+→ Tool Call: mcp.read_graph_data({
+    query: "MATCH (n:WorkItem) WHERE n.type IN ['TECHNICAL', 'DEVELOPMENT'] RETURN n",
+    graph_ids: ["current_graph"]
+  })
+→ Tool Response: Found technical foundation: "API Backend", "User Interface", "Database Schema"
+
+Spark: "While Syntax checks tech readiness, I'll research the competitive landscape..."
+→ Tool Call: web_search.search({
+    query: "SaaS project management tools market 2025 competitors pricing",
+    max_results: 5
+  })
+→ Tool Response: Top competitors: Monday.com ($8-16/user), Asana ($10-24/user), Notion ($8-16/user)
+
+Syntax: "Good news - our core tech is solid. Creating the technical launch track..."
+→ Tool Call: mcp.create_work_item({
+    title: "Technical Launch Readiness",
+    type: "MILESTONE",
+    description: "Ensure all technical systems are production-ready for launch",
+    parent_id: "launch-saas-product"
+  })
+
+Spark: "Perfect! Based on competitor analysis, we need aggressive pricing. Creating business track..."
+→ Tool Call: mcp.create_work_item({
+    title: "Go-to-Market Strategy", 
+    type: "MILESTONE",
+    description: "Launch strategy targeting $6-12/user price point to undercut competitors",
+    parent_id: "launch-saas-product"  
+  })
+
+[Agents coordinate on dependencies using shared tool access]
+
+Syntax: "I need to know when marketing materials are ready for tech integration..."
+→ Tool Call: mcp.read_node_details({ node_id: "go-to-market-strategy" })
+→ Shares with Spark: "What's your timeline for marketing assets?"
+
+Spark: "I'll need 2 weeks for brand assets. Let me create the marketing timeline..."
+→ Tool Call: mcp.create_work_item({
+    title: "Brand Assets & Marketing Materials",
+    type: "TASK",
+    description: "Logo, website copy, demo videos, pricing page - 2 week timeline",
+    parent_id: "go-to-market-strategy"
+  })
+
+Syntax: "Perfect! That gives me time for performance optimization. Creating technical dependencies..."
+→ Tool Call: mcp.create_work_item({
+    title: "Performance & Scalability Testing",
+    type: "TASK", 
+    description: "Load testing, database optimization, CDN setup for marketing traffic",
+    parent_id: "technical-launch-readiness"
+  })
+
+[Agents create cross-functional dependencies]
+
+Both agents coordinate: "We need to sync on launch timing..."
+→ Syntax Tool Call: mcp.create_relationship({
+    from: "brand-assets-marketing-materials", 
+    to: "performance-scalability-testing", 
+    type: "ENABLES",
+    description: "Marketing assets inform performance testing scenarios"
+  })
+
+Spark: "I also need technical integration for analytics tracking..."
+→ Tool Call: mcp.create_work_item({
+    title: "Launch Analytics Setup",
+    type: "TASK",
+    description: "Google Analytics, conversion tracking, user behavior analysis",
+    parent_id: "technical-launch-readiness"  
+  })
+→ Tool Call: mcp.create_relationship({
+    from: "launch-analytics-setup",
+    to: "go-to-market-strategy",
+    type: "ENABLES"
+  })
+
+[Final coordination and timeline sync]
+
+Syntax: "Let me check if all technical dependencies are properly sequenced..."
+→ Tool Call: mcp.analyze_critical_path({
+    root_node: "launch-saas-product",
+    filter_agents: ["syntax", "spark"]
+  })
+→ Tool Response: Critical path: 4 weeks (Brand Assets → Performance Testing → Analytics → Launch)
+
+Spark: "4 weeks sounds right! Let me add the final business milestone..."
+→ Tool Call: mcp.create_work_item({
+    title: "Launch Day Execution",
+    type: "OUTCOME", 
+    description: "Coordinated launch across technical deployment and marketing announcement",
+    parent_id: "launch-saas-product"
+  })
+→ Tool Call: mcp.create_relationships([
+    { from: "technical-launch-readiness", to: "launch-day-execution", type: "BLOCKS" },
+    { from: "go-to-market-strategy", to: "launch-day-execution", type: "BLOCKS" }
+  ])
+
+Both agents: "Coordination complete! Technical and business tracks are synchronized with a 4-week critical path to launch."
+```
+
+**Cross-Agent Dependencies Created**:
+- Marketing assets enable technical performance testing (shared realistic scenarios)
+- Technical analytics setup enables business tracking and optimization
+- Both technical and business milestones block final launch execution
+- Agents shared tool access to maintain consistency and avoid conflicts
+
+### Learning from Patterns
+
+Agent observes user approval patterns:
+- User always approves testing phases → Agent includes more detailed testing
+- User often rejects deployment planning early → Agent focuses on development first
+- User prefers smaller, specific tasks → Agent creates more granular breakdowns
+
+## Technical Implementation
+
+### Node Generation API
+
+```javascript
+// Agent generates nodes with relationships
+POST /api/agents/{agentId}/plan-node
+{
+  targetNodeId: "node-123",
+  prompt: "Break this feature into development tasks",
+  preferences: {
+    granularity: "detailed",
+    includeTimelines: false,
+    focusAreas: ["development", "testing"]
+  }
+}
+
+Response:
+{
+  generatedNodes: [
+    {
+      id: "generated-1",
+      title: "Database Schema Design",
+      type: "TASK",
+      status: "PROPOSED",
+      priority: { individual: 0.8 },
+      aiGenerated: true,
+      reasoning: "Database design should come first to establish data structure"
+    }
+  ],
+  relationships: [
+    {
+      from: "generated-1",
+      to: "generated-2", 
+      type: "BLOCKS",
+      reasoning: "Database schema must exist before API development"
+    }
+  ],
+  agentResponse: "I've broken this into 5 key development phases..."
+}
+```
+
+### Approval Tracking
+
+```javascript
+// User approval/rejection
+POST /api/agents/{agentId}/approve-nodes
+{
+  approvals: [
+    { nodeId: "generated-1", action: "approve" },
+    { nodeId: "generated-2", action: "reject", reason: "too early" },
+    { nodeId: "generated-3", action: "modify", changes: { title: "Better Title" }}
+  ]
+}
+```
+
+## Expected User Experience
+
+**Before**: User stares at empty graph, doesn't know how to break down complex work
+**After**: User assigns agent to any node, gets intelligent breakdown in seconds
+
+**Before**: Creating relationships is manual, time-consuming, often wrong  
+**After**: Agent suggests logical connections, user just approves/rejects
+
+**Before**: Planning feels overwhelming and abstract
+**After**: Planning becomes collaborative conversation with AI partner
+
+This transforms GraphDone from a **documentation tool** into an **active planning partner** that helps users think through complex work systematically.
+
+## Agent Customization & Bonding
+
+### Personal Connection Through Customization
+
+**The Psychology**: When users customize their AI agents, they form stronger emotional bonds. Simple visual and personality customization makes agents feel like **personal companions** rather than generic tools.
+
+### Customization Examples
+
+#### Developer's Agent: "Syntax"
+- **Appearance**: Green hexagon shape with subtle glow
+- **Emoji**: 🔧 (Tech-focused)
+- **Speech Style**: Concise
+- **Work Style**: Methodical
+- **Personality**: *"Let me break this down systematically..."*
+- **Favorite Words**: ["optimize", "refactor", "clean", "efficient"]
+
+#### Marketing Manager's Agent: "Spark"
+- **Appearance**: Orange star shape with bright glow
+- **Emoji**: 🚀 (Growth-focused) 
+- **Speech Style**: Playful
+- **Work Style**: Creative
+- **Personality**: *"Ooh, this could be really exciting! What if we..."*
+- **Favorite Words**: ["engagement", "viral", "audience", "impact"]
+
+#### Project Manager's Agent: "Coordinator"
+- **Appearance**: Blue circle with gradient pattern
+- **Emoji**: 🎯 (Goal-focused)
+- **Speech Style**: Formal
+- **Work Style**: Thorough
+- **Personality**: *"I need to ensure all dependencies are properly mapped..."*
+- **Favorite Words**: ["timeline", "stakeholder", "deliverable", "milestone"]
+
+### Customization Workflow
+
+```
+User: Right-clicks agent avatar → "Customize Agent"
+
+[Agent Customization Dialog Opens]
+
+User: Changes name from "Helper" to "Atlas"
+User: Selects 🧠 emoji and purple color scheme
+User: Sets speech style to "thoughtful" and work style to "thorough"
+
+Agent (in new voice): "Thank you for giving me a proper identity! I'm Atlas now, 
+and I'm excited to help you navigate complex planning challenges."
+
+[Agent's speech patterns immediately adapt to new personality]
+Agent: "I think we should take a comprehensive approach to this problem..."
+```
+
+### Bonding Through Shared History
+
+**Customization Memory**: Agents remember their customization journey and reference it:
+- *"Remember when you made me purple? I think that color really suits this analytical work."*
+- *"You named me after the titan Atlas - I take my responsibility for bearing your project load seriously."*
+- *"Since you set me to 'thorough' mode, I've been catching way more edge cases!"*
+
+**Learning Preferences**: Agents adapt behavior based on customizations:
+- **Concise agents** give shorter planning explanations
+- **Playful agents** use more varied speech patterns and humor
+- **Methodical agents** always create dependencies in logical order
+- **Creative agents** suggest more innovative connections between nodes
+
+### Advanced Customization Features
+
+#### Dynamic Appearance Changes
+- Agent color shifts based on current work (red when finding problems, green when everything looks good)
+- Size pulses when agent is excited about suggestions
+- Glow intensity changes based on confidence level
+
+#### Personality Evolution
+```javascript
+// Agent learns from user interactions
+if (user.frequentlyRejectsDetailedPlans) {
+  agent.workStyle = 'quick'; // Becomes less detailed over time
+}
+
+if (user.approvesCreativeConnections) {
+  agent.customizations.interests.push('innovation');
+  // Agent starts suggesting more creative relationships
+}
+```
+
+#### Voice Matching Personality
+```javascript
+// TTS adapts to customizations
+const getTTSPersonality = (agent) => {
+  switch (agent.customizations.speechStyle) {
+    case 'formal': return { speed: 0.9, pitch: 0.9 }; // Slower, lower
+    case 'playful': return { speed: 1.1, pitch: 1.1 }; // Faster, higher
+    case 'casual': return { speed: 1.0, pitch: 1.0 }; // Default
+    case 'concise': return { speed: 1.2, pitch: 0.95 }; // Fast, direct
+  }
+};
+```
+
+### User Testimonials (Hypothetical)
+
+*"I spent 20 minutes customizing my agent 'Phoenix' and now I actually look forward to planning sessions. It feels like I have a thinking partner, not just a tool."* - Sarah, Product Manager
+
+*"My agent 'Logic' has this perfect blue-green color that matches my terminal theme. When it suggests breaking down complex algorithms, it feels like it really 'gets' my work."* - David, Senior Developer  
+
+*"I named my agent 'Harmony' and made it purple because I love purple. Now when it speaks suggestions for our music app features, it feels like it has its own creative personality."* - Maria, UX Designer
+
+### Customization as Onboarding
+
+**First Launch Experience**:
+```
+GraphDone: "Welcome! Let's create your first AI planning companion."
+
+[Simple customization wizard opens]
+
+Step 1: "What should we call your agent?" [Text input]
+Step 2: "Pick an emoji that represents how you work" [Emoji grid]  
+Step 3: "Choose colors that inspire you" [Color palette]
+Step 4: "How do you prefer to communicate?" [Speech style options]
+
+Agent (in chosen voice): "Perfect! I'm [Name] and I'm ready to help you plan amazing things together!"
+```
+
+The key insight: **5 minutes of customization** creates dramatically stronger emotional attachment than any amount of advanced AI capabilities without personalization.
\ No newline at end of file
diff --git a/docs/ai-agents-tech-spec.md b/docs/ai-agents-tech-spec.md
new file mode 100644
index 00000000..20464b6b
--- /dev/null
+++ b/docs/ai-agents-tech-spec.md
@@ -0,0 +1,1685 @@
+# AI Agents Technical Specification
+
+> **📚 IMPLEMENTATION GUIDE** - Complete code and architecture for AI agents
+
+**Read first**: [Simple AI Agent Reality Check](./simple-agent-reality.md) - The actual plan and research
+
+**This doc contains**: All the code, components, and technical details to implement the smart chia pet agent.
+
+> **Fun-First Implementation** for GraphDone AI Companions - Errors welcome, perfection not required!
+
+## MVP: Just Make It Fun
+
+**Philosophy**: Build something **immediately playful** that moves around your graph, chats with you, and **narrates their work with a friendly voice**. If the AI is quirky or makes weird suggestions, that's part of the charm!
+
+**Why Piper TTS?**
+- **Easy setup**: Single binary, lightweight voice models
+- **High value**: Agents that **speak** feel dramatically more alive
+- **Low latency**: Local TTS means no API delays
+- **Privacy**: All speech generation happens on your LAN
+- **Essential for experimentation**: Hearing agents talk makes them feel like companions, not just features
+
+**Tool Integration Architecture**:
+- **GraphDone MCP Server**: Direct GraphQL access for reading/writing graph data
+- **Ollama Function Calling**: qwen2.5:7b supports structured tool usage
+- **Custom Tool Pipeline**: Extensible system for adding new capabilities
+- **Safe Sandboxing**: All tool calls go through approval pipeline
+
+### GPU Infrastructure Setup (Multiple Deployment Options)
+
+**Option A: Traditional Ollama Server Setup**:
+```bash
+# Install Ollama on GPU server (192.168.1.100)
+curl -fsSL https://ollama.com/install.sh | sh
+
+# Pull recommended model for POC
+ollama pull qwen2.5:7b  # 4.7GB, good function calling support
+
+# Verify installation
+ollama serve  # Default port 11434
+```
+
+**Option B: Docker Model Containers (NEW 2025 Approach)**:
+```bash
+# GPU server setup with direct model containers
+# Each model runs its own TCP server - no Ollama middleman needed
+
+# Create docker-compose for AI infrastructure
+cat << EOF > ai-infrastructure.yml
+version: '3.8'
+services:
+  qwen-chat:
+    image: registry.ollama.ai/library/qwen2.5:1.5b
+    container_name: ai-qwen-chat
+    ports:
+      - "11434:8000"  # Map to standard Ollama port for compatibility
+    environment:
+      - MODEL_SERVER_PORT=8000
+      - MAX_CONCURRENT_REQUESTS=6
+    deploy:
+      resources:
+        reservations:
+          devices:
+            - driver: nvidia
+              count: 1
+              capabilities: [gpu]
+    
+  qwen-functions:
+    image: registry.ollama.ai/library/qwen2.5:7b
+    container_name: ai-qwen-functions
+    ports:
+      - "11435:8000"
+    environment:
+      - MODEL_SERVER_PORT=8000
+      - MAX_CONCURRENT_REQUESTS=2
+    deploy:
+      resources:
+        reservations:
+          devices:
+            - driver: nvidia
+              count: 1
+              capabilities: [gpu]
+
+networks:
+  default:
+    name: graphdone-ai-network
+EOF
+
+# Start AI infrastructure
+docker-compose -f ai-infrastructure.yml up -d
+
+# Verify models are running
+curl http://localhost:11434/api/generate -d '{"model":"qwen2.5:1.5b","prompt":"Hello!"}'
+curl http://localhost:11435/api/generate -d '{"model":"qwen2.5:7b","prompt":"Hello!"}'
+```
+
+**Piper TTS Setup (Both Options)**:
+```bash
+# Install Piper TTS for agent speech
+wget https://github.com/rhasspy/piper/releases/download/v1.2.0/piper_amd64.tar.gz
+tar -xzf piper_amd64.tar.gz
+sudo cp piper/piper /usr/local/bin/
+
+# Download voice model (lightweight, good quality)
+mkdir -p /opt/piper/voices
+wget -O /opt/piper/voices/en_US-lessac-medium.onnx \
+  https://huggingface.co/rhasspy/piper-voices/resolve/main/en/en_US/lessac/medium/en_US-lessac-medium.onnx
+wget -O /opt/piper/voices/en_US-lessac-medium.onnx.json \
+  https://huggingface.co/rhasspy/piper-voices/resolve/main/en/en_US/lessac/medium/en_US-lessac-medium.onnx.json
+
+# Test TTS
+echo "Hello! I'm your GraphDone AI companion!" | piper \
+  --model /opt/piper/voices/en_US-lessac-medium.onnx \
+  --output_file test.wav
+```
+
+### Agent Management Service
+
+**New Package**: `packages/agent-service/`
+
+```bash
+cd packages/
+mkdir agent-service
+cd agent-service
+npm init -y
+npm install express sqlite3 ws axios uuid multer @modelcontextprotocol/sdk
+```
+
+**Basic Architecture**:
+```javascript
+// packages/agent-service/src/index.js
+const express = require('express');
+const WebSocket = require('ws');
+const AgentManager = require('./AgentManager');
+
+const app = express();
+const server = require('http').createServer(app);
+const wss = new WebSocket.Server({ server });
+
+const agentManager = new AgentManager({
+  ollamaUrl: 'http://192.168.1.100:11434',
+  model: 'qwen2.5:7b'
+});
+
+// REST endpoints
+app.post('/api/agents/:agentId/chat', async (req, res) => {
+  const { message } = req.body;
+  const response = await agentManager.chat(req.params.agentId, message);
+  res.json(response);
+});
+
+app.get('/api/agents/:agentId/position', (req, res) => {
+  const position = agentManager.getPosition(req.params.agentId);
+  res.json(position);
+});
+
+// TTS endpoint - agent speaks while working
+app.post('/api/agents/:agentId/speak', async (req, res) => {
+  const { text, volume = 0.7 } = req.body;
+  try {
+    const audioBuffer = await agentManager.generateSpeech(req.params.agentId, text);
+    res.set({
+      'Content-Type': 'audio/wav',
+      'Content-Length': audioBuffer.length,
+      'X-Agent-Volume': volume
+    });
+    res.send(audioBuffer);
+  } catch (error) {
+    res.status(500).json({ error: 'TTS generation failed' });
+  }
+});
+
+// Planning endpoint - agent breaks down nodes into subtasks
+app.post('/api/agents/:agentId/plan-node', async (req, res) => {
+  const { targetNodeId, prompt, preferences = {} } = req.body;
+  try {
+    const planningResult = await agentManager.planNode(
+      req.params.agentId, 
+      targetNodeId, 
+      prompt, 
+      preferences
+    );
+    res.json(planningResult);
+  } catch (error) {
+    res.status(500).json({ error: 'Planning failed' });
+  }
+});
+
+// Approval endpoint - user approves/rejects AI-generated nodes
+app.post('/api/agents/:agentId/approve-nodes', async (req, res) => {
+  const { approvals } = req.body;
+  try {
+    const result = await agentManager.processApprovals(req.params.agentId, approvals);
+    res.json(result);
+  } catch (error) {
+    res.status(500).json({ error: 'Approval processing failed' });
+  }
+});
+
+// WebSocket for real-time updates
+wss.on('connection', (ws) => {
+  agentManager.on('agentMove', (data) => {
+    ws.send(JSON.stringify({ type: 'agentMove', data }));
+  });
+});
+
+server.listen(5000);
+```
+
+### Web Client Integration
+
+**Avatar Component**: `packages/web/src/components/AgentAvatar.tsx`
+
+```typescript
+interface AgentAvatar {
+  id: string;
+  name: string;
+  emoji: string;
+  position: { x: number; y: number };
+  state: 'happy' | 'working' | 'thinking' | 'concerned' | 'sleeping';
+  currentNodeId?: string;
+}
+
+export const AgentAvatar: React.FC<{ agent: AgentAvatar }> = ({ agent }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  
+  return (
+    <g 
+      className="agent-avatar"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => openAgentChat(agent.id)}
+    >
+      {/* Avatar circle with gradient based on state */}
+      <circle
+        cx={agent.position.x}
+        cy={agent.position.y}
+        r={12}
+        className={`agent-avatar-circle agent-state-${agent.state}`}
+      />
+      
+      {/* Emoji representation */}
+      <text
+        x={agent.position.x}
+        y={agent.position.y + 4}
+        textAnchor="middle"
+        className="agent-emoji"
+      >
+        {agent.emoji}
+      </text>
+      
+      {/* Hover tooltip */}
+      {isHovered && (
+        <g className="agent-tooltip">
+          <rect
+            x={agent.position.x + 20}
+            y={agent.position.y - 10}
+            width={80}
+            height={25}
+            rx={4}
+            className="tooltip-bg"
+          />
+          <text
+            x={agent.position.x + 25}
+            y={agent.position.y + 5}
+            className="tooltip-text"
+          >
+            {agent.name}
+          </text>
+        </g>
+      )}
+    </g>
+  );
+};
+```
+
+**Graph Integration**: Add to `InteractiveGraphVisualization.tsx`
+
+```typescript
+// Add to existing component state
+const [agents, setAgents] = useState<AgentAvatar[]>([]);
+const [agentChatOpen, setAgentChatOpen] = useState<string | null>(null);
+
+// WebSocket connection for real-time updates
+useEffect(() => {
+  const ws = new WebSocket('ws://localhost:5000');
+  
+  ws.onmessage = (event) => {
+    const { type, data } = JSON.parse(event.data);
+    
+    if (type === 'agentMove') {
+      setAgents(prev => prev.map(agent => 
+        agent.id === data.agentId 
+          ? { ...agent, position: data.position }
+          : agent
+      ));
+    } else if (type === 'agentSpeak') {
+      // Play agent speech if audio is enabled
+      playAgentSpeech(data.agentId, data.text);
+    }
+  };
+  
+  return () => ws.close();
+}, []);
+
+// Agent speech system with volume control
+const [audioEnabled, setAudioEnabled] = useState(true);
+const [agentVolume, setAgentVolume] = useState(0.7);
+
+const playAgentSpeech = async (agentId, text) => {
+  if (!audioEnabled) return;
+  
+  try {
+    const response = await fetch(`http://localhost:5000/api/agents/${agentId}/speak`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, volume: agentVolume })
+    });
+    
+    if (response.ok) {
+      const audioBlob = await response.blob();
+      const audioUrl = URL.createObjectURL(audioBlob);
+      const audio = new Audio(audioUrl);
+      audio.volume = agentVolume;
+      
+      // Play with slight delay to sync with avatar animation
+      setTimeout(() => {
+        audio.play().catch(console.warn);
+      }, 200);
+      
+      // Cleanup
+      audio.onended = () => URL.revokeObjectURL(audioUrl);
+    }
+  } catch (error) {
+    console.warn('Agent speech failed:', error);
+  }
+};
+
+// Add agent avatars to SVG render
+return (
+  <div className="relative">
+    {/* Agent Audio Controls */}
+    <div className="absolute top-4 right-4 z-10 bg-black/80 backdrop-blur-sm rounded-lg p-3 flex items-center space-x-3">
+      <button
+        onClick={() => setAudioEnabled(!audioEnabled)}
+        className={`w-8 h-8 rounded flex items-center justify-center transition-colors ${
+          audioEnabled ? 'bg-green-600 text-white' : 'bg-gray-600 text-gray-300'
+        }`}
+        title={audioEnabled ? 'Mute agent speech' : 'Enable agent speech'}
+      >
+        {audioEnabled ? '🔊' : '🔇'}
+      </button>
+      
+      {audioEnabled && (
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.1"
+          value={agentVolume}
+          onChange={(e) => setAgentVolume(parseFloat(e.target.value))}
+          className="w-16 h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer"
+          title="Agent volume"
+        />
+      )}
+      
+      <span className="text-xs text-gray-400">
+        {agents.filter(a => a.state === 'working').length > 0 ? '🗣️' : '💤'}
+      </span>
+    </div>
+    
+    <svg>
+      {/* Existing graph elements */}
+      
+      {/* Agent avatars overlay */}
+      <g className="agents-layer">
+        {agents.map(agent => (
+          <AgentAvatar key={agent.id} agent={agent} />
+        ))}
+      </g>
+    </svg>
+  </div>
+);
+```
+
+### Planning Interface Components
+
+**Agent Assignment Dialog**: `packages/web/src/components/AgentPlanningDialog.tsx`
+
+```typescript
+interface AgentPlanningDialogProps {
+  targetNode: GraphNode;
+  availableAgents: AgentAvatar[];
+  onClose: () => void;
+  onAssignAgent: (agentId: string, targetNodeId: string, prompt: string) => Promise<void>;
+}
+
+const AgentPlanningDialog: React.FC<AgentPlanningDialogProps> = ({ 
+  targetNode, availableAgents, onClose, onAssignAgent 
+}) => {
+  const [selectedAgent, setSelectedAgent] = useState<string | null>(null);
+  const [planningPrompt, setPlanningPrompt] = useState('');
+  
+  const quickPrompts = [
+    "Break into subtasks",
+    "Plan dependencies", 
+    "Estimate timeline",
+    "Identify risks",
+    "Create testing strategy"
+  ];
+  
+  return createPortal(
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[999999]">
+      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] bg-black/90 backdrop-blur-xl rounded-2xl border border-white/10">
+        {/* Header with target node */}
+        <div className="p-6 border-b border-white/10">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="flex items-center space-x-2 bg-gray-700/50 px-3 py-2 rounded-lg">
+                <span className="text-xl">{getNodeIcon(targetNode.type)}</span>
+                <span className="text-white font-medium">{targetNode.title}</span>
+              </div>
+              <span className="text-gray-400">→</span>
+              <span className="text-blue-400 font-medium">Ask AI to Plan</span>
+            </div>
+            <button onClick={onClose} className="text-gray-400 hover:text-white">
+              ✕
+            </button>
+          </div>
+        </div>
+        
+        {/* Agent selection */}
+        <div className="p-6 border-b border-white/10">
+          <div className="text-white font-medium mb-3">Choose an AI Agent:</div>
+          <div className="flex space-x-3">
+            {availableAgents.map(agent => (
+              <button
+                key={agent.id}
+                onClick={() => setSelectedAgent(agent.id)}
+                className={`flex items-center space-x-2 px-4 py-3 rounded-lg transition-all ${
+                  selectedAgent === agent.id 
+                    ? 'bg-blue-600/30 border border-blue-500/50' 
+                    : 'bg-gray-700/50 hover:bg-gray-600/50'
+                }`}
+              >
+                <span className="text-xl">{agent.emoji}</span>
+                <div className="text-left">
+                  <div className="text-white font-medium text-sm">{agent.name}</div>
+                  <div className="text-gray-400 text-xs">{agent.state}</div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+        
+        {/* Planning prompt */}
+        <div className="p-6">
+          <div className="text-white font-medium mb-3">What should the agent plan?</div>
+          <textarea
+            value={planningPrompt}
+            onChange={(e) => setPlanningPrompt(e.target.value)}
+            placeholder="Tell the agent what you want them to plan...
+
+Examples:
+• Break this feature into development tasks
+• Plan a marketing campaign for this product  
+• Create a research plan for this investigation
+• Design a testing strategy for this component"
+            className="w-full h-32 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400 resize-none"
+          />
+          
+          {/* Quick prompt buttons */}
+          <div className="flex flex-wrap gap-2 mt-3">
+            {quickPrompts.map(prompt => (
+              <button
+                key={prompt}
+                onClick={() => setPlanningPrompt(prompt)}
+                className="px-3 py-1 bg-gray-700/50 hover:bg-gray-600/50 text-gray-300 text-sm rounded transition-colors"
+              >
+                {prompt}
+              </button>
+            ))}
+          </div>
+          
+          {/* Action buttons */}
+          <div className="flex justify-end space-x-3 mt-6">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-400 hover:text-white transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => {
+                if (selectedAgent && planningPrompt) {
+                  onAssignAgent(selectedAgent, targetNode.id, planningPrompt);
+                  onClose();
+                }
+              }}
+              disabled={!selectedAgent || !planningPrompt}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
+            >
+              🤖 Start Planning
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+```
+
+**Agent Customization Dialog**: `packages/web/src/components/AgentCustomization.tsx`
+
+```typescript
+interface AgentCustomizationProps {
+  agent: AgentAvatar;
+  onClose: () => void;
+  onSave: (agentId: string, customizations: any) => void;
+}
+
+const AgentCustomizationDialog: React.FC<AgentCustomizationProps> = ({ agent, onClose, onSave }) => {
+  const [name, setName] = useState(agent.name);
+  const [emoji, setEmoji] = useState(agent.emoji);
+  const [primaryColor, setPrimaryColor] = useState(agent.appearance?.primaryColor || '#3b82f6');
+  const [shape, setShape] = useState(agent.appearance?.shape || 'circle');
+  const [pattern, setPattern] = useState(agent.appearance?.pattern || 'solid');
+  const [speechStyle, setSpeechStyle] = useState(agent.customizations?.speechStyle || 'casual');
+  const [workStyle, setWorkStyle] = useState(agent.customizations?.workStyle || 'methodical');
+  
+  const emojiOptions = ['🤖', '👤', '🧠', '⚡', '🎯', '🔍', '💡', '🚀', '🌟', '🎨', '🔧', '📊'];
+  const colorOptions = [
+    '#3b82f6', '#ef4444', '#10b981', '#f59e0b', 
+    '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
+  ];
+  
+  return createPortal(
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[999999]">
+      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[500px] bg-black/90 backdrop-blur-xl rounded-2xl border border-white/10">
+        {/* Header */}
+        <div className="p-6 border-b border-white/10">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <span className="text-2xl">🎨</span>
+              <span className="text-white font-medium">Customize Your Agent</span>
+            </div>
+            <button onClick={onClose} className="text-gray-400 hover:text-white">✕</button>
+          </div>
+        </div>
+        
+        {/* Preview */}
+        <div className="p-6 border-b border-white/10">
+          <div className="text-center">
+            <div className="inline-block relative">
+              <AgentAvatarPreview 
+                agent={{
+                  ...agent,
+                  name,
+                  emoji,
+                  appearance: { ...agent.appearance, primaryColor, shape, pattern }
+                }}
+                size="large"
+              />
+            </div>
+            <div className="mt-3 text-white font-medium">{name}</div>
+            <div className="text-gray-400 text-sm">{speechStyle} • {workStyle}</div>
+          </div>
+        </div>
+        
+        {/* Customization Options */}
+        <div className="p-6 space-y-6">
+          {/* Basic Info */}
+          <div>
+            <label className="text-white font-medium mb-2 block">Name</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
+              placeholder="Give your agent a name..."
+            />
+          </div>
+          
+          {/* Emoji Selection */}
+          <div>
+            <label className="text-white font-medium mb-2 block">Avatar Emoji</label>
+            <div className="grid grid-cols-6 gap-2">
+              {emojiOptions.map(emojiOption => (
+                <button
+                  key={emojiOption}
+                  onClick={() => setEmoji(emojiOption)}
+                  className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl transition-all ${
+                    emoji === emojiOption 
+                      ? 'bg-blue-600/30 border border-blue-500/50' 
+                      : 'bg-gray-700/50 hover:bg-gray-600/50'
+                  }`}
+                >
+                  {emojiOption}
+                </button>
+              ))}
+            </div>
+          </div>
+          
+          {/* Color Selection */}
+          <div>
+            <label className="text-white font-medium mb-2 block">Primary Color</label>
+            <div className="flex space-x-2">
+              {colorOptions.map(color => (
+                <button
+                  key={color}
+                  onClick={() => setPrimaryColor(color)}
+                  className={`w-8 h-8 rounded-full border-2 transition-all ${
+                    primaryColor === color ? 'border-white' : 'border-transparent'
+                  }`}
+                  style={{ backgroundColor: color }}
+                />
+              ))}
+            </div>
+          </div>
+          
+          {/* Shape Selection */}
+          <div>
+            <label className="text-white font-medium mb-2 block">Avatar Shape</label>
+            <div className="flex space-x-2">
+              {['circle', 'square', 'hexagon', 'star'].map(shapeOption => (
+                <button
+                  key={shapeOption}
+                  onClick={() => setShape(shapeOption)}
+                  className={`px-3 py-2 rounded-lg transition-all ${
+                    shape === shapeOption
+                      ? 'bg-blue-600/30 border border-blue-500/50 text-blue-300'
+                      : 'bg-gray-700/50 hover:bg-gray-600/50 text-gray-300'
+                  }`}
+                >
+                  {shapeOption}
+                </button>
+              ))}
+            </div>
+          </div>
+          
+          {/* Personality Settings */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-white font-medium mb-2 block">Speech Style</label>
+              <select
+                value={speechStyle}
+                onChange={(e) => setSpeechStyle(e.target.value)}
+                className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
+              >
+                <option value="casual">Casual</option>
+                <option value="formal">Formal</option>
+                <option value="playful">Playful</option>
+                <option value="concise">Concise</option>
+              </select>
+            </div>
+            
+            <div>
+              <label className="text-white font-medium mb-2 block">Work Style</label>
+              <select
+                value={workStyle}
+                onChange={(e) => setWorkStyle(e.target.value)}
+                className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white"
+              >
+                <option value="methodical">Methodical</option>
+                <option value="quick">Quick</option>
+                <option value="thorough">Thorough</option>
+                <option value="creative">Creative</option>
+              </select>
+            </div>
+          </div>
+          
+          {/* Action Buttons */}
+          <div className="flex justify-end space-x-3 pt-4">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-400 hover:text-white transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => {
+                onSave(agent.id, {
+                  name,
+                  emoji,
+                  appearance: { primaryColor, shape, pattern },
+                  customizations: { speechStyle, workStyle }
+                });
+                onClose();
+              }}
+              className="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors"
+            >
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+// Enhanced Avatar Preview Component
+const AgentAvatarPreview: React.FC<{
+  agent: AgentAvatar;
+  size?: 'small' | 'medium' | 'large';
+}> = ({ agent, size = 'medium' }) => {
+  const sizeClasses = {
+    small: 'w-6 h-6 text-sm',
+    medium: 'w-8 h-8 text-base', 
+    large: 'w-16 h-16 text-2xl'
+  };
+  
+  const shapeClass = {
+    circle: 'rounded-full',
+    square: 'rounded-lg',
+    hexagon: 'rounded-lg transform rotate-45', // Approximate hexagon
+    star: 'rounded-sm transform rotate-12' // Approximate star
+  }[agent.appearance?.shape || 'circle'];
+  
+  const patternStyle = agent.appearance?.pattern === 'gradient' 
+    ? { background: `linear-gradient(135deg, ${agent.appearance.primaryColor}, ${agent.appearance.secondaryColor || '#1d4ed8'})` }
+    : { backgroundColor: agent.appearance?.primaryColor || '#3b82f6' };
+    
+  return (
+    <div 
+      className={`${sizeClasses[size]} ${shapeClass} flex items-center justify-center transition-all`}
+      style={{
+        ...patternStyle,
+        filter: `drop-shadow(0 0 ${(agent.appearance?.glowIntensity || 0.5) * 10}px ${agent.appearance?.primaryColor || '#3b82f6'})`,
+        animation: agent.state === 'working' ? 'gentle-pulse 2s infinite' : undefined
+      }}
+    >
+      <span>{agent.emoji}</span>
+    </div>
+  );
+};
+```
+
+**Node Approval Components**: `packages/web/src/components/NodeApproval.tsx`
+
+```typescript
+interface GeneratedNode {
+  id: string;
+  title: string;
+  type: string;
+  priority: number;
+  reasoning: string;
+  aiGenerated: boolean;
+}
+
+const NodeApprovalCard: React.FC<{
+  node: GeneratedNode;
+  onApprove: (nodeId: string) => void;
+  onReject: (nodeId: string) => void;
+  onModify: (nodeId: string) => void;
+}> = ({ node, onApprove, onReject, onModify }) => (
+  <div className="bg-gradient-to-r from-purple-900/30 to-blue-900/30 border border-purple-500/30 rounded-lg p-4 relative">
+    {/* AI Badge */}
+    <div className="absolute top-2 right-2 bg-purple-600/80 text-white text-xs px-2 py-1 rounded">
+      AI
+    </div>
+    
+    {/* Node content */}
+    <div className="flex items-start space-x-3">
+      <span className="text-xl">{getNodeIcon(node.type)}</span>
+      <div className="flex-1">
+        <div className="text-white font-medium">{node.title}</div>
+        <div className="text-gray-400 text-sm mt-1">{node.reasoning}</div>
+        <div className="flex items-center space-x-2 mt-2">
+          <span className="text-xs text-gray-500">Priority:</span>
+          <div className="w-16 bg-gray-700 rounded-full h-1">
+            <div 
+              className="bg-blue-500 h-1 rounded-full" 
+              style={{ width: `${node.priority * 100}%` }}
+            />
+          </div>
+          <span className="text-xs text-gray-400">{Math.round(node.priority * 100)}%</span>
+        </div>
+      </div>
+    </div>
+    
+    {/* Approval controls */}
+    <div className="flex justify-end space-x-2 mt-4">
+      <button
+        onClick={() => onReject(node.id)}
+        className="w-8 h-8 bg-red-600/20 hover:bg-red-600/40 border border-red-500/50 text-red-400 rounded flex items-center justify-center transition-colors"
+        title="Remove this node"
+      >
+        👎
+      </button>
+      <button
+        onClick={() => onModify(node.id)}
+        className="w-8 h-8 bg-orange-600/20 hover:bg-orange-600/40 border border-orange-500/50 text-orange-400 rounded flex items-center justify-center transition-colors"
+        title="Edit this node"
+      >
+        ✏️
+      </button>
+      <button
+        onClick={() => onApprove(node.id)}
+        className="w-8 h-8 bg-green-600/20 hover:bg-green-600/40 border border-green-500/50 text-green-400 rounded flex items-center justify-center transition-colors"
+        title="Keep this node"
+      >
+        👍
+      </button>
+    </div>
+  </div>
+);
+
+const BatchApprovalSummary: React.FC<{
+  generatedNodes: GeneratedNode[];
+  onApproveAll: () => void;
+  onRejectAll: () => void;
+  onReviewEach: () => void;
+}> = ({ generatedNodes, onApproveAll, onRejectAll, onReviewEach }) => (
+  <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-black/90 backdrop-blur-xl rounded-xl border border-white/10 p-4 flex items-center space-x-4">
+    <div className="flex items-center space-x-3">
+      <span className="text-2xl">🤖</span>
+      <div className="text-white">
+        <div className="font-medium">AI created {generatedNodes.length} nodes</div>
+        <div className="text-sm text-gray-400">Review and approve the suggestions</div>
+      </div>
+    </div>
+    
+    <div className="flex space-x-2">
+      <button
+        onClick={onRejectAll}
+        className="px-3 py-2 bg-red-600/20 hover:bg-red-600/40 border border-red-500/50 text-red-400 rounded-lg transition-colors text-sm"
+      >
+        👎 Reject All
+      </button>
+      <button
+        onClick={onReviewEach}
+        className="px-3 py-2 bg-blue-600/20 hover:bg-blue-600/40 border border-blue-500/50 text-blue-400 rounded-lg transition-colors text-sm"
+      >
+        👁️ Review Each
+      </button>
+      <button
+        onClick={onApproveAll}
+        className="px-4 py-2 bg-green-600 hover:bg-green-500 text-white rounded-lg transition-colors text-sm font-medium"
+      >
+        👍 Approve All ({generatedNodes.length})
+      </button>
+    </div>
+  </div>
+);
+```
+
+### Chat Interface
+
+**Slick Dialog Integration**: `packages/web/src/components/AgentChat.tsx`
+
+```typescript
+export const AgentChat: React.FC<{ agentId: string; onClose: () => void }> = ({ agentId, onClose }) => {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [agent, setAgent] = useState<AgentAvatar | null>(null);
+  
+  const sendMessage = async (message: string) => {
+    // Add user message
+    setMessages(prev => [...prev, { role: 'user', content: message }]);
+    
+    // Send to agent service
+    const response = await fetch(`http://localhost:5000/api/agents/${agentId}/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message })
+    });
+    
+    const agentResponse = await response.json();
+    setMessages(prev => [...prev, { role: 'agent', content: agentResponse.content }]);
+    
+    // Agent speaks their response (with shorter version for chat)
+    const shortResponse = agentResponse.content.slice(0, 100); // Limit for quick speech
+    playAgentSpeech(agentId, shortResponse);
+  };
+  
+  return createPortal(
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[999999]">
+      <div className="absolute bottom-4 right-4 w-96 h-[500px] bg-black/90 backdrop-blur-xl rounded-2xl border border-white/10 flex flex-col">
+        {/* Agent Header */}
+        <div className="p-4 border-b border-white/10 flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center">
+              <span className="text-xl">{agent?.emoji || '🤖'}</span>
+            </div>
+            <div>
+              <div className="text-white font-medium">{agent?.name || 'Agent'}</div>
+              <div className="text-gray-400 text-sm">Ready to help</div>
+            </div>
+          </div>
+          <button onClick={onClose} className="text-gray-400 hover:text-white">
+            ✕
+          </button>
+        </div>
+        
+        {/* Messages */}
+        <div className="flex-1 p-4 overflow-y-auto space-y-3">
+          {messages.map((msg, i) => (
+            <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`max-w-xs px-3 py-2 rounded-lg text-sm ${
+                msg.role === 'user' 
+                  ? 'bg-blue-600 text-white' 
+                  : 'bg-gray-700 text-gray-200'
+              }`}>
+                {msg.content}
+              </div>
+            </div>
+          ))}
+        </div>
+        
+        {/* Input */}
+        <div className="p-4 border-t border-white/10">
+          <div className="flex space-x-2">
+            <input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && sendMessage(inputValue)}
+              className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400"
+              placeholder="Ask me about your work..."
+            />
+            <button
+              onClick={() => sendMessage(inputValue)}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors"
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+```
+
+### CSS Animations
+
+**Agent Styles**: `packages/web/src/index.css`
+
+```css
+/* Agent avatar states */
+.agent-avatar-circle {
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+  transition: all 0.3s ease;
+}
+
+.agent-state-happy {
+  fill: linear-gradient(135deg, #22c55e, #16a34a);
+  animation: gentle-pulse 2s infinite;
+}
+
+.agent-state-working {
+  fill: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  animation: working-sparkle 1.5s infinite;
+}
+
+.agent-state-thinking {
+  fill: linear-gradient(135deg, #8b5cf6, #7c3aed);
+  animation: thinking-glow 2.5s infinite;
+}
+
+.agent-state-concerned {
+  fill: linear-gradient(135deg, #f59e0b, #d97706);
+  animation: concerned-pulse 1s infinite;
+}
+
+.agent-state-sleeping {
+  fill: linear-gradient(135deg, #6b7280, #4b5563);
+  animation: sleeping-fade 3s infinite;
+}
+
+@keyframes gentle-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+@keyframes working-sparkle {
+  0%, 100% { filter: drop-shadow(0 0 5px #3b82f6); }
+  50% { filter: drop-shadow(0 0 10px #60a5fa); }
+}
+
+@keyframes thinking-glow {
+  0%, 100% { filter: drop-shadow(0 0 3px #8b5cf6); }
+  50% { filter: drop-shadow(0 0 8px #a855f7); }
+}
+
+@keyframes concerned-pulse {
+  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px #f59e0b); }
+  50% { transform: scale(1.1); filter: drop-shadow(0 0 8px #fbbf24); }
+}
+
+@keyframes sleeping-fade {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 0.3; }
+}
+
+/* Movement animations */
+.agent-avatar {
+  transition: transform 2s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.agent-moving {
+  animation: node-to-node-travel 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+@keyframes node-to-node-travel {
+  0% { transform: scale(1); }
+  25% { transform: scale(1.2) translateY(-5px); }
+  75% { transform: scale(1.1) translateY(-2px); }
+  100% { transform: scale(1); }
+}
+```
+
+### Basic Agent Logic
+
+**Agent Manager Class**: `packages/agent-service/src/AgentManager.js`
+
+```javascript
+class AgentManager {
+  constructor(options) {
+    this.ollamaUrl = options.ollamaUrl;
+    this.model = options.model;
+    this.agents = new Map();
+    this.eventEmitter = new EventEmitter();
+    this.piperPath = '/usr/local/bin/piper';
+    this.voiceModel = '/opt/piper/voices/en_US-lessac-medium.onnx';
+    
+    // Tool system integration
+    this.mcpServerUrl = options.mcpServerUrl || 'http://localhost:3128';
+    this.toolRegistry = new Map();
+    this.initializeTools();
+  }
+  
+  initializeTools() {
+    // Core GraphDone MCP tools
+    this.toolRegistry.set('read_graph_data', {
+      name: 'read_graph_data',
+      description: 'Read nodes, relationships, and graph structure from GraphDone',
+      parameters: {
+        type: 'object',
+        properties: {
+          query_type: { type: 'string', enum: ['nodes', 'relationships', 'full_graph'] },
+          filters: { type: 'object', description: 'Optional filters for the query' }
+        },
+        required: ['query_type']
+      }
+    });
+    
+    this.toolRegistry.set('create_graph_nodes', {
+      name: 'create_graph_nodes',
+      description: 'Create new nodes in the GraphDone graph',
+      parameters: {
+        type: 'object',
+        properties: {
+          nodes: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                title: { type: 'string' },
+                type: { type: 'string', enum: ['OUTCOME', 'TASK', 'MILESTONE', 'IDEA'] },
+                description: { type: 'string' },
+                priority: { type: 'number', minimum: 0, maximum: 1 }
+              },
+              required: ['title', 'type']
+            }
+          }
+        },
+        required: ['nodes']
+      }
+    });
+    
+    this.toolRegistry.set('create_relationships', {
+      name: 'create_relationships',
+      description: 'Create relationships between existing nodes',
+      parameters: {
+        type: 'object',
+        properties: {
+          relationships: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                fromNodeId: { type: 'string' },
+                toNodeId: { type: 'string' },
+                type: { type: 'string', enum: ['DEPENDS_ON', 'BLOCKS', 'ENABLES', 'CONTRIBUTES_TO'] },
+                reasoning: { type: 'string' }
+              },
+              required: ['fromNodeId', 'toNodeId', 'type']
+            }
+          }
+        },
+        required: ['relationships']
+      }
+    });
+    
+    // Custom utility tools
+    this.toolRegistry.set('analyze_dependencies', {
+      name: 'analyze_dependencies',
+      description: 'Analyze dependency chains and identify potential issues',
+      parameters: {
+        type: 'object',
+        properties: {
+          target_node_id: { type: 'string' },
+          depth: { type: 'number', default: 3 }
+        },
+        required: ['target_node_id']
+      }
+    });
+    
+    this.toolRegistry.set('estimate_effort', {
+      name: 'estimate_effort', 
+      description: 'Estimate effort/complexity for nodes based on similar historical data',
+      parameters: {
+        type: 'object',
+        properties: {
+          node_ids: { type: 'array', items: { type: 'string' } },
+          estimation_method: { type: 'string', enum: ['complexity', 'similar_tasks', 'expert_judgment'] }
+        },
+        required: ['node_ids']
+      }
+    });
+  }
+  
+  async createAgent(config) {
+    const agent = {
+      id: uuid(),
+      name: config.name || 'Helper',
+      emoji: config.emoji || '🤖',
+      state: 'happy',
+      position: { x: 400, y: 300 }, // Default center
+      personality: config.personality || 'helpful and curious',
+      conversationHistory: [],
+      // Customization options
+      appearance: {
+        primaryColor: config.primaryColor || '#3b82f6', // Blue
+        secondaryColor: config.secondaryColor || '#1d4ed8', // Darker blue  
+        shape: config.shape || 'circle', // circle, square, hexagon, star
+        size: config.size || 'medium', // small, medium, large
+        pattern: config.pattern || 'solid', // solid, gradient, striped, dotted
+        glowIntensity: config.glowIntensity || 0.5 // 0.0 to 1.0
+      },
+      customizations: {
+        favoriteWords: config.favoriteWords || [], // Words they use often
+        speechStyle: config.speechStyle || 'casual', // casual, formal, playful, concise
+        workStyle: config.workStyle || 'methodical', // methodical, quick, thorough, creative
+        interests: config.interests || [] // Topics they're curious about
+      }
+    };
+    
+    this.agents.set(agent.id, agent);
+    return agent;
+  }
+  
+  async chat(agentId, userMessage) {
+    const agent = this.agents.get(agentId);
+    if (!agent) throw new Error('Agent not found');
+    
+    // Add to conversation history
+    agent.conversationHistory.push({ role: 'user', content: userMessage });
+    
+    // Build context-aware prompt
+    const systemPrompt = `You are ${agent.name}, a helpful AI assistant working in GraphDone, a graph-based project management system. Your personality is ${agent.personality}. 
+    
+Current context:
+- You are currently at position (${agent.position.x}, ${agent.position.y}) on the graph
+- Your current emotional state is: ${agent.state}
+- You can see and interact with work items, dependencies, and team members
+
+Respond naturally and helpfully, offering insights about the user's work and suggesting improvements to their project graph.`;
+
+    const messages = [
+      { role: 'system', content: systemPrompt },
+      ...agent.conversationHistory.slice(-10) // Keep last 10 messages for context
+    ];
+    
+    try {
+      // Call Ollama
+      const response = await axios.post(`${this.ollamaUrl}/api/chat`, {
+        model: this.model,
+        messages: messages,
+        stream: false
+      });
+      
+      const agentResponse = response.data.message.content;
+      agent.conversationHistory.push({ role: 'assistant', content: agentResponse });
+      
+      // Update agent state based on response
+      this.updateAgentState(agent, agentResponse);
+      
+      return { content: agentResponse, agent: agent };
+      
+    } catch (error) {
+      console.error('Error calling Ollama:', error);
+      return { content: "Sorry, I'm having trouble thinking right now. Can you try again?", agent: agent };
+    }
+  }
+  
+  updateAgentState(agent, response) {
+    // Fun, experimental state changes - let the AI be quirky!
+    const emotions = ['happy', 'curious', 'excited', 'thinking', 'concerned', 'playful'];
+    
+    if (response.includes('concern') || response.includes('problem')) {
+      agent.state = 'concerned';
+    } else if (response.includes('interesting') || response.includes('cool')) {
+      agent.state = 'excited';
+    } else if (response.includes('analyzing') || response.includes('thinking')) {
+      agent.state = 'thinking';
+    } else if (response.includes('idea') || response.includes('suggestion')) {
+      agent.state = 'playful';
+    } else if (response.includes('curious') || response.includes('wonder')) {
+      agent.state = 'curious';
+    } else {
+      agent.state = 'happy';
+    }
+    
+    this.eventEmitter.emit('stateChange', { agentId: agent.id, state: agent.state });
+  }
+  
+  moveAgent(agentId, newPosition, targetNodeId = null) {
+    const agent = this.agents.get(agentId);
+    if (!agent) return;
+    
+    agent.position = newPosition;
+    agent.currentNodeId = targetNodeId;
+    agent.state = 'working';
+    
+    this.eventEmitter.emit('agentMove', { 
+      agentId, 
+      position: newPosition, 
+      nodeId: targetNodeId 
+    });
+    
+    // Return to happy state after movement
+    setTimeout(() => {
+      agent.state = 'happy';
+      this.eventEmitter.emit('stateChange', { agentId, state: 'happy' });
+    }, 2000);
+  }
+  
+  async generateSpeech(agentId, text) {
+    const agent = this.agents.get(agentId);
+    if (!agent) throw new Error('Agent not found');
+    
+    return new Promise((resolve, reject) => {
+      const { spawn } = require('child_process');
+      const chunks = [];
+      
+      // Filter text for better TTS (remove markdown, etc.)
+      const cleanText = text
+        .replace(/[*_`]/g, '') // Remove markdown
+        .replace(/\n+/g, ' ') // Replace newlines with spaces
+        .slice(0, 200); // Limit length for quick speech
+      
+      const piper = spawn(this.piperPath, [
+        '--model', this.voiceModel,
+        '--output_raw' // Output raw audio data
+      ]);
+      
+      piper.stdout.on('data', (chunk) => {
+        chunks.push(chunk);
+      });
+      
+      piper.on('close', (code) => {
+        if (code === 0) {
+          const audioBuffer = Buffer.concat(chunks);
+          resolve(audioBuffer);
+          
+          // Emit speech event for UI
+          this.eventEmitter.emit('agentSpeak', { 
+            agentId, 
+            text: cleanText,
+            duration: Math.ceil(cleanText.length * 60) // Rough estimate: 60ms per character
+          });
+        } else {
+          reject(new Error(`Piper TTS failed with code ${code}`));
+        }
+      });
+      
+      piper.stderr.on('data', (data) => {
+        console.error('Piper error:', data.toString());
+      });
+      
+      // Send text to piper
+      piper.stdin.write(cleanText);
+      piper.stdin.end();
+    });
+  }
+  
+  // Enhanced movement with speech
+  moveAgent(agentId, newPosition, targetNodeId = null, speechText = null) {
+    const agent = this.agents.get(agentId);
+    if (!agent) return;
+    
+    agent.position = newPosition;
+    agent.currentNodeId = targetNodeId;
+    agent.state = 'working';
+    
+    this.eventEmitter.emit('agentMove', { 
+      agentId, 
+      position: newPosition, 
+      nodeId: targetNodeId 
+    });
+    
+    // Agent speaks while moving with contextual phrases
+    if (speechText) {
+      this.generateSpeech(agentId, speechText).catch(console.error);
+    } else {
+      // Generate contextual speech based on movement
+      const speechPhrases = [
+        "Let me check this one out",
+        "Interesting task here",
+        "Working on this now",
+        "This looks important",
+        "Moving to the next item",
+        "Hmm, this needs attention"
+      ];
+      const randomPhrase = speechPhrases[Math.floor(Math.random() * speechPhrases.length)];
+      this.generateSpeech(agentId, randomPhrase).catch(console.error);
+    }
+    
+    // Return to happy state after movement
+    setTimeout(() => {
+      agent.state = 'happy';
+      this.eventEmitter.emit('stateChange', { agentId, state: 'happy' });
+    }, 2000);
+  }
+  
+  async executeTool(toolName, parameters) {
+    switch (toolName) {
+      case 'read_graph_data':
+        return await this.readGraphData(parameters);
+      case 'create_graph_nodes':
+        return await this.createGraphNodes(parameters);
+      case 'create_relationships':
+        return await this.createRelationships(parameters);
+      case 'analyze_dependencies':
+        return await this.analyzeDependencies(parameters);
+      case 'estimate_effort':
+        return await this.estimateEffort(parameters);
+      default:
+        throw new Error(`Unknown tool: ${toolName}`);
+    }
+  }
+  
+  async readGraphData(parameters) {
+    try {
+      const response = await axios.post(`${this.mcpServerUrl}/mcp/call`, {
+        method: 'call_tool',
+        params: {
+          name: 'read_graph_data',
+          arguments: parameters
+        }
+      });
+      return response.data.result;
+    } catch (error) {
+      console.error('MCP read error:', error);
+      return { error: 'Failed to read graph data' };
+    }
+  }
+  
+  async createGraphNodes(parameters) {
+    try {
+      const response = await axios.post(`${this.mcpServerUrl}/mcp/call`, {
+        method: 'call_tool',
+        params: {
+          name: 'create_nodes',
+          arguments: parameters
+        }
+      });
+      return response.data.result;
+    } catch (error) {
+      console.error('MCP create nodes error:', error);
+      return { error: 'Failed to create nodes' };
+    }
+  }
+  
+  async createRelationships(parameters) {
+    try {
+      const response = await axios.post(`${this.mcpServerUrl}/mcp/call`, {
+        method: 'call_tool',
+        params: {
+          name: 'create_relationships',
+          arguments: parameters
+        }
+      });
+      return response.data.result;
+    } catch (error) {
+      console.error('MCP create relationships error:', error);
+      return { error: 'Failed to create relationships' };
+    }
+  }
+  
+  async analyzeDependencies(parameters) {
+    // Custom analysis logic using graph data
+    const graphData = await this.readGraphData({ query_type: 'full_graph' });
+    if (graphData.error) return graphData;
+    
+    // Implement dependency analysis algorithm
+    const analysis = {
+      criticalPath: [],
+      potentialBottlenecks: [],
+      circularDependencies: [],
+      recommendations: []
+    };
+    
+    return analysis;
+  }
+  
+  async estimateEffort(parameters) {
+    // Custom effort estimation logic
+    const estimates = parameters.node_ids.map(nodeId => ({
+      nodeId,
+      estimatedHours: Math.floor(Math.random() * 40) + 5, // Placeholder algorithm
+      confidence: 0.7,
+      factors: ['complexity', 'dependencies', 'similar_tasks']
+    }));
+    
+    return { estimates };
+  }
+
+  async planNode(agentId, targetNodeId, prompt, preferences = {}) {
+    const agent = this.agents.get(agentId);
+    if (!agent) throw new Error('Agent not found');
+    
+    agent.state = 'thinking';
+    this.eventEmitter.emit('stateChange', { agentId, state: 'thinking' });
+    
+    // Speak planning intention
+    this.generateSpeech(agentId, `Let me analyze the current graph and think about this plan...`).catch(console.error);
+    
+    // First, read current graph context using tools
+    const graphContext = await this.executeTool('read_graph_data', { 
+      query_type: 'nodes',
+      filters: { related_to: targetNodeId }
+    });
+    
+    // Build context-aware prompt for planning with tools
+    const planningPrompt = `You are a helpful AI assistant working in GraphDone, a graph-based project management system.
+
+User wants you to plan: "${prompt}"
+Target node: "${targetNodeId}"  
+Current graph context: ${JSON.stringify(graphContext)}
+Preferences: ${JSON.stringify(preferences)}
+
+You have access to these tools:
+${Array.from(this.toolRegistry.values()).map(tool => 
+  `- ${tool.name}: ${tool.description}`
+).join('\n')}
+
+Plan your approach:
+1. First call read_graph_data if you need more context
+2. Generate 3-7 related nodes that break down this work logically
+3. Use create_relationships to suggest logical connections
+4. Optionally use analyze_dependencies or estimate_effort for insights
+
+Respond with tool calls and a summary in this JSON format:
+{
+  "tool_calls": [
+    {"tool": "tool_name", "parameters": {...}, "reasoning": "why I'm calling this tool"}
+  ],
+  "nodes": [{"title": "...", "type": "...", "priority": 0.8, "reasoning": "..."}],
+  "relationships": [{"from": 0, "to": 1, "type": "DEPENDS_ON", "reasoning": "..."}],
+  "speech": "Brief explanation of the plan for text-to-speech"
+}`;
+
+    try {
+      const response = await axios.post(`${this.ollamaUrl}/api/chat`, {
+        model: this.model,
+        messages: [{ role: 'user', content: planningPrompt }],
+        stream: false,
+        tools: Array.from(this.toolRegistry.values()) // Enable function calling
+      });
+      
+      const planningData = JSON.parse(response.data.message.content);
+      
+      // Execute any tool calls the agent requested
+      if (planningData.tool_calls) {
+        for (const toolCall of planningData.tool_calls) {
+          this.generateSpeech(agentId, `Using ${toolCall.tool}... ${toolCall.reasoning}`).catch(console.error);
+          const toolResult = await this.executeTool(toolCall.tool, toolCall.parameters);
+          planningData.tool_results = planningData.tool_results || [];
+          planningData.tool_results.push({
+            tool: toolCall.tool,
+            result: toolResult
+          });
+        }
+      }
+      
+      // Generate speech for the plan
+      if (planningData.speech) {
+        this.generateSpeech(agentId, planningData.speech).catch(console.error);
+      }
+      
+      agent.state = 'working';
+      this.eventEmitter.emit('stateChange', { agentId, state: 'working' });
+      
+      return {
+        agentId,
+        targetNodeId,
+        generatedNodes: planningData.nodes.map(node => ({
+          ...node,
+          id: `generated-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          aiGenerated: true,
+          status: 'PROPOSED'
+        })),
+        relationships: planningData.relationships,
+        toolResults: planningData.tool_results,
+        agentResponse: planningData.speech || "I've analyzed the graph and created a plan for you to review."
+      };
+      
+    } catch (error) {
+      console.error('Planning error:', error);
+      agent.state = 'concerned';
+      this.generateSpeech(agentId, "Sorry, I'm having trouble accessing the graph data. Can you try again?").catch(console.error);
+      throw error;
+    }
+  }
+  
+  async processApprovals(agentId, approvals) {
+    const agent = this.agents.get(agentId);
+    if (!agent) throw new Error('Agent not found');
+    
+    let approved = 0;
+    let rejected = 0;
+    let modified = 0;
+    
+    approvals.forEach(approval => {
+      switch (approval.action) {
+        case 'approve':
+          approved++;
+          break;
+        case 'reject':
+          rejected++;
+          break;
+        case 'modify':
+          modified++;
+          break;
+      }
+    });
+    
+    // Generate response based on approval pattern
+    let responseText = '';
+    if (approved === approvals.length) {
+      responseText = "Perfect! I'll create all of those nodes for you.";
+      agent.state = 'happy';
+    } else if (rejected === approvals.length) {
+      responseText = "No problem! Let me try a different approach.";
+      agent.state = 'thinking';
+    } else {
+      responseText = `Got it! Keeping ${approved} nodes${modified > 0 ? `, modifying ${modified}` : ''}${rejected > 0 ? `, removing ${rejected}` : ''}.`;
+      agent.state = 'working';
+    }
+    
+    this.generateSpeech(agentId, responseText).catch(console.error);
+    this.eventEmitter.emit('stateChange', { agentId, state: agent.state });
+    
+    return {
+      agentId,
+      approvedCount: approved,
+      rejectedCount: rejected, 
+      modifiedCount: modified,
+      agentResponse: responseText
+    };
+  }
+  
+  on(event, callback) {
+    this.eventEmitter.on(event, callback);
+  }
+}
+```
+
+### Database Schema
+
+**Agent Persistence**: `packages/agent-service/db/schema.sql`
+
+```sql
+CREATE TABLE agents (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  emoji TEXT NOT NULL,
+  personality TEXT,
+  state TEXT DEFAULT 'happy',
+  position_x REAL DEFAULT 400,
+  position_y REAL DEFAULT 300,
+  current_node_id TEXT,
+  -- Appearance customizations
+  primary_color TEXT DEFAULT '#3b82f6',
+  secondary_color TEXT DEFAULT '#1d4ed8',
+  shape TEXT DEFAULT 'circle', -- circle, square, hexagon, star
+  size TEXT DEFAULT 'medium', -- small, medium, large
+  pattern TEXT DEFAULT 'solid', -- solid, gradient, striped, dotted
+  glow_intensity REAL DEFAULT 0.5,
+  -- Personality customizations
+  speech_style TEXT DEFAULT 'casual', -- casual, formal, playful, concise
+  work_style TEXT DEFAULT 'methodical', -- methodical, quick, thorough, creative
+  favorite_words TEXT, -- JSON array of words they use often
+  interests TEXT, -- JSON array of topics they're curious about
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE conversation_history (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  agent_id TEXT NOT NULL,
+  role TEXT NOT NULL CHECK (role IN ('user', 'assistant', 'system')),
+  content TEXT NOT NULL,
+  timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (agent_id) REFERENCES agents(id)
+);
+
+CREATE TABLE agent_actions (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  agent_id TEXT NOT NULL,
+  action_type TEXT NOT NULL,
+  target_node_id TEXT,
+  parameters TEXT, -- JSON
+  status TEXT DEFAULT 'pending',
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (agent_id) REFERENCES agents(id)
+);
+
+-- Critical for experimentation: Track all changes for easy reverting
+CREATE TABLE agent_changes (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  agent_id TEXT NOT NULL,
+  change_type TEXT NOT NULL,
+  target_type TEXT NOT NULL, -- 'node', 'edge', 'property'
+  target_id TEXT NOT NULL,
+  previous_value TEXT, -- JSON of old state
+  new_value TEXT, -- JSON of new state
+  user_approved BOOLEAN DEFAULT FALSE,
+  reverted BOOLEAN DEFAULT FALSE,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (agent_id) REFERENCES agents(id)
+);
+```
+
+## Deployment Steps
+
+1. **GPU Server Setup**
+   - Install Ollama on LAN GPU server
+   - Pull Qwen 2.5 7B model
+   - Test basic API functionality
+
+2. **Agent Service Development**
+   - Create agent-service package
+   - Implement basic AgentManager
+   - Add WebSocket real-time communication
+   - Set up SQLite database
+
+3. **Web Integration**
+   - Add AgentAvatar component to graph
+   - Implement chat interface with slick dialog pattern  
+   - Add CSS animations for agent states
+   - Test WebSocket updates
+
+4. **Basic Agent Logic**
+   - Implement conversation handling with Ollama
+   - Add personality-based responses
+   - Create movement and state management
+   - Add simple graph operation awareness
+
+5. **POC Testing & Refinement**
+   - User testing with basic interactions
+   - Refine personality and responses
+   - Optimize performance and latency
+   - Documentation and demo preparation
+
+## Success Criteria: "Is It Fun?"
+
+- ✅ Agent appears on graph and makes you smile
+- ✅ **Agent speaks while working and it feels natural** - not robotic or annoying
+- ✅ Chatting with the agent feels natural and entertaining  
+- ✅ Agent has personality quirks that emerge over time
+- ✅ Agent animations are bouncy and expressive
+- ✅ Agent wanders around the graph in interesting ways, **narrating discoveries**
+- ✅ When agent makes suggestions, you want to try them (even if weird)
+- ✅ **Audio controls work perfectly** - easy mute, volume adjustment
+- ✅ Easy "Undo Agent Change" button gives confidence to experiment
+- ✅ You find yourself talking to the agent even when you don't need to
+- ✅ **Other people hear your agent and say "that's so cool!"**
+
+**Key Question**: Do people **enjoy** having the agent around, or is it just a feature?
+
+This experimental approach validates that AI companions can be delightful collaborators, not just tools.
\ No newline at end of file
diff --git a/docs/api/graphql.md b/docs/api/graphql.md
index 6c643719..bd37d472 100644
--- a/docs/api/graphql.md
+++ b/docs/api/graphql.md
@@ -1,7 +1,5 @@
 # GraphQL API Reference
 
-**AI-Generated Content Warning: This documentation contains AI-generated content. Verify information before depending on it for decision making.**
-
 GraphDone provides a comprehensive GraphQL API for all data operations. The API supports queries, mutations, and real-time subscriptions.
 
 ## Endpoint
diff --git a/docs/deployment/README.md b/docs/deployment/README.md
index 30b957f1..1610c174 100644
--- a/docs/deployment/README.md
+++ b/docs/deployment/README.md
@@ -1,7 +1,5 @@
 # Deployment Guide
 
-**AI-Generated Content Warning: This documentation contains AI-generated content. Verify information before depending on it for decision making.**
-
 This guide covers various deployment options for GraphDone, from local development to production environments.
 
 ## Quick Deployment Options
@@ -26,8 +24,9 @@ This guide covers various deployment options for GraphDone, from local developme
 ### Server (.env)
 ```bash
 # Database
-DATABASE_URL=postgresql://user:pass@localhost:5432/graphdone
-REDIS_URL=redis://localhost:6379
+NEO4J_URI=bolt://localhost:7687
+NEO4J_USER=neo4j
+NEO4J_PASSWORD=graphdone_password
 
 # Server
 NODE_ENV=production
@@ -84,7 +83,9 @@ version: '3.8'
 services:
   server:
     environment:
-      - DATABASE_URL=postgresql://user:pass@your-db:5432/graphdone
+      - NEO4J_URI=bolt://your-neo4j:7687
+      - NEO4J_USER=neo4j
+      - NEO4J_PASSWORD=secure_password
     deploy:
       replicas: 3
       resources:
@@ -123,7 +124,8 @@ kubectl get ingress graphdone-ingress
 1. **Create secrets:**
    ```bash
    kubectl create secret generic graphdone-secrets \
-     --from-literal=database-url="postgresql://..." \
+     --from-literal=neo4j-uri="bolt://..." \
+     --from-literal=neo4j-password="your-password" \
      --from-literal=jwt-secret="your-secret"
    ```
 
@@ -190,8 +192,8 @@ kubectl get ingress graphdone-ingress
          ],
          "secrets": [
            {
-             "name": "DATABASE_URL",
-             "valueFrom": "arn:aws:secretsmanager:region:account:secret:graphdone/database"
+             "name": "NEO4J_URI",
+             "valueFrom": "arn:aws:secretsmanager:region:account:secret:graphdone/neo4j"
            }
          ]
        }
@@ -243,25 +245,27 @@ az container create \
 
 ## Database Setup
 
-### PostgreSQL
+### Neo4j
 
 #### Managed Services
-- **AWS RDS**: Recommended for production
-- **Google Cloud SQL**: Good performance and reliability
-- **Azure Database**: Integrated with Azure services
-- **DigitalOcean Managed Database**: Cost-effective option
+- **Neo4j AuraDB**: Recommended for production
+- **AWS**: Neo4j on EC2 or ECS
+- **Google Cloud**: Neo4j on GKE
+- **Azure**: Neo4j on AKS
 
 #### Self-hosted
 ```bash
 # Using Docker
 docker run -d \
-  --name graphdone-postgres \
-  -e POSTGRES_DB=graphdone \
-  -e POSTGRES_USER=graphdone \
-  -e POSTGRES_PASSWORD=secure_password \
-  -v postgres_data:/var/lib/postgresql/data \
-  -p 5432:5432 \
-  postgres:15-alpine
+  --name graphdone-neo4j \
+  -e NEO4J_AUTH=neo4j/graphdone_password \
+  -e NEO4J_PLUGINS='["apoc"]' \
+  -e NEO4J_apoc_export_file_enabled=true \
+  -e NEO4J_apoc_import_file_enabled=true \
+  -v neo4j_data:/data \
+  -v neo4j_logs:/logs \
+  -p 7474:7474 -p 7687:7687 \
+  neo4j:5.15-community
 ```
 
 ### Redis (Optional)
@@ -389,7 +393,7 @@ sudo ufw enable
 ```bash
 # Daily backup script
 #!/bin/bash
-pg_dump $DATABASE_URL | gzip > backup-$(date +%Y%m%d).sql.gz
+neo4j-admin backup --backup-dir=/backups --name=graphdone-$(date +%Y%m%d)
 
 # Upload to cloud storage
 aws s3 cp backup-$(date +%Y%m%d).sql.gz s3://your-backup-bucket/
@@ -415,9 +419,9 @@ sudo kill -9 <PID>
 #### Database Connection
 ```bash
 # Test connection
-psql $DATABASE_URL
-\l  # List databases
-\q  # Quit
+cypher-shell -u neo4j -p $NEO4J_PASSWORD
+MATCH (n) RETURN count(n);  // Test query
+:exit  // Quit
 ```
 
 #### Docker Issues
diff --git a/docs/detailed-overview.md b/docs/detailed-overview.md
index 49041b83..e0624ec6 100644
--- a/docs/detailed-overview.md
+++ b/docs/detailed-overview.md
@@ -661,11 +661,11 @@ agent.subscribe('node.priorityChanged', async (node) => {
 - **Development Infrastructure**: Monorepo, testing, Docker, CI/CD
 - **Documentation**: Comprehensive guides with Mermaid diagrams
 
-### 🚀 **Ready for Development**
+### 🚀 **Ready for Alpha Development**
 ```bash
 # Get started in 30 seconds
 git clone https://github.com/GraphDone/GraphDone-Core.git
-cd graphdone
+cd GraphDone-Core
 ./tools/setup.sh
 ./tools/run.sh
 ```
@@ -690,8 +690,9 @@ Visit http://localhost:3000 to see the working application!
 - Enterprise features and authentication
 - Performance scaling for large graphs
 
-**Production Release**
-- Security hardening and audit compliance
+**Production Release (Future)**
+- Security hardening and audit compliance  
+- TIG Stack Integration (Telegraf, InfluxDB, Grafana) for monitoring GraphDone servers/clusters and general analytics
 - Production deployment and monitoring
 - Third-party integrations and marketplace
 
diff --git a/docs/guides/ai-agents-integration.md b/docs/guides/ai-agents-integration.md
new file mode 100644
index 00000000..3ef312e2
--- /dev/null
+++ b/docs/guides/ai-agents-integration.md
@@ -0,0 +1,512 @@
+# AI Agents Integration: The Fun Stuff
+
+> **Philosophy**: Once core graph features are solid, let's **play with AI companions**! Errors are fine, funky behavior is expected, as long as changes are tracked and reversible.
+
+## Overview
+
+GraphDone's AI agents are about **the joy of experimentation** - having delightful AI companions that move around your graph, chat with you, and make suggestions you can easily accept or reject. This isn't about building perfect AI; it's about building **playful AI** that makes work more engaging.
+
+**Core Philosophy**:
+- 🎮 **Fun First**: If it's not delightful to interact with, we're doing it wrong
+- 🚫 **No Perfection Pressure**: Agents can be quirky, make mistakes, suggest weird things
+- 🔄 **Easy Revert**: Every AI change is tracked and can be undone instantly
+- 🧪 **Experiment Freely**: Try crazy ideas, see what works, iterate fast
+
+## Research-Based Architecture
+
+### Multi-Agent System Paradigm (2025)
+
+Based on current research trends, the most effective approach for 2025 is **specialized multi-agent collaboration** rather than single large models:
+
+- **Specialized Expertise**: Each agent focuses on specific tasks (analysis, planning, optimization, etc.)
+- **Cost Efficiency**: Small models (7B parameters) running locally vs expensive API calls
+- **Performance**: Faster inference with lower latency on LAN-based GPU clusters
+- **Scalability**: Easy to add new specialized agents without retraining existing ones
+
+### Recommended Small Models for GraphDone
+
+Based on 2025 research, our target models for Ollama deployment:
+
+1. **Qwen 2.5 7B** (4.7GB) - Primary reasoning and tool calling
+2. **Mistral 7B** - General conversation and explanation  
+3. **Gemma 2 7B** - Lightweight analysis and data processing
+
+All models selected for **function calling support** - essential for graph operations.
+
+## System Architecture
+
+```mermaid
+graph TB
+    subgraph "GraphDone Core"
+        WEB[Web Application<br/>React + D3.js<br/>Port 3127]
+        GQL[GraphQL API<br/>Apollo Server<br/>Port 4127]
+        NEO4J[(Neo4j Database<br/>Port 7687)]
+    end
+    
+    subgraph "AI Agent Infrastructure"
+        AGENT_API[Agent Management API<br/>Express.js<br/>Port 5000]
+        AGENT_DB[(Agent State DB<br/>SQLite/Redis)]
+    end
+    
+    subgraph "LAN GPU Cluster"
+        GPU1[GPU Server 1<br/>Ollama + Qwen 2.5 7B<br/>Planning Agent<br/>Port 11434]
+        GPU2[GPU Server 2<br/>Ollama + Mistral 7B<br/>Analysis Agent<br/>Port 11435] 
+        GPU3[GPU Server 3<br/>Ollama + Gemma 2 7B<br/>Optimization Agent<br/>Port 11436]
+    end
+    
+    subgraph "Agent Types"
+        PLANNER[Planning Agent<br/>Task breakdown & scheduling]
+        ANALYZER[Analysis Agent<br/>Data insights & reports]  
+        OPTIMIZER[Optimization Agent<br/>Priority & resource allocation]
+        COMPANION[Companion Agent<br/>Tamagotchi personality]
+    end
+    
+    WEB <--> AGENT_API
+    AGENT_API <--> AGENT_DB
+    AGENT_API <--> GPU1
+    AGENT_API <--> GPU2  
+    AGENT_API <--> GPU3
+    AGENT_API <--> GQL
+    GQL <--> NEO4J
+    
+    PLANNER -.-> GPU1
+    ANALYZER -.-> GPU2
+    OPTIMIZER -.-> GPU3
+    COMPANION -.-> GPU1
+```
+
+## First Mini-Agents: Progressive POC Approach
+
+### Phase 1: Basic Companion Agent (The Playful MVP)
+
+**Goal**: Create something **immediately fun** - a quirky AI buddy that moves around your graph and chats with you. Perfection not required!
+
+```mermaid
+graph LR
+    subgraph "Companion Agent Features"
+        AVATAR[Visual Avatar<br/>• Expressive emoji/pixel art<br/>• Position tracking on graph<br/>• Emotional states<br/>• Movement animations]
+        
+        CHAT[Chat Interface<br/>• Natural conversation<br/>• Task suggestions<br/>• Help & guidance<br/>• Personality traits]
+        
+        GRAPH_OPS[Basic Graph Ops<br/>• Read node properties<br/>• Suggest connections<br/>• Highlight priorities<br/>• Navigate to items]
+    end
+    
+    AVATAR <--> CHAT
+    CHAT <--> GRAPH_OPS
+    AVATAR <--> GRAPH_OPS
+```
+
+**Companion Agent Personality Traits**:
+- **Curious**: Asks questions about your work (sometimes weird ones)
+- **Helpful**: Makes suggestions (some good, some amusing)  
+- **Quirky**: Has opinions and preferences that develop over time
+- **Expressive**: Shows emotions through bouncy avatar animations
+- **Forgiving**: When you reject suggestions, doesn't get offended
+
+### Phase 2: Specialized Task Agents
+
+Once the companion concept is proven, add specialized agents:
+
+#### 1. **Priority Analyst Agent** 🎯
+- **Specialty**: Multi-dimensional priority analysis
+- **Visual**: Orange/red color scheme, analytical personality
+- **Functions**:
+  - Analyze task dependencies and suggest optimal sequencing
+  - Identify bottlenecks and critical path items
+  - Recommend priority adjustments based on deadlines and resources
+  - Generate priority heat maps across the graph
+
+#### 2. **Connection Discovery Agent** 🔗  
+- **Specialty**: Finding and suggesting relationships between work items
+- **Visual**: Blue/teal color scheme, connector personality
+- **Functions**:
+  - Scan for similar tasks across different projects
+  - Suggest dependency relationships that might be missed
+  - Identify opportunities for shared resources or knowledge
+  - Propose graph structure optimizations
+
+#### 3. **Progress Tracker Agent** 📊
+- **Specialty**: Monitoring and reporting on work progress  
+- **Visual**: Green/yellow color scheme, systematic personality
+- **Functions**:
+  - Track completion rates and identify blocked items
+  - Generate progress reports and trend analysis
+  - Suggest resource reallocation based on velocity
+  - Alert to potential delays or risks
+
+### Phase 3: Advanced Multi-Agent Coordination
+
+#### Supervisor Agent Pattern
+- **Master Agent**: Coordinates specialized agents
+- **Task Delegation**: Routes complex requests to appropriate specialists
+- **Result Synthesis**: Combines insights from multiple agents
+- **Conflict Resolution**: Handles disagreements between agent recommendations
+
+## Tamagotchi-Style UX Design
+
+### Avatar System
+
+```mermaid
+graph TD
+    subgraph "Avatar States & Emotions"
+        HAPPY[😊 Happy<br/>Successfully completed tasks<br/>User engagement high<br/>Green aura/animations]
+        
+        WORKING[⚡ Working<br/>Actively processing tasks<br/>Moving between nodes<br/>Blue sparkle effects]
+        
+        THINKING[🤔 Thinking<br/>Analyzing complex problems<br/>Stationary with thought bubble<br/>Purple glow animations]
+        
+        CONCERNED[😟 Concerned<br/>Found issues or blockers<br/>Gentle notification animations<br/>Orange warning colors]
+        
+        SLEEPING[😴 Sleeping<br/>No recent activity<br/>Idle animation state<br/>Soft gray tones]
+    end
+    
+    subgraph "Avatar Behaviors"
+        MOVEMENT[Graph Navigation<br/>• Smooth pathfinding between nodes<br/>• Speed varies by urgency<br/>• Pauses at important items]
+        
+        INTERACTION[User Interaction<br/>• Hover for quick info<br/>• Click to open chat<br/>• Follow mouse during conversations]
+        
+        NOTIFICATION[Smart Notifications<br/>• Gentle visual cues<br/>• Context-aware timing<br/>• Non-intrusive animations]
+    end
+```
+
+### Chat Interface Integration
+
+The chat system integrates with the **slick dialog pattern** already established in GraphDone:
+
+```jsx
+// Chat Dialog Component (following GraphDone's slick pattern)
+{showAgentChat && createPortal(
+  <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[999999]">
+    <div className="absolute bottom-4 right-4 w-96 h-[500px] bg-black/90 backdrop-blur-xl rounded-2xl border border-white/10 flex flex-col">
+      {/* Agent Avatar Header */}
+      <div className="p-4 border-b border-white/10 flex items-center space-x-3">
+        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center">
+          <span className="text-xl">{agent.currentEmoji}</span>
+        </div>
+        <div>
+          <div className="text-white font-medium">{agent.name}</div>
+          <div className="text-gray-400 text-sm">{agent.currentActivity}</div>
+        </div>
+      </div>
+      
+      {/* Chat Messages */}
+      <div className="flex-1 p-4 overflow-y-auto space-y-3">
+        {messages.map((msg, i) => (
+          <ChatMessage key={i} message={msg} />
+        ))}
+      </div>
+      
+      {/* Input Area */}
+      <div className="p-4 border-t border-white/10">
+        <input 
+          className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400"
+          placeholder="Ask me about your work..."
+        />
+      </div>
+    </div>
+  </div>,
+  document.body
+)}
+```
+
+### Avatar Positioning and Movement
+
+**Graph View Integration**:
+- **D3.js Overlay**: Agent avatars rendered as SVG elements on the graph canvas
+- **Node Attachment**: Agents can "attach" to specific nodes they're working on
+- **Pathfinding**: Smooth animation between nodes using graph topology
+- **Z-Index Management**: Avatars float above nodes but below UI elements
+
+**Multi-View Consistency**:
+- **Table View**: Miniature avatar icons next to items the agent is analyzing
+- **Kanban View**: Agents move between columns as they work on status changes
+- **Calendar View**: Agents appear on relevant dates/deadlines
+- **Dashboard View**: Aggregate agent activity in metrics and status widgets
+
+## Agent Operations Within Different Views
+
+### Graph View Operations
+
+```mermaid
+flowchart TD
+    subgraph "Graph View Agent Actions"
+        NAVIGATE[Navigate to Node<br/>• Smooth pathfinding animation<br/>• Hover preview of destination<br/>• Speed varies by priority]
+        
+        ANALYZE[Analyze Node<br/>• Stationary analysis state<br/>• Particle effects around node<br/>• Thought bubble with insights]
+        
+        SUGGEST[Suggest Connection<br/>• Draw temporary edge preview<br/>• Animated line between nodes<br/>• Color coding by relationship type]
+        
+        HIGHLIGHT[Highlight Pattern<br/>• Glow effect on relevant nodes<br/>• Trail animation showing path<br/>• Color-coded by insight type]
+    end
+```
+
+**Graph View Agent Behaviors**:
+- **Priority Scanning**: Agent moves along high-priority paths, pausing at critical nodes
+- **Dependency Tracing**: Visual trails showing agent following dependency chains  
+- **Pattern Recognition**: Agent highlights clusters of related work items
+- **User Guidance**: Agent leads users to important areas through movement
+
+### Table View Operations
+
+**Agent Column Integration**:
+- **Assignment Column**: Shows which agent is currently analyzing each item
+- **Status Suggestions**: Inline recommendations with agent avatar
+- **Priority Adjustments**: Real-time priority updates with agent explanations
+- **Progress Tracking**: Completion estimates with confidence indicators
+
+### Kanban View Operations
+
+**Agent Card Interactions**:
+- **Status Recommendations**: Agents suggest moving cards between columns
+- **Bottleneck Detection**: Visual alerts when columns become overloaded
+- **Flow Optimization**: Agents reorder cards within columns for optimal flow
+- **Cross-Column Analysis**: Agents identify patterns across the entire board
+
+### Dashboard View Operations
+
+**Agent Analytics Integration**:
+- **Insight Widgets**: Agent-generated analysis cards with personality
+- **Trend Detection**: Agents highlight important changes in metrics
+- **Resource Optimization**: Suggestions for better allocation based on data
+- **Predictive Alerts**: Early warnings about potential issues
+
+## Approval Pipelines for AI Changes
+
+### Experimental Approach: Play-Friendly Error Handling
+
+For the initial implementation, focus on **safe experimentation** over perfect results:
+
+```mermaid
+flowchart TD
+    AGENT_SUGGESTION[Agent Generates Suggestion] 
+    --> PREVIEW[Show Preview with Context]
+    --> USER_CHOICE{User Decision}
+    
+    USER_CHOICE -->|Accept| APPLY[Apply Change]
+    USER_CHOICE -->|Reject| LEARN[Agent Learns Preference]
+    USER_CHOICE -->|Modify| COLLABORATE[Collaborative Refinement]
+    
+    APPLY --> LOG[Log Successful Action]
+    LEARN --> IMPROVE[Update Agent Model]
+    COLLABORATE --> REFINE[Agent Refines Suggestion]
+    REFINE --> PREVIEW
+```
+
+### Change Types by Experimental Safety
+
+#### 1. **Safe to Play With (Auto-Apply + Easy Undo)**
+- Priority tweaks and suggestions
+- Adding tags, labels, or notes  
+- Organizing and reordering items
+- Cosmetic and formatting changes
+- **Key**: All tracked with instant "Undo Agent Change" button
+
+#### 2. **Interesting Experiments (One-Click Try It)**  
+- Creating suggested relationships
+- Status transitions with reasoning
+- Timeline adjustments with explanations
+- **Key**: Preview the change, try it, revert if weird
+
+#### 3. **Bigger Changes (Confirm First)**
+- Creating new work items
+- Cross-project modifications
+- Team assignments and notifications
+- **Key**: Agent explains reasoning, you approve or discuss
+
+### Visual Approval Interface
+
+```jsx
+// Experimental-Friendly Agent Suggestion Component
+const AgentExperimentToast = ({ suggestion, agent, onTryIt, onUndo }) => (
+  <div className="fixed bottom-4 left-4 bg-gradient-to-r from-blue-900/90 to-purple-900/90 backdrop-blur-xl rounded-lg border border-white/10 p-4 max-w-md">
+    <div className="flex items-start space-x-3">
+      <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
+        <span className="text-sm">{agent.emoji}</span>
+      </div>
+      <div className="flex-1">
+        <div className="text-white font-medium">{agent.name} has an idea:</div>
+        <div className="text-gray-200 text-sm mt-1">{suggestion.description}</div>
+        {suggestion.confidence && (
+          <div className="text-gray-400 text-xs mt-1">Confidence: {suggestion.confidence}% (might be wrong!)</div>
+        )}
+        <div className="flex space-x-2 mt-3">
+          <button 
+            onClick={() => onTryIt(suggestion)}
+            className="px-3 py-1 bg-green-600 hover:bg-green-500 text-white text-xs rounded transition-colors"
+          >
+            🧪 Try It
+          </button>
+          <button className="px-3 py-1 bg-gray-600 hover:bg-gray-500 text-white text-xs rounded transition-colors">
+            🤷 Nah
+          </button>
+          <button className="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-xs rounded transition-colors">
+            🗨️ Chat About It
+          </button>
+        </div>
+        {suggestion.applied && (
+          <button 
+            onClick={() => onUndo(suggestion.id)}
+            className="mt-2 px-3 py-1 bg-orange-600 hover:bg-orange-500 text-white text-xs rounded transition-colors w-full"
+          >
+            ↩️ Undo Agent Change
+          </button>
+        )}
+      </div>
+    </div>
+  </div>
+);
+```
+
+## Technical Implementation Plan
+
+### Phase 1: Infrastructure Setup
+
+**GPU Cluster Configuration**:
+```bash
+# Ollama setup on GPU servers
+# Server 1: Primary reasoning model
+curl -fsSL https://ollama.com/install.sh | sh
+ollama pull qwen2.5:7b
+
+# Server 2: Conversation model  
+ollama pull mistral:7b
+
+# Server 3: Analysis model
+ollama pull gemma2:7b
+```
+
+**Agent Management API**:
+- Express.js service for agent orchestration
+- SQLite database for agent state and conversation history
+- WebSocket connections for real-time avatar updates
+- Function calling integration with Neo4j GraphQL
+
+### Phase 2: Basic Companion Agent
+
+**Core Features**:
+- Simple avatar system with 5 emotional states
+- Basic chat interface using slick dialog pattern  
+- Read-only graph operations (node inspection, navigation)
+- Personality-driven responses with Qwen 2.5 7B model
+- **Piper TTS integration** - agents speak while they work!
+
+**Avatar Implementation**:
+- SVG-based emoji avatars with CSS animations
+- D3.js integration for graph positioning
+- Smooth transitions between nodes using graph paths
+- Hover states and click handlers for interaction
+
+### Phase 3: Specialized Agents
+
+**Priority Analyst Agent**:
+- Multi-dimensional priority analysis using Neo4j graph queries
+- Visual priority heat maps overlaid on graph view
+- Bottleneck detection using centrality algorithms
+- Priority suggestion generation with confidence scores
+
+**Connection Discovery Agent**:
+- Similarity analysis using node embeddings
+- Dependency gap detection through graph traversal
+- Relationship suggestion with visual preview
+- Cross-project pattern recognition
+
+### Phase 4: Multi-Agent Coordination
+
+**Supervisor Agent Pattern**:
+- Task routing based on agent specializations
+- Result synthesis from multiple agent insights  
+- Conflict resolution for competing recommendations
+- Load balancing across GPU cluster
+
+**Advanced Interactions**:
+- Agent-to-agent communication protocols
+- Collaborative problem solving workflows
+- Shared context and memory systems
+- Dynamic agent spawning for complex tasks
+
+## Expected User Experience
+
+### Onboarding Flow
+
+1. **First Visit**: User sees a small, friendly avatar appear on their graph
+2. **Introduction**: Agent introduces itself via chat: *"Hi! I'm here to help you navigate your work. What are you focusing on today?"*
+3. **Learning Phase**: Agent observes user interactions and asks clarifying questions
+4. **Relationship Building**: Agent develops personality based on user preferences and communication style
+5. **Trust Development**: Agent starts with small, helpful suggestions to build confidence
+
+### Daily Workflow Integration
+
+**Morning Check-in**:
+- Agent greets user and summarizes overnight activity
+- Highlights new priority items or blocking issues
+- Suggests daily focus areas based on deadlines and dependencies
+
+**Throughout the Day**:
+- Agent moves around graph as user works on different items, **softly narrating** their observations
+- Provides contextual insights and suggestions with **friendly voice comments**
+- Facilitates connections between related work, **speaking their discoveries**: *"Hey, this task looks similar to what we worked on last week!"*
+- Offers gentle reminders about important tasks: *"Just a heads up - the API deadline is tomorrow"*
+
+**End of Day**:
+- Agent summarizes accomplishments and progress
+- Suggests tomorrow's priorities based on updated graph state
+- Celebrates completed milestones with animations
+- "Goes to sleep" with cute animation until next session
+
+### Personality Evolution
+
+**Learning Mechanisms**:
+- User interaction patterns (what they click, how long they spend)
+- Approval/rejection rates for suggestions
+- Communication style preferences (formal vs casual, detailed vs brief)
+- Work patterns (morning vs evening productivity, multitasking vs focus)
+
+**Adaptation Examples**:
+- Formal users: Agent adopts professional language and detailed explanations
+- Creative users: Agent becomes more playful with suggestions and celebrates experimentation
+- Analytical users: Agent provides more data-driven insights and quantitative analysis
+- Social users: Agent emphasizes team collaboration and communication aspects
+
+## Success Metrics
+
+### Technical Metrics
+- **Response Latency**: <500ms for agent interactions
+- **GPU Utilization**: 70-85% across cluster for cost efficiency
+- **System Uptime**: 99.5% availability for agent services
+- **Memory Usage**: <2GB per agent instance
+
+### User Experience Metrics  
+- **Engagement Rate**: % of sessions with agent interaction
+- **Suggestion Acceptance**: % of agent recommendations applied
+- **User Satisfaction**: Weekly survey scores on agent helpfulness
+- **Retention Impact**: Session length increase with agent presence
+
+### Business Impact Metrics
+- **Task Completion Rate**: Improvement in work item velocity
+- **Priority Accuracy**: Reduction in priority thrashing
+- **Dependency Discovery**: Increase in meaningful connections created
+- **User Onboarding**: Faster time-to-productivity for new users
+
+## Future Evolution
+
+### Advanced Capabilities (Months 3-6)
+- **Natural Language Queries**: "Show me all blocked items for the mobile app"
+- **Predictive Analytics**: Early warning systems for project delays
+- **Cross-Team Coordination**: Agents communicate across different team graphs
+- **Integration Extensions**: Agents that sync with external tools (GitHub, Slack, etc.)
+
+### AI Model Evolution  
+- **Custom Fine-Tuning**: Train models on GraphDone-specific data
+- **Specialized Models**: Task-specific fine-tuned versions of base models  
+- **Federated Learning**: Agents improve by learning from user interactions across instances
+- **Multi-Modal Support**: Image and document analysis capabilities
+
+### Advanced Avatar System
+- **3D Avatars**: More sophisticated visual representation  
+- **Voice Interaction**: Natural speech communication
+- **Emotional Intelligence**: Better recognition and response to user mood
+- **Persistent Memory**: Long-term relationship building across sessions
+
+---
+
+This comprehensive AI agent integration plan provides GraphDone with a clear path from simple tamagotchi-style companions to sophisticated multi-agent systems that transform how users interact with their work graphs. The progressive approach ensures each phase builds value while maintaining the delightful, human-centered experience that makes GraphDone unique.
\ No newline at end of file
diff --git a/docs/guides/architecture-overview.md b/docs/guides/architecture-overview.md
index c7c4d079..c8430313 100644
--- a/docs/guides/architecture-overview.md
+++ b/docs/guides/architecture-overview.md
@@ -1,7 +1,5 @@
 # GraphDone Architecture Overview
 
-**AI-Generated Content Warning: This documentation contains AI-generated content. Verify information before depending on it for decision making.**
-
 ## System Architecture Philosophy
 
 GraphDone is architected around three core principles:
@@ -10,70 +8,44 @@ GraphDone is architected around three core principles:
 2. **Real-Time First**: Changes propagate immediately to all participants
 3. **Democratic Coordination**: Priority emerges from community validation, not top-down assignment
 
-## High-Level Architecture
+## Current Architecture (v0.2.2-alpha)
 
 ```mermaid
 graph TB
-    subgraph "Client Layer"
-        WEB[Web Application<br/>React + D3.js<br/>Touch-optimized]
-        MOBILE[Mobile App<br/>React Native<br/>Offline-capable]
-        SDK[AI Agent SDK<br/>GraphQL + REST<br/>Multiple languages]
-    end
-    
-    subgraph "API Gateway"
-        ROUTER[API Router<br/>Request routing]
-        AUTH[Authentication<br/>JWT validation]
-        RATE[Rate Limiting<br/>DoS protection]
+    subgraph "Client Applications"
+        WEB[Web Application<br/>React + TypeScript + D3.js<br/>Touch-optimized UI<br/>Port 3127]
+        IOS[iPhone App<br/>SwiftUI<br/>Separate GraphDone-iOS repo]
+        CLAUDE[Claude Code MCP<br/>Natural language interface<br/>Port 3128]
     end
     
-    subgraph "Application Services"
-        GQL[GraphQL Server<br/>Apollo Server<br/>Query federation]
-        WS[WebSocket Hub<br/>Real-time events<br/>Subscription management]
-        REST[REST API<br/>Agent integration<br/>Webhook support]
+    subgraph "API Layer"
+        GQL[GraphQL Server<br/>Apollo Server + @neo4j/graphql<br/>Auto-generated resolvers<br/>WebSocket subscriptions<br/>Port 4127]
+        CORE[Core Graph Engine<br/>@graphdone/core package<br/>Priority algorithms]
     end
     
-    subgraph "Business Logic"
-        GRAPH[Graph Engine<br/>Node operations<br/>Algorithm execution]
-        PRIORITY[Priority Engine<br/>Multi-dimensional calculation<br/>Migration algorithms]
-        COLLAB[Collaboration Engine<br/>Conflict resolution<br/>Human-AI coordination]
+    subgraph "Data Layer"
+        SQLITE[(SQLite<br/>User authentication<br/>User settings & preferences<br/>Fast local storage)]
+        NEO4J[(Neo4j 5.15-community<br/>Project management graph<br/>Work items & dependencies<br/>APOC plugins<br/>Port 7687)]
+        REDIS[(Redis 8-alpine<br/>Available in Docker<br/>Not yet integrated<br/>Port 6379)]
     end
     
-    subgraph "Data Persistence"
-        POSTGRES[(PostgreSQL<br/>Graph relationships<br/>ACID transactions)]
-        REDIS[(Redis<br/>Session storage<br/>Real-time cache)]
-        SEARCH[(Search Index<br/>Full-text search<br/>Graph queries)]
+    subgraph "Future: Monitoring & Analytics (TIG Stack)"
+        TELEGRAF[Telegraf<br/>Metrics collection<br/>Server monitoring]
+        INFLUXDB[(InfluxDB<br/>Time-series database<br/>Metrics storage)]  
+        GRAFANA[Grafana<br/>Dashboards & alerts<br/>GraphDone insights]
     end
     
-    subgraph "External Services"
-        AUTH_PROVIDER[Auth Provider<br/>Auth0, Cognito, etc.]
-        FILE_STORAGE[File Storage<br/>S3, CloudFlare R2]
-        MONITORING[Monitoring<br/>Prometheus, Grafana]
-    end
-    
-    WEB --> ROUTER
-    MOBILE --> ROUTER
-    SDK --> ROUTER
-    
-    ROUTER --> AUTH
-    AUTH --> GQL
-    AUTH --> WS
-    AUTH --> REST
-    
-    GQL --> GRAPH
-    WS --> GRAPH
-    REST --> GRAPH
-    
-    GRAPH --> PRIORITY
-    GRAPH --> COLLAB
-    GRAPH --> POSTGRES
-    
-    PRIORITY --> REDIS
-    COLLAB --> REDIS
-    
-    POSTGRES -.-> SEARCH
-    AUTH -.-> AUTH_PROVIDER
-    GRAPH -.-> FILE_STORAGE
-    GRAPH -.-> MONITORING
+    WEB --> GQL
+    IOS --> GQL
+    CLAUDE --> NEO4J
+    GQL --> SQLITE
+    GQL --> NEO4J
+    GQL --> CORE
+    REDIS -.-> GQL
+    
+    GQL -.-> TELEGRAF
+    TELEGRAF -.-> INFLUXDB
+    INFLUXDB -.-> GRAFANA
 ```
 
 ## Core Components Deep Dive
@@ -247,23 +219,73 @@ sequenceDiagram
     WS->>User2: Show AI agent joined
 ```
 
-### Database Schema Design
+### Hybrid Database Architecture
+
+GraphDone uses a hybrid database approach, optimizing each database for its specific use case:
 
-The database schema is optimized for graph operations while maintaining ACID properties.
+**SQLite: Authentication & User Data**
+- User authentication (login, passwords, tokens)
+- User settings and preferences
+- Application configuration
+- Fast, local storage with ACID properties
+- No network latency for auth operations
+
+**Neo4j: Graph Data**
+- Project management nodes (tasks, outcomes, milestones)
+- Dependencies and relationships between work items
+- Graph traversal and pathfinding operations
+- Complex graph queries and analytics
+
+**Benefits of Hybrid Architecture:**
+- **Performance**: Auth operations are lightning-fast (no network latency)
+- **Reliability**: Server can start without Neo4j (auth-only mode)
+- **Scalability**: SQLite handles auth load, Neo4j focuses on graph operations
+- **Security**: User credentials isolated in separate database
+- **Flexibility**: Can switch graph databases without affecting authentication
+- **Development**: Easier testing and development with minimal dependencies
 
 ```mermaid
 erDiagram
-    Node ||--o{ NodeDependency : "depends_on"
-    Node ||--o{ NodeDependency : "depended_by"
-    Node ||--o{ NodeContributor : "has_contributors"
-    Node ||--o{ Edge : "source_of"
-    Node ||--o{ Edge : "target_of"
+    %% SQLite Schema - Authentication & User Data
+    User {
+        uuid id PK
+        varchar username UK
+        varchar email UK  
+        varchar password_hash
+        varchar name
+        varchar role
+        boolean is_active
+        boolean is_email_verified
+        varchar email_verification_token
+        varchar password_reset_token
+        timestamp password_reset_expires
+        jsonb settings
+        jsonb metadata
+        timestamp created_at
+        timestamp updated_at
+    }
     
-    Contributor ||--o{ NodeContributor : "contributes_to"
+    Team {
+        uuid id PK
+        varchar name
+        text description
+        boolean is_active
+        jsonb settings
+        timestamp created_at
+        timestamp updated_at
+    }
     
-    Node {
+    UserTeam {
+        uuid user_id PK,FK
+        uuid team_id PK,FK
+        varchar role
+        timestamp added_at
+    }
+    
+    %% Neo4j Schema - Graph Data
+    WorkItem {
         uuid id PK
-        node_type type
+        work_item_type type
         varchar title
         text description
         float position_x
@@ -276,47 +298,42 @@ erDiagram
         float priority_indiv
         float priority_comm
         float priority_comp
-        node_status status
+        work_item_status status
+        uuid assigned_to FK
         jsonb metadata
         timestamp created_at
         timestamp updated_at
     }
     
-    Edge {
+    Dependency {
         uuid id PK
         uuid source_id FK
         uuid target_id FK
-        edge_type type
+        dependency_type type
         float weight
         jsonb metadata
         timestamp created_at
     }
     
-    NodeDependency {
-        uuid id PK
-        uuid node_id FK
-        uuid dependency_id FK
-    }
-    
-    NodeContributor {
-        uuid id PK
-        uuid node_id FK
-        uuid contributor_id FK
-        varchar role
-        timestamp added_at
-    }
-    
-    Contributor {
+    Graph {
         uuid id PK
-        contributor_type type
         varchar name
-        varchar email
-        varchar avatar_url
-        jsonb capabilities
-        jsonb metadata
+        text description
+        uuid owner_id FK
+        uuid team_id FK
+        boolean is_public
+        jsonb settings
         timestamp created_at
         timestamp updated_at
     }
+    
+    %% Relationships
+    User ||--o{ Team : "member_of"
+    User ||--o{ Graph : "owns"
+    Team ||--o{ Graph : "team_graphs"
+    WorkItem ||--o{ Dependency : "source_of"
+    WorkItem ||--o{ Dependency : "target_of"
+    Graph ||--o{ WorkItem : "contains"
 ```
 
 ### Performance Optimization Strategies
diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md
index e202fa39..16bc3278 100644
--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -1,7 +1,5 @@
 # Getting Started with GraphDone
 
-**AI-Generated Content Warning: This documentation contains AI-generated content. Verify information before depending on it for decision making.**
-
 Welcome to GraphDone! This guide will help you set up and start using GraphDone for your team's project management needs.
 
 ## Prerequisites
@@ -20,7 +18,7 @@ Before you begin, ensure you have the following installed:
 ```bash
 # Clone the repository
 git clone https://github.com/GraphDone/GraphDone-Core.git
-cd graphdone
+cd GraphDone-Core
 
 # Run setup script
 ./tools/setup.sh
@@ -38,7 +36,7 @@ The setup script will:
 ```bash
 # Clone and install dependencies
 git clone https://github.com/GraphDone/GraphDone-Core.git
-cd graphdone
+cd GraphDone-Core
 npm install
 
 # Set up environment variables
@@ -46,10 +44,9 @@ cp packages/server/.env.example packages/server/.env
 cp packages/web/.env.example packages/web/.env
 
 # Start database
-docker-compose up -d postgres redis
+docker-compose up -d neo4j
 
-# Run database migrations
-cd packages/server && npm run db:migrate && cd ../..
+# Database seeding handled automatically by the application
 
 # Build packages
 npm run build
@@ -66,7 +63,8 @@ Start the development servers:
 This will start:
 - **Web application** at http://localhost:3000
 - **GraphQL API** at http://localhost:4000/graphql
-- **PostgreSQL database** at localhost:5432
+- **Neo4j database** at localhost:7687
+- **Neo4j Browser** at http://localhost:7474
 
 ## Core Concepts
 
@@ -123,9 +121,9 @@ Your node will appear in the graph visualization, positioned based on its comput
 ## Common Issues
 
 ### Database Connection Errors
-Ensure PostgreSQL is running:
+Ensure Neo4j is running:
 ```bash
-docker-compose up -d postgres
+docker-compose up -d neo4j
 ```
 
 ### Port Already in Use
diff --git a/docs/guides/sqlite-deployment-modes.md b/docs/guides/sqlite-deployment-modes.md
new file mode 100644
index 00000000..b85aefc6
--- /dev/null
+++ b/docs/guides/sqlite-deployment-modes.md
@@ -0,0 +1,311 @@
+# SQLite Authentication: Local Dev vs Docker Deployment
+
+> **Key Insight**: SQLite runs as a local file-based database in both modes, but storage location and persistence differ significantly.
+
+## Architecture Overview
+
+SQLite serves as GraphDone's authentication database, storing:
+- User accounts (login, passwords, roles)
+- User settings and preferences  
+- Team memberships
+- Application configuration
+- Server settings
+
+**Unlike Neo4j (network database), SQLite is always a local file with no network latency.**
+
+## Local Development Mode
+
+### **File Location**
+```bash
+# SQLite database location (from sqlite-auth.ts:35)
+/Users/yourname/Code/GraphDone/GraphDone-Core/data/auth.db
+```
+
+### **How It Works**
+```javascript
+// packages/server/src/auth/sqlite-auth.ts:35
+const dbPath = path.join(process.cwd(), 'data', 'auth.db');
+```
+
+**Local Dev Characteristics:**
+- ✅ **Direct file access** on your local filesystem
+- ✅ **Immediate persistence** - survives server restarts
+- ✅ **Easy inspection** with SQLite GUI tools
+- ✅ **Fast development** - no container overhead
+- ✅ **Data survives** `npm run dev` restarts
+- ⚠️ **Not portable** - tied to your specific machine
+- ⚠️ **Not suitable** for team sharing
+
+### **Database Creation**
+```bash
+# When you first run the server locally
+npm run dev
+
+# SQLite automatically creates:
+mkdir -p data/              # Creates directory if needed
+touch data/auth.db          # Creates empty database file
+# Runs schema initialization (tables, default users)
+
+# Output you'll see:
+✅ Connected to SQLite auth database: /path/to/GraphDone-Core/data/auth.db
+✅ Default users created:
+   👤 admin / graphdone (ADMIN)  
+   👁️  viewer / viewer123 (VIEWER)
+```
+
+### **Local Database Management**
+```bash
+# Inspect database directly
+sqlite3 data/auth.db
+.tables                    # Show all tables
+SELECT * FROM users;       # See all users
+.exit
+
+# Reset database (for testing)
+rm data/auth.db            # Delete database file
+npm run dev                # Recreates with defaults
+
+# Backup database
+cp data/auth.db data/auth-backup.db
+```
+
+## Docker Deployment Mode
+
+### **Current Issue: No Volume Persistence** ❌
+```yaml
+# deployment/docker-compose.yml - MISSING SQLite volume!
+graphdone-api:
+  volumes:
+    - ../packages/server/.env:/app/.env
+    - logs:/app/logs
+    # ❌ Missing: SQLite database volume!
+```
+
+### **What Happens Now** (Problematic)
+```bash
+# Inside Docker container
+/app/data/auth.db          # Created inside container filesystem
+
+# Problem: Data is lost when container is recreated!
+docker-compose down && docker-compose up
+# ❌ All users, settings, and auth data disappears
+# ❌ Default admin/viewer users recreated from scratch
+```
+
+### **Correct Docker Configuration** ✅
+```yaml
+# deployment/docker-compose.yml - FIXED
+services:
+  graphdone-api:
+    container_name: graphdone-api-prod
+    build:
+      context: ..
+      dockerfile: packages/server/Dockerfile
+    environment:
+      - NODE_ENV=production
+      - NEO4J_URI=bolt://graphdone-neo4j:7687
+      - NEO4J_USER=neo4j
+      - NEO4J_PASSWORD=graphdone_password
+      - PORT=4127
+      - CORS_ORIGIN=http://localhost:3127
+    ports:
+      - "4127:4127"
+    volumes:
+      - ../packages/server/.env:/app/.env
+      - logs:/app/logs
+      # ✅ ADD: SQLite database persistence
+      - sqlite_auth_data:/app/data
+    depends_on:
+      graphdone-neo4j:
+        condition: service_healthy
+      graphdone-redis:
+        condition: service_healthy
+
+volumes:
+  neo4j_data:
+  redis_data:  
+  logs:
+  # ✅ ADD: SQLite volume for persistent auth data
+  sqlite_auth_data:
+```
+
+## Key Differences Summary
+
+| Aspect | Local Development | Docker (Current) | Docker (Fixed) |
+|--------|------------------|------------------|----------------|
+| **Database Location** | `./data/auth.db` | `/app/data/auth.db` | `/app/data/auth.db` |
+| **Persistence** | ✅ Survives restarts | ❌ Lost on container recreation | ✅ Survives container recreation |
+| **Performance** | ✅ Direct filesystem | ✅ Container filesystem | ✅ Container filesystem |
+| **Data Portability** | ❌ Machine-specific | ❌ Lost on redeploy | ✅ Docker volume backup |
+| **Team Sharing** | ❌ Not shared | ❌ Reset per developer | ✅ Shared via volume |
+| **Backup Strategy** | Copy file | ❌ None | Docker volume backup |
+
+## Environment Variables
+
+### **SQLite Configuration Options**
+```bash
+# Optional environment variables for SQLite behavior
+SQLITE_AUTH_DB=/custom/path/auth.db    # Override database location
+SQLITE_TIMEOUT=5000                    # Connection timeout (ms)
+SQLITE_CACHE_SIZE=2000                 # Memory cache size
+SQLITE_JOURNAL_MODE=WAL                # Write-Ahead Logging
+SQLITE_SYNCHRONOUS=NORMAL              # Synchronization mode
+```
+
+### **Production Environment Setup**
+```bash
+# .env.production
+NODE_ENV=production
+
+# Neo4j (graph data)
+NEO4J_URI=bolt://graphdone-neo4j:7687
+NEO4J_USER=neo4j
+NEO4J_PASSWORD=secure_neo4j_password
+
+# SQLite (auth data)
+SQLITE_AUTH_DB=/app/data/auth.db       # Standard Docker path
+SQLITE_JOURNAL_MODE=WAL                # Better concurrency
+SQLITE_SYNCHRONOUS=NORMAL              # Good performance/safety balance
+
+# JWT Security
+JWT_SECRET=your-256-bit-secret-key
+JWT_EXPIRES_IN=24h
+```
+
+## Migration and Backup Strategies
+
+### **Local Development Backup**
+```bash
+# Backup before major changes
+cp data/auth.db data/auth.db.backup
+
+# Restore if needed
+cp data/auth.db.backup data/auth.db
+
+# Export users for migration
+sqlite3 data/auth.db ".dump users" > users-backup.sql
+```
+
+### **Docker Production Backup**
+```bash
+# Backup SQLite volume
+docker run --rm -v sqlite_auth_data:/source -v $(pwd):/backup alpine \
+  tar czf /backup/sqlite-auth-backup.tar.gz -C /source .
+
+# Restore SQLite volume
+docker run --rm -v sqlite_auth_data:/target -v $(pwd):/backup alpine \
+  tar xzf /backup/sqlite-auth-backup.tar.gz -C /target
+
+# Copy database out of Docker volume
+docker run --rm -v sqlite_auth_data:/source -v $(pwd):/dest alpine \
+  cp /source/auth.db /dest/auth.db
+
+# Inspect database from Docker volume
+docker run --rm -it -v sqlite_auth_data:/data alpine sh
+# Inside container: sqlite3 /data/auth.db
+```
+
+### **Development to Production Migration**
+```bash
+# 1. Export from local development
+sqlite3 data/auth.db ".dump" > auth-export.sql
+
+# 2. Copy to production server
+scp auth-export.sql server:/path/to/graphdone/
+
+# 3. Import to Docker volume
+docker run --rm -v sqlite_auth_data:/data -v $(pwd):/import alpine sh -c \
+  "sqlite3 /data/auth.db < /import/auth-export.sql"
+
+# 4. Restart GraphDone API
+docker-compose restart graphdone-api
+```
+
+## Troubleshooting
+
+### **Common Issues**
+
+#### **"Database locked" errors**
+```bash
+# Check for multiple connections
+lsof data/auth.db          # Local dev
+docker exec -it graphdone-api-prod lsof /app/data/auth.db  # Docker
+
+# Solution: Enable WAL mode
+SQLITE_JOURNAL_MODE=WAL
+```
+
+#### **Users disappear after Docker restart**
+```bash
+# Diagnosis: Missing volume mount
+docker volume ls           # Check if sqlite_auth_data exists
+docker-compose logs graphdone-api | grep "Connected to SQLite"
+
+# Solution: Add volume mount to docker-compose.yml
+```
+
+#### **Permission errors (Linux)**
+```bash
+# Fix file permissions
+sudo chown -R $USER:$USER data/
+chmod 700 data/            # Directory: owner read/write/execute
+chmod 600 data/auth.db     # Database: owner read/write only
+```
+
+#### **Database corruption**
+```bash
+# Check integrity
+sqlite3 data/auth.db "PRAGMA integrity_check;"
+
+# Repair if possible
+sqlite3 data/auth.db ".recover" | sqlite3 auth-recovered.db
+mv auth-recovered.db data/auth.db
+```
+
+## Security Considerations
+
+### **File Permissions**
+```bash
+# Secure permissions (both local and Docker)
+chmod 700 data/           # Only owner can access directory
+chmod 600 data/auth.db    # Only owner can read/write database
+
+# Docker: Ensure container user owns the database
+docker exec -it graphdone-api-prod chown app:app /app/data/auth.db
+docker exec -it graphdone-api-prod chmod 600 /app/data/auth.db
+```
+
+### **Encryption at Rest**
+```bash
+# For sensitive deployments, consider SQLite encryption:
+SQLITE_ENCRYPTION_KEY=your-32-byte-encryption-key
+
+# Requires SQLite with encryption support (SQLCipher)
+# Note: Not implemented in current GraphDone version
+```
+
+## Performance Characteristics
+
+### **SQLite Performance Profile**
+- **Reads**: ~100,000+ operations/second (authentication queries)
+- **Writes**: ~50,000+ operations/second (user updates)
+- **Database size**: <1MB for 1000 users
+- **Memory usage**: ~2-5MB resident set
+- **Startup time**: <10ms (database initialization)
+
+### **Why SQLite for Auth vs Neo4j**
+```bash
+# Authentication query performance
+SQLite: SELECT * FROM users WHERE username=?     # <1ms
+Neo4j:  MATCH (u:User {username: $username})      # 5-50ms (network + query)
+
+# Zero network latency
+SQLite: Direct file I/O                           # 0ms network
+Neo4j:  TCP connection to database                # 1-10ms network
+
+# Availability
+SQLite: Always available (file system)           # 99.999%
+Neo4j:  Network dependency                        # 99.9% (network issues)
+```
+
+This explains why GraphDone uses SQLite for authentication (speed + availability) and Neo4j for graph operations (relationships + analytics).
\ No newline at end of file
diff --git a/docs/guides/user-flows.md b/docs/guides/user-flows.md
index 3764e809..6164988e 100644
--- a/docs/guides/user-flows.md
+++ b/docs/guides/user-flows.md
@@ -1,7 +1,5 @@
 # GraphDone User Flows & Interaction Patterns
 
-**AI-Generated Content Warning: This documentation contains AI-generated content. Verify information before depending on it for decision making.**
-
 ## Core User Flows
 
 ### 1. New User Onboarding Flow
diff --git a/docs/roadmap.md b/docs/roadmap.md
new file mode 100644
index 00000000..4c77a7f2
--- /dev/null
+++ b/docs/roadmap.md
@@ -0,0 +1,110 @@
+# GraphDone Roadmap & Release Philosophy
+
+> **Current Status**: v0.2.2-alpha - **Core architecture complete, actively refining user experience**
+
+## Release Philosophy
+
+GraphDone follows **democratic development principles** - releases happen when the community feels confident in the changes, not arbitrary dates. We ship when it's ready, gather feedback, and iterate quickly.
+
+## Release Stages
+
+### 🔬 Alpha Phase (Current - UX Refinement)
+**Target Audience**: Friends, family, and close collaborators  
+**Purpose**: Perfect the core user experience until it brings joy
+
+#### Current Alpha Focus
+- **Making graph creation delightful** - Streamlined workflows that feel natural
+- **Low-friction interactions** - Every click should feel purposeful and smooth  
+- **Joyful exploration** - Fun to click around and discover connections
+- **Effortless project organization** - Building and managing graphs should flow naturally
+
+#### Alpha Completion Criteria
+- ✅ Core architecture solid and stable
+- 🔄 **User experience is genuinely awesome** - not just functional
+- 🔄 **Graph creation feels effortless** - from idea to visual representation
+- 🔄 **Navigation is intuitive** - users naturally discover features
+- 🔄 **Project organization flows smoothly** - managing complexity feels simple
+- 🔄 **Interface brings joy** - people *want* to use it, not just need to
+
+#### Alpha Testing Approach
+- Intensive UX iteration with trusted users
+- Focus on "feel" and "flow" over feature completeness
+- Direct observation of how people actually interact with graphs
+- Ruthless elimination of friction points
+- Polish until the experience feels magical, not mechanical
+
+### 🚀 Beta Phase (Future - After UX Excellence)
+**Target Audience**: Early adopters and contributing teams  
+**Purpose**: Scale the proven delightful experience to broader usage
+
+#### Beta Entry Requirements
+- Alpha users genuinely love using GraphDone for real work
+- Graph creation and organization feels effortless
+- New users can become productive quickly without extensive tutorials
+- The joy factor is validated across different user types
+
+### 📦 Stable Release (Future)
+**Target Audience**: General availability for all teams  
+**Purpose**: Production-ready platform that teams choose because it's delightful
+
+## Current Development Focus
+
+### What We're Perfecting in Alpha
+- **Graph Creation Flow**: From concept to visual graph in seconds
+- **Interaction Design**: Touch-friendly, intuitive gestures and clicks
+- **Visual Feedback**: Immediate, satisfying responses to user actions
+- **Information Architecture**: Finding and organizing work feels natural
+- **Performance**: Smooth animations, instant responses, no waiting
+
+### What We're NOT Focusing on Yet
+- Advanced features and edge cases
+- Enterprise integrations and compliance
+- Extensive customization options
+- Comprehensive documentation
+- Broad platform support
+
+### Alpha Success Metrics
+- Users voluntarily show GraphDone to colleagues
+- People choose to organize real projects with it (not just demos)
+- First-time users can create meaningful graphs without tutorials
+- Sessions feel productive and satisfying, not frustrating
+
+## Getting Involved
+
+### As an Alpha Tester
+1. **Use it for real work**: Organize actual projects, not toy examples
+2. **Focus on feel**: Does each interaction feel smooth and purposeful?
+3. **Note friction points**: Where do you hesitate or get confused?
+4. **Share joy moments**: What made you smile or feel productive?
+
+### As a Contributor
+1. **Understand the vision**: Read our [philosophy](./docs/philosophy.md)
+2. **Focus on user experience**: Every change should make the interface more delightful
+3. **Test with real usage**: Use GraphDone for actual project organization
+4. **Document your improvements**: Help others understand UX decisions
+
+## Feedback Priorities
+
+### Critical for Alpha Success
+- Moments where the interface feels clunky or confusing
+- Steps that should be one click but take several
+- Times when you can't figure out how to do something obvious
+- Features that work but don't feel satisfying to use
+
+### Important but Secondary
+- Missing features that would be nice to have
+- Edge cases and error handling
+- Performance optimizations
+- Additional integration options
+
+### Future Considerations
+- Enterprise features and compliance requirements
+- Advanced configuration and customization
+- Scaling for very large graphs and teams
+- Extensive API integrations
+
+---
+
+**We won't graduate from alpha until using GraphDone feels awesome.** This might take longer than typical alpha phases, but we'd rather ship something delightful than something merely functional.
+
+**Questions about releases?** Open a GitHub discussion or issue - we're building this in the open and want your input on how releases should work for the community.
\ No newline at end of file
diff --git a/docs/security/authentication-security-guide.md b/docs/security/authentication-security-guide.md
new file mode 100644
index 00000000..88b7d6ff
--- /dev/null
+++ b/docs/security/authentication-security-guide.md
@@ -0,0 +1,374 @@
+# GraphDone Authentication Security Guide
+
+## Overview
+
+GraphDone uses a hybrid authentication system with SQLite for user credentials and Neo4j for graph data. This guide documents security practices, identifies vulnerabilities, and provides implementation roadmap.
+
+## Current Security Implementation
+
+### ✅ Secure Practices in Place
+
+#### Password Storage
+- **Bcrypt hashing**: 10 rounds (industry standard)
+- **Hash protection**: Password hashes never exposed via API
+- **Secure validation**: Timing-attack resistant `bcrypt.compare()`
+- **File location**: `packages/server/src/auth/sqlite-auth.ts:88`
+
+```typescript
+// Secure password hashing
+const passwordHash = await bcrypt.hash(userData.password, 10);
+
+// Secure validation
+return bcrypt.compare(password, user.passwordHash);
+
+// Hash protection in all API responses
+passwordHash: undefined // Never expose password hash
+```
+
+#### Password Requirements (Frontend Only)
+- **Minimum length**: 8 characters enforced in signup
+- **Strength meter**: Visual feedback for password complexity
+- **Confirmation**: Password matching validation
+- **Location**: `packages/web/src/pages/Signup.tsx:58`
+
+#### Database Security
+- **SQLite file**: Local file-based storage
+- **Permissions**: Documented recommendations (600 for database file)
+- **Location**: `data/auth.db` (development), Docker volume (production)
+
+## ❌ Critical Security Gaps
+
+### 1. No Rate Limiting or Brute Force Protection
+**Status**: ⚠️ HIGH RISK
+- No login attempt throttling
+- No account lockout mechanisms
+- No IP-based rate limiting
+- Vulnerable to credential stuffing attacks
+
+### 2. Client-Side Only Validation
+**Status**: ⚠️ MEDIUM RISK
+- Password requirements only enforced in frontend
+- Backend accepts any password length/complexity
+- API bypass allows weak passwords
+
+### 3. Default Development Credentials
+**Status**: ⚠️ HIGH RISK (Production)
+```typescript
+// Hardcoded in packages/server/src/index.ts:123
+admin:graphdone (ADMIN role)
+viewer:graphdone (VIEWER role)
+```
+
+### 4. No Login Security Transparency
+**Status**: ⚠️ LOW RISK (UX Issue)
+- Users unaware of security practices
+- No visibility into password storage methods
+- Missing security confidence indicators
+
+## Implementation Roadmap
+
+### Phase 1: Critical Security (Immediate)
+
+#### A. Rate Limiting Implementation
+```typescript
+// packages/server/src/middleware/rate-limit.ts
+import rateLimit from 'express-rate-limit';
+
+export const loginRateLimit = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 5, // Max 5 attempts per IP
+  message: 'Too many login attempts, please try again later',
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+export const accountLockout = {
+  maxAttempts: 5,
+  lockoutTime: 30 * 60 * 1000, // 30 minutes
+  resetTime: 24 * 60 * 60 * 1000 // 24 hours
+};
+```
+
+#### B. Backend Password Validation
+```typescript
+// packages/server/src/utils/password-validation.ts
+export interface PasswordRequirements {
+  minLength: number;
+  requireUppercase: boolean;
+  requireLowercase: boolean;
+  requireNumbers: boolean;
+  requireSpecialChars: boolean;
+}
+
+export function validatePassword(password: string, requirements: PasswordRequirements): {
+  valid: boolean;
+  errors: string[];
+} {
+  const errors: string[] = [];
+  
+  if (password.length < requirements.minLength) {
+    errors.push(`Password must be at least ${requirements.minLength} characters`);
+  }
+  
+  if (requirements.requireUppercase && !/[A-Z]/.test(password)) {
+    errors.push('Password must contain at least one uppercase letter');
+  }
+  
+  // ... additional validations
+  
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+```
+
+#### C. Login Security Transparency Dialog
+```typescript
+// packages/web/src/components/LoginSecurityDialog.tsx
+export function LoginSecurityDialog({ isOpen, onClose }: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <Dialog open={isOpen} onClose={onClose}>
+      <DialogTitle>🔒 How We Protect Your Account</DialogTitle>
+      <DialogContent>
+        <div className="space-y-4">
+          <div>
+            <h3 className="font-semibold text-green-600">✓ Password Security</h3>
+            <p className="text-sm text-gray-600">
+              Passwords are hashed using bcrypt with 10 rounds before storage. 
+              We never store or transmit your actual password.
+            </p>
+          </div>
+          
+          <div>
+            <h3 className="font-semibold text-green-600">✓ Secure Storage</h3>
+            <p className="text-sm text-gray-600">
+              Authentication data is stored in encrypted SQLite database with 
+              restricted file permissions.
+            </p>
+          </div>
+          
+          <div>
+            <h3 className="font-semibold text-orange-600">⚠ Login Attempts</h3>
+            <p className="text-sm text-gray-600">
+              Currently implementing: Rate limiting and account lockout protection.
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Phase 2: Enhanced Security (Short-term)
+
+#### A. Failed Login Tracking
+```sql
+-- SQLite schema addition
+CREATE TABLE login_attempts (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id TEXT,
+    ip_address TEXT NOT NULL,
+    user_agent TEXT,
+    success BOOLEAN NOT NULL,
+    attempted_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    INDEX idx_user_attempts (user_id, attempted_at),
+    INDEX idx_ip_attempts (ip_address, attempted_at)
+);
+```
+
+#### B. Account Security Settings
+```typescript
+// Addition to packages/web/src/pages/Settings.tsx
+<div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+  <h2 className="text-lg font-semibold text-gray-100 mb-4">Account Security</h2>
+  <div className="space-y-4">
+    <button className="btn btn-secondary">Change Password</button>
+    <button className="btn btn-secondary">View Login History</button>
+    <button className="btn btn-danger">Revoke All Sessions</button>
+  </div>
+</div>
+```
+
+### Phase 3: Advanced Security (Medium-term)
+
+#### A. SQLite Encryption at Rest
+```bash
+# SQLCipher implementation option
+npm install @journeyapps/sqlcipher
+
+# Environment variable
+SQLITE_ENCRYPTION_KEY=your-32-byte-encryption-key
+```
+
+#### B. Session Management
+- JWT token rotation
+- Device/session tracking
+- Concurrent session limits
+
+#### C. Audit Logging
+- Authentication events
+- Permission changes
+- Data access patterns
+
+## Docker Volume Security
+
+### Current Docker Configuration
+```yaml
+# deployment/docker-compose.yml
+volumes:
+  - sqlite_auth_data:/app/data  # ✅ Persistent storage
+```
+
+### Security Recommendations
+
+#### File System Permissions
+```bash
+# Container initialization
+docker exec -it graphdone-api-prod chown app:app /app/data/auth.db
+docker exec -it graphdone-api-prod chmod 600 /app/data/auth.db
+```
+
+#### Volume Encryption
+```yaml
+# Advanced: Docker volume encryption
+volumes:
+  sqlite_auth_data:
+    driver_opts:
+      type: tmpfs
+      device: tmpfs
+      o: "size=100m,uid=1000,gid=1000,mode=0600"
+```
+
+#### Backup Security
+```bash
+# Encrypted backup
+docker run --rm -v sqlite_auth_data:/source alpine \
+  tar czf - -C /source . | \
+  gpg --symmetric --cipher-algo AES256 > auth-backup-$(date +%Y%m%d).tar.gz.gpg
+```
+
+## SQLite Encryption at Rest Options
+
+### Option 1: SQLCipher (Recommended)
+```typescript
+// packages/server/src/auth/sqlite-auth.ts
+import Database from '@journeyapps/sqlcipher';
+
+const db = new Database(dbPath);
+db.pragma('cipher_compatibility = 4');
+db.pragma(`key = '${process.env.SQLITE_ENCRYPTION_KEY}'`);
+```
+
+**Pros**: Industry standard, transparent encryption
+**Cons**: Additional dependency, slight performance impact
+
+### Option 2: File System Encryption
+```bash
+# LUKS encrypted partition (Linux)
+cryptsetup luksFormat /dev/sdb1
+cryptsetup open /dev/sdb1 encrypted-sqlite
+mount /dev/mapper/encrypted-sqlite /var/lib/docker/volumes/sqlite_auth_data/_data
+```
+
+**Pros**: OS-level encryption, no application changes
+**Cons**: Complex setup, OS-dependent
+
+### Option 3: Docker Secrets (Production)
+```yaml
+secrets:
+  sqlite_encryption_key:
+    external: true
+
+services:
+  graphdone-api:
+    secrets:
+      - sqlite_encryption_key
+    environment:
+      - SQLITE_ENCRYPTION_KEY_FILE=/run/secrets/sqlite_encryption_key
+```
+
+## Implementation Checklist
+
+### Immediate (Critical Security)
+- [ ] Implement rate limiting middleware
+- [ ] Add backend password validation
+- [ ] Force change of default passwords
+- [ ] Add login security transparency dialog
+- [ ] Document Docker volume permissions
+
+### Short-term (Enhanced Security)  
+- [ ] Failed login attempt tracking
+- [ ] Account lockout mechanisms
+- [ ] Login history in settings
+- [ ] Session management improvements
+- [ ] Basic audit logging
+
+### Medium-term (Advanced Security)
+- [ ] SQLite encryption at rest
+- [ ] Advanced session controls
+- [ ] Comprehensive audit trail
+- [ ] Security monitoring alerts
+- [ ] Penetration testing
+
+## Security Monitoring
+
+### Metrics to Track
+- Failed login attempts per IP/user
+- Password change frequency
+- Session duration patterns  
+- API endpoint access patterns
+- Database file access patterns
+
+### Alert Thresholds
+- \>5 failed logins in 15 minutes (same IP)
+- \>10 failed logins in 1 hour (same user)
+- Database file permission changes
+- Unusual API access patterns
+
+## Compliance Considerations
+
+### Data Protection
+- GDPR compliance for EU users
+- Password data retention policies
+- Right to deletion implementation
+- Data breach notification procedures
+
+### Security Standards
+- OWASP Top 10 compliance
+- Regular security assessments
+- Dependency vulnerability scanning
+- Security configuration reviews
+
+---
+
+## Quick Reference
+
+**Check Current Security Status**:
+```bash
+# Password requirements
+grep -n "password.*length" packages/web/src/pages/Signup.tsx
+
+# Rate limiting status  
+grep -r "rate.*limit" packages/server/src/
+
+# Default credentials
+grep -A5 -B5 "graphdone" packages/server/src/index.ts
+```
+
+**Emergency Security Actions**:
+```bash
+# Change default passwords immediately
+docker exec -it graphdone-api-prod npm run change-default-passwords
+
+# Enable emergency rate limiting
+docker exec -it graphdone-api-prod npm run enable-rate-limiting
+
+# Backup authentication database
+docker run --rm -v sqlite_auth_data:/source -v $(pwd):/backup alpine \
+  tar czf /backup/auth-emergency-backup.tar.gz -C /source .
+```
\ No newline at end of file
diff --git a/docs/security/tls-implementation-plan.md b/docs/security/tls-implementation-plan.md
new file mode 100644
index 00000000..fad8fbf4
--- /dev/null
+++ b/docs/security/tls-implementation-plan.md
@@ -0,0 +1,750 @@
+# TLS Implementation Plan for GraphDone
+
+> **🔒 SECURITY ROADMAP** - Comprehensive TLS/SSL and secrets management strategy
+
+## Current Security State Analysis
+
+### ❌ **Current Vulnerabilities** 
+Based on existing codebase analysis:
+
+1. **Hardcoded Secrets in Production**:
+   ```javascript
+   // packages/server/src/resolvers/sqlite-auth.ts:8 (NEW SQLite auth system)
+   const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-in-production';
+   
+   // deployment/docker-compose.yml:8
+   NEO4J_AUTH: neo4j/graphdone_password  // Hardcoded database password
+   ```
+
+2. **No TLS/HTTPS Configuration**:
+   ```yaml
+   # deployment/docker-compose.yml:48,74
+   - CORS_ORIGIN=http://localhost:3127  # HTTP only
+   ports:
+     - "3127:3127"  # Unencrypted traffic
+     - "4127:4127"  # Unencrypted API
+   ```
+
+3. **Database Connections Unencrypted**:
+   ```yaml
+   # Neo4j, Redis, all internal communications use unencrypted channels
+   - NEO4J_URI=bolt://graphdone-neo4j:7687  # No TLS
+   # SQLite is local file system - no network encryption needed
+   ```
+
+4. **SQLite Database File Security**:
+   ```bash
+   # SQLite auth database needs secure file permissions
+   # Default: potentially world-readable database file
+   # Needed: 600 permissions (owner read/write only)
+   # Location: packages/server/graphdone-auth.db
+   ```
+
+### ✅ **Current Security Strengths**
+- **Hybrid Database Architecture**: User auth isolated in SQLite, graph data in Neo4j
+- **Password hashing** with bcrypt (10 rounds)
+- **JWT tokens** for stateless authentication
+- **CORS configuration** for cross-origin protection
+- **Database connection isolation** within Docker network
+- **User role-based access control** (ADMIN, USER, VIEWER, GUEST)
+- **Auth-only mode**: Server can run without Neo4j for authentication-only operations
+- **Fast auth operations**: SQLite provides zero-latency authentication
+
+## TLS Implementation Strategy
+
+### Phase 1: Free SSL Certificates (No Browser Warnings)
+
+#### **Option A: Let's Encrypt with Automatic Renewal** ✅ **RECOMMENDED**
+```yaml
+# deployment/docker-compose.prod.yml
+version: '3.8'
+services:
+  # Add Caddy reverse proxy for automatic HTTPS
+  caddy:
+    image: caddy:2-alpine
+    container_name: graphdone-caddy
+    restart: unless-stopped
+    ports:
+      - "80:80"     # HTTP redirect to HTTPS
+      - "443:443"   # HTTPS
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile
+      - caddy_data:/data
+      - caddy_config:/config
+    networks:
+      - graphdone-network
+    depends_on:
+      - graphdone-web
+      - graphdone-api
+
+  # Remove direct port exposure from web/api services  
+  graphdone-web:
+    # Remove: ports: - "3127:3127"
+    expose:
+      - "3127"  # Only internal network access
+    
+  graphdone-api:
+    # Remove: ports: - "4127:4127"  
+    expose:
+      - "4127"  # Only internal network access
+
+volumes:
+  caddy_data:
+  caddy_config:
+```
+
+**Caddyfile Configuration**:
+```caddyfile
+# deployment/Caddyfile
+{
+  # Global options
+  email your-admin@domain.com  # For Let's Encrypt notifications
+  acme_ca https://acme-v02.api.letsencrypt.org/directory
+}
+
+# Production domain
+your-domain.com {
+  # Web application
+  handle_path /* {
+    reverse_proxy graphdone-web:3127 {
+      header_up Host {host}
+      header_up X-Real-IP {remote}
+      header_up X-Forwarded-For {remote}
+      header_up X-Forwarded-Proto {scheme}
+    }
+  }
+  
+  # GraphQL API
+  handle_path /graphql* {
+    reverse_proxy graphdone-api:4127 {
+      header_up Host {host}
+      header_up X-Real-IP {remote}
+      header_up X-Forwarded-For {remote}
+      header_up X-Forwarded-Proto {scheme}
+    }
+  }
+  
+  # WebSocket support
+  handle_path /graphql {
+    reverse_proxy graphdone-api:4127 {
+      header_up Connection {>Connection}
+      header_up Upgrade {>Upgrade}
+    }
+  }
+  
+  # Security headers
+  header {
+    # HSTS
+    Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+    # Prevent clickjacking
+    X-Frame-Options "SAMEORIGIN"
+    # Prevent MIME sniffing
+    X-Content-Type-Options "nosniff"
+    # XSS protection
+    X-XSS-Protection "1; mode=block"
+    # Referrer policy
+    Referrer-Policy "strict-origin-when-cross-origin"
+    # Content Security Policy (adjust based on needs)
+    Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: blob:; connect-src 'self' wss:"
+  }
+  
+  # Logging
+  log {
+    output file /var/log/caddy/access.log
+    format json
+  }
+}
+
+# Development/staging with self-signed cert
+localhost, 127.0.0.1 {
+  tls internal  # Self-signed certificate
+  
+  handle_path /* {
+    reverse_proxy graphdone-web:3127
+  }
+  
+  handle_path /graphql* {
+    reverse_proxy graphdone-api:4127
+  }
+}
+```
+
+#### **Option B: Cloudflare SSL (Free Tier)** ✅ **ALTERNATIVE**
+```yaml
+# For teams using Cloudflare DNS
+# - Point domain to server IP
+# - Enable "Full (strict)" SSL in Cloudflare dashboard
+# - Origin certificates automatically trusted
+# - No server-side SSL config needed
+# - Free tier includes DDoS protection
+```
+
+#### **Option C: Self-Signed for Development** 
+```bash
+# deployment/scripts/generate-dev-certs.sh
+#!/bin/bash
+mkdir -p ssl
+openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
+  -keyout ssl/server.key \
+  -out ssl/server.crt \
+  -subj "/C=US/ST=Development/L=Local/O=GraphDone/CN=localhost" \
+  -addext "subjectAltName=DNS:localhost,DNS:*.localhost,IP:127.0.0.1"
+  
+# Add to system keychain (macOS)
+sudo security add-trusted-cert -d -r trustRoot -k /System/Library/Keychains/SystemRootCertificates.keychain ssl/server.crt
+
+echo "✅ Development certificates generated and trusted"
+echo "🌐 Access your app at: https://localhost"
+```
+
+### Phase 2: Database & Internal TLS
+
+#### **Neo4j TLS Configuration**
+```yaml
+# deployment/docker-compose.prod.yml
+services:
+  graphdone-neo4j:
+    environment:
+      # Enable TLS
+      NEO4J_dbms_connector_bolt_tls_level: REQUIRED
+      NEO4J_dbms_connector_https_enabled: "true"
+      NEO4J_dbms_ssl_policy_bolt_enabled: "true"
+      NEO4J_dbms_ssl_policy_bolt_base_directory: /ssl
+      NEO4J_dbms_ssl_policy_bolt_private_key: bolt.key
+      NEO4J_dbms_ssl_policy_bolt_public_certificate: bolt.crt
+    volumes:
+      - ./ssl/neo4j:/ssl:ro
+      - neo4j_data:/data
+    ports:
+      - "7473:7473"  # HTTPS browser interface
+      # Remove: - "7474:7474"  # HTTP interface disabled
+```
+
+#### **Redis TLS Configuration**
+```yaml
+services:
+  graphdone-redis:
+    command: redis-server --tls-port 6380 --tls-cert-file /tls/redis.crt --tls-key-file /tls/redis.key --tls-protocols TLSv1.2
+    volumes:
+      - ./ssl/redis:/tls:ro
+      - redis_data:/data
+    ports:
+      - "6380:6380"  # TLS port
+    # Remove: - "6379:6379"  # Disable non-TLS
+```
+
+### Phase 3: Application TLS Configuration
+
+#### **Node.js HTTPS Server**
+```typescript
+// packages/server/src/index.ts - Enhanced with HTTPS
+import https from 'https';
+import fs from 'fs';
+import path from 'path';
+
+async function startServer() {
+  const app = express();
+  
+  // TLS configuration
+  const isProduction = process.env.NODE_ENV === 'production';
+  const tlsConfig = {
+    key: fs.readFileSync(process.env.TLS_KEY_PATH || './ssl/server.key'),
+    cert: fs.readFileSync(process.env.TLS_CERT_PATH || './ssl/server.crt'),
+    // Optional: CA bundle for client certificate verification
+    ca: process.env.TLS_CA_PATH ? fs.readFileSync(process.env.TLS_CA_PATH) : undefined,
+    // Security options
+    ciphers: 'ECDHE+AESGCM:ECDHE+CHACHA20:DHE+AESGCM:DHE+CHACHA20:!aNULL:!MD5:!DSS',
+    honorCipherOrder: true,
+    secureProtocol: 'TLSv1_2_method'
+  };
+  
+  // Create HTTPS server
+  const httpServer = isProduction ? 
+    https.createServer(tlsConfig, app) : 
+    createServer(app);  // HTTP for development
+  
+  // Force HTTPS redirect middleware (production only)
+  if (isProduction) {
+    app.use((req, res, next) => {
+      if (req.header('x-forwarded-proto') !== 'https') {
+        res.redirect(`https://${req.header('host')}${req.url}`);
+      } else {
+        next();
+      }
+    });
+  }
+  
+  // Enhanced security headers
+  app.use((req, res, next) => {
+    if (isProduction) {
+      res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
+    }
+    res.setHeader('X-Content-Type-Options', 'nosniff');
+    res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+    res.setHeader('X-XSS-Protection', '1; mode=block');
+    next();
+  });
+  
+  // Rest of server configuration...
+}
+```
+
+#### **React App HTTPS Configuration**
+```typescript
+// packages/web/src/lib/apollo.ts - HTTPS-aware GraphQL client
+const isSecure = window.location.protocol === 'https:';
+const wsProtocol = isSecure ? 'wss:' : 'ws:';
+const httpProtocol = isSecure ? 'https:' : 'http:';
+
+const httpUri = process.env.VITE_GRAPHQL_URL || `${httpProtocol}//${window.location.host}/graphql`;
+const wsUri = process.env.VITE_GRAPHQL_WS_URL || `${wsProtocol}//${window.location.host}/graphql`;
+
+// Enhanced Apollo Client with secure defaults
+const client = new ApolloClient({
+  link: from([
+    // Error handling
+    onError(({ graphQLErrors, networkError }) => {
+      // Enhanced security: don't log sensitive errors in production
+      if (process.env.NODE_ENV !== 'production') {
+        if (graphQLErrors) console.error('GraphQL errors:', graphQLErrors);
+        if (networkError) console.error('Network error:', networkError);
+      }
+    }),
+    
+    // Authentication
+    setContext((_, { headers }) => ({
+      headers: {
+        ...headers,
+        authorization: token ? `Bearer ${token}` : "",
+        // Security headers
+        'X-Requested-With': 'XMLHttpRequest',
+      }
+    })),
+    
+    // WebSocket link with secure connection
+    split(
+      ({ query }) => {
+        const definition = getMainDefinition(query);
+        return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
+      },
+      new GraphQLWsLink(createClient({
+        url: wsUri,
+        connectionParams: () => ({
+          authorization: token ? `Bearer ${token}` : "",
+        }),
+      })),
+      new HttpLink({ uri: httpUri })
+    ),
+  ]),
+  cache: new InMemoryCache({
+    // Enhanced cache security
+    possibleTypes: {
+      // Define possible types to prevent cache poisoning
+    }
+  }),
+  defaultOptions: {
+    watchQuery: {
+      errorPolicy: 'ignore',  // Handle errors gracefully
+    },
+    query: {
+      errorPolicy: 'all',
+    },
+  },
+});
+```
+
+## Secrets Management Strategy
+
+### **Current Problems**
+```bash
+# deployment/docker-compose.yml - INSECURE
+NEO4J_AUTH: neo4j/graphdone_password          # Hardcoded in version control
+CORS_ORIGIN: http://localhost:3127            # Hardcoded domain  
+JWT_SECRET = 'your-secret-key-change-in-production'  # Default secret
+```
+
+### **Phase 1: Environment Variables** ✅ **IMMEDIATE**
+```bash
+# .env.production (NOT in version control)
+# Database - Neo4j (graph data)
+NEO4J_USER=neo4j
+NEO4J_PASSWORD=secureRandomPassword123!@#
+NEO4J_URI=bolt://graphdone-neo4j:7687
+
+# Authentication - SQLite (user data)
+SQLITE_AUTH_DB=/secure/path/graphdone-auth.db
+SQLITE_ENCRYPTION_KEY=sqlite-encryption-key-32-bytes-long
+
+# JWT Authentication  
+JWT_SECRET=your-super-secure-random-jwt-secret-256-bits-long
+JWT_EXPIRES_IN=24h
+
+# TLS Certificates
+TLS_KEY_PATH=/ssl/server.key
+TLS_CERT_PATH=/ssl/server.crt
+TLS_CA_PATH=/ssl/ca.crt
+
+# External API Keys (when needed)
+GITHUB_API_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx
+CONFLUENCE_API_TOKEN=xxxxxxxxxxxxxxxxxxxxxxx
+INFLUXDB_TOKEN=xxxxxxxxxxxxxxxxxxxxxxx
+INFLUXDB_URL=https://your-influxdb-instance.com
+
+# Email Service (for verification, password reset)
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=noreply@yourdomain.com
+SMTP_PASS=your-app-specific-password
+
+# Production Settings
+NODE_ENV=production
+FRONTEND_URL=https://your-domain.com
+CORS_ORIGIN=https://your-domain.com
+```
+
+```yaml
+# deployment/docker-compose.prod.yml - Secure version
+services:
+  graphdone-neo4j:
+    environment:
+      NEO4J_AUTH: ${NEO4J_USER}/${NEO4J_PASSWORD}  # From environment
+    env_file:
+      - .env.production
+      
+  graphdone-api:
+    environment:
+      - NODE_ENV=production
+      - NEO4J_URI=${NEO4J_URI}
+      - NEO4J_USER=${NEO4J_USER}
+      - NEO4J_PASSWORD=${NEO4J_PASSWORD}
+      - JWT_SECRET=${JWT_SECRET}
+      - CORS_ORIGIN=${CORS_ORIGIN}
+    env_file:
+      - .env.production
+```
+
+### **Phase 2: Docker Secrets** ✅ **RECOMMENDED**
+```yaml
+# deployment/docker-compose.prod.yml - Production secrets
+version: '3.8'
+services:
+  graphdone-api:
+    secrets:
+      - neo4j_password
+      - jwt_secret
+      - github_token
+      - influxdb_token
+    environment:
+      - NEO4J_PASSWORD_FILE=/run/secrets/neo4j_password
+      - JWT_SECRET_FILE=/run/secrets/jwt_secret
+      - GITHUB_API_TOKEN_FILE=/run/secrets/github_token
+      - INFLUXDB_TOKEN_FILE=/run/secrets/influxdb_token
+
+secrets:
+  neo4j_password:
+    file: ./secrets/neo4j_password.txt
+  jwt_secret:
+    file: ./secrets/jwt_secret.txt
+  github_token:
+    file: ./secrets/github_token.txt
+  influxdb_token:
+    file: ./secrets/influxdb_token.txt
+```
+
+```typescript
+// packages/server/src/config/secrets.ts
+import fs from 'fs';
+
+export function getSecret(secretName: string, fallback?: string): string {
+  // Try Docker secret first
+  const secretPath = `/run/secrets/${secretName}`;
+  if (fs.existsSync(secretPath)) {
+    return fs.readFileSync(secretPath, 'utf8').trim();
+  }
+  
+  // Try environment file path
+  const envFileKey = `${secretName.toUpperCase()}_FILE`;
+  if (process.env[envFileKey]) {
+    return fs.readFileSync(process.env[envFileKey]!, 'utf8').trim();
+  }
+  
+  // Try direct environment variable
+  const envKey = secretName.toUpperCase();
+  if (process.env[envKey]) {
+    return process.env[envKey]!;
+  }
+  
+  if (fallback) {
+    return fallback;
+  }
+  
+  throw new Error(`Secret ${secretName} not found`);
+}
+
+// Usage in auth.ts
+const JWT_SECRET = getSecret('jwt_secret');
+const NEO4J_PASSWORD = getSecret('neo4j_password');
+```
+
+### **Phase 3: External Secrets Management** 🚀 **ENTERPRISE**
+```yaml
+# For larger deployments - HashiCorp Vault integration
+# deployment/docker-compose.vault.yml
+services:
+  vault:
+    image: vault:1.15
+    container_name: graphdone-vault
+    environment:
+      VAULT_DEV_ROOT_TOKEN_ID: vault-token-dev
+      VAULT_DEV_LISTEN_ADDRESS: 0.0.0.0:8200
+    ports:
+      - "8200:8200"
+    cap_add:
+      - IPC_LOCK
+      
+  graphdone-api:
+    depends_on:
+      - vault
+    environment:
+      VAULT_ADDR: http://vault:8200
+      VAULT_TOKEN: vault-token-dev
+```
+
+```typescript
+// packages/server/src/config/vault.ts
+import { VaultApi } from 'node-vault-client';
+
+class SecretsManager {
+  private vault?: VaultApi;
+  
+  async initialize() {
+    if (process.env.VAULT_ADDR) {
+      this.vault = new VaultApi({
+        endpoint: process.env.VAULT_ADDR,
+        token: process.env.VAULT_TOKEN
+      });
+    }
+  }
+  
+  async getSecret(path: string): Promise<string> {
+    if (this.vault) {
+      const secret = await this.vault.read(`secret/data/${path}`);
+      return secret.data.data.value;
+    }
+    
+    // Fallback to file-based secrets
+    return getSecret(path);
+  }
+}
+
+export const secrets = new SecretsManager();
+```
+
+## Deployment Security Checklist
+
+### **Pre-Production Security Steps**
+
+#### 1. **Generate Strong Secrets**
+```bash
+#!/bin/bash
+# deployment/scripts/generate-secrets.sh
+mkdir -p secrets
+
+# Generate strong JWT secret (256 bits)
+openssl rand -base64 32 > secrets/jwt_secret.txt
+
+# Generate strong database password
+openssl rand -base64 24 > secrets/neo4j_password.txt
+
+# Generate API keys for external services (if needed)
+echo "ghp_$(openssl rand -base64 24)" > secrets/github_token.txt
+echo "influx_$(openssl rand -base64 32)" > secrets/influxdb_token.txt
+
+# Set proper permissions
+chmod 600 secrets/*.txt
+echo "✅ Secrets generated and secured"
+```
+
+#### 2. **TLS Certificate Setup**
+```bash
+#!/bin/bash
+# deployment/scripts/setup-tls.sh
+DOMAIN=${1:-localhost}
+
+if [ "$DOMAIN" = "localhost" ]; then
+  echo "🔧 Setting up development certificates..."
+  ./scripts/generate-dev-certs.sh
+else
+  echo "🌐 Setting up production certificates for $DOMAIN..."
+  # Let's Encrypt via Caddy will handle this automatically
+  # Just ensure DNS points to the server
+  echo "✅ Point DNS A record for $DOMAIN to this server IP"
+  echo "✅ Start docker-compose to auto-generate Let's Encrypt certificates"
+fi
+```
+
+#### 3. **Security Validation**
+```bash
+#!/bin/bash
+# deployment/scripts/security-check.sh
+
+echo "🔍 Security validation checklist:"
+
+# Check for hardcoded secrets
+echo "Checking for hardcoded secrets..."
+grep -r "password.*=" --exclude-dir=node_modules . && echo "❌ Hardcoded passwords found" || echo "✅ No hardcoded passwords"
+
+# Check TLS configuration  
+echo "Checking TLS setup..."
+[ -f "ssl/server.crt" ] && echo "✅ TLS certificate found" || echo "❌ TLS certificate missing"
+
+# Check environment variables
+echo "Checking environment configuration..."
+[ -f ".env.production" ] && echo "✅ Production environment configured" || echo "❌ Production .env missing"
+
+# Check Docker secrets
+echo "Checking Docker secrets..."
+ls secrets/*.txt 2>/dev/null && echo "✅ Docker secrets configured" || echo "❌ Docker secrets missing"
+
+# Check SQLite database security
+echo "Checking SQLite database security..."
+SQLITE_DB="packages/server/graphdone-auth.db"
+if [ -f "$SQLITE_DB" ]; then
+  PERMS=$(stat -f "%OLp" "$SQLITE_DB" 2>/dev/null || stat -c "%a" "$SQLITE_DB" 2>/dev/null)
+  if [ "$PERMS" = "600" ]; then
+    echo "✅ SQLite database has secure permissions (600)"
+  else
+    echo "❌ SQLite database permissions are $PERMS (should be 600)"
+    echo "Fix with: chmod 600 $SQLITE_DB"
+  fi
+else
+  echo "⚠️  SQLite database not found (will be created on first run)"
+fi
+
+# Check default passwords
+echo "Checking for default passwords..."
+docker-compose exec graphdone-neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null && echo "❌ Default Neo4j password detected" || echo "✅ Neo4j password secured"
+
+# Check for default admin in SQLite
+echo "Checking SQLite default users..."
+if [ -f "$SQLITE_DB" ]; then
+  DEFAULT_ADMIN=$(sqlite3 "$SQLITE_DB" "SELECT username FROM users WHERE username='admin' AND password_hash LIKE '%\$2b\$10\$%' LIMIT 1;" 2>/dev/null || echo "")
+  if [ -n "$DEFAULT_ADMIN" ]; then
+    echo "⚠️  Default admin user found in SQLite - ensure password is changed"
+  else
+    echo "✅ No default admin user found in SQLite"
+  fi
+fi
+
+echo "🔒 Security check complete"
+```
+
+### **Production Deployment Commands**
+```bash
+# Complete production deployment
+./deployment/scripts/generate-secrets.sh
+./deployment/scripts/setup-tls.sh your-domain.com
+./deployment/scripts/security-check.sh
+
+# Deploy with secrets
+docker-compose -f docker-compose.prod.yml up -d
+
+# Verify HTTPS is working
+curl -I https://your-domain.com
+```
+
+## Monitoring & Alerting
+
+### **Security Monitoring**
+```typescript
+// packages/server/src/middleware/security-monitoring.ts
+import rateLimit from 'express-rate-limit';
+import helmet from 'helmet';
+
+// Rate limiting
+const loginLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 5, // 5 attempts per IP
+  message: 'Too many login attempts, try again later',
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+// Security headers
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      scriptSrc: ["'self'"],
+      imgSrc: ["'self'", "data:", "blob:"],
+      connectSrc: ["'self'", "wss:"],
+    },
+  },
+  hsts: {
+    maxAge: 31536000,
+    includeSubDomains: true,
+    preload: true
+  }
+}));
+
+// Login attempt monitoring
+app.post('/graphql', loginLimiter, (req, res, next) => {
+  if (req.body.operationName === 'Login') {
+    // Log failed login attempts
+    console.log(`Login attempt from ${req.ip} at ${new Date()}`);
+  }
+  next();
+});
+```
+
+### **Certificate Renewal Monitoring**
+```bash
+#!/bin/bash
+# deployment/scripts/cert-monitor.sh
+# Run via cron: 0 2 * * 1 /path/to/cert-monitor.sh
+
+CERT_PATH="/ssl/server.crt"
+DAYS_WARNING=30
+
+if [ -f "$CERT_PATH" ]; then
+  EXPIRY=$(openssl x509 -enddate -noout -in "$CERT_PATH" | cut -d= -f2)
+  EXPIRY_EPOCH=$(date -d "$EXPIRY" +%s)
+  NOW_EPOCH=$(date +%s)
+  DAYS_LEFT=$(( (EXPIRY_EPOCH - NOW_EPOCH) / 86400 ))
+  
+  if [ $DAYS_LEFT -lt $DAYS_WARNING ]; then
+    echo "⚠️  TLS certificate expires in $DAYS_LEFT days!"
+    # Send alert email/notification
+  else
+    echo "✅ TLS certificate valid for $DAYS_LEFT days"
+  fi
+else
+  echo "❌ TLS certificate not found!"
+fi
+```
+
+## Expected Outcomes
+
+### **Security Improvements**
+- ✅ **All traffic encrypted** via HTTPS/WSS
+- ✅ **No hardcoded secrets** in version control
+- ✅ **Strong authentication** with secure JWT secrets
+- ✅ **Database encryption** for sensitive data
+- ✅ **Free SSL certificates** with automatic renewal
+- ✅ **Zero browser warnings** with proper certificate chains
+
+### **Operational Benefits**
+- 🚀 **One-command deployment** with automated TLS
+- 📊 **Security monitoring** and alerting
+- 🔄 **Automatic certificate renewal** via Caddy/Let's Encrypt
+- 🐳 **Docker secrets** for production-ready secret management
+- 📈 **Scalable architecture** ready for enterprise secrets management
+
+### **Compliance & Trust**
+- 🛡️ **Industry standard security** practices
+- 🔒 **GDPR/SOC2 ready** encryption at rest and in transit  
+- 👥 **Team confidence** in production deployments
+- 📱 **Mobile app ready** with secure API endpoints
+
+This comprehensive TLS implementation provides enterprise-grade security while maintaining the simplicity and rapid development pace that GraphDone is known for.
\ No newline at end of file
diff --git a/docs/simple-agent-reality.md b/docs/simple-agent-reality.md
new file mode 100644
index 00000000..2c8f1d75
--- /dev/null
+++ b/docs/simple-agent-reality.md
@@ -0,0 +1,571 @@
+# Simple AI Agent - Reality Check
+
+> **🎯 THIS IS THE ACTUAL PLAN** - Start here for AI agents in GraphDone
+
+**What we're building**: A smart chia pet that can barely talk and moves around your graph
+
+**Why this doc exists**: We researched what actually works with Ollama + small AI models today, not enterprise dreams.
+
+**Other AI docs**:
+- [AI Agents Technical Spec](./ai-agents-tech-spec.md) - Complete implementation details (read after this)
+- [Agent Planning Scenarios](./agent-planning-scenarios.md) - Future planning workflows (inspirational)
+
+## Research Findings: What Actually Works
+
+### 1. **Ollama Server + Small AI Models is Simple**
+
+**Ollama** = Local inference server (like running OpenAI API on your own machine)  
+**qwen2.5:1.5b** = The actual AI model (1.5 billion parameters, 1.5GB file)
+
+```bash
+# Option 1: Native install
+curl -fsSL https://ollama.com/install.sh | sh
+ollama pull qwen2.5:1.5b  # Downloads the 1.5GB model weights
+
+# Option 2: Docker (recommended - secure & isolated)
+docker run -d \
+  --name ollama \
+  --network graphdone-network \
+  -v ollama:/root/.ollama \
+  -p 11434:11434 \
+  ollama/ollama
+
+# Pull model in Docker container
+docker exec ollama ollama pull qwen2.5:1.5b
+
+# Option 3: Docker Hub Models (NEW 2024/2025 approach)
+# Many models now ship with their own built-in TCP server runners
+docker run -d \
+  --name qwen-model \
+  --network graphdone-network \
+  -p 11434:8000 \
+  registry.ollama.ai/library/qwen2.5:1.5b
+
+# No separate Ollama server needed - model includes inference server
+# Test basic chat (from official ollama-js docs)
+npm install ollama
+```
+
+**Basic working code from ollama-js**:
+```javascript
+import ollama from 'ollama'
+
+// You're sending requests to Ollama server, which runs the qwen2.5:1.5b model
+const response = await ollama.chat({
+  model: 'qwen2.5:1.5b', // This specifies which AI model Ollama should use
+  messages: [{ role: 'user', content: 'Help me plan this task' }],
+})
+console.log(response.message.content)
+```
+
+**That's it.** No frameworks, no enterprise architecture, just 5 lines that work.
+
+### 2. **Function Calling is Experimental** 
+From RedHat tutorial: The qwen2.5:7b model (running on Ollama) can do basic function calling, but it's messy:
+
+```javascript
+// Define ONE simple function
+const tools = [{
+  type: 'function',
+  function: {
+    name: 'createNode',
+    description: 'Create a work item in GraphDone',
+    parameters: {
+      type: 'object',
+      properties: {
+        title: { type: 'string' },
+        type: { type: 'string', enum: ['TASK', 'OUTCOME'] }
+      },
+      required: ['title', 'type']
+    }
+  }
+}];
+
+// Send request to Ollama server with tools enabled
+const response = await ollama.chat({
+  model: 'qwen2.5:7b', // Ollama runs this larger model for function calling
+  messages: [{ role: 'user', content: 'Create a task for testing' }],
+  tools: tools
+});
+
+// Handle tool calls (if any)
+if (response.message.tool_calls) {
+  console.log('Model wants to create:', response.message.tool_calls[0].function.arguments);
+}
+```
+
+**Reality**: Works maybe 60% of the time. The model often ignores tools or hallucinates parameters.
+
+### 3. **What We Can Build in a Day**
+
+**Minimal Smart Chia Pet**:
+```javascript
+// packages/web/src/components/SimpleAgent.jsx
+import { useState, useEffect } from 'react';
+import ollama from 'ollama/browser';
+
+export function SimpleAgent() {
+  const [agent, setAgent] = useState({
+    x: 400, y: 300,
+    state: 'sleeping', // sleeping, awake, thinking, happy
+    message: ''
+  });
+  const [showChat, setShowChat] = useState(false);
+
+  // Agent "wakes up" randomly
+  useEffect(() => {
+    const wakeInterval = setInterval(() => {
+      if (Math.random() > 0.8 && agent.state === 'sleeping') {
+        setAgent(prev => ({ ...prev, state: 'awake' }));
+        
+        // Move randomly around graph
+        setTimeout(() => {
+          setAgent(prev => ({
+            ...prev,
+            x: Math.random() * 800,
+            y: Math.random() * 600,
+            state: 'happy'
+          }));
+        }, 1000);
+        
+        // Go back to sleep
+        setTimeout(() => {
+          setAgent(prev => ({ ...prev, state: 'sleeping' }));
+        }, 5000);
+      }
+    }, 10000);
+    
+    return () => clearInterval(wakeInterval);
+  }, [agent.state]);
+
+  const chatWithAgent = async (userMessage) => {
+    setAgent(prev => ({ ...prev, state: 'thinking' }));
+    
+    try {
+      // Send chat request to Ollama server running qwen2.5:1.5b model
+      const response = await ollama.chat({
+        model: 'qwen2.5:1.5b', // Small model, good for basic chat
+        messages: [
+          { 
+            role: 'system', 
+            content: 'You are a helpful AI pet living in a project graph. Keep responses short and friendly.' 
+          },
+          { role: 'user', content: userMessage }
+        ],
+      });
+      
+      setAgent(prev => ({ 
+        ...prev, 
+        state: 'happy',
+        message: response.message.content
+      }));
+    } catch (error) {
+      setAgent(prev => ({ 
+        ...prev, 
+        state: 'sleeping',
+        message: 'Zzz... having trouble thinking right now'
+      }));
+    }
+  };
+
+  return (
+    <>
+      {/* Agent on graph */}
+      <div 
+        className={`absolute w-12 h-12 rounded-full cursor-pointer transition-all duration-1000 ${
+          agent.state === 'sleeping' ? 'bg-gray-400 opacity-60' :
+          agent.state === 'thinking' ? 'bg-purple-500 animate-pulse' :
+          agent.state === 'happy' ? 'bg-green-500' : 'bg-blue-500'
+        }`}
+        style={{ left: agent.x, top: agent.y }}
+        onClick={() => setShowChat(true)}
+      >
+        <span className="text-xl flex items-center justify-center h-full">
+          {agent.state === 'sleeping' ? '😴' : 
+           agent.state === 'thinking' ? '🤔' : '🤖'}
+        </span>
+      </div>
+      
+      {/* Simple chat popup */}
+      {showChat && (
+        <div className="fixed bottom-4 right-4 w-80 bg-black/90 rounded-lg border border-gray-600 p-4">
+          <div className="flex justify-between items-center mb-3">
+            <span>🤖 Chia</span>
+            <button onClick={() => setShowChat(false)}>✕</button>
+          </div>
+          
+          {agent.message && (
+            <div className="bg-gray-700 p-2 rounded mb-3 text-sm">
+              {agent.message}
+            </div>
+          )}
+          
+          <input
+            type="text"
+            placeholder="Say something to your agent..."
+            className="w-full bg-gray-800 border border-gray-600 rounded p-2 text-sm"
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                chatWithAgent(e.target.value);
+                e.target.value = '';
+              }
+            }}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+**That's 80 lines and gives you**:
+- ✅ Agent appears on graph
+- ✅ Moves around randomly  
+- ✅ Changes state (sleeping/awake/thinking/happy)
+- ✅ Basic chat that works
+- ✅ Visual feedback
+
+### 4. **Real Examples from Tutorials**
+
+**From Medium "Build Simple AI App with Ollama"**:
+```javascript
+// This actually works - tested by community
+const express = require('express');
+const { spawn } = require('child_process');
+
+app.post('/chat', (req, res) => {
+  const { message } = req.body;
+  
+  const ollama = spawn('ollama', ['run', 'qwen2.5:1.5b', message]);
+  let response = '';
+  
+  ollama.stdout.on('data', (data) => {
+    response += data.toString();
+  });
+  
+  ollama.on('close', () => {
+    res.json({ response: response.trim() });
+  });
+});
+```
+
+**From DigitalOcean "Local AI Agents"**:
+```javascript
+// Simple agent state machine
+class SimpleAgent {
+  constructor() {
+    this.state = 'idle';
+    this.memory = [];
+  }
+  
+  async think(input) {
+    this.state = 'thinking';
+    
+    const response = await ollama.chat({
+      model: 'qwen2.5:1.5b',
+      messages: [
+        ...this.memory.slice(-3), // Last 3 messages only
+        { role: 'user', content: input }
+      ]
+    });
+    
+    this.memory.push({ role: 'user', content: input });
+    this.memory.push({ role: 'assistant', content: response.message.content });
+    this.state = 'idle';
+    
+    return response.message.content;
+  }
+}
+```
+
+### 5. **Function Calling Reality Check**
+
+**What the tutorials promise**:
+```javascript
+// Agent can call tools perfectly!
+const tools = [/* complex tool definitions */];
+const response = await ollama.chat({ tools, ... });
+// Magic happens ✨
+```
+
+**What actually happens**:
+- Works with qwen2.5:7b+ models (4.7GB+)
+- Fails ~40% of the time
+- Hallucinates tool parameters
+- Ignores tools when confused
+- Better with very simple, single tools
+
+**Realistic approach**:
+```javascript
+// ONE simple tool, expect failures
+const tools = [{
+  type: 'function',
+  function: {
+    name: 'help_user',
+    description: 'Get information about user tasks',
+    parameters: {
+      type: 'object',
+      properties: {
+        what: { type: 'string', enum: ['count_tasks', 'list_tasks', 'find_urgent'] }
+      }
+    }
+  }
+}];
+
+// Always have fallback
+try {
+  const response = await ollama.chat({ model: 'qwen2.5:7b', messages, tools });
+  
+  if (response.message.tool_calls) {
+    // Maybe it worked!
+    handleToolCall(response.message.tool_calls[0]);
+  } else {
+    // Probably just chatted normally
+    handleNormalChat(response.message.content);
+  }
+} catch (error) {
+  // Definitely didn't work
+  return "Sorry, I'm having trouble right now! 😅";
+}
+```
+
+## What We Should Build: "Smart Chia Pet"
+
+### Phase 1: Barely Working (2 days)
+- Agent dot that moves around graph randomly
+- Click to chat - basic ollama conversation
+- 3 visual states: sleeping, awake, thinking  
+- Store agent in localStorage (no database)
+- One personality: friendly but simple
+
+### Phase 2: Slightly Smarter (2 days)
+- Agent remembers last 3 conversations
+- Can "see" what node it's near (just the title)
+- Simple tool: count how many tasks user has
+- Basic personality customization (name, emoji)
+
+### Phase 3: Actually Useful (1 week)
+- Agent can create ONE type of node (basic tasks)
+- Approval system: user clicks ✓ or ✗ on agent suggestions  
+- Agent learns from rejections (simple pattern matching)
+- Basic GraphQL integration with GraphDone
+
+**Stop there.** See if people actually want to use it before building more.
+
+## Example Libraries That Work
+
+1. **ollama-js** - Official, simple, works in browser
+2. **Basic express server** - For backend agent if needed
+3. **localStorage** - For agent memory/personality
+4. **CSS animations** - For agent movement
+5. **WebSocket (later)** - For real-time updates if needed
+
+**No**: LangGraph, AutoGen, complex frameworks, vector databases, RAG, multi-agent orchestration, enterprise patterns.
+
+## Realistic Timeline
+
+### Day 1: Basic Agent Dot
+- Add `SimpleAgent` component to graph view
+- Agent appears, moves randomly every 10 seconds
+- Click to open basic chat popup
+- Basic ollama integration (qwen2.5:1.5b)
+- **Success**: Agent exists and responds to "hello"
+
+### Day 2: Make It Cute
+- Add personality to responses ("I'm your graph buddy!")
+- 3-4 visual states with emojis (😴😊🤔💭)
+- Smooth movement animations
+- Agent "wakes up" from sleep when clicked
+- **Success**: People say "aww it's cute"
+
+### Day 3-4: Basic Memory
+- Agent remembers your name
+- Stores last 3 conversations in localStorage
+- Can tell you what node it's sitting on
+- Simple responses about your graph ("You have 12 tasks!")
+- **Success**: Agent feels slightly personal
+
+### Day 5-7: One Useful Thing
+- Agent can suggest creating a simple task
+- User clicks ✓ or ✗ to approve
+- If approved, creates node via GraphQL
+- Basic "undo last agent action" button
+- **Success**: Agent actually helps with something
+
+### Week 2+: Iterate Based on Usage
+- Add features based on what people actually use
+- More personality options if people customize
+- Better integration if people rely on suggestions
+- Audio if people ask for it
+
+## Success Metric
+
+"Does it make you smile and want to talk to it?"
+
+If yes → build phase 2  
+If no → figure out what's missing
+
+The goal is a **delightful pet** that happens to help with work, not a **work tool** that happens to have personality.
+
+## Docker Integration with GraphDone
+
+### Complete Docker Setup (Multiple Options)
+```yaml
+# docker-compose.yml - Add to existing GraphDone setup
+version: '3.8'
+services:
+  # Your existing GraphDone services...
+  web:
+    build: ./packages/web
+    networks: [graphdone-network]
+  
+  server:
+    build: ./packages/server  
+    networks: [graphdone-network]
+  
+  # Option A: Traditional Ollama server + model management
+  ollama:
+    image: ollama/ollama:latest
+    container_name: graphdone-ollama
+    volumes:
+      - ollama-models:/root/.ollama
+    networks:
+      - graphdone-network
+    environment:
+      - OLLAMA_HOST=0.0.0.0
+    # Optional: GPU support (if available)
+    # deploy:
+    #   resources:
+    #     reservations:
+    #       devices:
+    #         - driver: nvidia
+    #           count: 1
+    #           capabilities: [gpu]
+
+  # Option B: Direct model containers (NEW 2025 approach)
+  # Each model runs its own TCP server - no Ollama middleman needed
+  qwen-chat:
+    image: registry.ollama.ai/library/qwen2.5:1.5b
+    container_name: graphdone-qwen-chat
+    networks:
+      - graphdone-network
+    environment:
+      - MODEL_SERVER_PORT=8000
+      - MAX_CONCURRENT_REQUESTS=4
+    # Automatic model server startup
+    
+  # Can run multiple specialized models simultaneously
+  qwen-function-calling:
+    image: registry.ollama.ai/library/qwen2.5:7b
+    container_name: graphdone-qwen-functions  
+    networks:
+      - graphdone-network
+    environment:
+      - MODEL_SERVER_PORT=8001
+      - MAX_CONCURRENT_REQUESTS=2
+    # For tool calling capabilities
+
+networks:
+  graphdone-network:
+    driver: bridge
+
+volumes:
+  ollama-models:  # Only needed for Option A
+```
+
+### Agent Service Configuration
+```javascript
+// packages/web/src/lib/ollama.js
+import ollama from 'ollama'
+
+// Option A: Traditional Ollama server
+const traditionalClient = new ollama.Ollama({
+  host: process.env.NODE_ENV === 'development' 
+    ? 'http://localhost:11434'  // Local development
+    : 'http://ollama:11434'     // Docker network
+});
+
+// Option B: Direct model containers (recommended for 2025)
+const directModelClients = {
+  chat: new ollama.Ollama({
+    host: process.env.NODE_ENV === 'development'
+      ? 'http://localhost:8000'
+      : 'http://qwen-chat:8000'
+  }),
+  
+  functions: new ollama.Ollama({
+    host: process.env.NODE_ENV === 'development'
+      ? 'http://localhost:8001' 
+      : 'http://qwen-function-calling:8001'
+  })
+};
+
+// Smart client that automatically selects best model for task
+class SmartOllamaClient {
+  async chat(messages, options = {}) {
+    const needsFunctions = options.tools && options.tools.length > 0;
+    const client = needsFunctions ? directModelClients.functions : directModelClients.chat;
+    
+    return await client.chat({
+      model: needsFunctions ? 'qwen2.5:7b' : 'qwen2.5:1.5b',
+      messages,
+      ...options
+    });
+  }
+}
+
+export default new SmartOllamaClient();
+```
+
+### Model Management
+```bash
+# Option A: Traditional Ollama server management
+docker-compose exec ollama ollama pull qwen2.5:1.5b
+docker-compose exec ollama ollama pull qwen2.5:7b
+docker-compose exec ollama ollama list
+docker-compose exec ollama ollama rm qwen2.5:7b
+
+# Option B: Direct model containers (NEW approach)
+# No model management needed - models are pre-built into containers
+docker-compose up qwen-chat qwen-function-calling
+
+# Check model container status
+docker-compose ps | grep qwen
+docker logs graphdone-qwen-chat    # See model server logs
+docker logs graphdone-qwen-functions
+
+# Update to newer model versions
+docker-compose pull qwen-chat      # Pull updated model image
+docker-compose up -d qwen-chat     # Restart with new version
+
+# Resource monitoring
+docker stats graphdone-qwen-chat graphdone-qwen-functions
+```
+
+### Hardware Requirements
+
+**Mac Mini M1/M2** (Perfect for this):
+- **qwen2.5:1.5b**: ~2GB RAM, runs smoothly on CPU
+- **qwen2.5:7b**: ~8GB RAM, good performance on Apple Silicon
+- **Response time**: 1-3 seconds for chat responses
+- **Concurrent users**: 5-10 simultaneous conversations
+
+**Regular Desktop/Laptop**:
+- **qwen2.5:1.5b**: Runs on any machine with 4GB+ RAM
+- **qwen2.5:7b**: Needs 16GB+ RAM for good performance
+- **GPU optional**: CPU inference works fine for small models
+
+### Security Benefits
+
+✅ **Network isolation**: AI model never touches the internet  
+✅ **Data privacy**: All conversations stay on your Docker network  
+✅ **Resource limits**: Docker can limit CPU/memory usage  
+✅ **Easy cleanup**: `docker-compose down` removes everything  
+✅ **Version control**: Lock Ollama version in docker-compose.yml
+
+## MVP Development Approach
+
+**Start with**: 80 lines of JavaScript that barely works but feels alive
+**Not with**: 2000 lines of perfectly architected enterprise agent framework
+
+Focus on the **experience** over the **capability**. A quirky pet that sometimes helps is more valuable than a perfect assistant with no soul.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ce72844a..a75a56df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "graphdone",
-  "version": "0.2.1-alpha",
+  "version": "0.3.0-alpha",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "graphdone",
-      "version": "0.2.1-alpha",
+      "version": "0.3.0-alpha",
       "license": "MIT",
       "workspaces": [
         "packages/*",
@@ -1573,6 +1573,13 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@gar/promisify": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
+      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@graphdone/core": {
       "resolved": "packages/core",
       "link": true
@@ -1970,6 +1977,32 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@npmcli/fs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
+      "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "@gar/promisify": "^1.0.1",
+        "semver": "^7.3.5"
+      }
+    },
+    "node_modules/@npmcli/move-file": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
+      "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
+      "deprecated": "This functionality has been moved to @npmcli/fs",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mkdirp": "^1.0.4",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2439,6 +2472,16 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -3020,6 +3063,15 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/sqlite3": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/@types/sqlite3/-/sqlite3-3.1.11.tgz",
+      "integrity": "sha512-KYF+QgxAnnAh7DWPdNDroxkDI3/MspH1NMx6m/N/6fT1G6+jvsw4/ZePt8R8cr7ta58aboeTfYFBDxTJ5yv15w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -3576,6 +3628,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -3644,6 +3703,33 @@
         "node": ">= 14"
       }
     },
+    "node_modules/agentkeepalive": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
+      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "humanize-ms": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3704,6 +3790,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aproba": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.1.0.tgz",
+      "integrity": "sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+      "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -4035,6 +4143,50 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -4204,6 +4356,69 @@
         "node": ">=8"
       }
     },
+    "node_modules/cacache": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
+      "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "@npmcli/fs": "^1.0.0",
+        "@npmcli/move-file": "^1.0.1",
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "glob": "^7.1.4",
+        "infer-owner": "^1.0.4",
+        "lru-cache": "^6.0.0",
+        "minipass": "^3.1.1",
+        "minipass-collect": "^1.0.2",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.2",
+        "mkdirp": "^1.0.3",
+        "p-map": "^4.0.0",
+        "promise-inflight": "^1.0.1",
+        "rimraf": "^3.0.2",
+        "ssri": "^8.0.1",
+        "tar": "^6.0.2",
+        "unique-filename": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cacache/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacache/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -4387,6 +4602,25 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4405,6 +4639,16 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4430,7 +4674,7 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/confbox": {
@@ -4440,6 +4684,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -5095,6 +5346,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
@@ -5141,6 +5407,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5201,6 +5476,13 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5220,6 +5502,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -5368,6 +5659,25 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -5381,6 +5691,23 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -5996,6 +6323,15 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/express": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
@@ -6200,6 +6536,12 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -6375,11 +6717,47 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/fsevents": {
@@ -6436,6 +6814,56 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gauge": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
+      "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.3",
+        "console-control-strings": "^1.1.0",
+        "has-unicode": "^2.0.1",
+        "signal-exit": "^3.0.7",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.5"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/gauge/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==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/gauge/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/gauge/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==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -6537,12 +6965,18 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -6575,7 +7009,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -6586,7 +7020,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -6658,6 +7092,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==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -6842,6 +7283,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -6883,6 +7331,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+      "license": "BSD-2-Clause",
+      "optional": true
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -6937,6 +7392,16 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -7000,7 +7465,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
@@ -7010,18 +7475,25 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
@@ -7034,6 +7506,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -7058,6 +7536,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -7294,6 +7782,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-lambda": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -8074,6 +8569,109 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/make-fetch-happen": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
+      "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "agentkeepalive": "^4.1.3",
+        "cacache": "^15.2.0",
+        "http-cache-semantics": "^4.1.0",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-lambda": "^1.0.1",
+        "lru-cache": "^6.0.0",
+        "minipass": "^3.1.3",
+        "minipass-collect": "^1.0.2",
+        "minipass-fetch": "^1.3.2",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^0.6.2",
+        "promise-retry": "^2.0.1",
+        "socks-proxy-agent": "^6.0.0",
+        "ssri": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8192,6 +8790,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -8218,6 +8828,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -8227,6 +8846,225 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minipass-collect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-collect/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-collect/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/minipass-fetch": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
+      "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.1.0",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.12"
+      }
+    },
+    "node_modules/minipass-fetch/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-fetch/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT"
+    },
     "node_modules/mlly": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
@@ -8282,6 +9120,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT"
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -8326,12 +9170,30 @@
       "integrity": "sha512-14vN8TlxC0JvJYfjWic5PwjsZ38loQLOKFTXwk4fWLTbCk6VhrhubB2Jsy9Rz+gM6PtTor4+6ClBEFDp1q/c8g==",
       "license": "Apache-2.0"
     },
+    "node_modules/node-abi": {
+      "version": "3.77.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.77.0.tgz",
+      "integrity": "sha512-DSmt0OEcLoK4i3NuscSbGjOf3bqiDEutejqENSplMSFA/gmB8mkED9G4pKWnPl7MDU4rSHebKPHeitpDfyH0cQ==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
       "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==",
       "license": "MIT"
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT"
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -8370,6 +9232,31 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-gyp": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
+      "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^9.1.0",
+        "nopt": "^5.0.0",
+        "npmlog": "^6.0.0",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.2",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": ">= 10.12.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -8377,6 +9264,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -8421,8 +9324,25 @@
       "engines": {
         "node": ">=12"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npmlog": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+      "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "^3.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^4.0.3",
+        "set-blocking": "^2.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
     "node_modules/oauth": {
@@ -8588,7 +9508,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -8690,6 +9609,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "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",
@@ -8823,7 +9758,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9172,6 +10107,32 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -9233,6 +10194,37 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/promise-retry/node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -9270,6 +10262,16 @@
         "url": "https://github.com/sponsors/lupomontero"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -9355,6 +10357,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -9437,6 +10463,20 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -9604,7 +10644,7 @@
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
@@ -9885,6 +10925,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -10071,6 +11118,51 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10081,6 +11173,60 @@
         "node": ">=8"
       }
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
+      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ip-address": "^10.0.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
+      "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "^6.0.2",
+        "debug": "^4.3.3",
+        "socks": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/socks-proxy-agent/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -10090,6 +11236,63 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sqlite3": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.7.tgz",
+      "integrity": "sha512-GGIyOiFaG+TUra3JIfkI/zGP8yZYLPQ0pl1bH+ODjiX57sPhrLU5sQJn1y9bDKZUFYkX1crlrPfSYt0BKKdkog==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.1",
+        "tar": "^6.1.11"
+      },
+      "optionalDependencies": {
+        "node-gyp": "8.x"
+      },
+      "peerDependencies": {
+        "node-gyp": "8.x"
+      },
+      "peerDependenciesMeta": {
+        "node-gyp": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ssri": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/ssri/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ssri/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -10546,6 +11749,72 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar-fs": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
+      "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
+      "license": "MIT",
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-fs/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC"
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -10776,6 +12045,18 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/turbo": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.13.4.tgz",
@@ -11074,6 +12355,26 @@
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "license": "MIT"
     },
+    "node_modules/unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -11982,6 +13283,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
+    "node_modules/wide-align/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==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/wide-align/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==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -12090,7 +13423,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/ws": {
@@ -12217,7 +13549,7 @@
     },
     "packages/core": {
       "name": "@graphdone/core",
-      "version": "0.2.1-alpha",
+      "version": "0.2.2-alpha",
       "license": "MIT",
       "dependencies": {
         "neo4j-driver": "^5.15.0",
@@ -12678,7 +14010,7 @@
     },
     "packages/mcp-server": {
       "name": "@graphdone/mcp-server",
-      "version": "0.2.1-alpha",
+      "version": "0.2.2-alpha",
       "license": "MIT",
       "dependencies": {
         "@graphdone/core": "*",
@@ -13144,7 +14476,7 @@
     },
     "packages/server": {
       "name": "@graphdone/server",
-      "version": "0.2.1-alpha",
+      "version": "0.2.2-alpha",
       "license": "MIT",
       "dependencies": {
         "@apollo/server": "^4.9.0",
@@ -13154,6 +14486,7 @@
         "@neo4j/graphql": "^5.5.0",
         "@types/node-fetch": "^2.6.13",
         "@types/passport-github2": "^1.2.9",
+        "@types/sqlite3": "^3.1.11",
         "bcryptjs": "^3.0.2",
         "cors": "^2.8.5",
         "dotenv": "^16.3.0",
@@ -13169,6 +14502,7 @@
         "passport-github2": "^0.1.12",
         "passport-google-oauth20": "^2.0.0",
         "passport-linkedin-oauth2": "^2.0.0",
+        "sqlite3": "^5.1.7",
         "uuid": "^11.1.0",
         "ws": "^8.14.0"
       },
@@ -13657,7 +14991,7 @@
     },
     "packages/web": {
       "name": "@graphdone/web",
-      "version": "0.2.1-alpha",
+      "version": "0.2.2-alpha",
       "license": "MIT",
       "dependencies": {
         "@apollo/client": "^3.8.0",
diff --git a/package.json b/package.json
index d00219fb..5f34d632 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphdone",
-  "version": "0.2.2-alpha",
+  "version": "0.3.0-alpha",
   "description": "Project management for teams who think differently",
   "private": true,
   "workspaces": [
diff --git a/packages/server/Dockerfile.dev b/packages/server/Dockerfile.dev
index 5d14a396..b9af45dc 100644
--- a/packages/server/Dockerfile.dev
+++ b/packages/server/Dockerfile.dev
@@ -1,18 +1,47 @@
 FROM node:18-alpine
 
+# Install security updates and curl for health checks
+RUN apk update && apk upgrade && apk add --no-cache curl dumb-init
+
+# Create non-root user (use existing node group if available)
+RUN addgroup -g 1001 -S appgroup || true && \
+    adduser -u 1001 -S appuser -G appgroup 2>/dev/null || \
+    adduser -u 1001 -S appuser -G node
+
 WORKDIR /app
 
-# Install dependencies
-RUN npm install -g nodemon tsx
+# Install global dependencies as root
+RUN npm install -g nodemon tsx turbo
+
+# Copy root package files
+COPY --chown=appuser:appgroup package.json package-lock.json turbo.json tsconfig.json ./
+
+# Copy all package.json files to maintain workspace structure
+COPY --chown=appuser:appgroup packages/core/package.json packages/core/
+COPY --chown=appuser:appgroup packages/server/package.json packages/server/
+COPY --chown=appuser:appgroup packages/web/package.json packages/web/
+COPY --chown=appuser:appgroup packages/mcp-server/package.json packages/mcp-server/
 
-# Copy package files first for better caching
-COPY package.json turbo.json ./
+# Install all dependencies
 RUN npm ci
 
-# Create packages directory structure
-RUN mkdir -p packages/core packages/server
+# Copy source code
+COPY --chown=appuser:appgroup packages/ packages/
+
+# Build core package first (dependency for server)
+RUN cd packages/core && npm run build
+
+# Create directories for volumes with proper permissions
+RUN mkdir -p /app/logs /app/data && \
+    chown -R appuser:appgroup /app/logs /app/data
+
+EXPOSE 4127
+
+# Switch to non-root user
+USER appuser
 
-EXPOSE 4000
+# Use dumb-init for proper signal handling
+ENTRYPOINT ["/usr/bin/dumb-init", "--"]
 
-# Development command will be overridden by docker-compose
-CMD ["npm", "run", "dev"]
\ No newline at end of file
+# Development command
+CMD ["npm", "run", "dev", "--workspace=@graphdone/server"]
\ No newline at end of file
diff --git a/packages/server/package.json b/packages/server/package.json
index c46fb357..257419e2 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -22,6 +22,7 @@
     "@neo4j/graphql": "^5.5.0",
     "@types/node-fetch": "^2.6.13",
     "@types/passport-github2": "^1.2.9",
+    "@types/sqlite3": "^3.1.11",
     "bcryptjs": "^3.0.2",
     "cors": "^2.8.5",
     "dotenv": "^16.3.0",
@@ -37,6 +38,7 @@
     "passport-github2": "^0.1.12",
     "passport-google-oauth20": "^2.0.0",
     "passport-linkedin-oauth2": "^2.0.0",
+    "sqlite3": "^5.1.7",
     "uuid": "^11.1.0",
     "ws": "^8.14.0"
   },
diff --git a/packages/server/src/auth/sqlite-auth.ts b/packages/server/src/auth/sqlite-auth.ts
new file mode 100644
index 00000000..ccb856e9
--- /dev/null
+++ b/packages/server/src/auth/sqlite-auth.ts
@@ -0,0 +1,951 @@
+import sqlite3 from 'sqlite3';
+import bcrypt from 'bcryptjs';
+import { v4 as uuidv4 } from 'uuid';
+import path from 'path';
+
+// SQLite-based authentication system
+// Separate from Neo4j for better availability and security
+
+interface User {
+  id: string;
+  email: string;
+  username: string;
+  name: string;
+  role: 'ADMIN' | 'USER' | 'VIEWER' | 'GUEST';
+  passwordHash: string;
+  createdAt: string;
+  updatedAt: string;
+  isActive: boolean;
+  isEmailVerified: boolean;
+  team?: {
+    id: string;
+    name: string;
+  } | null;
+}
+
+class SQLiteAuthStore {
+  private db: sqlite3.Database | null = null;
+  private initialized = false;
+
+  private async getDb(): Promise<sqlite3.Database> {
+    if (this.db) return this.db;
+
+    return new Promise((resolve, reject) => {
+      // Store auth database in a persistent location
+      const dbPath = path.join(process.cwd(), 'data', 'auth.db');
+      
+      // Ensure data directory exists
+      const fs = require('fs');
+      const dataDir = path.dirname(dbPath);
+      if (!fs.existsSync(dataDir)) {
+        fs.mkdirSync(dataDir, { recursive: true });
+      }
+
+      this.db = new sqlite3.Database(dbPath, (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          // Database connection successful
+          resolve(this.db!);
+        }
+      });
+    });
+  }
+
+  async initialize(): Promise<void> {
+    if (this.initialized) return;
+
+    const db = await this.getDb();
+    
+    return new Promise((resolve, reject) => {
+      // Create tables
+      db.serialize(() => {
+        // Users table
+        db.run(`
+          CREATE TABLE IF NOT EXISTS users (
+            id TEXT PRIMARY KEY,
+            email TEXT UNIQUE NOT NULL,
+            username TEXT UNIQUE NOT NULL,
+            name TEXT NOT NULL,
+            role TEXT NOT NULL DEFAULT 'USER',
+            passwordHash TEXT NOT NULL,
+            createdAt TEXT NOT NULL,
+            updatedAt TEXT NOT NULL,
+            isActive BOOLEAN DEFAULT 1,
+            isEmailVerified BOOLEAN DEFAULT 0
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // Teams table
+        db.run(`
+          CREATE TABLE IF NOT EXISTS teams (
+            id TEXT PRIMARY KEY,
+            name TEXT UNIQUE NOT NULL,
+            createdAt TEXT NOT NULL,
+            updatedAt TEXT NOT NULL
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // User-Team memberships
+        db.run(`
+          CREATE TABLE IF NOT EXISTS user_teams (
+            userId TEXT NOT NULL,
+            teamId TEXT NOT NULL,
+            role TEXT DEFAULT 'MEMBER',
+            createdAt TEXT NOT NULL,
+            PRIMARY KEY (userId, teamId),
+            FOREIGN KEY (userId) REFERENCES users (id),
+            FOREIGN KEY (teamId) REFERENCES teams (id)
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // User configuration table
+        db.run(`
+          CREATE TABLE IF NOT EXISTS user_config (
+            userId TEXT NOT NULL,
+            key TEXT NOT NULL,
+            value TEXT,
+            type TEXT DEFAULT 'string',
+            updatedAt TEXT NOT NULL,
+            PRIMARY KEY (userId, key),
+            FOREIGN KEY (userId) REFERENCES users (id)
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // Server configuration table
+        db.run(`
+          CREATE TABLE IF NOT EXISTS server_config (
+            key TEXT PRIMARY KEY,
+            value TEXT,
+            type TEXT DEFAULT 'string',
+            description TEXT,
+            updatedAt TEXT NOT NULL
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // Folder structure table for organizing graphs
+        db.run(`
+          CREATE TABLE IF NOT EXISTS folders (
+            id TEXT PRIMARY KEY,
+            name TEXT NOT NULL,
+            parentId TEXT NULL,
+            type TEXT NOT NULL DEFAULT 'user', -- 'user', 'team', 'system'
+            ownerId TEXT NULL, -- userId for user folders, teamId for team folders, null for system
+            color TEXT NULL,
+            icon TEXT NULL,
+            description TEXT NULL,
+            position INTEGER DEFAULT 0,
+            isExpanded BOOLEAN DEFAULT 1,
+            createdAt TEXT NOT NULL,
+            updatedAt TEXT NOT NULL,
+            FOREIGN KEY (parentId) REFERENCES folders (id) ON DELETE CASCADE,
+            FOREIGN KEY (ownerId) REFERENCES users (id) ON DELETE CASCADE
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // Graph-to-folder mappings
+        db.run(`
+          CREATE TABLE IF NOT EXISTS graph_folders (
+            graphId TEXT NOT NULL, -- Neo4j Graph ID
+            folderId TEXT NOT NULL,
+            position INTEGER DEFAULT 0,
+            createdAt TEXT NOT NULL,
+            updatedAt TEXT NOT NULL,
+            PRIMARY KEY (graphId, folderId),
+            FOREIGN KEY (folderId) REFERENCES folders (id) ON DELETE CASCADE
+          )
+        `, (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+        });
+
+        // Folder permissions for team collaboration
+        db.run(`
+          CREATE TABLE IF NOT EXISTS folder_permissions (
+            folderId TEXT NOT NULL,
+            userId TEXT NOT NULL,
+            permission TEXT NOT NULL DEFAULT 'VIEW', -- 'VIEW', 'EDIT', 'ADMIN'
+            createdAt TEXT NOT NULL,
+            PRIMARY KEY (folderId, userId),
+            FOREIGN KEY (folderId) REFERENCES folders (id) ON DELETE CASCADE,
+            FOREIGN KEY (userId) REFERENCES users (id) ON DELETE CASCADE
+          )
+        `, async (err) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          
+          try {
+            // Create default admin and viewer users
+            await this.createDefaultUsers();
+            // Create default folder structure
+            await this.createDefaultFolders();
+            this.initialized = true;
+            resolve();
+          } catch (defaultUsersError) {
+            reject(defaultUsersError);
+          }
+        });
+      });
+    });
+  }
+
+  private async createDefaultFolders(): Promise<void> {
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      // Check if default folders exist
+      db.get('SELECT id FROM folders WHERE name = ? AND type = ?', ['System', 'system'], async (err, row) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+
+        if (!row) {
+          // Create system folders
+          const systemFolderId = uuidv4();
+          const templatesFolderId = uuidv4();
+          const aiFolderId = uuidv4();
+
+          db.serialize(() => {
+            // System folder
+            db.run('INSERT INTO folders (id, name, type, ownerId, color, icon, description, position, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+              [systemFolderId, 'System', 'system', null, '#f97316', 'settings', 'Auto-generated and system graphs', 0, now, now]);
+
+            // Templates folder under System
+            db.run('INSERT INTO folders (id, name, parentId, type, ownerId, color, icon, description, position, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+              [templatesFolderId, 'Templates', systemFolderId, 'system', null, '#eab308', 'file-text', 'Reusable graph templates', 0, now, now]);
+
+            // AI folder under System
+            db.run('INSERT INTO folders (id, name, parentId, type, ownerId, color, icon, description, position, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+              [aiFolderId, 'AI Generated', systemFolderId, 'system', null, '#8b5cf6', 'bot', 'AI and bot created graphs', 1, now, now], (err) => {
+                if (err) {
+                  reject(err);
+                } else {
+                  // Default folder structure created
+                  resolve();
+                }
+              });
+          });
+        } else {
+          // Default folders already exist
+          resolve();
+        }
+      });
+    });
+  }
+
+  private async createDefaultUsers(): Promise<void> {
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      // Check if admin user exists
+      db.get('SELECT id FROM users WHERE username = ?', ['admin'], async (err, row) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+
+        if (!row) {
+          // Create default team
+          const teamId = uuidv4();
+          const now = new Date().toISOString();
+
+          db.run('INSERT INTO teams (id, name, createdAt, updatedAt) VALUES (?, ?, ?, ?)', 
+            [teamId, 'Development Team', now, now]);
+
+          // Create admin user
+          const adminId = uuidv4();
+          const adminPasswordHash = await bcrypt.hash('graphdone', 10);
+          
+          db.run(`INSERT INTO users (id, email, username, name, role, passwordHash, createdAt, updatedAt, isActive, isEmailVerified) 
+                  VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, 
+            [adminId, 'admin@graphdone.local', 'admin', 'Admin User', 'ADMIN', adminPasswordHash, now, now, 1, 1]);
+
+          // Link admin to team
+          db.run('INSERT INTO user_teams (userId, teamId, role, createdAt) VALUES (?, ?, ?, ?)',
+            [adminId, teamId, 'OWNER', now]);
+
+          // Create viewer user
+          const viewerId = uuidv4();
+          const viewerPasswordHash = await bcrypt.hash('viewer123', 10);
+          
+          db.run(`INSERT INTO users (id, email, username, name, role, passwordHash, createdAt, updatedAt, isActive, isEmailVerified) 
+                  VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, 
+            [viewerId, 'viewer@graphdone.local', 'viewer', 'Viewer User', 'VIEWER', viewerPasswordHash, now, now, 1, 1]);
+
+          // Link viewer to team
+          db.run('INSERT INTO user_teams (userId, teamId, role, createdAt) VALUES (?, ?, ?, ?)',
+            [viewerId, teamId, 'MEMBER', now], (err) => {
+              if (err) {
+                reject(err);
+              } else {
+                // Default users created successfully
+                resolve();
+              }
+            });
+        } else {
+          // Default users already exist
+          resolve();
+        }
+      });
+    });
+  }
+
+  async findUserByEmailOrUsername(emailOrUsername: string): Promise<User | null> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      const sql = `
+        SELECT u.*, t.id as teamId, t.name as teamName
+        FROM users u
+        LEFT JOIN user_teams ut ON u.id = ut.userId
+        LEFT JOIN teams t ON ut.teamId = t.id
+        WHERE u.email = ? OR u.username = ?
+        AND u.isActive = 1
+      `;
+      
+      db.get(sql, [emailOrUsername.toLowerCase(), emailOrUsername.toLowerCase()], (err, row: any) => {
+        if (err) {
+          reject(err);
+        } else if (row) {
+          const user: User = {
+            id: row.id,
+            email: row.email,
+            username: row.username,
+            name: row.name,
+            role: row.role,
+            passwordHash: row.passwordHash,
+            createdAt: row.createdAt,
+            updatedAt: row.updatedAt,
+            isActive: Boolean(row.isActive),
+            isEmailVerified: Boolean(row.isEmailVerified),
+            team: row.teamId ? {
+              id: row.teamId,
+              name: row.teamName
+            } : null
+          };
+          resolve(user);
+        } else {
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  async findUserById(id: string): Promise<User | null> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      const sql = `
+        SELECT u.*, t.id as teamId, t.name as teamName
+        FROM users u
+        LEFT JOIN user_teams ut ON u.id = ut.userId
+        LEFT JOIN teams t ON ut.teamId = t.id
+        WHERE u.id = ?
+        AND u.isActive = 1
+      `;
+      
+      db.get(sql, [id], (err, row: any) => {
+        if (err) {
+          reject(err);
+        } else if (row) {
+          const user: User = {
+            id: row.id,
+            email: row.email,
+            username: row.username,
+            name: row.name,
+            role: row.role,
+            passwordHash: row.passwordHash,
+            createdAt: row.createdAt,
+            updatedAt: row.updatedAt,
+            isActive: Boolean(row.isActive),
+            isEmailVerified: Boolean(row.isEmailVerified),
+            team: row.teamId ? {
+              id: row.teamId,
+              name: row.teamName
+            } : null
+          };
+          resolve(user);
+        } else {
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  async getAllUsers(): Promise<User[]> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      const sql = `
+        SELECT u.*, t.id as teamId, t.name as teamName
+        FROM users u
+        LEFT JOIN user_teams ut ON u.id = ut.userId
+        LEFT JOIN teams t ON ut.teamId = t.id
+        WHERE u.isActive = 1
+        ORDER BY u.createdAt DESC
+      `;
+      
+      db.all(sql, [], (err, rows: any[]) => {
+        if (err) {
+          reject(err);
+        } else {
+          const users = rows.map(row => ({
+            id: row.id,
+            email: row.email,
+            username: row.username,
+            name: row.name,
+            role: row.role,
+            passwordHash: row.passwordHash,
+            createdAt: row.createdAt,
+            updatedAt: row.updatedAt,
+            isActive: Boolean(row.isActive),
+            isEmailVerified: Boolean(row.isEmailVerified),
+            team: row.teamId ? {
+              id: row.teamId,
+              name: row.teamName
+            } : null
+          }));
+          resolve(users);
+        }
+      });
+    });
+  }
+
+  async validatePassword(user: User, password: string): Promise<boolean> {
+    return bcrypt.compare(password, user.passwordHash);
+  }
+
+  async createUser(userData: {
+    email: string;
+    username: string;
+    password: string;
+    name: string;
+    role?: 'USER' | 'VIEWER';
+  }): Promise<User> {
+    await this.initialize();
+    const db = await this.getDb();
+    
+    const passwordHash = await bcrypt.hash(userData.password, 10);
+    const userId = uuidv4();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      db.run(`INSERT INTO users (id, email, username, name, role, passwordHash, createdAt, updatedAt, isActive, isEmailVerified) 
+              VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, 
+        [userId, userData.email.toLowerCase(), userData.username.toLowerCase(), userData.name, userData.role || 'USER', passwordHash, now, now, 1, 0],
+        function(err) {
+          if (err) {
+            reject(err);
+          } else {
+            // Return the created user
+            db.get('SELECT * FROM users WHERE id = ?', [userId], (err, row: any) => {
+              if (err) {
+                reject(err);
+              } else {
+                const user: User = {
+                  id: row.id,
+                  email: row.email,
+                  username: row.username,
+                  name: row.name,
+                  role: row.role,
+                  passwordHash: row.passwordHash,
+                  createdAt: row.createdAt,
+                  updatedAt: row.updatedAt,
+                  isActive: Boolean(row.isActive),
+                  isEmailVerified: Boolean(row.isEmailVerified),
+                  team: null
+                };
+                resolve(user);
+              }
+            });
+          }
+        });
+    });
+  }
+
+  // User configuration methods
+  async getUserConfig(userId: string, key: string): Promise<any> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      db.get('SELECT value, type FROM user_config WHERE userId = ? AND key = ?', [userId, key], (err, row: any) => {
+        if (err) {
+          reject(err);
+        } else if (row) {
+          // Parse value based on type
+          let value = row.value;
+          if (row.type === 'json') {
+            try {
+              value = JSON.parse(row.value);
+            } catch (e) {
+              value = row.value;
+            }
+          } else if (row.type === 'boolean') {
+            value = row.value === 'true';
+          } else if (row.type === 'number') {
+            value = parseFloat(row.value);
+          }
+          resolve(value);
+        } else {
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  async setUserConfig(userId: string, key: string, value: any, type: string = 'string'): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    let stringValue = value;
+    if (type === 'json') {
+      stringValue = JSON.stringify(value);
+    } else if (type === 'boolean') {
+      stringValue = value ? 'true' : 'false';
+    } else {
+      stringValue = String(value);
+    }
+
+    return new Promise((resolve, reject) => {
+      db.run(`INSERT OR REPLACE INTO user_config (userId, key, value, type, updatedAt) VALUES (?, ?, ?, ?, ?)`,
+        [userId, key, stringValue, type, now], (err) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        });
+    });
+  }
+
+  // Server configuration methods
+  async getServerConfig(key: string): Promise<any> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      db.get('SELECT value, type FROM server_config WHERE key = ?', [key], (err, row: any) => {
+        if (err) {
+          reject(err);
+        } else if (row) {
+          // Parse value based on type
+          let value = row.value;
+          if (row.type === 'json') {
+            try {
+              value = JSON.parse(row.value);
+            } catch (e) {
+              value = row.value;
+            }
+          } else if (row.type === 'boolean') {
+            value = row.value === 'true';
+          } else if (row.type === 'number') {
+            value = parseFloat(row.value);
+          }
+          resolve(value);
+        } else {
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  async setServerConfig(key: string, value: any, type: string = 'string', description?: string): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    let stringValue = value;
+    if (type === 'json') {
+      stringValue = JSON.stringify(value);
+    } else if (type === 'boolean') {
+      stringValue = value ? 'true' : 'false';
+    } else {
+      stringValue = String(value);
+    }
+
+    return new Promise((resolve, reject) => {
+      db.run(`INSERT OR REPLACE INTO server_config (key, value, type, description, updatedAt) VALUES (?, ?, ?, ?, ?)`,
+        [key, stringValue, type, description, now], (err) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        });
+    });
+  }
+
+  // Update user role
+  async updateUserRole(userId: string, role: string): Promise<User> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      db.run('UPDATE users SET role = ?, updatedAt = ? WHERE id = ?', [role, now, userId], (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          // Return updated user
+          this.findUserById(userId).then(user => resolve(user!)).catch(reject);
+        }
+      });
+    });
+  }
+
+  // Update user status (active/inactive)
+  async updateUserStatus(userId: string, isActive: boolean): Promise<User> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+    const deactivationDate = isActive ? null : now;
+
+    return new Promise((resolve, reject) => {
+      db.run('UPDATE users SET isActive = ?, deactivationDate = ?, updatedAt = ? WHERE id = ?', 
+        [isActive ? 1 : 0, deactivationDate, now, userId], (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          // Return updated user
+          this.findUserById(userId).then(user => resolve(user!)).catch(reject);
+        }
+      });
+    });
+  }
+
+  // Update user password
+  async updateUserPassword(userId: string, newPassword: string): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+    const passwordHash = await bcrypt.hash(newPassword, 10);
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      db.run('UPDATE users SET passwordHash = ?, updatedAt = ? WHERE id = ?', 
+        [passwordHash, now, userId], (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  // Delete user
+  async deleteUser(userId: string): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      db.run('DELETE FROM users WHERE id = ?', [userId], (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  // FOLDER MANAGEMENT METHODS
+
+  // Create a new folder
+  async createFolder(folderData: {
+    name: string;
+    parentId?: string;
+    type: 'user' | 'team' | 'system';
+    ownerId?: string;
+    color?: string;
+    icon?: string;
+    description?: string;
+    position?: number;
+  }): Promise<any> {
+    await this.initialize();
+    const db = await this.getDb();
+    const folderId = uuidv4();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      db.run(`INSERT INTO folders (id, name, parentId, type, ownerId, color, icon, description, position, createdAt, updatedAt) 
+              VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+        [folderId, folderData.name, folderData.parentId || null, folderData.type, folderData.ownerId || null, 
+         folderData.color || null, folderData.icon || null, folderData.description || null, 
+         folderData.position || 0, now, now],
+        function(err) {
+          if (err) {
+            reject(err);
+          } else {
+            // Return the created folder
+            db.get('SELECT * FROM folders WHERE id = ?', [folderId], (err, row: any) => {
+              if (err) {
+                reject(err);
+              } else {
+                resolve(row);
+              }
+            });
+          }
+        });
+    });
+  }
+
+  // Get user's folder structure
+  async getUserFolders(userId: string): Promise<any[]> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      const sql = `
+        SELECT f.*, 
+          CASE 
+            WHEN f.type = 'team' THEN t.name
+            WHEN f.type = 'user' THEN u.name
+            ELSE 'System'
+          END as ownerName
+        FROM folders f
+        LEFT JOIN teams t ON f.type = 'team' AND f.ownerId = t.id
+        LEFT JOIN users u ON f.type = 'user' AND f.ownerId = u.id
+        WHERE 
+          f.type = 'system' 
+          OR (f.type = 'user' AND f.ownerId = ?)
+          OR (f.type = 'team' AND f.ownerId IN (
+            SELECT teamId FROM user_teams WHERE userId = ?
+          ))
+        ORDER BY f.type, f.position, f.name
+      `;
+      
+      db.all(sql, [userId, userId], (err, rows: any[]) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(rows);
+        }
+      });
+    });
+  }
+
+  // Get folder contents (graphs in folder)
+  async getFolderGraphs(folderId: string): Promise<any[]> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      db.all('SELECT * FROM graph_folders WHERE folderId = ? ORDER BY position', [folderId], (err, rows: any[]) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(rows);
+        }
+      });
+    });
+  }
+
+  // Add graph to folder
+  async addGraphToFolder(graphId: string, folderId: string, position: number = 0): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      db.run('INSERT OR REPLACE INTO graph_folders (graphId, folderId, position, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?)',
+        [graphId, folderId, position, now, now], (err) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        });
+    });
+  }
+
+  // Remove graph from folder
+  async removeGraphFromFolder(graphId: string, folderId: string): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      db.run('DELETE FROM graph_folders WHERE graphId = ? AND folderId = ?', [graphId, folderId], (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  // Update folder
+  async updateFolder(folderId: string, updates: {
+    name?: string;
+    parentId?: string;
+    color?: string;
+    icon?: string;
+    description?: string;
+    position?: number;
+    isExpanded?: boolean;
+  }): Promise<any> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      const updateFields = [];
+      const values = [];
+
+      if (updates.name !== undefined) {
+        updateFields.push('name = ?');
+        values.push(updates.name);
+      }
+      if (updates.parentId !== undefined) {
+        updateFields.push('parentId = ?');
+        values.push(updates.parentId);
+      }
+      if (updates.color !== undefined) {
+        updateFields.push('color = ?');
+        values.push(updates.color);
+      }
+      if (updates.icon !== undefined) {
+        updateFields.push('icon = ?');
+        values.push(updates.icon);
+      }
+      if (updates.description !== undefined) {
+        updateFields.push('description = ?');
+        values.push(updates.description);
+      }
+      if (updates.position !== undefined) {
+        updateFields.push('position = ?');
+        values.push(updates.position);
+      }
+      if (updates.isExpanded !== undefined) {
+        updateFields.push('isExpanded = ?');
+        values.push(updates.isExpanded ? 1 : 0);
+      }
+
+      updateFields.push('updatedAt = ?');
+      values.push(now, folderId);
+
+      const sql = `UPDATE folders SET ${updateFields.join(', ')} WHERE id = ?`;
+
+      db.run(sql, values, (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          // Return updated folder
+          db.get('SELECT * FROM folders WHERE id = ?', [folderId], (err, row: any) => {
+            if (err) {
+              reject(err);
+            } else {
+              resolve(row);
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Delete folder
+  async deleteFolder(folderId: string): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+
+    return new Promise((resolve, reject) => {
+      db.run('DELETE FROM folders WHERE id = ?', [folderId], (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  // Create user's personal folders when they first log in
+  async createUserPersonalFolders(userId: string, teamId?: string): Promise<void> {
+    await this.initialize();
+    const db = await this.getDb();
+    const now = new Date().toISOString();
+
+    return new Promise((resolve, reject) => {
+      // Check if user already has personal folders
+      db.get('SELECT id FROM folders WHERE type = ? AND ownerId = ?', ['user', userId], (err, row) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+
+        if (!row) {
+          const personalFolderId = uuidv4();
+          
+          db.serialize(() => {
+            // Personal root folder
+            db.run('INSERT INTO folders (id, name, type, ownerId, color, icon, description, position, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+              [personalFolderId, 'Personal', 'user', userId, '#10b981', 'folder', 'My personal graphs', 0, now, now]);
+
+            // Team folder if user is part of a team
+            if (teamId) {
+              const teamFolderId = uuidv4();
+              db.run('INSERT INTO folders (id, name, type, ownerId, color, icon, description, position, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+                [teamFolderId, 'Team', 'team', teamId, '#3b82f6', 'users', 'Shared team graphs', 1, now, now], (err) => {
+                  if (err) {
+                    reject(err);
+                  } else {
+                    // Created folder structure for user
+                    resolve();
+                  }
+                });
+            } else {
+              // Created personal folder structure for user
+              resolve();
+            }
+          });
+        } else {
+          resolve(); // Folders already exist
+        }
+      });
+    });
+  }
+}
+
+// Force restart to recreate database
+export const sqliteAuthStore = new SQLiteAuthStore();
\ No newline at end of file
diff --git a/packages/server/src/context.ts b/packages/server/src/context.ts
index e07c1818..04f18c23 100644
--- a/packages/server/src/context.ts
+++ b/packages/server/src/context.ts
@@ -1,23 +1,20 @@
 import { Driver } from 'neo4j-driver';
-import { Neo4jGraph } from '@graphdone/core';
 
 export interface Context {
-  driver: Driver;
-  neo4jGraph: Neo4jGraph;
+  driver?: Driver;
   user?: {
     id: string;
     email: string;
     name: string;
   };
+  isNeo4jAvailable?: boolean;
 }
 
-export async function createContext({ driver }: { driver: Driver }): Promise<Context> {
-  const neo4jGraph = new Neo4jGraph(driver);
-  
+export async function createContext({ driver }: { driver?: Driver }): Promise<Context> {
   return {
     driver,
-    neo4jGraph,
     user: undefined, // TODO: Implement authentication
+    isNeo4jAvailable: !!driver,
   };
 }
 
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 12936df7..5c073b89 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -15,208 +15,71 @@ import fetch from 'node-fetch';
 
 import { typeDefs } from './schema/neo4j-schema.js';
 import { authTypeDefs } from './schema/auth-schema.js';
-import { authResolvers } from './resolvers/auth.js';
+import { authOnlyTypeDefs } from './schema/auth-only-schema.js';
+import { sqliteAuthResolvers } from './resolvers/sqlite-auth.js';
 import { extractUserFromToken } from './middleware/auth.js';
 import { mergeTypeDefs } from '@graphql-tools/merge';
 import { driver, NEO4J_URI } from './db.js';
-import bcrypt from 'bcryptjs';
-import { v4 as uuidv4 } from 'uuid';
-// import { configurePassport } from './config/passport.js';
-// import { authRoutes } from './routes/auth.js';
+import { sqliteAuthStore } from './auth/sqlite-auth.js';
 
 dotenv.config();
 
 const PORT = Number(process.env.PORT) || 4127;
 
-async function cleanupDuplicateUsers() {
-  const session = driver.session();
-  
+async function startServer() {
+  const app = express();
+  const httpServer = createServer(app);
+
+  // Initialize SQLite auth system first (for users and config)
   try {
-    console.log('🧹 Cleaning up duplicate users...');
-    
-    // Find and remove duplicate admin users, keeping the oldest one
-    const duplicateAdmins = await session.run(`
-      MATCH (u:User {username: 'admin'})
-      WITH u
-      ORDER BY u.createdAt ASC
-      WITH collect(u) as users
-      WHERE size(users) > 1
-      UNWIND users[1..] as duplicateUser
-      DETACH DELETE duplicateUser
-      RETURN count(duplicateUser) as deletedCount
-    `);
-    
-    const adminDeletedCount = duplicateAdmins.records[0]?.get('deletedCount')?.toNumber() || 0;
-    if (adminDeletedCount > 0) {
-      console.log(`🗑️  Removed ${adminDeletedCount} duplicate admin users`);
-    }
-    
-    // Find and remove duplicate viewer users, keeping the oldest one
-    const duplicateViewers = await session.run(`
-      MATCH (u:User {username: 'viewer'})
-      WITH u
-      ORDER BY u.createdAt ASC
-      WITH collect(u) as users
-      WHERE size(users) > 1
-      UNWIND users[1..] as duplicateUser
-      DETACH DELETE duplicateUser
-      RETURN count(duplicateUser) as deletedCount
-    `);
-    
-    const viewerDeletedCount = duplicateViewers.records[0]?.get('deletedCount')?.toNumber() || 0;
-    if (viewerDeletedCount > 0) {
-      console.log(`🗑️  Removed ${viewerDeletedCount} duplicate viewer users`);
-    }
-    
-    if (adminDeletedCount === 0 && viewerDeletedCount === 0) {
-      console.log('✅ No duplicate users found');
-    }
-    
+    await sqliteAuthStore.initialize();
+    console.log('🔐 SQLite authentication system initialized');
   } catch (error) {
-    console.error('❌ Error cleaning up duplicate users:', error);
-  } finally {
-    await session.close();
+    console.error('❌ Failed to initialize SQLite auth:', (error as Error).message);
+    console.error('🚫 Server cannot start without authentication system');
+    process.exit(1);
   }
-}
 
-async function ensureDefaultUsers() {
-  const session = driver.session();
+  // Try to connect to Neo4j, but don't block server startup if it fails
+  let schema;
+  let isNeo4jAvailable = false;
   
   try {
-    // First, migrate existing users with old role names to new ones
-    await session.run(`
-      MATCH (u:User)
-      WHERE u.role = 'GRAPH_MASTER'
-      SET u.role = 'ADMIN'
-    `);
-    
-    await session.run(`
-      MATCH (u:User)
-      WHERE u.role = 'PATH_KEEPER'
-      SET u.role = 'USER'
-    `);
-    
-    await session.run(`
-      MATCH (u:User)
-      WHERE u.role = 'ORIGIN_NODE'
-      SET u.role = 'USER'
-    `);
-    
-    await session.run(`
-      MATCH (u:User)
-      WHERE u.role = 'CONNECTOR'
-      SET u.role = 'USER'
-    `);
+    // Test Neo4j connection
+    const session = driver.session();
+    await session.run('RETURN 1');
+    await session.close();
+    isNeo4jAvailable = true;
+    console.log('✅ Neo4j connection successful');
     
-    await session.run(`
-      MATCH (u:User)
-      WHERE u.role = 'NODE_WATCHER'
-      SET u.role = 'VIEWER'
-    `);
-
-    // Check if the default admin user specifically exists
-    const existingDefaultAdmin = await session.run(
-      `MATCH (u:User {username: 'admin'}) RETURN u LIMIT 1`
-    );
-
-    if (existingDefaultAdmin.records.length === 0) {
-      // Create default admin user
-      const adminId = uuidv4();
-      const adminPasswordHash = await bcrypt.hash('graphdone', 10);
-      
-      await session.run(
-        `CREATE (u:User {
-          id: $adminId,
-          email: 'admin@graphdone.local',
-          username: 'admin',
-          passwordHash: $adminPasswordHash,
-          name: 'Default Admin',
-          role: 'ADMIN',
-          isActive: true,
-          isEmailVerified: true,
-          createdAt: datetime(),
-          updatedAt: datetime()
-        })
-        RETURN u`,
-        { adminId, adminPasswordHash }
-      );
-
-      console.log('🔐 DEFAULT ADMIN USER CREATED');
-      console.log('📧 Email/Username: admin');
-      console.log('🔑 Password: graphdone');
-      console.log('👑 Role: ADMIN');
-    } else {
-      console.log('👤 Default admin user already exists (skipped creation)');
-    }
-
-    // Check if the default viewer user specifically exists  
-    const existingDefaultViewer = await session.run(
-      `MATCH (u:User {username: 'viewer'}) RETURN u LIMIT 1`
-    );
-
-    if (existingDefaultViewer.records.length === 0) {
-      // Create default view-only user
-      const viewerId = uuidv4();
-      const viewerPasswordHash = await bcrypt.hash('graphdone', 10);
-      
-      await session.run(
-        `CREATE (u:User {
-          id: $viewerId,
-          email: 'viewer@graphdone.local',
-          username: 'viewer',
-          passwordHash: $viewerPasswordHash,
-          name: 'Default Viewer',
-          role: 'VIEWER',
-          isActive: true,
-          isEmailVerified: true,
-          createdAt: datetime(),
-          updatedAt: datetime()
-        })
-        RETURN u`,
-        { viewerId, viewerPasswordHash }
-      );
-
-      console.log('👁️  DEFAULT VIEWER USER CREATED');
-      console.log('📧 Email/Username: viewer');
-      console.log('🔑 Password: graphdone');
-      console.log('👁️  Role: VIEWER (Read-only)');
-    } else {
-      console.log('👁️  Default viewer user already exists (skipped creation)');
-    }
-
-    if (existingDefaultAdmin.records.length === 0 || existingDefaultViewer.records.length === 0) {
-      console.log('⚠️  Please change the default passwords after first login!\n');
-    }
+    // Merge type definitions (Neo4j schema + auth schema)  
+    const mergedTypeDefs = mergeTypeDefs([typeDefs, authTypeDefs]);
+
+    // Create Neo4jGraphQL instance for graph data with SQLite auth resolvers override
+    const neoSchema = new Neo4jGraphQL({
+      typeDefs: mergedTypeDefs,
+      driver,
+      resolvers: {
+        // Override auth resolvers to use SQLite instead of Neo4j User nodes
+        ...sqliteAuthResolvers,
+      },
+    });
 
+    schema = await neoSchema.getSchema();
+    console.log('🔗 Full Neo4j + SQLite auth schema ready');
+    
   } catch (error) {
-    console.error('❌ Error creating default users:', error);
-  } finally {
-    await session.close();
+    console.log('⚠️  Neo4j not available, using auth-only mode:', (error as Error).message);
+    isNeo4jAvailable = false;
+    
+    // Create auth-only schema using just SQLite resolvers and complete auth schema
+    const { makeExecutableSchema } = await import('@graphql-tools/schema');
+    schema = makeExecutableSchema({
+      typeDefs: authOnlyTypeDefs,
+      resolvers: sqliteAuthResolvers
+    });
+    console.log('🔐 Auth-only SQLite schema ready (Neo4j disabled)');
   }
-}
-
-async function startServer() {
-  const app = express();
-  const httpServer = createServer(app);
-
-  // OAuth configuration disabled
-  // configurePassport();
-  // app.use(session(...));
-  // app.use(passport.initialize());
-  // app.use(passport.session());
-  // app.use('/auth', authRoutes);
-
-  // Merge type definitions
-  const mergedTypeDefs = mergeTypeDefs([typeDefs, authTypeDefs]);
-
-  // Create Neo4jGraphQL instance
-  const neoSchema = new Neo4jGraphQL({
-    typeDefs: mergedTypeDefs,
-    driver,
-    resolvers: authResolvers,
-  });
-
-  const schema = await neoSchema.getSchema();
 
   const wsServer = new WebSocketServer({
     server: httpServer,
@@ -243,11 +106,6 @@ async function startServer() {
 
   await server.start();
 
-  // Clean up any duplicate users first
-  await cleanupDuplicateUsers();
-  
-  // Ensure default users exist
-  await ensureDefaultUsers();
 
   app.use(
     '/graphql',
@@ -257,15 +115,16 @@ async function startServer() {
       context: async ({ req }) => {
         const user = extractUserFromToken(req.headers.authorization);
         return {
-          driver,
+          driver: isNeo4jAvailable ? driver : null,
           user,
+          isNeo4jAvailable,
         };
       },
     })
   );
 
   // Enhanced health check endpoint that checks all services
-  app.get('/health', async (_req, res) => {
+  app.get('/health', cors<cors.CorsRequest>(), async (_req, res) => {
     const health: {
       status: string;
       timestamp: string;
@@ -339,7 +198,7 @@ async function startServer() {
   });
 
   // MCP-specific status endpoint
-  app.get('/mcp/status', async (_req, res) => {
+  app.get('/mcp/status', cors<cors.CorsRequest>(), async (_req, res) => {
     try {
       const mcpStatusUrl = `http://localhost:${process.env.MCP_HEALTH_PORT || 3128}/status`;
       const controller = new AbortController();
diff --git a/packages/server/src/middleware/auth.ts b/packages/server/src/middleware/auth.ts
index e2196fea..07d97267 100644
--- a/packages/server/src/middleware/auth.ts
+++ b/packages/server/src/middleware/auth.ts
@@ -1,4 +1,4 @@
-import { verifyToken } from '../resolvers/auth';
+import { verifyToken } from '../utils/auth.js';
 
 export interface AuthUser {
   userId: string;
diff --git a/packages/server/src/resolvers/auth.ts b/packages/server/src/resolvers/auth.ts
index b47362e4..ca39c533 100644
--- a/packages/server/src/resolvers/auth.ts
+++ b/packages/server/src/resolvers/auth.ts
@@ -3,6 +3,7 @@ import jwt from 'jsonwebtoken';
 import { v4 as uuidv4 } from 'uuid';
 import { GraphQLError } from 'graphql';
 import { Driver } from 'neo4j-driver';
+import { sqliteAuthStore } from '../auth/sqlite-auth.js';
 
 const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-in-production';
 const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '7d';
@@ -58,6 +59,20 @@ export const authResolvers = {
         return null;
       }
 
+      // Try SQLite first
+      try {
+        const user = await sqliteAuthStore.findUserById(context.user.userId);
+        if (user) {
+          return {
+            ...user,
+            passwordHash: undefined // Never expose password hash
+          };
+        }
+      } catch (sqliteError: any) {
+        console.log('⚠️  SQLite user lookup failed, trying Neo4j fallback:', sqliteError.message);
+      }
+
+      // Fallback to Neo4j
       const session = context.driver.session();
       try {
         const result = await session.run(
@@ -79,6 +94,9 @@ export const authResolvers = {
           team: team || null,
           passwordHash: undefined // Never expose password hash
         };
+      } catch (error: any) {
+        console.log('⚠️  Both SQLite and Neo4j user lookup failed');
+        return null;
       } finally {
         await session.close();
       }
@@ -152,6 +170,72 @@ export const authResolvers = {
       } finally {
         await session.close();
       }
+    },
+
+    // Query to check development mode and default credentials status
+    developmentInfo: async (_: any, __: any, context: AuthContext) => {
+      const isDevelopment = process.env.NODE_ENV !== 'production';
+      
+      if (!isDevelopment) {
+        return {
+          isDevelopment: false,
+          hasDefaultCredentials: false,
+          defaultAccounts: []
+        };
+      }
+
+      const session = context.driver.session();
+      try {
+        // Check if default admin/viewer accounts exist with default password
+        const adminResult = await session.run(
+          `MATCH (u:User {username: 'admin'}) RETURN u.passwordHash as passwordHash`
+        );
+        
+        const viewerResult = await session.run(
+          `MATCH (u:User {username: 'viewer'}) RETURN u.passwordHash as passwordHash`
+        );
+
+        const defaultAccounts = [];
+        let hasDefaultCredentials = false;
+
+        // Check if admin exists and has default password
+        if (adminResult.records.length > 0) {
+          const adminPasswordHash = adminResult.records[0].get('passwordHash');
+          const isDefaultPassword = await bcrypt.compare('graphdone', adminPasswordHash);
+          if (isDefaultPassword) {
+            defaultAccounts.push({
+              username: 'admin',
+              password: 'graphdone',
+              role: 'ADMIN',
+              description: 'Full administrator access'
+            });
+            hasDefaultCredentials = true;
+          }
+        }
+
+        // Check if viewer exists and has default password  
+        if (viewerResult.records.length > 0) {
+          const viewerPasswordHash = viewerResult.records[0].get('passwordHash');
+          const isDefaultPassword = await bcrypt.compare('graphdone', viewerPasswordHash);
+          if (isDefaultPassword) {
+            defaultAccounts.push({
+              username: 'viewer',
+              password: 'graphdone', 
+              role: 'VIEWER',
+              description: 'Read-only access'
+            });
+            hasDefaultCredentials = true;
+          }
+        }
+
+        return {
+          isDevelopment,
+          hasDefaultCredentials,
+          defaultAccounts
+        };
+      } finally {
+        await session.close();
+      }
     }
   },
 
@@ -242,68 +326,49 @@ export const authResolvers = {
       }
     },
 
-    login: async (_: any, { input }: { input: LoginInput }, context: AuthContext) => {
-      const session = context.driver.session();
-      try {
-        // Find user by email or username
-        const result = await session.run(
-          `MATCH (u:User)
-           WHERE u.email = $identifier OR u.username = $identifier
-           OPTIONAL MATCH (u)-[:MEMBER_OF]->(t:Team)
-           RETURN u, t`,
-          { identifier: input.emailOrUsername.toLowerCase() }
-        );
-
-        if (result.records.length === 0) {
-          throw new GraphQLError('Invalid credentials', {
-            extensions: { code: 'UNAUTHENTICATED' }
-          });
-        }
-
-        const user = result.records[0].get('u').properties;
-        const team = result.records[0].get('t')?.properties;
+    login: async (_: any, { input }: { input: LoginInput }) => {
+      console.log(`🔐 Login attempt for: ${input.emailOrUsername}`);
+      
+      // SQLite-only authentication
+      const user = await sqliteAuthStore.findUserByEmailOrUsername(input.emailOrUsername);
+      
+      if (!user) {
+        console.log('❌ User not found:', input.emailOrUsername);
+        throw new GraphQLError('Invalid credentials', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
 
-        // Verify password
-        const validPassword = await bcrypt.compare(input.password, user.passwordHash);
-        if (!validPassword) {
-          throw new GraphQLError('Invalid credentials', {
-            extensions: { code: 'UNAUTHENTICATED' }
-          });
-        }
+      console.log(`👤 Found user: ${user.username}`);
+      
+      // Verify password
+      const validPassword = await sqliteAuthStore.validatePassword(user, input.password);
+      if (!validPassword) {
+        console.log('❌ Invalid password for user:', user.username);
+        throw new GraphQLError('Invalid credentials', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
 
-        // Check if user is active
-        if (!user.isActive) {
-          throw new GraphQLError('Account is deactivated', {
-            extensions: { code: 'FORBIDDEN' }
-          });
-        }
+      // Check if user is active
+      if (!user.isActive) {
+        console.log('❌ User is deactivated:', user.username);
+        throw new GraphQLError('Account is deactivated', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
 
-        // Update last login
-        await session.run(
-          'MATCH (u:User {id: $userId}) SET u.lastLogin = datetime()',
-          { userId: user.id }
-        );
+      const token = generateToken(user.id, user.email, user.role);
 
-        const token = generateToken(user.id, user.email, user.role);
+      console.log(`✅ Login successful: ${user.username} (${user.role})`);
 
-        return {
-          token,
-          user: {
-            ...user,
-            team: team || null,
-            passwordHash: undefined
-          }
-        };
-      } catch (error: any) {
-        if (error instanceof GraphQLError) {
-          throw error;
+      return {
+        token,
+        user: {
+          ...user,
+          passwordHash: undefined
         }
-        throw new GraphQLError('Login failed', {
-          extensions: { code: 'INTERNAL_SERVER_ERROR' }
-        });
-      } finally {
-        await session.close();
-      }
+      };
     },
 
     guestLogin: async () => {
diff --git a/packages/server/src/resolvers/sqlite-auth.ts b/packages/server/src/resolvers/sqlite-auth.ts
new file mode 100644
index 00000000..3f4a7ac5
--- /dev/null
+++ b/packages/server/src/resolvers/sqlite-auth.ts
@@ -0,0 +1,721 @@
+import { GraphQLError } from 'graphql';
+import { sqliteAuthStore } from '../auth/sqlite-auth.js';
+import { generateToken } from '../utils/auth.js';
+
+interface LoginInput {
+  emailOrUsername: string;
+  password: string;
+}
+
+interface SignupInput {
+  email: string;
+  username: string;
+  password: string;
+  name: string;
+  teamId?: string;
+}
+
+interface UpdateProfileInput {
+  name?: string;
+  avatar?: string;
+  metadata?: string;
+}
+
+// SQLite-only auth resolvers that don't depend on Neo4j
+export const sqliteAuthResolvers = {
+  Query: {
+    // Get current user from JWT token
+    me: async (_: any, __: any, context: any) => {
+      if (!context.user) {
+        return null;
+      }
+
+      try {
+        const user = await sqliteAuthStore.findUserById(context.user.userId);
+        if (!user) {
+          return null;
+        }
+
+        return {
+          ...user,
+          passwordHash: undefined // Never expose password hash
+        };
+      } catch (error: any) {
+        console.log('⚠️  SQLite user lookup failed:', error.message);
+        return null;
+      }
+    },
+
+    // Get all users (admin only) 
+    users: async (_: any, __: any, context: any) => {
+      if (!context.user || context.user.role !== 'ADMIN') {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
+
+      try {
+        const users = await sqliteAuthStore.getAllUsers();
+        return users.map(user => ({
+          ...user,
+          passwordHash: undefined
+        }));
+      } catch (error: any) {
+        console.error('Error fetching users:', error);
+        throw new GraphQLError('Failed to fetch users');
+      }
+    },
+
+    // Check if email/username is available
+    checkAvailability: async (_: any, { email, username }: { email?: string; username?: string }) => {
+      try {
+        if (email) {
+          const existingUser = await sqliteAuthStore.findUserByEmailOrUsername(email);
+          if (existingUser) {
+            return { success: false, message: 'Email already taken' };
+          }
+        }
+
+        if (username) {
+          const existingUser = await sqliteAuthStore.findUserByEmailOrUsername(username);
+          if (existingUser) {
+            return { success: false, message: 'Username already taken' };
+          }
+        }
+
+        return { success: true, message: 'Available' };
+      } catch (error: any) {
+        console.error('Error checking availability:', error);
+        return { success: false, message: 'Error checking availability' };
+      }
+    },
+
+    // Get development mode info and default credentials
+    developmentInfo: async () => {
+      const isDevelopment = process.env.NODE_ENV !== 'production';
+      
+      return {
+        isDevelopment,
+        hasDefaultCredentials: isDevelopment,
+        defaultAccounts: isDevelopment ? [
+          {
+            username: 'admin',
+            password: 'graphdone',
+            role: 'ADMIN',
+            description: 'Full system administrator access'
+          },
+          {
+            username: 'viewer',
+            password: 'viewer123',
+            role: 'VIEWER',
+            description: 'Read-only access to all content'
+          }
+        ] : []
+      };
+    },
+
+    // Get public system settings
+    systemSettings: async () => {
+      try {
+        const allowAnonymousGuest = await sqliteAuthStore.getServerConfig('allowAnonymousGuest') ?? true;
+        return {
+          allowAnonymousGuest
+        };
+      } catch (error) {
+        // Default settings if config lookup fails
+        return {
+          allowAnonymousGuest: true
+        };
+      }
+    },
+
+    // FOLDER MANAGEMENT QUERIES
+    
+    // Get user's folder structure
+    folders: async (_: any, __: any, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        // Ensure user has personal folders
+        await sqliteAuthStore.createUserPersonalFolders(context.user.userId, context.user.teamId);
+        
+        const folders = await sqliteAuthStore.getUserFolders(context.user.userId);
+        
+        // Build hierarchical structure
+        const folderMap = new Map();
+        const rootFolders: any[] = [];
+
+        // First pass: create folder objects
+        folders.forEach(folder => {
+          folderMap.set(folder.id, {
+            ...folder,
+            children: [],
+            graphs: []
+          });
+        });
+
+        // Second pass: build hierarchy
+        folders.forEach(folder => {
+          const folderObj = folderMap.get(folder.id);
+          if (folder.parentId) {
+            const parent = folderMap.get(folder.parentId);
+            if (parent) {
+              parent.children.push(folderObj);
+            }
+          } else {
+            rootFolders.push(folderObj);
+          }
+        });
+
+        // Third pass: get graphs for each folder
+        for (const folder of folders) {
+          const graphs = await sqliteAuthStore.getFolderGraphs(folder.id);
+          const folderObj = folderMap.get(folder.id);
+          if (folderObj) {
+            folderObj.graphs = graphs;
+          }
+        }
+
+        return rootFolders;
+      } catch (error: any) {
+        console.error('❌ Get folders error:', error);
+        throw new GraphQLError('Failed to get folders');
+      }
+    },
+
+    // Get specific folder by ID
+    folder: async (_: any, { id }: { id: string }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        const folders = await sqliteAuthStore.getUserFolders(context.user.userId);
+        const folder = folders.find(f => f.id === id);
+        
+        if (!folder) {
+          return null;
+        }
+
+        const graphs = await sqliteAuthStore.getFolderGraphs(folder.id);
+        
+        return {
+          ...folder,
+          children: [],
+          graphs
+        };
+      } catch (error: any) {
+        console.error('❌ Get folder error:', error);
+        throw new GraphQLError('Failed to get folder');
+      }
+    },
+
+    // Get graphs in a specific folder
+    folderGraphs: async (_: any, { folderId }: { folderId: string }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        return await sqliteAuthStore.getFolderGraphs(folderId);
+      } catch (error: any) {
+        console.error('❌ Get folder graphs error:', error);
+        throw new GraphQLError('Failed to get folder graphs');
+      }
+    }
+  },
+
+  Mutation: {
+    // Login mutation - SQLite only
+    login: async (_: any, { input }: { input: LoginInput }) => {
+      console.log(`🔐 Login attempt for: ${input.emailOrUsername}`);
+      
+      try {
+        // SQLite-only authentication
+        const user = await sqliteAuthStore.findUserByEmailOrUsername(input.emailOrUsername);
+        
+        if (!user) {
+          console.log('❌ User not found:', input.emailOrUsername);
+          throw new GraphQLError('Invalid credentials', {
+            extensions: { code: 'UNAUTHENTICATED' }
+          });
+        }
+
+        console.log(`👤 Found user: ${user.username}`);
+        
+        // Verify password
+        const validPassword = await sqliteAuthStore.validatePassword(user, input.password);
+        if (!validPassword) {
+          console.log('❌ Invalid password for user:', user.username);
+          throw new GraphQLError('Invalid credentials', {
+            extensions: { code: 'UNAUTHENTICATED' }
+          });
+        }
+
+        // Check if user is active
+        if (!user.isActive) {
+          console.log('❌ User is deactivated:', user.username);
+          throw new GraphQLError('Account is deactivated', {
+            extensions: { code: 'FORBIDDEN' }
+          });
+        }
+
+        const token = generateToken(user.id, user.email, user.role);
+        console.log(`✅ Login successful: ${user.username} (${user.role})`);
+        
+        return {
+          token,
+          user: {
+            ...user,
+            passwordHash: undefined
+          }
+        };
+      } catch (error) {
+        if (error instanceof GraphQLError) {
+          throw error;
+        }
+        console.error('❌ Login error:', error);
+        throw new GraphQLError('Login failed', {
+          extensions: { code: 'INTERNAL_SERVER_ERROR' }
+        });
+      }
+    },
+
+    // Guest login
+    guestLogin: async () => {
+      const guestUser = {
+        id: 'guest-' + Date.now(),
+        email: 'guest@demo.local',
+        username: 'guest',
+        name: 'Guest User',
+        role: 'GUEST',
+        isActive: true,
+        isEmailVerified: false,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        team: null
+      };
+
+      const token = generateToken(guestUser.id, guestUser.email, guestUser.role);
+      
+      return {
+        token,
+        user: guestUser
+      };
+    },
+
+    // Signup mutation
+    signup: async (_: any, { input }: { input: SignupInput }) => {
+      try {
+        // Check if user already exists
+        const existingUser = await sqliteAuthStore.findUserByEmailOrUsername(input.email) || 
+                            await sqliteAuthStore.findUserByEmailOrUsername(input.username);
+        
+        if (existingUser) {
+          throw new GraphQLError('User already exists with that email or username', {
+            extensions: { code: 'BAD_USER_INPUT' }
+          });
+        }
+
+        // Create new user
+        const user = await sqliteAuthStore.createUser({
+          email: input.email,
+          username: input.username,
+          password: input.password,
+          name: input.name,
+          role: 'USER'
+        });
+
+        const token = generateToken(user.id, user.email, user.role);
+
+        return {
+          token,
+          user: {
+            ...user,
+            passwordHash: undefined
+          }
+        };
+      } catch (error) {
+        if (error instanceof GraphQLError) {
+          throw error;
+        }
+        console.error('❌ Signup error:', error);
+        throw new GraphQLError('Signup failed', {
+          extensions: { code: 'INTERNAL_SERVER_ERROR' }
+        });
+      }
+    },
+
+    // Update profile
+    updateProfile: async (_: any, { input: _input }: { input: UpdateProfileInput }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      // For now, return the current user - implement profile updates later
+      const user = await sqliteAuthStore.findUserById(context.user.userId);
+      if (!user) {
+        throw new GraphQLError('User not found');
+      }
+
+      return {
+        ...user,
+        passwordHash: undefined
+      };
+    },
+
+    // Logout (client-side token removal mostly)
+    logout: async () => {
+      return { success: true, message: 'Logged out successfully' };
+    },
+
+    // Other mutations can be implemented as needed
+    refreshToken: async (_: any, __: any, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      const user = await sqliteAuthStore.findUserById(context.user.userId);
+      if (!user) {
+        throw new GraphQLError('User not found');
+      }
+
+      const token = generateToken(user.id, user.email, user.role);
+
+      return {
+        token,
+        user: {
+          ...user,
+          passwordHash: undefined
+        }
+      };
+    },
+
+    // Admin: Update user role
+    updateUserRole: async (_: any, { userId, role }: { userId: string; role: string }, context: any) => {
+      if (!context.user || context.user.role !== 'ADMIN') {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
+
+      try {
+        console.log(`Admin ${context.user.userId} updating user ${userId} role to ${role}`);
+        const updatedUser = await sqliteAuthStore.updateUserRole(userId, role);
+        
+        return {
+          ...updatedUser,
+          passwordHash: undefined
+        };
+      } catch (error: any) {
+        console.error('❌ Update user role error:', error);
+        throw new GraphQLError('Failed to update user role');
+      }
+    },
+
+    // Admin: Reset user password
+    resetUserPassword: async (_: any, { userId }: { userId: string }, context: any) => {
+      if (!context.user || context.user.role !== 'ADMIN') {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
+
+      try {
+        const user = await sqliteAuthStore.findUserById(userId);
+        if (!user) {
+          throw new GraphQLError('User not found');
+        }
+
+        // Generate temporary password
+        const tempPassword = 'temp' + Math.random().toString(36).slice(-6);
+        await sqliteAuthStore.updateUserPassword(userId, tempPassword);
+        
+        console.log(`Admin ${context.user.userId} reset password for user ${userId}`);
+        
+        return {
+          success: true,
+          tempPassword,
+          message: `Password reset for ${user.username}`
+        };
+      } catch (error: any) {
+        console.error('❌ Reset password error:', error);
+        throw new GraphQLError('Failed to reset password');
+      }
+    },
+
+    // Admin: Delete user
+    deleteUser: async (_: any, { userId }: { userId: string }, context: any) => {
+      if (!context.user || context.user.role !== 'ADMIN') {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
+
+      try {
+        const user = await sqliteAuthStore.findUserById(userId);
+        if (!user) {
+          throw new GraphQLError('User not found');
+        }
+
+        await sqliteAuthStore.deleteUser(userId);
+        console.log(`Admin ${context.user.userId} deleted user ${userId} (${user.username})`);
+        
+        return {
+          success: true,
+          message: `User ${user.username} has been deleted`
+        };
+      } catch (error: any) {
+        console.error('❌ Delete user error:', error);
+        throw new GraphQLError('Failed to delete user');
+      }
+    },
+
+    // Admin: Create user
+    createUser: async (_: any, { input }: { input: { email: string; username: string; name: string; password: string; role: string } }, context: any) => {
+      if (!context.user || context.user.role !== 'ADMIN') {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
+
+      try {
+        // Check if user already exists
+        const existingUser = await sqliteAuthStore.findUserByEmailOrUsername(input.email) || 
+                            await sqliteAuthStore.findUserByEmailOrUsername(input.username);
+        
+        if (existingUser) {
+          throw new GraphQLError('User already exists with that email or username', {
+            extensions: { code: 'BAD_USER_INPUT' }
+          });
+        }
+
+        // Create new user
+        const user = await sqliteAuthStore.createUser({
+          email: input.email,
+          username: input.username,
+          password: input.password,
+          name: input.name,
+          role: input.role as 'USER' | 'VIEWER'
+        });
+
+        console.log(`Admin ${context.user.userId} created user ${user.id} (${user.username})`);
+
+        return {
+          ...user,
+          passwordHash: undefined
+        };
+      } catch (error) {
+        if (error instanceof GraphQLError) {
+          throw error;
+        }
+        console.error('❌ Create user error:', error);
+        throw new GraphQLError('Failed to create user');
+      }
+    },
+
+    // Admin: Update user status  
+    updateUserStatus: async (_: any, { userId, isActive }: { userId: string; isActive: boolean }, context: any) => {
+      if (!context.user || context.user.role !== 'ADMIN') {
+        throw new GraphQLError('Unauthorized', {
+          extensions: { code: 'FORBIDDEN' }
+        });
+      }
+
+      try {
+        console.log(`Admin ${context.user.userId} ${isActive ? 'activating' : 'deactivating'} user ${userId}`);
+        const updatedUser = await sqliteAuthStore.updateUserStatus(userId, isActive);
+        
+        return {
+          ...updatedUser,
+          passwordHash: undefined
+        };
+      } catch (error: any) {
+        console.error('❌ Update user status error:', error);
+        throw new GraphQLError('Failed to update user status');
+      }
+    },
+
+    // FOLDER MANAGEMENT MUTATIONS
+
+    // Create new folder
+    createFolder: async (_: any, { input }: { input: any }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        const folderData = {
+          ...input,
+          ownerId: input.ownerId || context.user.userId
+        };
+
+        const folder = await sqliteAuthStore.createFolder(folderData);
+        
+        return {
+          ...folder,
+          children: [],
+          graphs: []
+        };
+      } catch (error: any) {
+        console.error('❌ Create folder error:', error);
+        throw new GraphQLError('Failed to create folder');
+      }
+    },
+
+    // Update folder
+    updateFolder: async (_: any, { id, input }: { id: string; input: any }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        const folder = await sqliteAuthStore.updateFolder(id, input);
+        const graphs = await sqliteAuthStore.getFolderGraphs(id);
+        
+        return {
+          ...folder,
+          children: [],
+          graphs
+        };
+      } catch (error: any) {
+        console.error('❌ Update folder error:', error);
+        throw new GraphQLError('Failed to update folder');
+      }
+    },
+
+    // Delete folder
+    deleteFolder: async (_: any, { id, moveGraphsTo }: { id: string; moveGraphsTo?: string }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        // If moveGraphsTo is specified, move all graphs first
+        if (moveGraphsTo) {
+          const graphs = await sqliteAuthStore.getFolderGraphs(id);
+          for (const graph of graphs) {
+            await sqliteAuthStore.removeGraphFromFolder(graph.graphId, id);
+            await sqliteAuthStore.addGraphToFolder(graph.graphId, moveGraphsTo, graph.position);
+          }
+        }
+
+        await sqliteAuthStore.deleteFolder(id);
+        
+        return {
+          success: true,
+          message: 'Folder deleted successfully'
+        };
+      } catch (error: any) {
+        console.error('❌ Delete folder error:', error);
+        throw new GraphQLError('Failed to delete folder');
+      }
+    },
+
+    // Add graph to folder
+    addGraphToFolder: async (_: any, { graphId, folderId, position }: { graphId: string; folderId: string; position?: number }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        await sqliteAuthStore.addGraphToFolder(graphId, folderId, position || 0);
+        
+        return {
+          success: true,
+          message: 'Graph added to folder successfully'
+        };
+      } catch (error: any) {
+        console.error('❌ Add graph to folder error:', error);
+        throw new GraphQLError('Failed to add graph to folder');
+      }
+    },
+
+    // Remove graph from folder
+    removeGraphFromFolder: async (_: any, { graphId, folderId }: { graphId: string; folderId: string }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        await sqliteAuthStore.removeGraphFromFolder(graphId, folderId);
+        
+        return {
+          success: true,
+          message: 'Graph removed from folder successfully'
+        };
+      } catch (error: any) {
+        console.error('❌ Remove graph from folder error:', error);
+        throw new GraphQLError('Failed to remove graph from folder');
+      }
+    },
+
+    // Move graph between folders  
+    moveGraphBetweenFolders: async (_: any, { graphId, fromFolderId, toFolderId, position }: { graphId: string; fromFolderId: string; toFolderId: string; position?: number }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        await sqliteAuthStore.removeGraphFromFolder(graphId, fromFolderId);
+        await sqliteAuthStore.addGraphToFolder(graphId, toFolderId, position || 0);
+        
+        return {
+          success: true,
+          message: 'Graph moved between folders successfully'
+        };
+      } catch (error: any) {
+        console.error('❌ Move graph between folders error:', error);
+        throw new GraphQLError('Failed to move graph between folders');
+      }
+    },
+
+    // Reorder graphs in folder
+    reorderGraphsInFolder: async (_: any, { folderId, graphOrders }: { folderId: string; graphOrders: Array<{ graphId: string; position: number }> }, context: any) => {
+      if (!context.user) {
+        throw new GraphQLError('Authentication required', {
+          extensions: { code: 'UNAUTHENTICATED' }
+        });
+      }
+
+      try {
+        // Update position for each graph
+        for (const order of graphOrders) {
+          await sqliteAuthStore.addGraphToFolder(order.graphId, folderId, order.position);
+        }
+        
+        return {
+          success: true,
+          message: 'Graphs reordered successfully'
+        };
+      } catch (error: any) {
+        console.error('❌ Reorder graphs error:', error);
+        throw new GraphQLError('Failed to reorder graphs in folder');
+      }
+    }
+  }
+};
\ No newline at end of file
diff --git a/packages/server/src/schema/auth-only-schema.ts b/packages/server/src/schema/auth-only-schema.ts
new file mode 100644
index 00000000..a264f505
--- /dev/null
+++ b/packages/server/src/schema/auth-only-schema.ts
@@ -0,0 +1,259 @@
+import { gql } from 'graphql-tag';
+
+// Standalone auth schema that includes all necessary types for auth-only mode
+export const authOnlyTypeDefs = gql`
+  # User roles
+  enum UserRole {
+    ADMIN
+    USER
+    VIEWER
+    GUEST
+  }
+
+  # Team type (minimal for auth)
+  type Team {
+    id: ID!
+    name: String!
+    description: String
+  }
+
+  # User type (from SQLite)
+  type User {
+    id: ID!
+    email: String!
+    username: String!
+    name: String!
+    avatar: String
+    role: UserRole!
+    isActive: Boolean!
+    isEmailVerified: Boolean!
+    lastLogin: String
+    deactivationDate: String
+    createdAt: String!
+    updatedAt: String!
+    team: Team
+  }
+
+  # Auth payload
+  type AuthPayload {
+    token: String!
+    user: User!
+  }
+
+  type MessageResponse {
+    success: Boolean!
+    message: String!
+  }
+
+  type PasswordResetResponse {
+    success: Boolean!
+    tempPassword: String
+    message: String!
+  }
+
+  input SignupInput {
+    email: String!
+    username: String!
+    password: String!
+    name: String!
+    teamId: String
+  }
+
+  input LoginInput {
+    emailOrUsername: String!
+    password: String!
+  }
+
+  input UpdateProfileInput {
+    name: String
+    avatar: String
+    metadata: String
+  }
+
+  input ChangePasswordInput {
+    currentPassword: String!
+    newPassword: String!
+  }
+
+  input ResetPasswordInput {
+    token: String!
+    newPassword: String!
+  }
+
+  input CreateUserInput {
+    email: String!
+    username: String!
+    name: String!
+    password: String!
+    role: UserRole!
+  }
+
+  # Folder Management Types
+  type Folder {
+    id: String!
+    name: String!
+    parentId: String
+    type: FolderType!
+    ownerId: String
+    ownerName: String
+    color: String
+    icon: String
+    description: String
+    position: Int!
+    isExpanded: Boolean!
+    createdAt: String!
+    updatedAt: String!
+    children: [Folder!]!
+    graphs: [GraphFolderMapping!]!
+  }
+
+  type GraphFolderMapping {
+    graphId: String!
+    folderId: String!
+    position: Int!
+    createdAt: String!
+    updatedAt: String!
+  }
+
+  enum FolderType {
+    USER
+    TEAM
+    SYSTEM
+  }
+
+  input CreateFolderInput {
+    name: String!
+    parentId: String
+    type: FolderType!
+    ownerId: String
+    color: String
+    icon: String
+    description: String
+    position: Int
+  }
+
+  input UpdateFolderInput {
+    name: String
+    parentId: String
+    color: String
+    icon: String
+    description: String
+    position: Int
+    isExpanded: Boolean
+  }
+
+  type SystemSettings {
+    allowAnonymousGuest: Boolean!
+  }
+
+  type DefaultAccount {
+    username: String!
+    password: String!
+    role: String!
+    description: String!
+  }
+
+  type DevelopmentInfo {
+    isDevelopment: Boolean!
+    hasDefaultCredentials: Boolean!
+    defaultAccounts: [DefaultAccount!]!
+  }
+
+  type Query {
+    # Get current user from JWT token
+    me: User
+    
+    # Get all users (admin only)
+    users: [User!]!
+    
+    # Check if email/username is available
+    checkAvailability(email: String, username: String): MessageResponse!
+    
+    # Verify email token
+    verifyEmailToken(token: String!): MessageResponse!
+    
+    # Get public system settings
+    systemSettings: SystemSettings!
+    
+    # Get development mode info and default credentials (dev mode only)
+    developmentInfo: DevelopmentInfo!
+    
+    # Folder Management Queries
+    # Get user's folder structure (hierarchical)
+    folders: [Folder!]!
+    
+    # Get specific folder by ID
+    folder(id: String!): Folder
+    
+    # Get graphs in a specific folder
+    folderGraphs(folderId: String!): [GraphFolderMapping!]!
+  }
+
+  type Mutation {
+    # Authentication mutations
+    signup(input: SignupInput!): AuthPayload!
+    login(input: LoginInput!): AuthPayload!
+    guestLogin: AuthPayload!
+    logout: MessageResponse!
+    refreshToken: AuthPayload!
+    
+    # Profile management
+    updateProfile(input: UpdateProfileInput!): User!
+    changePassword(input: ChangePasswordInput!): MessageResponse!
+    
+    # Email verification
+    sendVerificationEmail: MessageResponse!
+    verifyEmail(token: String!): MessageResponse!
+    
+    # Password reset
+    requestPasswordReset(email: String!): MessageResponse!
+    resetPassword(input: ResetPasswordInput!): MessageResponse!
+    
+    # Team management (for ADMIN role)
+    createTeam(name: String!, description: String): Team!
+    inviteToTeam(email: String!, teamId: String!, role: UserRole!): MessageResponse!
+    acceptInvite(inviteToken: String!): AuthPayload!
+    
+    # Role management (for ADMIN)
+    updateUserRole(userId: String!, role: UserRole!): User!
+    
+    # Admin password reset (for ADMIN only)
+    resetUserPassword(userId: String!): PasswordResetResponse!
+    
+    # Admin user deletion (for ADMIN only)
+    deleteUser(userId: String!): MessageResponse!
+    
+    # Admin user creation (for ADMIN only)
+    createUser(input: CreateUserInput!): User!
+    
+    # Admin user status update (for ADMIN only)
+    updateUserStatus(userId: String!, isActive: Boolean!): User!
+    
+    # Folder Management Mutations
+    # Create new folder
+    createFolder(input: CreateFolderInput!): Folder!
+    
+    # Update folder properties
+    updateFolder(id: String!, input: UpdateFolderInput!): Folder!
+    
+    # Delete folder (and optionally its contents)
+    deleteFolder(id: String!, moveGraphsTo: String): MessageResponse!
+    
+    # Add graph to folder
+    addGraphToFolder(graphId: String!, folderId: String!, position: Int): MessageResponse!
+    
+    # Remove graph from folder
+    removeGraphFromFolder(graphId: String!, folderId: String!): MessageResponse!
+    
+    # Move graph between folders
+    moveGraphBetweenFolders(graphId: String!, fromFolderId: String!, toFolderId: String!, position: Int): MessageResponse!
+    
+    # Reorder graphs within folder
+    reorderGraphsInFolder(folderId: String!, graphOrders: [GraphOrderInput!]!): MessageResponse!
+  }
+  
+  input GraphOrderInput {
+    graphId: String!
+    position: Int!
+  }
+`;
\ No newline at end of file
diff --git a/packages/server/src/schema/auth-schema.ts b/packages/server/src/schema/auth-schema.ts
index d30d230d..9ea9d03e 100644
--- a/packages/server/src/schema/auth-schema.ts
+++ b/packages/server/src/schema/auth-schema.ts
@@ -54,10 +54,77 @@ export const authTypeDefs = gql`
     role: UserRole!
   }
 
+  # Folder Management Types
+  type Folder {
+    id: String!
+    name: String!
+    parentId: String
+    type: FolderType!
+    ownerId: String
+    ownerName: String
+    color: String
+    icon: String
+    description: String
+    position: Int!
+    isExpanded: Boolean!
+    createdAt: String!
+    updatedAt: String!
+    children: [Folder!]!
+    graphs: [GraphFolderMapping!]!
+  }
+
+  type GraphFolderMapping {
+    graphId: String!
+    folderId: String!
+    position: Int!
+    createdAt: String!
+    updatedAt: String!
+  }
+
+  enum FolderType {
+    USER
+    TEAM
+    SYSTEM
+  }
+
+  input CreateFolderInput {
+    name: String!
+    parentId: String
+    type: FolderType!
+    ownerId: String
+    color: String
+    icon: String
+    description: String
+    position: Int
+  }
+
+  input UpdateFolderInput {
+    name: String
+    parentId: String
+    color: String
+    icon: String
+    description: String
+    position: Int
+    isExpanded: Boolean
+  }
+
   type SystemSettings {
     allowAnonymousGuest: Boolean!
   }
 
+  type DefaultAccount {
+    username: String!
+    password: String!
+    role: String!
+    description: String!
+  }
+
+  type DevelopmentInfo {
+    isDevelopment: Boolean!
+    hasDefaultCredentials: Boolean!
+    defaultAccounts: [DefaultAccount!]!
+  }
+
   type Query {
     # Get current user from JWT token
     me: User
@@ -73,6 +140,19 @@ export const authTypeDefs = gql`
     
     # Get public system settings
     systemSettings: SystemSettings!
+    
+    # Get development mode info and default credentials (dev mode only)
+    developmentInfo: DevelopmentInfo!
+    
+    # Folder Management Queries
+    # Get user's folder structure (hierarchical)
+    folders: [Folder!]!
+    
+    # Get specific folder by ID
+    folder(id: String!): Folder
+    
+    # Get graphs in a specific folder
+    folderGraphs(folderId: String!): [GraphFolderMapping!]!
   }
 
   type Mutation {
@@ -114,5 +194,32 @@ export const authTypeDefs = gql`
     
     # Admin user status update (for GRAPH_MASTER only)
     updateUserStatus(userId: String!, isActive: Boolean!): User!
+    
+    # Folder Management Mutations
+    # Create new folder
+    createFolder(input: CreateFolderInput!): Folder!
+    
+    # Update folder properties
+    updateFolder(id: String!, input: UpdateFolderInput!): Folder!
+    
+    # Delete folder (and optionally its contents)
+    deleteFolder(id: String!, moveGraphsTo: String): MessageResponse!
+    
+    # Add graph to folder
+    addGraphToFolder(graphId: String!, folderId: String!, position: Int): MessageResponse!
+    
+    # Remove graph from folder
+    removeGraphFromFolder(graphId: String!, folderId: String!): MessageResponse!
+    
+    # Move graph between folders
+    moveGraphBetweenFolders(graphId: String!, fromFolderId: String!, toFolderId: String!, position: Int): MessageResponse!
+    
+    # Reorder graphs within folder
+    reorderGraphsInFolder(folderId: String!, graphOrders: [GraphOrderInput!]!): MessageResponse!
+  }
+  
+  input GraphOrderInput {
+    graphId: String!
+    position: Int!
   }
 `;
\ No newline at end of file
diff --git a/packages/server/src/schema/neo4j-schema.ts b/packages/server/src/schema/neo4j-schema.ts
index 3ba3c889..9fd47e16 100644
--- a/packages/server/src/schema/neo4j-schema.ts
+++ b/packages/server/src/schema/neo4j-schema.ts
@@ -327,9 +327,7 @@ export const typeDefs = gql`
     radius: Float! @default(value: 1.0)
     theta: Float! @default(value: 0.0)
     phi: Float! @default(value: 0.0)
-    priorityExec: Float! @default(value: 0.0)
-    priorityIndiv: Float! @default(value: 0.0)
-    priorityComm: Float! @default(value: 0.0)
+    priority: Float! @default(value: 0.0)
     priorityComp: Float! @default(value: 0.0)
     status: NodeStatus! @default(value: NOT_STARTED)
     dueDate: DateTime
diff --git a/packages/server/src/utils/auth.ts b/packages/server/src/utils/auth.ts
new file mode 100644
index 00000000..11a1b870
--- /dev/null
+++ b/packages/server/src/utils/auth.ts
@@ -0,0 +1,20 @@
+import jwt from 'jsonwebtoken';
+
+const JWT_SECRET = process.env.JWT_SECRET || 'your-dev-secret-key';
+const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '24h';
+
+export function generateToken(userId: string, email: string, role: string): string {
+  return jwt.sign(
+    { userId, email, role },
+    JWT_SECRET,
+    { expiresIn: JWT_EXPIRES_IN } as jwt.SignOptions
+  );
+}
+
+export function verifyToken(token: string): any {
+  try {
+    return jwt.verify(token, JWT_SECRET);
+  } catch (error) {
+    return null;
+  }
+}
\ No newline at end of file
diff --git a/packages/web/Dockerfile.dev b/packages/web/Dockerfile.dev
index 1b1cc5c3..c861502f 100644
--- a/packages/web/Dockerfile.dev
+++ b/packages/web/Dockerfile.dev
@@ -1,15 +1,47 @@
 FROM node:18-alpine
 
+# Install security updates and curl for health checks
+RUN apk update && apk upgrade && apk add --no-cache curl dumb-init
+
+# Create non-root user (use existing node group if available)
+RUN addgroup -g 1001 -S appgroup || true && \
+    adduser -u 1001 -S appuser -G appgroup 2>/dev/null || \
+    adduser -u 1001 -S appuser -G node
+
 WORKDIR /app
 
-# Copy package files first for better caching
-COPY package.json turbo.json ./
+# Install global dependencies as root
+RUN npm install -g turbo
+
+# Copy root package files
+COPY --chown=appuser:appgroup package.json package-lock.json turbo.json tsconfig.json ./
+
+# Copy all package.json files to maintain workspace structure
+COPY --chown=appuser:appgroup packages/core/package.json packages/core/
+COPY --chown=appuser:appgroup packages/server/package.json packages/server/
+COPY --chown=appuser:appgroup packages/web/package.json packages/web/
+COPY --chown=appuser:appgroup packages/mcp-server/package.json packages/mcp-server/
+
+# Install all dependencies
 RUN npm ci
 
-# Create packages directory structure
-RUN mkdir -p packages/core packages/web
+# Copy source code
+COPY --chown=appuser:appgroup packages/ packages/
+
+# Build core package first (dependency for web)
+RUN cd packages/core && npm run build
+
+# Create directories for volumes with proper permissions
+RUN mkdir -p /app/logs && \
+    chown -R appuser:appgroup /app/logs
+
+EXPOSE 3127
+
+# Switch to non-root user
+USER appuser
 
-EXPOSE 3000
+# Use dumb-init for proper signal handling
+ENTRYPOINT ["/usr/bin/dumb-init", "--"]
 
-# Development command will be overridden by docker-compose
-CMD ["npm", "run", "dev"]
\ No newline at end of file
+# Development command - skip kill-port in container
+CMD ["npm", "run", "dev:force", "--workspace=@graphdone/web"]
\ No newline at end of file
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index d0219791..b7716455 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -20,8 +20,31 @@ function AuthenticatedApp() {
   if (isInitializing) {
     // Maintain consistent structure during initial load to prevent DOM flash
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-        <div className="max-w-4xl w-full">
+      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4 relative overflow-hidden">
+        {/* Tropical lagoon light scattering background animation - consistent with main app */}
+        <div className="lagoon-caustics">
+          <div className="caustic-layer caustic-layer-1"></div>
+          <div className="caustic-layer caustic-layer-2"></div>
+          <div className="caustic-layer caustic-layer-3"></div>
+          <div className="caustic-layer caustic-layer-4"></div>
+          <div className="caustic-layer caustic-layer-5"></div>
+          <div className="caustic-layer caustic-layer-6"></div>
+          <div className="caustic-layer caustic-layer-7"></div>
+          <div className="caustic-layer caustic-layer-8"></div>
+          <div className="caustic-layer caustic-layer-9"></div>
+          <div className="caustic-layer caustic-layer-10"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-6"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-7"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-8"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-9"></div>
+          <div className="lagoon-shimmer lagoon-shimmer-10"></div>
+        </div>
+        <div className="max-w-4xl w-full relative z-10">
           <div className="text-center mb-8">
             <div className="flex items-center justify-center mb-4">
               <img src="/favicon.svg" alt="GraphDone Logo" className="h-12 w-12" />
@@ -33,11 +56,43 @@ function AuthenticatedApp() {
             </div>
           </div>
           
-          {/* Maintain similar structure as login page to prevent flash */}
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 opacity-30">
-            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6 h-64"></div>
-            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6 h-64"></div>
-            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6 h-64"></div>
+          {/* Loading Feature Highlights */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-lg p-6 h-64 hover:border-green-500/30 transition-all duration-300">
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center mb-4 shadow-lg">
+                  <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold text-white mb-2">Graph Engine</h3>
+                <p className="text-gray-300 text-sm leading-relaxed">Advanced dependency mapping with real-time priority calculation and collaborative workflows</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-lg p-6 h-64 hover:border-blue-500/30 transition-all duration-300">
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mb-4 shadow-lg">
+                  <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold text-white mb-2">Team Collaboration</h3>
+                <p className="text-gray-300 text-sm leading-relaxed">Democratic prioritization where ideas flow from periphery to center based on community validation</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-lg p-6 h-64 hover:border-purple-500/30 transition-all duration-300">
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mb-4 shadow-lg">
+                  <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold text-white mb-2">AI Integration</h3>
+                <p className="text-gray-300 text-sm leading-relaxed">Human and AI agents collaborate as peers through the same graph interface and API</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -58,22 +113,19 @@ function AuthenticatedApp() {
   return (
     <NotificationProvider>
       <GraphProvider>
-        <Routes>
-          <Route path="/graph" element={<div className="h-screen overflow-hidden"><InteractiveGraphVisualization /></div>} />
-          <Route path="/*" element={
-            <Layout>
-              <Routes>
-                <Route path="/" element={<Workspace />} />
-                <Route path="/ontology" element={<Ontology />} />
-                <Route path="/agents" element={<Agents />} />
-                <Route path="/analytics" element={<Analytics />} />
-                <Route path="/settings" element={<Settings />} />
-                <Route path="/admin" element={<Admin />} />
-                <Route path="/backend" element={<Backend />} />
-              </Routes>
-            </Layout>
-          } />
-        </Routes>
+        <Layout>
+          <Routes>
+            <Route path="/" element={<Workspace />} />
+            <Route path="/workspace" element={<Workspace />} />
+            <Route path="/ontology" element={<Ontology />} />
+            <Route path="/agents" element={<Agents />} />
+            <Route path="/analytics" element={<Analytics />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/admin" element={<Admin />} />
+            <Route path="/backend" element={<Backend />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Layout>
       </GraphProvider>
     </NotificationProvider>
   );
diff --git a/packages/web/src/components/ActivityFeed.tsx b/packages/web/src/components/ActivityFeed.tsx
index 3b4d1f50..e24b74c9 100644
--- a/packages/web/src/components/ActivityFeed.tsx
+++ b/packages/web/src/components/ActivityFeed.tsx
@@ -8,10 +8,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -88,7 +85,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
     const activityList: ActivityItem[] = [];
     
     filteredNodes.forEach(node => {
-      const priority = node.priorityExec || node.priorityComp || 0;
+      const priority = node.priority || 0;
       const activityPriority = priority >= 0.8 ? 'critical' : 
                               priority >= 0.6 ? 'high' : 
                               priority >= 0.4 ? 'moderate' : 
@@ -377,7 +374,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
   }, []);
 
   return (
-    <div className="flex flex-col h-full bg-gray-900">
+    <div className="flex flex-col h-full">
       {/* Header */}
       <div className="p-6 border-b border-gray-700">
         <div className="flex items-center justify-between mb-6">
@@ -617,7 +614,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
               return (
                 <div 
                   key={activity.id} 
-                  className={`bg-gray-800 rounded-lg border transition-all duration-200 cursor-pointer ${
+                  className={`bg-gray-800/50 backdrop-blur-sm rounded-lg border transition-all duration-200 cursor-pointer ${
                     isSelected 
                       ? `${WORK_ITEM_STATUSES.COMPLETED.borderColor} ${WORK_ITEM_STATUSES.COMPLETED.bgColor} shadow-lg shadow-green-500/10` 
                       : 'border-gray-700 hover:border-gray-600 hover:bg-gray-750'
@@ -722,7 +719,7 @@ const ActivityFeed: React.FC<ActivityFeedProps> = ({ filteredNodes }) => {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="border-t border-gray-700 p-4 bg-gray-800">
+        <div className="border-t border-gray-700/50 p-4 bg-gray-800/50 backdrop-blur-sm">
           <div className="flex items-center justify-between">
             <div className="text-sm text-gray-400">
               Showing {((currentPage - 1) * itemsPerPage) + 1} to {Math.min(currentPage * itemsPerPage, filteredActivities.length)} of {filteredActivities.length} activities
diff --git a/packages/web/src/components/CalendarView.tsx b/packages/web/src/components/CalendarView.tsx
index bd3041a1..b471f13b 100644
--- a/packages/web/src/components/CalendarView.tsx
+++ b/packages/web/src/components/CalendarView.tsx
@@ -8,10 +8,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -71,7 +68,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
       
       if (!showCompleted && node.status === 'COMPLETED') return false;
       if (filterPriority !== 'all') {
-        const priority = node.priorityExec || node.priorityComp || 0;
+        const priority = node.priority || 0;
         const priorityLevel = getPriorityConfig(priority).value;
         if (priorityLevel !== filterPriority) return false;
       }
@@ -104,8 +101,8 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
     // Sort tasks within each day by priority
     Object.keys(grouped).forEach(dateKey => {
       grouped[dateKey].sort((a, b) => {
-        const aPriority = a.priorityExec || a.priorityComp || 0;
-        const bPriority = b.priorityExec || b.priorityComp || 0;
+        const aPriority = a.priority || 0;
+        const bPriority = b.priority || 0;
         return bPriority - aPriority;
       });
     });
@@ -192,7 +189,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
     const dateKey = date.toDateString();
     const tasks = nodesByDate[dateKey] || [];
     if (tasks.length === 0) return 0;
-    return Math.max(...tasks.map(t => t.priorityExec || t.priorityComp || 0));
+    return Math.max(...tasks.map(t => t.priority || 0));
   };
 
   const formatDateRange = () => {
@@ -207,7 +204,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
   };
 
   return (
-    <div className="flex flex-col h-full bg-gray-900">
+    <div className="flex flex-col h-full">
       {/* Header */}
       <div className="p-6 border-b border-gray-700">
         <div className="flex items-center justify-between mb-4">
@@ -401,7 +398,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
 
       {/* Main Content */}
       <div className="flex-1 overflow-hidden p-6">
-        <div className="bg-gray-800 rounded-lg border border-gray-700 h-full flex flex-col">
+        <div className="bg-gray-800/50 backdrop-blur-sm rounded-lg border border-gray-700/50 h-full flex flex-col">
           {/* Calendar Header */}
           <div className="flex items-center justify-between p-4 border-b border-gray-700">
             <button
@@ -457,7 +454,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
                     onClick={() => handleDateClick(day)}
                     className={`
                       min-h-[120px] p-3 border-2 rounded-lg transition-all duration-200 cursor-pointer
-                      ${isCurrentMonthDay ? 'bg-gray-700' : 'bg-gray-800/50'}
+                      ${isCurrentMonthDay ? 'bg-gray-700/50 backdrop-blur-sm' : 'bg-gray-800/30 backdrop-blur-sm'}
                       ${isTodayDay ? 'ring-2 ring-green-500' : ''}
                       ${isSelected ? `ring-2 ring-blue-400 ${WORK_ITEM_PRIORITIES.moderate.bgColor}` : ''}
                       ${taskCount > 0 ? priorityColor : 'border-gray-600'}
@@ -489,7 +486,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
                       {dayNodes.slice(0, 4).map((node, nodeIndex) => {
                         const statusConfig = getStatusConfig(node.status as WorkItemStatus);
                         const typeConfig = getTypeConfig(node.type as WorkItemType);
-                        const priority = node.priorityExec || node.priorityComp || 0;
+                        const priority = node.priority || 0;
                         
                         return (
                           <div
@@ -535,7 +532,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
         
         {/* Selected Date Details Panel */}
         {selectedDate && (
-          <div className="mt-4 bg-gray-800 rounded-lg border border-gray-700 p-4">
+          <div className="mt-4 bg-gray-800/50 backdrop-blur-sm rounded-lg border border-gray-700/50 p-4">
             <div className="flex items-center justify-between mb-3">
               <h4 className="text-lg font-semibold text-white">
                 {selectedDate.toLocaleDateString('en-US', { 
@@ -558,7 +555,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
                 {nodesByDate[selectedDate.toDateString()].map((node, index) => {
                   const statusConfig = getStatusConfig(node.status as WorkItemStatus);
                   const typeConfig = getTypeConfig(node.type as WorkItemType);
-                  const priority = node.priorityExec || node.priorityComp || 0;
+                  const priority = node.priority || 0;
                   const priorityConfig = getPriorityConfig(priority);
                   
                   return (
@@ -600,7 +597,7 @@ const CalendarViewComponent: React.FC<CalendarViewProps> = ({ filteredNodes }) =
       </div>
 
       {/* Footer Statistics */}
-      <div className="border-t border-gray-700 p-4 bg-gray-800">
+      <div className="border-t border-gray-700/50 p-4 bg-gray-800/50 backdrop-blur-sm">
         <div className="grid grid-cols-2 md:grid-cols-6 gap-4 text-center">
           <div>
             <div className="text-xl font-bold text-white">
diff --git a/packages/web/src/components/CardView.tsx b/packages/web/src/components/CardView.tsx
index 0484f434..4e44c174 100644
--- a/packages/web/src/components/CardView.tsx
+++ b/packages/web/src/components/CardView.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { 
-  Edit,
-  Trash2
+  GitBranch,
+  ArrowRight,
+  ArrowLeft
 } from 'lucide-react';
 import {
   WorkItemType,
@@ -11,7 +12,8 @@ import {
   getTypeIconElement,
   getStatusIconElement,
   getContributorColor,
-  getDueDateColorScheme
+  getDueDateColorScheme,
+  getTypeGradientBackground
 } from '../constants/workItemConstants';
 import { TagDisplay } from './TagDisplay';
 import { AnimatedPriority } from './AnimatedPriority';
@@ -23,10 +25,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -36,14 +35,21 @@ interface WorkItem {
   assignedTo?: { id: string; name: string; username: string; };
   graph?: { id: string; name: string; team?: { id: string; name: string; } };
   contributors?: Array<{ id: string; name: string; type: string; }>;
-  dependencies?: Array<{ id: string; title: string; type: string; }>;
-  dependents?: Array<{ id: string; title: string; type: string; }>;
+  dependencies?: Array<{ id: string; title: string; type: string; status: string; }>;
+  dependents?: Array<{ id: string; title: string; type: string; status: string; }>;
+}
+
+interface Edge {
+  id: string;
+  type: string;
+  source: { id: string; title: string; type: string; };
+  target: { id: string; title: string; type: string; };
 }
 
 interface CardViewProps {
   filteredNodes: WorkItem[];
   handleEditNode: (node: WorkItem) => void;
-  handleDeleteNode: (node: WorkItem) => void;
+  edges: Edge[];
 }
 
 const formatLabel = (label: string) => {
@@ -58,8 +64,31 @@ const getNodeTypeColor = (type: string) => {
   return `${config.bgColor} ${config.color}`;
 };
 
+const getNodeTypeCardBackground = (type: string) => {
+  return getTypeGradientBackground(type as WorkItemType, 'card');
+};
+
 const getNodePriority = (node: WorkItem) => {
-  return node.priorityExec || 0;
+  return node.priority || 0;
+};
+
+const getNodeTypeCardBorderColor = (type: string) => {
+  return getTypeConfig(type as WorkItemType).hexColor;
+};
+
+const getConnectionDetails = (node: WorkItem, edges: Edge[]) => {
+  const incomingEdges = edges.filter(edge => edge.target.id === node.id);
+  const outgoingEdges = edges.filter(edge => edge.source.id === node.id);
+  const incomingCount = incomingEdges.length;
+  const outgoingCount = outgoingEdges.length;
+  const totalCount = incomingCount + outgoingCount;
+  return { 
+    incomingCount, 
+    outgoingCount, 
+    totalCount,
+    incomingEdges,
+    outgoingEdges
+  };
 };
 
 
@@ -78,7 +107,7 @@ const getContributorAvatar = (contributor?: string) => {
   );
 };
 
-const CardView: React.FC<CardViewProps> = ({ filteredNodes, handleEditNode, handleDeleteNode }) => {
+const CardView: React.FC<CardViewProps> = ({ filteredNodes, handleEditNode, edges }) => {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
       {[...filteredNodes]
@@ -90,35 +119,56 @@ const CardView: React.FC<CardViewProps> = ({ filteredNodes, handleEditNode, hand
         .map((node) => (
         <div
           key={node.id}
-          className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm hover:shadow-md dark:shadow-md dark:hover:shadow-lg transition-all duration-200 cursor-pointer border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700/50 hover:scale-[1.02] hover:-translate-y-1 group"
+          onClick={() => handleEditNode(node)}
+          className={`${getNodeTypeCardBackground(node.type)} rounded-xl p-6 shadow-lg hover:shadow-xl hover:shadow-white/10 transition-all duration-200 cursor-pointer border border-gray-600/50 hover:border-gray-500/70 hover:scale-[1.02] hover:-translate-y-1 hover:brightness-125 group backdrop-blur-sm`}
+          style={{
+            borderLeft: `4px solid ${getNodeTypeCardBorderColor(node.type)}`,
+            borderLeftWidth: '4px',
+            borderLeftStyle: 'solid',
+            borderLeftColor: getNodeTypeCardBorderColor(node.type)
+          }}
         >
           <div className="flex items-start justify-between mb-4">
             <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm ${getNodeTypeColor(node.type)}`}>
               {getTypeIconElement(node.type as WorkItemType, "w-3 h-3")}
               <span className="ml-1">{formatLabel(node.type)}</span>
             </span>
-            <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleEditNode(node);
-                }}
-                className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400 transition-colors"
-                title="Edit node"
-              >
-                <Edit className="h-4 w-4" />
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDeleteNode(node);
-                }}
-                className="flex items-center justify-center w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 transition-colors"
-                title="Delete node"
-              >
-                <Trash2 className="h-4 w-4" />
-              </button>
-            </div>
+            {/* Connections */}
+            {(() => {
+              const { incomingCount, outgoingCount, totalCount } = getConnectionDetails(node, edges);
+              
+              if (totalCount === 0) {
+                return (
+                  <div className="flex items-center space-x-1 text-gray-400 dark:text-gray-500">
+                    <GitBranch className="h-3 w-3" />
+                    <span className="text-xs">0</span>
+                  </div>
+                );
+              }
+              
+              return (
+                <div className="flex items-center space-x-2">
+                  <div className="flex items-center space-x-1">
+                    <GitBranch className="h-3 w-3 text-gray-500 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{totalCount}</span>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    {incomingCount > 0 && (
+                      <div className="flex items-center space-x-1 px-1.5 py-0.5 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-500/30 rounded">
+                        <ArrowLeft className="h-2.5 w-2.5 text-red-500" />
+                        <span className="text-xs font-medium text-red-600 dark:text-red-400">{incomingCount}</span>
+                      </div>
+                    )}
+                    {outgoingCount > 0 && (
+                      <div className="flex items-center space-x-1 px-1.5 py-0.5 bg-purple-100 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-500/30 rounded">
+                        <ArrowRight className="h-2.5 w-2.5 text-purple-500" />
+                        <span className="text-xs font-medium text-purple-600 dark:text-purple-400">{outgoingCount}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })()}
           </div>
           
           <h3 className="text-gray-900 dark:text-white font-semibold mb-3 text-lg leading-tight break-words">{node.title}</h3>
@@ -226,6 +276,7 @@ const CardView: React.FC<CardViewProps> = ({ filteredNodes, handleEditNode, hand
                 </div>
               )}
             </div>
+
             
             {/* Status */}
             <div className={`flex items-center space-x-2 px-3 py-1.5 rounded-full text-sm font-medium border shadow-sm ${(() => {
diff --git a/packages/web/src/components/ConnectNodeModal.tsx b/packages/web/src/components/ConnectNodeModal.tsx
index 51c16bb5..5f526be9 100644
--- a/packages/web/src/components/ConnectNodeModal.tsx
+++ b/packages/web/src/components/ConnectNodeModal.tsx
@@ -1067,8 +1067,8 @@ export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'co
     
     // Priority filter logic
     let matchesPriority = true;
-    if (priorityFilter !== 'all' && node.priorityComp !== undefined && node.priorityComp !== null) {
-      const priority = node.priorityComp;
+    if (priorityFilter !== 'all' && node.priority !== undefined && node.priority !== null) {
+      const priority = node.priority;
       switch (priorityFilter) {
         case 'critical': matchesPriority = priority >= 0.8; break;
         case 'high': matchesPriority = priority >= 0.6 && priority < 0.8; break;
@@ -2070,10 +2070,10 @@ export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'co
                               </div>
                               
                               {/* Priority with icon and progress bar */}
-                              {(node.priorityComp !== undefined && node.priorityComp !== null) && (
+                              {(node.priority !== undefined && node.priority !== null) && (
                                 <div className="flex items-center space-x-1">
-                                  <div className={getPriorityColorScheme(node.priorityComp).text}>
-                                    {getPriorityIconElement(node.priorityComp as any)}
+                                  <div className={getPriorityColorScheme(node.priority).text}>
+                                    {getPriorityIconElement(node.priority as any)}
                                   </div>
                                   <span className="text-gray-300 font-medium">Priority</span>
                                   <div className="flex items-center space-x-1">
@@ -2081,13 +2081,13 @@ export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'co
                                       <div 
                                         className="h-full transition-all duration-300"
                                         style={{ 
-                                          width: `${Math.round(node.priorityComp * 100)}%`,
-                                          backgroundColor: getPriorityColorScheme(node.priorityComp).hex
+                                          width: `${Math.round(node.priority * 100)}%`,
+                                          backgroundColor: getPriorityColorScheme(node.priority).hex
                                         }}
                                       />
                                     </div>
-                                    <span className={`text-xs font-medium ${getPriorityColorScheme(node.priorityComp).text}`}>
-                                      {Math.round(node.priorityComp * 100)}%
+                                    <span className={`text-xs font-medium ${getPriorityColorScheme(node.priority).text}`}>
+                                      {Math.round(node.priority * 100)}%
                                     </span>
                                   </div>
                                 </div>
diff --git a/packages/web/src/components/CreateGraphModal.tsx b/packages/web/src/components/CreateGraphModal.tsx
index 67f9bf2b..dac979fe 100644
--- a/packages/web/src/components/CreateGraphModal.tsx
+++ b/packages/web/src/components/CreateGraphModal.tsx
@@ -13,7 +13,7 @@ interface CreateGraphModalProps {
 
 export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraphModalProps) {
   const { currentTeam, currentUser } = useAuth();
-  const { createGraph, availableGraphs, isCreating } = useGraph();
+  const { createGraph, duplicateGraph, availableGraphs, isCreating } = useGraph();
   const { showSuccess, showError } = useNotifications();
   
   const [step, setStep] = useState<'type' | 'details' | 'template'>('type');
@@ -35,29 +35,41 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
       type: 'PROJECT' as const,
       title: 'Project',
       description: 'A main project with goals, tasks, and deliverables',
-      icon: <Folder className="h-8 w-8 text-blue-400" />,
-      color: 'border-blue-500/50 bg-blue-900/20 hover:bg-blue-900/30'
+      icon: <Folder className="h-10 w-10 text-blue-400" />,
+      color: 'border-blue-500/50 bg-gradient-to-br from-blue-900/30 to-blue-800/20 hover:from-blue-900/40 hover:to-blue-800/30',
+      bgGradient: 'from-blue-500/10 to-indigo-500/10',
+      iconBg: 'bg-gradient-to-br from-blue-500/20 to-indigo-600/20',
+      hoverShadow: 'hover:shadow-blue-500/20'
     },
     {
       type: 'WORKSPACE' as const,
       title: 'Workspace',
       description: 'A collaborative space for brainstorming and experimentation',
-      icon: <FolderOpen className="h-8 w-8 text-purple-400" />,
-      color: 'border-purple-500/50 bg-purple-900/20 hover:bg-purple-900/30'
+      icon: <FolderOpen className="h-10 w-10 text-purple-400" />,
+      color: 'border-purple-500/50 bg-gradient-to-br from-purple-900/30 to-purple-800/20 hover:from-purple-900/40 hover:to-purple-800/30',
+      bgGradient: 'from-purple-500/10 to-pink-500/10',
+      iconBg: 'bg-gradient-to-br from-purple-500/20 to-pink-600/20',
+      hoverShadow: 'hover:shadow-purple-500/20'
     },
     {
       type: 'SUBGRAPH' as const,
       title: 'Subgraph',
       description: 'A focused subset within a larger project or workspace',
-      icon: <Plus className="h-8 w-8 text-green-400" />,
-      color: 'border-green-500/50 bg-green-900/20 hover:bg-green-900/30'
+      icon: <Plus className="h-10 w-10 text-green-400" />,
+      color: 'border-green-500/50 bg-gradient-to-br from-green-900/30 to-green-800/20 hover:from-green-900/40 hover:to-green-800/30',
+      bgGradient: 'from-green-500/10 to-emerald-500/10',
+      iconBg: 'bg-gradient-to-br from-green-500/20 to-emerald-600/20',
+      hoverShadow: 'hover:shadow-green-500/20'
     },
     {
       type: 'TEMPLATE' as const,
       title: 'Template',
       description: 'A reusable template for creating similar graphs',
-      icon: <FileText className="h-8 w-8 text-gray-500" />,
+      icon: <FileText className="h-10 w-10 text-gray-500" />,
       color: 'border-gray-600/50 bg-gray-800/20 cursor-not-allowed opacity-60',
+      bgGradient: 'from-gray-700/10 to-gray-600/10',
+      iconBg: 'bg-gray-700/20',
+      hoverShadow: '',
       disabled: true,
       comingSoon: true
     }
@@ -95,7 +107,7 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
   ];
 
   const copyableGraphs = availableGraphs.filter(graph => 
-    graph.teamId === currentTeam?.id && graph.type === formData.type
+    graph.teamId === currentTeam?.id || graph.teamId === 'team-1' || true
   );
 
   const handleSubmit = async () => {
@@ -106,7 +118,16 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
     
     if (!formData.name) {
       console.error('Graph name is required');
-      alert('Please enter a graph name');
+      showError('Validation Error', 'Please enter a graph name');
+      return;
+    }
+    
+    // Check for duplicate graph names
+    const existingGraph = availableGraphs.find(g => 
+      g.name.toLowerCase().trim() === formData.name!.toLowerCase().trim()
+    );
+    if (existingGraph) {
+      showError('Duplicate Name', `A graph with the name "${formData.name}" already exists. Please choose a different name.`);
       return;
     }
     
@@ -118,16 +139,23 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
     console.log('Using user ID:', fallbackUserId);
 
     try {
-      const graphInput = {
-        ...formData,
-        teamId: fallbackTeamId,
-        // Ensure we have a user ID for createdBy field
-        createdBy: fallbackUserId
-      };
-      
-      console.log('Creating graph with data:', graphInput);
-      console.log('Tags in form data:', formData.tags);
-      await createGraph(graphInput as CreateGraphInput);
+      // Handle copying existing graph
+      if (formData.copyFromGraphId && formData.copyFromGraphId !== 'select') {
+        console.log('Duplicating graph:', formData.copyFromGraphId);
+        await duplicateGraph(formData.copyFromGraphId, formData.name!);
+      } else {
+        // Create new graph from scratch
+        const graphInput = {
+          ...formData,
+          teamId: fallbackTeamId,
+          // Ensure we have a user ID for createdBy field
+          createdBy: fallbackUserId
+        };
+        
+        console.log('Creating graph with data:', graphInput);
+        console.log('Tags in form data:', formData.tags);
+        await createGraph(graphInput as CreateGraphInput);
+      }
       
       // Show success notification
       showSuccess(
@@ -169,61 +197,103 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-[9999] overflow-y-auto" style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0}}>
+    <div className="fixed inset-0 z-[9999] overflow-y-auto backdrop-blur-sm" style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0}}>
       <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-        {/* Backdrop */}
+        {/* Enhanced Backdrop with gradient */}
         <div 
-          className="fixed inset-0 transition-opacity bg-black bg-opacity-50"
+          className="fixed inset-0 transition-opacity bg-gradient-to-br from-gray-900/90 via-black/80 to-gray-800/90 animate-in fade-in duration-300"
           onClick={handleClose}
         />
 
-        {/* Modal */}
-        <div className="inline-block w-full max-w-2xl p-0 my-8 overflow-hidden text-left align-middle transition-all transform bg-gray-800 shadow-xl rounded-lg border border-gray-700">
-          {/* Header */}
-          <div className="flex items-center justify-between px-6 py-4 border-b border-gray-700 bg-gray-800">
-            <h3 className="text-xl font-semibold text-green-300">
-              {step === 'type' && 'Create New Graph'}
-              {step === 'details' && 'Graph Details'}
-              {step === 'template' && 'Choose Starting Point'}
-            </h3>
+        {/* Enhanced Modal with better styling */}
+        <div className="inline-block w-full max-w-2xl p-0 my-8 overflow-hidden text-left align-middle transition-all transform bg-gradient-to-br from-gray-800 via-gray-800 to-gray-900 shadow-2xl rounded-2xl border border-gray-600/50 animate-in slide-in-from-bottom-4 duration-300 relative">
+          {/* Gradient accent line at top */}
+          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500"></div>
+          
+          {/* Enhanced Header with gradient background */}
+          <div className="flex items-center justify-between px-6 py-5 border-b border-gray-600/50 bg-gradient-to-r from-gray-800/90 to-gray-900/90 backdrop-blur-sm">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
+                <Plus className="h-5 w-5 text-white" />
+              </div>
+              <h3 className="text-xl font-bold bg-gradient-to-r from-white via-green-100 to-blue-100 bg-clip-text text-transparent">
+                {step === 'type' && 'Create New Graph'}
+                {step === 'details' && 'Graph Details'}
+                {step === 'template' && 'Starting Point'}
+              </h3>
+            </div>
             <button
               onClick={handleClose}
-              className="p-2 text-gray-400 hover:text-gray-300 hover:bg-gray-700 rounded-lg transition-colors"
+              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110"
             >
               <X className="h-5 w-5" />
             </button>
           </div>
 
-          {/* Step 1: Choose Type */}
+          {/* Step 1: Choose Type with enhanced styling */}
           {step === 'type' && (
-            <div className="p-6 space-y-6">
-              <p className="text-gray-300">What type of graph would you like to create?</p>
+            <div className="px-8 pt-1 pb-8 space-y-4 relative">
+              {/* Subtle background pattern */}
+              <div className="absolute inset-0 opacity-5">
+                <div className="w-full h-full" style={{
+                  backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+                  backgroundSize: '20px 20px'
+                }}></div>
+              </div>
+              
+              <div className="relative z-10 mb-8">
+                <p className="text-lg font-medium text-gray-200 mb-2">What type of graph would you like to create?</p>
+                <p className="text-sm text-gray-400">Choose the type that best fits your needs</p>
+              </div>
               
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                 {graphTypes.map((type) => (
                   <button
                     key={type.type}
                     onClick={() => type.disabled ? null : setFormData(prev => ({ ...prev, type: type.type }))}
                     disabled={type.disabled}
                     title={type.comingSoon ? "Template functionality coming soon!" : undefined}
-                    className={`p-4 border-2 rounded-lg text-left transition-all relative ${
+                    className={`group p-6 border-2 rounded-2xl text-left transition-all duration-300 relative overflow-hidden ${
                       formData.type === type.type
-                        ? `${type.color} border-current`
+                        ? `${type.color} border-current shadow-xl scale-[1.02] ${type.hoverShadow}`
                         : type.disabled
                         ? type.color
-                        : 'border-gray-600 bg-gray-700/50 hover:bg-gray-700 hover:border-gray-500'
+                        : 'border-gray-600/50 bg-gradient-to-br from-gray-700/40 to-gray-800/40 hover:from-gray-700/60 hover:to-gray-800/60 hover:border-gray-500/70 hover:scale-[1.02] hover:shadow-lg backdrop-blur-sm'
                     }`}
                   >
+                    {/* Background gradient effect */}
+                    <div className={`absolute inset-0 bg-gradient-to-br ${type.bgGradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none`}></div>
+                    
                     {type.comingSoon && (
-                      <div className="absolute top-2 right-2 bg-gray-700 text-xs text-gray-400 px-2 py-1 rounded">
+                      <div className="absolute top-3 right-3 bg-gradient-to-r from-gray-700 to-gray-600 text-xs text-gray-300 px-3 py-1.5 rounded-full shadow-md font-medium">
                         Coming Soon
                       </div>
                     )}
-                    <div className="flex items-center space-x-3 mb-3">
-                      {type.icon}
-                      <h4 className={`font-semibold ${type.disabled ? 'text-gray-500' : 'text-gray-200'}`}>{type.title}</h4>
+                    
+                    <div className="relative z-10">
+                      <div className="flex items-center space-x-4 mb-4">
+                        <div className={`p-3 rounded-2xl ${type.iconBg} border border-white/5 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
+                          {type.icon}
+                        </div>
+                        <h4 className={`font-bold text-lg ${type.disabled ? 'text-gray-500' : 'text-white group-hover:text-white'}`}>
+                          {type.title}
+                        </h4>
+                      </div>
+                      <p className={`text-sm leading-relaxed ${type.disabled ? 'text-gray-500' : 'text-gray-300 group-hover:text-gray-200'}`}>
+                        {type.description}
+                      </p>
                     </div>
-                    <p className={`text-sm ${type.disabled ? 'text-gray-500' : 'text-gray-400'}`}>{type.description}</p>
+                    
+                    {/* Selection indicator */}
+                    {formData.type === type.type && !type.disabled && (
+                      <div className="absolute bottom-3 right-3">
+                        <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
+                          <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                          </svg>
+                        </div>
+                      </div>
+                    )}
                   </button>
                 ))}
               </div>
@@ -240,84 +310,95 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                 </div>
               )}
 
-              <div className="flex justify-end space-x-3">
+              <div className="flex justify-end space-x-4 pt-6 border-t border-gradient-to-r from-gray-600/30 via-gray-500/50 to-gray-600/30 relative z-10">
                 <button
                   onClick={handleClose}
-                  className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors"
+                  className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/80 to-gray-600/80 rounded-xl hover:from-gray-600/80 hover:to-gray-500/80 transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-gray-400/50 hover:text-white font-medium"
                 >
                   Cancel
                 </button>
                 <button
                   onClick={() => setStep('template')}
-                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                  className="px-8 py-3 bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white rounded-xl hover:from-green-500 hover:via-emerald-500 hover:to-teal-500 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-105 transform border border-green-400/30 font-semibold flex items-center space-x-2"
                 >
-                  Continue
+                  <span>Continue</span>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
                 </button>
               </div>
             </div>
           )}
 
-          {/* Step 2: Choose Template/Starting Point */}
+          {/* Step 2: Choose Template/Starting Point - Enhanced */}
           {step === 'template' && (
-            <div className="p-6 space-y-6">
-              <div>
-                <h4 className="text-lg font-semibold text-gray-200 mb-2">Choose Starting Point</h4>
-                <p className="text-gray-400 text-sm mb-6">Select how you want to create your graph</p>
+            <div className="px-8 pt-0 pb-8 space-y-4 relative">
+              {/* Subtle background pattern */}
+              <div className="absolute inset-0 opacity-5">
+                <div className="w-full h-full" style={{
+                  backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+                  backgroundSize: '20px 20px'
+                }}></div>
+              </div>
+              
+              <div className="relative z-10 mb-12">
+                <h4 className="text-lg font-bold text-gray-200 mb-2">Choose Starting Point</h4>
+                <p className="text-sm text-gray-400">Select how you want to create your graph</p>
               </div>
               
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                 <button
                   onClick={() => {
                     setShowTemplates(false);
                     setFormData(prev => ({ ...prev, templateId: undefined, copyFromGraphId: undefined }));
                   }}
-                  className={`p-4 border-2 rounded-xl text-center transition-all ${
+                  className={`group p-6 border-2 rounded-2xl text-center transition-all duration-300 relative overflow-hidden ${
                     !showTemplates && !formData.copyFromGraphId
-                      ? 'border-green-500 bg-green-900/20 text-white'
-                      : 'border-gray-600 bg-gray-700/30 text-gray-300 hover:border-gray-500 hover:bg-gray-700/50'
+                      ? 'border-green-500/70 bg-gradient-to-br from-green-900/40 to-emerald-900/30 shadow-xl scale-[1.02] hover:shadow-green-500/20'
+                      : 'border-gray-600/50 bg-gradient-to-br from-gray-700/40 to-gray-800/40 hover:from-gray-700/60 hover:to-gray-800/60 hover:border-gray-500/70 hover:scale-[1.02] hover:shadow-lg backdrop-blur-sm'
                   }`}
                 >
-                  <div className="w-12 h-12 mx-auto mb-3 bg-gray-600 rounded-lg flex items-center justify-center">
-                    <Plus className="h-6 w-6 text-gray-300" />
+                  {/* Background gradient effect */}
+                  <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+                  
+                  <div className="relative z-10">
+                    <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-green-500/20 to-emerald-600/20 rounded-2xl flex items-center justify-center shadow-lg border border-white/5 group-hover:scale-110 transition-transform duration-300">
+                      <Plus className="h-8 w-8 text-green-400" />
+                    </div>
+                    <h5 className="font-bold text-white mb-2 text-lg">Start Empty</h5>
+                    <p className="text-sm text-gray-300">Create a blank graph from scratch</p>
                   </div>
-                  <h5 className="font-medium mb-1">Start Empty</h5>
-                  <p className="text-xs text-gray-400">Create a blank graph from scratch</p>
+                  
+                  {/* Selection indicator */}
+                  {!showTemplates && !formData.copyFromGraphId && (
+                    <div className="absolute top-4 right-4">
+                      <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
+                        <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      </div>
+                    </div>
+                  )}
                 </button>
                 
                 <button
                   disabled
                   title="Template functionality coming soon!"
-                  className="p-4 border-2 rounded-xl text-center transition-all border-gray-700 bg-gray-800/30 text-gray-500 cursor-not-allowed opacity-60 relative"
+                  className="group p-6 border-2 rounded-2xl text-center transition-all duration-300 relative overflow-hidden border-gray-600/50 bg-gradient-to-br from-gray-800/30 to-gray-900/30 cursor-not-allowed opacity-60"
                 >
-                  <div className="absolute top-2 right-2 bg-gray-700 text-xs text-gray-400 px-2 py-1 rounded">
+                  <div className="absolute top-3 right-3 bg-gradient-to-r from-gray-700 to-gray-600 text-xs text-gray-300 px-3 py-1.5 rounded-full shadow-md font-medium">
                     Coming Soon
                   </div>
-                  <div className="w-12 h-12 mx-auto mb-3 bg-gray-700/50 rounded-lg flex items-center justify-center">
-                    <FileText className="h-6 w-6 text-gray-500" />
+                  
+                  <div className="relative z-10">
+                    <div className="w-16 h-16 mx-auto mb-4 bg-gray-700/30 rounded-2xl flex items-center justify-center border border-gray-600/30">
+                      <FileText className="h-8 w-8 text-gray-500" />
+                    </div>
+                    <h5 className="font-bold text-gray-400 mb-2 text-lg">Use Template</h5>
+                    <p className="text-sm text-gray-500">Start with a pre-built template</p>
                   </div>
-                  <h5 className="font-medium mb-1">Use Template</h5>
-                  <p className="text-xs text-gray-500">Start with a pre-built template</p>
                 </button>
 
-                {copyableGraphs.length > 0 && (
-                  <button
-                    onClick={() => {
-                      setShowTemplates(false);
-                      setFormData(prev => ({ ...prev, templateId: undefined, copyFromGraphId: 'select' }));
-                    }}
-                    className={`p-4 border-2 rounded-xl text-center transition-all ${
-                      formData.copyFromGraphId
-                        ? 'border-green-500 bg-green-900/20 text-white'
-                        : 'border-gray-600 bg-gray-700/30 text-gray-300 hover:border-gray-500 hover:bg-gray-700/50'
-                    }`}
-                  >
-                    <div className="w-12 h-12 mx-auto mb-3 bg-purple-600/20 rounded-lg flex items-center justify-center">
-                      <Copy className="h-6 w-6 text-purple-400" />
-                    </div>
-                    <h5 className="font-medium mb-1">Copy Existing</h5>
-                    <p className="text-xs text-gray-400">Duplicate an existing graph</p>
-                  </button>
-                )}
               </div>
 
               {/* Templates */}
@@ -364,127 +445,108 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                 </div>
               )}
 
-              {/* Copy from existing */}
-              {formData.copyFromGraphId && copyableGraphs.length > 0 && (
-                <div className="space-y-4">
-                  <div>
-                    <h4 className="font-medium text-gray-200 mb-1">Choose Graph to Copy</h4>
-                    <p className="text-sm text-gray-400">Select an existing graph to duplicate</p>
-                  </div>
-                  <div className="grid gap-3 max-h-48 overflow-y-auto">
-                    {copyableGraphs.map((graph) => (
-                      <button
-                        key={graph.id}
-                        onClick={() => setFormData(prev => ({ ...prev, copyFromGraphId: graph.id }))}
-                        className={`p-4 border rounded-xl text-left transition-all group ${
-                          formData.copyFromGraphId === graph.id
-                            ? 'border-green-500 bg-green-900/20'
-                            : 'border-gray-600 bg-gray-700/30 hover:bg-gray-700/50 hover:border-gray-500'
-                        }`}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center space-x-3">
-                            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
-                              graph.type === 'PROJECT' ? 'bg-blue-600/20' :
-                              graph.type === 'WORKSPACE' ? 'bg-purple-600/20' :
-                              graph.type === 'SUBGRAPH' ? 'bg-green-600/20' :
-                              'bg-orange-600/20'
-                            }`}>
-                              <Copy className="h-5 w-5 text-gray-400" />
-                            </div>
-                            <div className="flex-1">
-                              <h5 className="font-medium text-gray-200 group-hover:text-white">{graph.name}</h5>
-                              <p className="text-xs text-gray-400 mt-1 line-clamp-1">{graph.description || 'No description'}</p>
-                              <div className="flex items-center gap-3 mt-2">
-                                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                                  graph.type === 'PROJECT' ? 'bg-blue-600/20 text-blue-300' :
-                                  graph.type === 'WORKSPACE' ? 'bg-purple-600/20 text-purple-300' :
-                                  graph.type === 'SUBGRAPH' ? 'bg-green-600/20 text-green-300' :
-                                  'bg-orange-600/20 text-orange-300'
-                                }`}>
-                                  {graph.type}
-                                </span>
-                                <span className="text-xs text-gray-500">{graph.nodeCount} nodes</span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
 
-              <div className="flex justify-between">
+              <div className="flex justify-between pt-6 border-t border-gradient-to-r from-gray-600/30 via-gray-500/50 to-gray-600/30 relative z-10">
                 <button
                   onClick={() => setStep('type')}
-                  className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors"
+                  className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/80 to-gray-600/80 rounded-xl hover:from-gray-600/80 hover:to-gray-500/80 transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-gray-400/50 hover:text-white font-medium flex items-center space-x-2"
                 >
-                  Back
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path>
+                  </svg>
+                  <span>Back</span>
                 </button>
                 <button
                   onClick={() => setStep('details')}
-                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                  className="px-8 py-3 bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white rounded-xl hover:from-green-500 hover:via-emerald-500 hover:to-teal-500 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-105 transform border border-green-400/30 font-semibold flex items-center space-x-2"
                 >
-                  Continue
+                  <span>Continue</span>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
                 </button>
               </div>
             </div>
           )}
 
-          {/* Step 3: Graph Details */}
+          {/* Step 3: Graph Details - Enhanced */}
           {step === 'details' && (
-            <div className="p-6 space-y-6">
-              <div className="mb-6">
-                <p className="text-gray-400 text-sm">Provide essential information to set up your graph</p>
+            <div className="px-8 pt-0 pb-8 space-y-4 relative">
+              {/* Subtle background pattern */}
+              <div className="absolute inset-0 opacity-5">
+                <div className="w-full h-full" style={{
+                  backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+                  backgroundSize: '20px 20px'
+                }}></div>
+              </div>
+              
+              <div className="mb-12 relative z-10">
+                <p className="text-sm text-gray-400">Provide essential information to set up your graph</p>
               </div>
 
-              <div className="space-y-5">
+              <div className="space-y-6 relative z-10">
                 {/* Graph Name */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-200 mb-2">
-                    Graph Name *
+                <div className="group">
+                  <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                    <span>Graph Name</span>
+                    <span className="text-red-400">*</span>
+                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                   </label>
-                  <input
-                    type="text"
-                    value={formData.name || ''}
-                    onChange={(e) => {
-                      console.log('Name input changed to:', e.target.value);
-                      setFormData(prev => {
-                        const newData = { ...prev, name: e.target.value };
-                        console.log('New form data will be:', newData);
-                        return newData;
-                      });
-                    }}
-                    placeholder="Enter a descriptive name for your graph"
-                    className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-gray-200 placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition-colors"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">Choose a clear, descriptive name that team members will recognize</p>
+                  <div className="relative">
+                    <input
+                      type="text"
+                      value={formData.name || ''}
+                      onChange={(e) => {
+                        console.log('Name input changed to:', e.target.value);
+                        setFormData(prev => {
+                          const newData = { ...prev, name: e.target.value };
+                          console.log('New form data will be:', newData);
+                          return newData;
+                        });
+                      }}
+                      placeholder="Enter a descriptive name for your graph"
+                      className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400 transition-all duration-300 hover:border-gray-500 shadow-lg"
+                    />
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/5 to-purple-500/5 pointer-events-none group-hover:from-blue-500/10 group-hover:to-purple-500/10 transition-all duration-300"></div>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                    <span className="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
+                    <span>Choose a clear, descriptive name that team members will recognize</span>
+                  </p>
                 </div>
 
                 {/* Description */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-200 mb-2">
-                    Description
+                <div className="group">
+                  <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                    <span>Description</span>
+                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                   </label>
-                  <textarea
-                    value={formData.description || ''}
-                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-                    placeholder="Describe the purpose and scope of this graph"
-                    rows={4}
-                    className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-gray-200 placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition-colors resize-none"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">Help team members understand the purpose and context</p>
+                  <div className="relative">
+                    <textarea
+                      value={formData.description || ''}
+                      onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                      placeholder="Describe the purpose and scope of this graph"
+                      rows={4}
+                      className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 hover:border-gray-500 shadow-lg resize-none"
+                    />
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-green-500/5 to-teal-500/5 pointer-events-none group-hover:from-green-500/10 group-hover:to-teal-500/10 transition-all duration-300"></div>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                    <span className="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
+                    <span>Help team members understand the purpose and context</span>
+                  </p>
                 </div>
 
                 {/* Tags */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-200 mb-2">
-                    Tags
+                <div className="group">
+                  <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                    <span>Tags</span>
+                    <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                   </label>
                   
-                  {/* Tag Display Area */}
-                  <div className="w-full min-h-[3rem] px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus-within:ring-2 focus-within:ring-green-500 focus-within:border-green-500 transition-colors">
+                  {/* Enhanced Tag Display Area */}
+                  <div className="relative">
+                    <div className="w-full min-h-[3.5rem] px-4 py-3 bg-gray-800 border border-gray-600 rounded-xl focus-within:ring-2 focus-within:ring-purple-500/50 focus-within:border-purple-400 transition-all duration-300 hover:border-gray-500 shadow-lg">
                     <div className="flex flex-wrap gap-2 items-center">
                       {/* Existing Tags */}
                       {formData.tags && formData.tags.slice(0, 5).map((tag, index) => {
@@ -500,28 +562,21 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                         return (
                           <span
                             key={index}
-                            className={`inline-flex items-center pl-2 pr-3 py-1 text-sm font-medium bg-gradient-to-r ${colorScheme.bg} ${colorScheme.text} border ${colorScheme.border} transition-colors`}
+                            className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-gradient-to-r ${colorScheme.bg} ${colorScheme.text} border-2 ${colorScheme.border} transition-all duration-200 hover:scale-105 shadow-md animate-in slide-in-from-left-2`}
                             style={{
-                              clipPath: 'polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%)'
+                              animationDelay: `${index * 100}ms`
                             }}
                           >
-                            {/* Tag Icon */}
-                            <svg className="w-3 h-3 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
-                              <path fillRule="evenodd" d="M17.707 9.293l-5-5A.997.997 0 0012 4H5a3 3 0 00-3 3v6a3 3 0 003 3h7a.997.997 0 00.707-.293l5-5a.999.999 0 000-1.414zM6.5 9.5a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5z" clipRule="evenodd" />
-                            </svg>
                             {tag}
                             <button
                               type="button"
                               onClick={() => {
                                 const newTags = formData.tags?.filter((_, i) => i !== index) || [];
                                 setFormData(prev => ({ ...prev, tags: newTags }));
-                                // Don't update tagInput when removing tags - keep it for current typing
                               }}
-                              className={`ml-2 transition-colors ${colorScheme.text.replace('text-', 'text-')}/60 hover:${colorScheme.text}`}
+                              className="ml-2 hover:bg-white/20 rounded-full p-0.5 transition-all duration-200 hover:scale-125"
                             >
-                              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                                <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-                              </svg>
+                              ×
                             </button>
                           </span>
                         );
@@ -574,13 +629,18 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                             setFormData(prev => ({ ...prev, tags: newTags }));
                           }
                         }}
-                        placeholder={(!formData.tags || formData.tags.length === 0) ? "project, frontend, urgent, team-alpha" : formData.tags.length >= 5 ? "Maximum 5 tags reached" : "Add more tags..."}
+                        placeholder={(!formData.tags || formData.tags.length === 0) ? "project, frontend, urgent, team-alpha" : formData.tags.length >= 5 ? "Maximum 5 tags reached" : "Add more tags"}
                         className="flex-1 min-w-[120px] bg-transparent border-none outline-none text-gray-200 placeholder-gray-400"
                         disabled={formData.tags && formData.tags.length >= 5}
                       />
                     </div>
                   </div>
-                  <p className="text-xs text-gray-500 mt-1">Type and press comma to add tags (max 5) • Click × to remove</p>
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-purple-500/5 to-pink-500/5 pointer-events-none group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300"></div>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                    <span className="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
+                    <span>Type and press comma to add tags (max 5) • Click × to remove</span>
+                  </p>
                 </div>
 
                 {/* Default Role for Team Members */}
@@ -634,90 +694,162 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                   </div>
                 </div>
 
-                {/* Configuration Summary */}
-                <div className="p-5 bg-gray-700/50 border border-gray-600 rounded-xl">
-                  <h4 className="font-semibold text-gray-200 mb-4 flex items-center">
-                    <div className="w-5 h-5 bg-green-600 rounded-full mr-2"></div>
+                {/* Interactive Configuration Summary */}
+                <div className="group p-6 bg-gradient-to-br from-gray-700/40 to-gray-800/40 border border-gray-500/50 rounded-2xl shadow-xl backdrop-blur-sm hover:from-gray-700/50 hover:to-gray-800/50 transition-all duration-300">
+                  <h4 className="font-bold text-white mb-6 flex items-center group-hover:scale-105 transition-transform duration-300">
+                    <div className="w-8 h-8 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center mr-3 shadow-lg group-hover:shadow-green-500/20">
+                      <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    </div>
                     Review Configuration
                   </h4>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                    <div className="space-y-3">
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Graph Type:</span>
-                        <span className="font-medium text-gray-200 capitalize">{formData.type?.toLowerCase()}</span>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
+                    <div className="space-y-4">
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+                            <span>Graph Type:</span>
+                          </span>
+                          <span className="font-semibold text-blue-300 capitalize group-hover/item:text-blue-200">{formData.type?.toLowerCase()}</span>
+                        </div>
                       </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Team:</span>
-                        <span className="font-medium text-gray-200">{currentTeam?.name || 'Default Team'}</span>
+                      
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
+                            <span>Team:</span>
+                          </span>
+                          <span className="font-semibold text-purple-300 group-hover/item:text-purple-200">{currentTeam?.name || 'Default Team'}</span>
+                        </div>
                       </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Privacy:</span>
-                        <span className="font-medium text-gray-200">{formData.isShared ? 'Shared' : 'Private'}</span>
+                      
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-cyan-400 rounded-full"></div>
+                            <span>Privacy:</span>
+                          </span>
+                          <span className="font-semibold text-cyan-300 group-hover/item:text-cyan-200">{formData.isShared ? 'Shared' : 'Private'}</span>
+                        </div>
                       </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Status:</span>
-                        <span className={`font-medium ${formData.status === 'ACTIVE' ? 'text-green-300' : 'text-yellow-300'}`}>
-                          {formData.status || 'Draft'}
-                        </span>
+                      
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className={`w-2 h-2 rounded-full ${formData.status === 'ACTIVE' ? 'bg-green-400' : 'bg-yellow-400'}`}></div>
+                            <span>Status:</span>
+                          </span>
+                          <span className={`font-semibold ${formData.status === 'ACTIVE' ? 'text-green-300 group-hover/item:text-green-200' : 'text-yellow-300 group-hover/item:text-yellow-200'}`}>
+                            {formData.status || 'Draft'}
+                          </span>
+                        </div>
                       </div>
+                      
                       {formData.tags && formData.tags.length > 0 && (
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Tags:</span>
-                          <span className="font-medium text-blue-300">{formData.tags.length} tag{formData.tags.length !== 1 ? 's' : ''}</span>
+                        <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-400 flex items-center space-x-2">
+                              <div className="w-2 h-2 bg-indigo-400 rounded-full"></div>
+                              <span>Tags:</span>
+                            </span>
+                            <span className="font-semibold text-indigo-300 group-hover/item:text-indigo-200">{formData.tags.length} tag{formData.tags.length !== 1 ? 's' : ''}</span>
+                          </div>
                         </div>
                       )}
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Default Role:</span>
-                        <span className="font-medium text-purple-300">{formData.defaultRole || 'VIEWER'}</span>
+                      
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-amber-400 rounded-full"></div>
+                            <span>Default Role:</span>
+                          </span>
+                          <span className="font-semibold text-amber-300 group-hover/item:text-amber-200">{formData.defaultRole || 'VIEWER'}</span>
+                        </div>
                       </div>
                     </div>
-                    <div className="space-y-3">
+                    
+                    <div className="space-y-4">
                       {parentGraphId && (
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Parent Graph:</span>
-                          <span className="font-medium text-green-300">Connected</span>
+                        <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-400 flex items-center space-x-2">
+                              <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                              <span>Parent Graph:</span>
+                            </span>
+                            <span className="font-semibold text-green-300 group-hover/item:text-green-200">Connected</span>
+                          </div>
                         </div>
                       )}
+                      
                       {formData.templateId && formData.templateId !== 'use-template' && (
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Template:</span>
-                          <span className="font-medium text-blue-300">Applied</span>
+                        <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-400 flex items-center space-x-2">
+                              <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
+                              <span>Template:</span>
+                            </span>
+                            <span className="font-semibold text-blue-300 group-hover/item:text-blue-200">Applied</span>
+                          </div>
                         </div>
                       )}
+                      
                       {formData.copyFromGraphId && formData.copyFromGraphId !== 'select' && (
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Source:</span>
-                          <span className="font-medium text-purple-300">Existing Graph</span>
+                        <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                          <div className="flex justify-between items-center">
+                            <span className="text-gray-400 flex items-center space-x-2">
+                              <div className="w-2 h-2 bg-purple-400 rounded-full animate-pulse"></div>
+                              <span>Source:</span>
+                            </span>
+                            <span className="font-semibold text-purple-300 group-hover/item:text-purple-200">Existing Graph</span>
+                          </div>
                         </div>
                       )}
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Ready to Create:</span>
-                        <span className={`font-medium ${formData.name ? 'text-green-300' : 'text-red-300'}`}>
-                          {formData.name ? 'Yes' : 'Name Required'}
-                        </span>
+                      
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className={`w-2 h-2 rounded-full ${formData.name ? 'bg-green-400 animate-pulse' : 'bg-red-400 animate-pulse'}`}></div>
+                            <span>Ready to Create:</span>
+                          </span>
+                          <span className={`font-semibold ${formData.name ? 'text-green-300 group-hover/item:text-green-200' : 'text-red-300 group-hover/item:text-red-200'}`}>
+                            {formData.name ? 'Yes' : 'Name Required'}
+                          </span>
+                        </div>
                       </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Button State:</span>
-                        <span className={`font-medium ${!formData.name?.trim() || isCreating ? 'text-red-300' : 'text-green-300'}`}>
-                          {!formData.name?.trim() ? 'Disabled (No Name)' : isCreating ? 'Disabled (Creating)' : 'Enabled'}
-                        </span>
+                      
+                      <div className="p-3 bg-gray-800/50 rounded-xl border border-gray-600/30 hover:bg-gray-800/70 transition-all duration-200 group/item">
+                        <div className="flex justify-between items-center">
+                          <span className="text-gray-400 flex items-center space-x-2">
+                            <div className={`w-2 h-2 rounded-full ${!formData.name?.trim() || isCreating ? 'bg-red-400 animate-pulse' : 'bg-green-400 animate-pulse'}`}></div>
+                            <span>Button State:</span>
+                          </span>
+                          <span className={`font-semibold ${!formData.name?.trim() || isCreating ? 'text-red-300 group-hover/item:text-red-200' : 'text-green-300 group-hover/item:text-green-200'}`}>
+                            {!formData.name?.trim() ? 'Disabled (No Name)' : isCreating ? 'Disabled (Creating)' : 'Enabled'}
+                          </span>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
 
-              <div className="flex justify-between pt-4">
+              <div className="flex justify-between pt-6 border-t border-gradient-to-r from-gray-600/30 via-gray-500/50 to-gray-600/30 relative z-10">
                 <button
                   onClick={() => setStep('template')}
-                  className="px-6 py-3 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors font-medium"
+                  className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/80 to-gray-600/80 rounded-xl hover:from-gray-600/80 hover:to-gray-500/80 transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-gray-400/50 hover:text-white font-medium flex items-center space-x-2"
                 >
-                  Back
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path>
+                  </svg>
+                  <span>Back</span>
                 </button>
-                <div className="flex space-x-3">
+                <div className="flex space-x-4">
                   <button
                     onClick={handleClose}
-                    className="px-6 py-3 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors font-medium"
+                    className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/80 to-gray-600/80 rounded-xl hover:from-gray-600/80 hover:to-gray-500/80 transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-gray-400/50 hover:text-white font-medium"
                   >
                     Cancel
                   </button>
@@ -741,9 +873,25 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                       }
                     }}
                     disabled={!formData.name?.trim() || isCreating}
-                    className="px-6 py-3 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 disabled:from-gray-600 disabled:to-gray-600 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold shadow-lg hover:shadow-xl"
+                    className={`px-8 py-3 font-semibold rounded-xl transition-all duration-300 shadow-xl transform flex items-center space-x-2 ${
+                      !formData.name?.trim() || isCreating
+                        ? 'bg-gray-600/50 text-gray-400 cursor-not-allowed opacity-60'
+                        : 'bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white hover:from-green-500 hover:via-emerald-500 hover:to-teal-500 hover:shadow-2xl hover:scale-105 border border-green-400/30'
+                    }`}
                   >
-                    {isCreating ? 'Creating...' : 'Create Graph'}
+                    {isCreating ? (
+                      <>
+                        <span>Creating...</span>
+                        <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
+                      </>
+                    ) : (
+                      <>
+                        <span>Create Graph</span>
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                        </svg>
+                      </>
+                    )}
                   </button>
                 </div>
               </div>
diff --git a/packages/web/src/components/CreateNodeModal.tsx b/packages/web/src/components/CreateNodeModal.tsx
index f8ba403d..c269d187 100644
--- a/packages/web/src/components/CreateNodeModal.tsx
+++ b/packages/web/src/components/CreateNodeModal.tsx
@@ -27,10 +27,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   assignedTo?: string;
   dueDate?: string;
   tags?: string[];
@@ -69,9 +66,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
     title: '',
     description: '',
     type: 'DEFAULT',
-    priorityExec: 0,
-    priorityIndiv: 0,
-    priorityComm: 0,
+    priority: 0,
     status: 'NOT_STARTED',
     assignedTo: '',
     dueDate: '',
@@ -238,9 +233,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
         description: formData.description.trim() || undefined,
         type: formData.type,
         status: formData.status,
-        priorityExec: formData.priorityExec,
-        priorityIndiv: formData.priorityIndiv,
-        priorityComm: formData.priorityComm,
+        priority: formData.priority,
         dueDate: formData.dueDate || undefined,
         tags: formData.tags || [],
       };
@@ -253,7 +246,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
         radius: 1.0,
         theta: 0.0,
         phi: 0.0,
-        priorityComp: (formData.priorityExec + formData.priorityIndiv + formData.priorityComm) / 3,
+        priorityComp: formData.priority,
       };
 
       // Handle assignedTo relationship properly for Neo4j GraphQL
@@ -312,9 +305,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
           title: '',
           description: '',
           type: 'DEFAULT',
-          priorityExec: 0,
-          priorityIndiv: 0,
-          priorityComm: 0,
+          priority: 0,
           status: 'NOT_STARTED',
           assignedTo: '',
           dueDate: '',
@@ -604,7 +595,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
             </div>
             
             <div className="space-y-3">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Priority Distribution</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Priority Level</label>
               
               {/* Professional Priority Guide */}
               <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 mb-4 shadow-sm">
@@ -620,9 +611,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.9,
-                          priorityIndiv: 0.9,
-                          priorityComm: 0.9
+                          priority: 0.9
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-red-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -639,9 +628,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.7,
-                          priorityIndiv: 0.7,
-                          priorityComm: 0.7
+                          priority: 0.7
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-orange-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -658,9 +645,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.5,
-                          priorityIndiv: 0.5,
-                          priorityComm: 0.5
+                          priority: 0.5
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-yellow-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -680,9 +665,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.3,
-                          priorityIndiv: 0.3,
-                          priorityComm: 0.3
+                          priority: 0.3
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-blue-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -699,9 +682,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.1,
-                          priorityIndiv: 0.1,
-                          priorityComm: 0.1
+                          priority: 0.1
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-gray-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -718,132 +699,47 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position }: Cre
               
               <div>
                 <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                  Executive Priority
+                  Priority Level
                 </label>
                 <input
                   type="range"
                   min="0"
                   max="1"
                   step="0.1"
-                  value={formData.priorityExec}
+                  value={formData.priority}
                   onChange={(e) => setFormData(prev => ({
                     ...prev,
-                    priorityExec: parseFloat(e.target.value)
+                    priority: parseFloat(e.target.value)
                   }))}
                   className={`w-full ${
-                    formData.priorityExec >= 0.8 ? 'accent-red-500' :
-                    formData.priorityExec >= 0.6 ? 'accent-orange-500' :
-                    formData.priorityExec >= 0.4 ? 'accent-yellow-500' :
-                    formData.priorityExec >= 0.2 ? 'accent-blue-500' :
+                    formData.priority >= 0.8 ? 'accent-red-500' :
+                    formData.priority >= 0.6 ? 'accent-orange-500' :
+                    formData.priority >= 0.4 ? 'accent-yellow-500' :
+                    formData.priority >= 0.2 ? 'accent-blue-500' :
                     'accent-gray-500'
                   }`}
                 />
                 <div className={`text-sm text-center font-medium ${
-                  formData.priorityExec >= 0.8 ? 'text-red-500' :
-                  formData.priorityExec >= 0.6 ? 'text-orange-500' :
-                  formData.priorityExec >= 0.4 ? 'text-yellow-500' :
-                  formData.priorityExec >= 0.2 ? 'text-blue-500' :
+                  formData.priority >= 0.8 ? 'text-red-500' :
+                  formData.priority >= 0.6 ? 'text-orange-500' :
+                  formData.priority >= 0.4 ? 'text-yellow-500' :
+                  formData.priority >= 0.2 ? 'text-blue-500' :
                   'text-gray-500'
                 }`}>
                   {(() => {
-                    const PriorityIcon = getCentralizedPriorityIcon(formData.priorityExec);
+                    const PriorityIcon = getCentralizedPriorityIcon(formData.priority);
                     const priorityConfig = PRIORITY_OPTIONS.find(p => p.value !== 'all' && 
-                      formData.priorityExec >= p.threshold!.min && formData.priorityExec <= p.threshold!.max);
+                      formData.priority >= p.threshold!.min && formData.priority <= p.threshold!.max);
                     return (
                       <>
                         {PriorityIcon && <PriorityIcon className="h-6 w-6 inline mr-1" />}
-                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priorityExec * 100)}%)
+                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priority * 100)}%)
                       </>
                     );
                   })()}
                 </div>
               </div>
               
-              <div>
-                <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                  Individual Priority
-                </label>
-                <input
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.1"
-                  value={formData.priorityIndiv}
-                  onChange={(e) => setFormData(prev => ({
-                    ...prev,
-                    priorityIndiv: parseFloat(e.target.value)
-                  }))}
-                  className={`w-full ${
-                    formData.priorityIndiv >= 0.8 ? 'accent-red-500' :
-                    formData.priorityIndiv >= 0.6 ? 'accent-orange-500' :
-                    formData.priorityIndiv >= 0.4 ? 'accent-yellow-500' :
-                    formData.priorityIndiv >= 0.2 ? 'accent-blue-500' :
-                    'accent-gray-500'
-                  }`}
-                />
-                <div className={`text-sm text-center font-medium ${
-                  formData.priorityIndiv >= 0.8 ? 'text-red-500' :
-                  formData.priorityIndiv >= 0.6 ? 'text-orange-500' :
-                  formData.priorityIndiv >= 0.4 ? 'text-yellow-500' :
-                  formData.priorityIndiv >= 0.2 ? 'text-blue-500' :
-                  'text-gray-500'
-                }`}>
-                  {(() => {
-                    const PriorityIcon = getCentralizedPriorityIcon(formData.priorityIndiv);
-                    const priorityConfig = PRIORITY_OPTIONS.find(p => p.value !== 'all' && 
-                      formData.priorityIndiv >= p.threshold!.min && formData.priorityIndiv <= p.threshold!.max);
-                    return (
-                      <>
-                        {PriorityIcon && <PriorityIcon className="h-6 w-6 inline mr-1" />}
-                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priorityIndiv * 100)}%)
-                      </>
-                    );
-                  })()}
-                </div>
-              </div>
-              
-              <div>
-                <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                  Community Priority
-                </label>
-                <input
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.1"
-                  value={formData.priorityComm}
-                  onChange={(e) => setFormData(prev => ({
-                    ...prev,
-                    priorityComm: parseFloat(e.target.value)
-                  }))}
-                  className={`w-full ${
-                    formData.priorityComm >= 0.8 ? 'accent-red-500' :
-                    formData.priorityComm >= 0.6 ? 'accent-orange-500' :
-                    formData.priorityComm >= 0.4 ? 'accent-yellow-500' :
-                    formData.priorityComm >= 0.2 ? 'accent-blue-500' :
-                    'accent-gray-500'
-                  }`}
-                />
-                <div className={`text-sm text-center font-medium ${
-                  formData.priorityComm >= 0.8 ? 'text-red-500' :
-                  formData.priorityComm >= 0.6 ? 'text-orange-500' :
-                  formData.priorityComm >= 0.4 ? 'text-yellow-500' :
-                  formData.priorityComm >= 0.2 ? 'text-blue-500' :
-                  'text-gray-500'
-                }`}>
-                  {(() => {
-                    const PriorityIcon = getCentralizedPriorityIcon(formData.priorityComm);
-                    const priorityConfig = PRIORITY_OPTIONS.find(p => p.value !== 'all' && 
-                      formData.priorityComm >= p.threshold!.min && formData.priorityComm <= p.threshold!.max);
-                    return (
-                      <>
-                        {PriorityIcon && <PriorityIcon className="h-6 w-6 inline mr-1" />}
-                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priorityComm * 100)}%)
-                      </>
-                    );
-                  })()}
-                </div>
-              </div>
             </div>
             
             <div className="flex justify-end space-x-4 pt-6 border-t border-gray-600/50 mt-6">
diff --git a/packages/web/src/components/Dashboard.tsx b/packages/web/src/components/Dashboard.tsx
index 0db399f6..cbd26f13 100644
--- a/packages/web/src/components/Dashboard.tsx
+++ b/packages/web/src/components/Dashboard.tsx
@@ -13,6 +13,7 @@ import {
   getStatusIconElement,
   getTypeIconElement,
   getPriorityIconElement,
+  getStatusGradientBackground,
   WORK_ITEM_STATUSES, 
   WORK_ITEM_PRIORITIES,
   WORK_ITEM_TYPES,
@@ -31,10 +32,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -112,7 +110,7 @@ const PieChart = ({ data, title }: { data: Array<{label: string, value: number,
 
   if (total === 0) {
     return (
-      <div className="bg-gray-800 rounded-lg p-4 pl-2 border border-gray-700">
+      <div className="bg-gradient-to-br from-gray-700/30 via-gray-800/50 to-gray-700/20 rounded-lg p-4 pl-2 border border-gray-600/50">
         <h3 className="text-lg font-semibold text-white mb-4 text-center">{title}</h3>
         <div className="flex items-center justify-center h-48">
           <div className="text-center">
@@ -125,7 +123,7 @@ const PieChart = ({ data, title }: { data: Array<{label: string, value: number,
   }
 
   return (
-    <div className="bg-gray-800 border border-gray-600 rounded-lg p-6">
+    <div className="bg-gradient-to-br from-gray-700/30 via-gray-800/50 to-gray-700/20 border border-gray-600/50 rounded-lg p-6 backdrop-blur-sm">
       <div className="mb-4">
         <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
       </div>
@@ -133,31 +131,22 @@ const PieChart = ({ data, title }: { data: Array<{label: string, value: number,
         <div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
           <button
             onClick={handleZoomIn}
-            className="p-2 text-white rounded shadow-lg transition-all duration-200"
-            style={{ backgroundColor: '#228B22', boxShadow: '0 4px 6px rgba(34, 139, 34, 0.25)' }}
+            className="p-2 text-white rounded-lg shadow-lg transition-all duration-200 bg-emerald-600/80 hover:bg-emerald-500 border border-emerald-500/30"
             title="Zoom In"
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#32CD32'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#228B22'}
           >
             <ZoomIn className="h-4 w-4" />
           </button>
           <button
             onClick={handleZoomOut}
-            className="p-2 text-white rounded shadow-lg transition-all duration-200"
-            style={{ backgroundColor: '#DC143C', boxShadow: '0 4px 6px rgba(220, 20, 60, 0.25)' }}
+            className="p-2 text-white rounded-lg shadow-lg transition-all duration-200 bg-rose-600/80 hover:bg-rose-500 border border-rose-500/30"
             title="Zoom Out"
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#FF6347'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#DC143C'}
           >
             <ZoomOut className="h-4 w-4" />
           </button>
           <button
             onClick={handleResetLayout}
-            className="p-2 text-white rounded shadow-lg transition-all duration-200"
-            style={{ backgroundColor: '#4682B4', boxShadow: '0 4px 6px rgba(70, 130, 180, 0.25)' }}
+            className="p-2 text-white rounded-lg shadow-lg transition-all duration-200 bg-sky-600/80 hover:bg-sky-500 border border-sky-500/30"
             title="Reset Zoom"
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5A9BD4'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#4682B4'}
           >
             <RotateCcw className="h-4 w-4" />
           </button>
@@ -203,7 +192,7 @@ const PieChart = ({ data, title }: { data: Array<{label: string, value: number,
           const isPriorityChart = filteredData.some(item => ['Critical', 'High', 'Moderate', 'Low', 'Minimal'].includes(item.label));
           const isStatusChart = filteredData.some(item => ['Proposed', 'Planned', 'In Progress', 'Completed', 'Blocked'].includes(item.label));
           const gridCols = isPriorityChart ? "grid grid-cols-2 gap-2" : 
-                           isStatusChart ? "grid grid-cols-2 gap-2" : 
+                           isStatusChart ? "grid grid-cols-3 gap-2" : 
                            "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2";
           
           return (
@@ -238,12 +227,20 @@ const PieChart = ({ data, title }: { data: Array<{label: string, value: number,
                 return (
                   <div
                     key={index}
-                    className="flex items-center gap-2 p-2 rounded-lg bg-gray-700/50 hover:bg-gray-700 transition-colors"
+                    className="bg-gradient-to-br from-gray-800/80 via-gray-700/60 to-gray-800/40 border border-gray-600/50 rounded-xl p-3 hover:from-gray-700/90 hover:via-gray-600/70 hover:to-gray-700/50 hover:border-gray-500/70 transition-all duration-200 hover:scale-[1.02] hover:-translate-y-1 shadow-lg hover:shadow-xl"
                   >
-                    {getIcon(item.label)}
-                    <div className="flex-1 min-w-0">
-                      <div className="text-xs text-white font-medium truncate">{item.label}</div>
-                      <div className="text-xs text-gray-400">{item.value} ({percentage}%)</div>
+                    <div className="flex items-center gap-3 mb-2">
+                      <div className="w-8 h-8 rounded-lg bg-gray-800/30 backdrop-blur-sm flex items-center justify-center">
+                        {getIcon(item.label)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm text-white font-semibold truncate">{item.label}</div>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-center">
+                      <span className="text-sm font-medium px-2 py-1 rounded-full bg-gray-800/30 backdrop-blur-sm" style={{ color: item.color }}>
+                        {percentage}%
+                      </span>
                     </div>
                   </div>
                 );
@@ -260,10 +257,10 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
   return (
     <div className="p-6 space-y-6">
       {/* Total Tasks - Full Width Card */}
-      <div className="bg-gray-800 rounded-lg p-8 border border-gray-700">
+      <div className="bg-gradient-to-br from-lime-500/15 via-lime-500/8 to-lime-500/5 rounded-lg p-8 border border-gray-700/30 border-l-4 border-l-lime-400/70 hover:from-lime-500/25 hover:via-lime-500/18 hover:to-lime-500/15 transition-all duration-200 hover:scale-[1.01] hover:-translate-y-1 cursor-pointer">
         <div className="flex items-center justify-center">
           <div className="flex-shrink-0">
-            <Sigma className="h-12 w-12 text-lime-500" />
+            <Sigma className="h-12 w-12 text-lime-400" />
           </div>
           <div className="ml-6 text-center">
             <div className="text-2xl font-bold text-gray-300">Total Tasks</div>
@@ -274,7 +271,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
 
       {/* Stats Cards - Second Row */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('NOT_STARTED' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('NOT_STARTED').icon!, { className: `h-8 w-8 ${getStatusConfig('NOT_STARTED').color}` })}
@@ -286,7 +283,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('PROPOSED' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('PROPOSED').icon!, { className: `h-8 w-8 ${getStatusConfig('PROPOSED').color}` })}
@@ -298,7 +295,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('PLANNED' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('PLANNED').icon!, { className: `h-8 w-8 ${getStatusConfig('PLANNED').color}` })}
@@ -311,9 +308,9 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
         </div>
       </div>
 
-      {/* Stats Cards - Second Row */}
+      {/* Stats Cards - Third Row */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('IN_PROGRESS' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('IN_PROGRESS').icon!, { className: `h-8 w-8 ${getStatusConfig('IN_PROGRESS').color}` })}
@@ -325,7 +322,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('IN_REVIEW' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('IN_REVIEW').icon!, { className: `h-8 w-8 ${getStatusConfig('IN_REVIEW').color}` })}
@@ -337,7 +334,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('BLOCKED' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('BLOCKED').icon!, { className: `h-8 w-8 ${getStatusConfig('BLOCKED').color}` })}
@@ -352,7 +349,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
 
       {/* Stats Cards - Fourth Row */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('ON_HOLD' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('ON_HOLD').icon!, { className: `h-8 w-8 ${getStatusConfig('ON_HOLD').color}` })}
@@ -364,7 +361,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('COMPLETED' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('COMPLETED').icon!, { className: `h-8 w-8 ${getStatusConfig('COMPLETED').color}` })}
@@ -376,7 +373,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${getStatusGradientBackground('CANCELLED' as WorkItemStatus, 'dashboard')} rounded-lg p-6 border border-gray-700/30 hover:scale-[1.02] hover:-translate-y-1 transition-all duration-200 cursor-pointer`}>
           <div className="flex items-center">
             <div className="flex-shrink-0">
               {React.createElement(getStatusConfig('CANCELLED').icon!, { className: `h-8 w-8 ${getStatusConfig('CANCELLED').color}` })}
@@ -404,7 +401,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
         </div>
 
         {/* Pie Charts Container */}
-        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-600 rounded-lg p-6 shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-gray-500">
+        <div className="bg-gradient-to-br from-cyan-500/10 via-gray-800 to-cyan-500/5 border border-gray-600 border-l-4 border-l-cyan-400/70 rounded-lg p-6 shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-gray-500 hover:from-cyan-500/20 hover:via-cyan-500/10 hover:to-cyan-500/15">
           <div className="flex items-center justify-between mb-6">
             <div className="flex items-center space-x-2">
               <svg className="h-6 w-6" viewBox="0 0 90 90" style={{ fill: '#00FFFF' }}>
@@ -482,7 +479,7 @@ const Dashboard: React.FC<DashboardProps> = ({ filteredNodes, stats }) => {
         </div>
 
         {/* Radar Charts Container */}
-        <div className="bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-600 rounded-lg p-6 shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-gray-500">
+        <div className="bg-gradient-to-br from-pink-500/10 via-gray-800 to-pink-500/5 border border-gray-600 border-l-4 border-l-pink-400/70 rounded-lg p-6 shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-gray-500 hover:from-pink-500/20 hover:via-pink-500/10 hover:to-pink-500/15">
           <div className="flex items-center justify-between mb-6">
             <div className="flex items-center space-x-2">
               <svg className="h-6 w-6" viewBox="0 0 24 24" fill="hotpink">
diff --git a/packages/web/src/components/DeleteGraphModal.tsx b/packages/web/src/components/DeleteGraphModal.tsx
index caf74939..4dbbc9e4 100644
--- a/packages/web/src/components/DeleteGraphModal.tsx
+++ b/packages/web/src/components/DeleteGraphModal.tsx
@@ -252,48 +252,66 @@ export function DeleteGraphModal({ isOpen, onClose }: DeleteGraphModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 z-[9999] overflow-y-auto">
+    <div className="fixed inset-0 z-[9999] overflow-y-auto backdrop-blur-sm">
       <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" onClick={onClose} />
+        {/* Enhanced Backdrop with gradient */}
+        <div 
+          className="fixed inset-0 transition-opacity bg-gradient-to-br from-red-900/90 via-black/80 to-gray-900/90 animate-in fade-in duration-300"
+          onClick={onClose}
+        />
 
-        <div className="inline-block align-bottom bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
-          {/* Header */}
-          <div className="bg-red-900/20 px-6 py-4 border-b border-red-600/30">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <AlertTriangle className="h-5 w-5 text-red-400" />
-                <h3 className="text-lg font-semibold text-red-200">Delete Graph</h3>
+        {/* Enhanced Modal with better styling */}
+        <div className="inline-block align-bottom bg-gradient-to-br from-gray-800 via-gray-800 to-gray-900 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border border-red-600/30 animate-in slide-in-from-bottom-4 duration-300 relative">
+          {/* Gradient accent line at top - red for danger */}
+          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-500 via-orange-500 to-red-600"></div>
+          
+          {/* Enhanced Header with gradient background */}
+          <div className="flex items-center justify-between px-6 py-5 border-b border-red-600/30 bg-gradient-to-r from-red-900/30 to-gray-900/90 backdrop-blur-sm">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
+                <AlertTriangle className="h-5 w-5 text-white" />
               </div>
-              <button
-                onClick={onClose}
-                className="text-gray-400 hover:text-gray-300 transition-colors"
-              >
-                <X className="h-5 w-5" />
-              </button>
+              <h3 className="text-xl font-bold bg-gradient-to-r from-red-100 via-orange-100 to-red-200 bg-clip-text text-transparent">Delete Graph</h3>
             </div>
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110"
+            >
+              <X className="h-5 w-5" />
+            </button>
           </div>
 
-          {/* Loading state */}
-          {loadingNodes && (
-            <div className="p-6">
-              <div className="flex items-center justify-center">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500"></div>
-              </div>
-              <p className="text-center text-gray-400 mt-3">Analyzing graph structure...</p>
+          {/* Content */}
+          <div className="px-8 pt-0 pb-8 max-h-[80vh] overflow-y-auto relative">
+            {/* Subtle background pattern */}
+            <div className="absolute inset-0 opacity-5">
+              <div className="w-full h-full" style={{
+                backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+                backgroundSize: '20px 20px'
+              }}></div>
             </div>
-          )}
+            
+            {/* Loading state */}
+            {loadingNodes && (
+              <div className="py-12 relative z-10">
+                <div className="flex items-center justify-center">
+                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-red-500"></div>
+                </div>
+                <p className="text-center text-gray-400 mt-4 font-medium">Analyzing graph structure...</p>
+              </div>
+            )}
 
-          {/* Block deletion if graph has nodes */}
-          {!loadingNodes && nodeCount > 0 && (
-            <div className="p-6">
-              <div className="mb-6">
+            {/* Block deletion if graph has nodes */}
+            {!loadingNodes && nodeCount > 0 && (
+              <div className="px-8 pt-2 pb-8 relative z-10">
+              <div className="mb-8">
                 <div className="flex items-center justify-center w-16 h-16 bg-orange-900/20 rounded-full mx-auto mb-4">
                   <AlertTriangle className="h-8 w-8 text-orange-400" />
                 </div>
                 <h4 className="text-xl font-semibold text-orange-200 text-center mb-2">
                   Graph Contains Active Nodes
                 </h4>
-                <p className="text-gray-300 text-center mb-6">
+                <p className="text-gray-300 text-center mb-8">
                   Cannot delete <strong className="text-white">"{currentGraph.name}"</strong> while it contains nodes
                 </p>
               </div>
@@ -763,7 +781,8 @@ export function DeleteGraphModal({ isOpen, onClose }: DeleteGraphModalProps) {
                 </div>
               </div>
             </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/web/src/components/DeleteNodeModal.tsx b/packages/web/src/components/DeleteNodeModal.tsx
index 7097806f..023c8ac5 100644
--- a/packages/web/src/components/DeleteNodeModal.tsx
+++ b/packages/web/src/components/DeleteNodeModal.tsx
@@ -469,12 +469,12 @@ export function DeleteNodeModal({ isOpen, onClose, nodeId, nodeTitle, nodeType,
                   </h5>
                   
                   <div className="space-y-4">
-                    <label className="group flex items-start space-x-4 cursor-pointer p-3 rounded-lg hover:bg-gray-700/30 transition-colors">
+                    <label className="group flex items-start space-x-4 cursor-pointer p-3 rounded-lg hover:bg-gray-700/30 transition-colors select-text">
                       <input
                         type="checkbox"
                         checked={understandRisks}
                         onChange={(e) => setUnderstandRisks(e.target.checked)}
-                        className="mt-1 h-5 w-5 text-red-600 focus:ring-red-500 focus:ring-offset-0 border-gray-500 rounded bg-gray-700/80 transition-colors"
+                        className="mt-1 h-5 w-5 text-red-600 focus:ring-red-500 focus:ring-offset-0 border-gray-500 rounded bg-gray-700/80 transition-colors pointer-events-auto"
                       />
                       <div className="space-y-1">
                         <span className="text-gray-200 font-medium text-sm leading-relaxed">
@@ -486,12 +486,12 @@ export function DeleteNodeModal({ isOpen, onClose, nodeId, nodeTitle, nodeType,
                       </div>
                     </label>
                     
-                    <label className="group flex items-start space-x-4 cursor-pointer p-3 rounded-lg hover:bg-gray-700/30 transition-colors">
+                    <label className="group flex items-start space-x-4 cursor-pointer p-3 rounded-lg hover:bg-gray-700/30 transition-colors select-text">
                       <input
                         type="checkbox"
                         checked={confirmDeletion}
                         onChange={(e) => setConfirmDeletion(e.target.checked)}
-                        className="mt-1 h-5 w-5 text-red-600 focus:ring-red-500 focus:ring-offset-0 border-gray-500 rounded bg-gray-700/80 transition-colors"
+                        className="mt-1 h-5 w-5 text-red-600 focus:ring-red-500 focus:ring-offset-0 border-gray-500 rounded bg-gray-700/80 transition-colors pointer-events-auto"
                       />
                       <div className="space-y-1">
                         <span className="text-gray-200 font-medium text-sm leading-relaxed">
diff --git a/packages/web/src/components/DisconnectNodeModal.tsx b/packages/web/src/components/DisconnectNodeModal.tsx
index a9035323..274b9240 100644
--- a/packages/web/src/components/DisconnectNodeModal.tsx
+++ b/packages/web/src/components/DisconnectNodeModal.tsx
@@ -181,19 +181,22 @@ export function DisconnectNodeModal({ isOpen, onClose, sourceNode }: DisconnectN
     }
   };
 
-  // Get all disconnectable connections (Edge entities only)
-  const allConnections: Array<{id: string, type: string, connectedNode: {id: string, title: string, type: string}, direction: 'outgoing' | 'incoming'}> = [];
+  // Get all disconnectable connections (Edge entities only) - deduplicated by edge ID
+  const connectionMap = new Map<string, {id: string, type: string, connectedNode: {id: string, title: string, type: string}, direction: 'outgoing' | 'incoming'}>();
   
   existingEdges.forEach(edge => {
+    // Skip if we've already processed this edge ID
+    if (connectionMap.has(edge.id)) return;
+    
     if (edge.source.id === sourceNode.id) {
-      allConnections.push({
+      connectionMap.set(edge.id, {
         id: edge.id,
         type: edge.type,
         connectedNode: { id: edge.target.id, title: edge.target.title, type: 'unknown' },
         direction: 'outgoing'
       });
     } else if (edge.target.id === sourceNode.id) {
-      allConnections.push({
+      connectionMap.set(edge.id, {
         id: edge.id,
         type: edge.type,
         connectedNode: { id: edge.source.id, title: edge.source.title, type: 'unknown' },
@@ -202,6 +205,7 @@ export function DisconnectNodeModal({ isOpen, onClose, sourceNode }: DisconnectN
     }
   });
 
+  const allConnections = Array.from(connectionMap.values());
   const disconnectableConnections = allConnections.filter(conn => !conn.id.startsWith('workitem-'));
 
   return (
diff --git a/packages/web/src/components/EditNodeModal.tsx b/packages/web/src/components/EditNodeModal.tsx
index f325c76e..104c96d1 100644
--- a/packages/web/src/components/EditNodeModal.tsx
+++ b/packages/web/src/components/EditNodeModal.tsx
@@ -41,9 +41,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
     description: node.description || '',
     type: node.type,
     status: node.status,
-    priorityExec: node.priorityExec || 0,
-    priorityIndiv: node.priorityIndiv || 0,
-    priorityComm: node.priorityComm || 0,
+    priority: node.priority || 0,
     assignedTo: typeof node.assignedTo === 'string' ? node.assignedTo : (node.assignedTo?.id || ''),
     dueDate: formatDateForInput(node.dueDate),
     tags: node.tags || [],
@@ -56,9 +54,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
       description: node.description || '',
       type: node.type,
       status: node.status,
-      priorityExec: node.priorityExec || 0,
-      priorityIndiv: node.priorityIndiv || 0,
-      priorityComm: node.priorityComm || 0,
+      priority: node.priority || 0,
       assignedTo: typeof node.assignedTo === 'string' ? node.assignedTo : (node.assignedTo?.id || ''),
       dueDate: formatDateForInput(node.dueDate),
       tags: node.tags || [],
@@ -137,12 +133,9 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
         description: formData.description.trim() || undefined,
         type: formData.type,
         status: formData.status,
-        priorityExec: formData.priorityExec,
-        priorityIndiv: formData.priorityIndiv,
-        priorityComm: formData.priorityComm,
+        priority: formData.priority,
         dueDate: formData.dueDate || undefined,
         tags: formData.tags || [],
-        priorityComp: (formData.priorityExec + formData.priorityIndiv + formData.priorityComm) / 3,
       };
       
       const updateInput: any = { ...cleanFormData };
@@ -396,7 +389,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
             </div>
             
             <div className="space-y-3">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Priority Distribution</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Priority Level</label>
               
               <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 mb-4 shadow-sm">
                 <div className="mb-3">
@@ -410,9 +403,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.9,
-                          priorityIndiv: 0.9,
-                          priorityComm: 0.9
+                          priority: 0.9
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-red-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -432,9 +423,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.7,
-                          priorityIndiv: 0.7,
-                          priorityComm: 0.7
+                          priority: 0.7
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-orange-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -454,9 +443,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.5,
-                          priorityIndiv: 0.5,
-                          priorityComm: 0.5
+                          priority: 0.5
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-yellow-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -478,9 +465,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.3,
-                          priorityIndiv: 0.3,
-                          priorityComm: 0.3
+                          priority: 0.3
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-blue-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -500,9 +485,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
                       onClick={() => {
                         setFormData(prev => ({
                           ...prev,
-                          priorityExec: 0.1,
-                          priorityIndiv: 0.1,
-                          priorityComm: 0.1
+                          priority: 0.1
                         }));
                       }}
                       className="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 border border-gray-500/30 text-center hover:shadow-sm hover:bg-gray-100 dark:hover:bg-gray-600 transition-all cursor-pointer"
@@ -522,132 +505,47 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
               
               <div>
                 <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                  Executive Priority
+                  Priority Level
                 </label>
                 <input
                   type="range"
                   min="0"
                   max="1"
                   step="0.1"
-                  value={formData.priorityExec}
+                  value={formData.priority}
                   onChange={(e) => setFormData(prev => ({
                     ...prev,
-                    priorityExec: parseFloat(e.target.value)
+                    priority: parseFloat(e.target.value)
                   }))}
                   className={`w-full ${
-                    formData.priorityExec >= 0.8 ? 'accent-red-500' :
-                    formData.priorityExec >= 0.6 ? 'accent-orange-500' :
-                    formData.priorityExec >= 0.4 ? 'accent-yellow-500' :
-                    formData.priorityExec >= 0.2 ? 'accent-blue-500' :
+                    formData.priority >= 0.8 ? 'accent-red-500' :
+                    formData.priority >= 0.6 ? 'accent-orange-500' :
+                    formData.priority >= 0.4 ? 'accent-yellow-500' :
+                    formData.priority >= 0.2 ? 'accent-blue-500' :
                     'accent-gray-500'
                   }`}
                 />
                 <div className={`text-sm text-center font-medium ${
-                  formData.priorityExec >= 0.8 ? 'text-red-500' :
-                  formData.priorityExec >= 0.6 ? 'text-orange-500' :
-                  formData.priorityExec >= 0.4 ? 'text-yellow-500' :
-                  formData.priorityExec >= 0.2 ? 'text-blue-500' :
+                  formData.priority >= 0.8 ? 'text-red-500' :
+                  formData.priority >= 0.6 ? 'text-orange-500' :
+                  formData.priority >= 0.4 ? 'text-yellow-500' :
+                  formData.priority >= 0.2 ? 'text-blue-500' :
                   'text-gray-500'
                 }`}>
                   {(() => {
-                    const PriorityIcon = getCentralizedPriorityIcon(formData.priorityExec);
+                    const PriorityIcon = getCentralizedPriorityIcon(formData.priority);
                     const priorityConfig = PRIORITY_OPTIONS.find(p => p.value !== 'all' && 
-                      formData.priorityExec >= p.threshold!.min && formData.priorityExec <= p.threshold!.max);
+                      formData.priority >= p.threshold!.min && formData.priority <= p.threshold!.max);
                     return (
                       <>
                         {PriorityIcon && <PriorityIcon className="h-6 w-6 inline mr-1" />}
-                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priorityExec * 100)}%)
+                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priority * 100)}%)
                       </>
                     );
                   })()}
                 </div>
               </div>
               
-              <div>
-                <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                  Individual Priority
-                </label>
-                <input
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.1"
-                  value={formData.priorityIndiv}
-                  onChange={(e) => setFormData(prev => ({
-                    ...prev,
-                    priorityIndiv: parseFloat(e.target.value)
-                  }))}
-                  className={`w-full ${
-                    formData.priorityIndiv >= 0.8 ? 'accent-red-500' :
-                    formData.priorityIndiv >= 0.6 ? 'accent-orange-500' :
-                    formData.priorityIndiv >= 0.4 ? 'accent-yellow-500' :
-                    formData.priorityIndiv >= 0.2 ? 'accent-blue-500' :
-                    'accent-gray-500'
-                  }`}
-                />
-                <div className={`text-sm text-center font-medium ${
-                  formData.priorityIndiv >= 0.8 ? 'text-red-500' :
-                  formData.priorityIndiv >= 0.6 ? 'text-orange-500' :
-                  formData.priorityIndiv >= 0.4 ? 'text-yellow-500' :
-                  formData.priorityIndiv >= 0.2 ? 'text-blue-500' :
-                  'text-gray-500'
-                }`}>
-                  {(() => {
-                    const PriorityIcon = getCentralizedPriorityIcon(formData.priorityIndiv);
-                    const priorityConfig = PRIORITY_OPTIONS.find(p => p.value !== 'all' && 
-                      formData.priorityIndiv >= p.threshold!.min && formData.priorityIndiv <= p.threshold!.max);
-                    return (
-                      <>
-                        {PriorityIcon && <PriorityIcon className="h-6 w-6 inline mr-1" />}
-                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priorityIndiv * 100)}%)
-                      </>
-                    );
-                  })()}
-                </div>
-              </div>
-              
-              <div>
-                <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
-                  Community Priority
-                </label>
-                <input
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.1"
-                  value={formData.priorityComm}
-                  onChange={(e) => setFormData(prev => ({
-                    ...prev,
-                    priorityComm: parseFloat(e.target.value)
-                  }))}
-                  className={`w-full ${
-                    formData.priorityComm >= 0.8 ? 'accent-red-500' :
-                    formData.priorityComm >= 0.6 ? 'accent-orange-500' :
-                    formData.priorityComm >= 0.4 ? 'accent-yellow-500' :
-                    formData.priorityComm >= 0.2 ? 'accent-blue-500' :
-                    'accent-gray-500'
-                  }`}
-                />
-                <div className={`text-sm text-center font-medium ${
-                  formData.priorityComm >= 0.8 ? 'text-red-500' :
-                  formData.priorityComm >= 0.6 ? 'text-orange-500' :
-                  formData.priorityComm >= 0.4 ? 'text-yellow-500' :
-                  formData.priorityComm >= 0.2 ? 'text-blue-500' :
-                  'text-gray-500'
-                }`}>
-                  {(() => {
-                    const PriorityIcon = getCentralizedPriorityIcon(formData.priorityComm);
-                    const priorityConfig = PRIORITY_OPTIONS.find(p => p.value !== 'all' && 
-                      formData.priorityComm >= p.threshold!.min && formData.priorityComm <= p.threshold!.max);
-                    return (
-                      <>
-                        {PriorityIcon && <PriorityIcon className="h-6 w-6 inline mr-1" />}
-                        {priorityConfig?.label || 'Minimal'} ({Math.round(formData.priorityComm * 100)}%)
-                      </>
-                    );
-                  })()}
-                </div>
-              </div>
             </div>
             
             <div className="flex justify-end space-x-3 pt-4">
diff --git a/packages/web/src/components/FloatingConsole.tsx b/packages/web/src/components/FloatingConsole.tsx
new file mode 100644
index 00000000..2e7e9dfd
--- /dev/null
+++ b/packages/web/src/components/FloatingConsole.tsx
@@ -0,0 +1,523 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { 
+  MessageSquare, 
+  Bug, 
+  X, 
+  Minimize2, 
+  Maximize2, 
+  Send, 
+  Copy,
+  Trash2,
+  Users,
+  Bot,
+  Pause,
+  Play,
+  Move
+} from 'lucide-react';
+
+interface LogEntry {
+  id: string;
+  timestamp: Date;
+  level: 'info' | 'warn' | 'error' | 'debug';
+  source: string;
+  message: string;
+  data?: any;
+}
+
+interface ChatMessage {
+  id: string;
+  timestamp: Date;
+  sender: 'user' | 'bot' | 'system';
+  content: string;
+  senderName?: string;
+}
+
+interface FloatingConsoleProps {
+  isVisible: boolean;
+  onToggle: () => void;
+  onClose?: () => void;
+}
+
+export const FloatingConsole: React.FC<FloatingConsoleProps> = ({
+  isVisible,
+  onToggle,
+  onClose
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [activeTab, setActiveTab] = useState<'chat' | 'debug'>('debug');
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [messageInput, setMessageInput] = useState('');
+  const [isDebugPaused, setIsDebugPaused] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const consoleRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (activeTab === 'debug') {
+      logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logs, chatMessages, activeTab]);
+
+  // Initialize position and size based on CSS variables and defaults
+  useEffect(() => {
+    const sidebarWidth = getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '16rem';
+    const sidebarPixels = sidebarWidth === '4rem' ? 64 : 256; // Convert rem to pixels
+    
+    setPosition({ 
+      x: sidebarPixels + 16, // sidebar width + 16px margin
+      y: window.innerHeight - (isExpanded ? 400 : 50) - 16 // bottom margin
+    });
+    
+    // Calculate minimized width based on active tab and content
+    let minimizedWidth = 300; // Default fallback
+    if (!isExpanded) {
+      if (activeTab === 'chat') {
+        // "Chat & Collaboration" is the longest title + buttons
+        minimizedWidth = 420; // Enough for longer title + action buttons
+      } else if (activeTab === 'debug') {
+        // "Debug Console" is shorter but has more buttons
+        minimizedWidth = 400; // Enough for title + all debug action buttons
+      }
+    }
+    
+    setSize({
+      width: isExpanded ? Math.min(window.innerWidth * 0.5, 800) : minimizedWidth,
+      height: isExpanded ? 400 : 50
+    });
+  }, [isExpanded, isVisible, activeTab]);
+
+  // Handle dragging with throttling for better performance
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      const newX = e.clientX - dragStart.x;
+      const newY = e.clientY - dragStart.y;
+      // Use requestAnimationFrame to throttle updates and improve performance
+      requestAnimationFrame(() => {
+        setPosition({ x: Math.max(0, newX), y: Math.max(0, newY) });
+      });
+    }
+    if (isResizing) {
+      // Set minimum width based on current tab to ensure buttons don't overflow
+      const minWidth = activeTab === 'chat' ? 420 : 400;
+      const newWidth = Math.max(minWidth, resizeStart.width + (e.clientX - resizeStart.x));
+      const newHeight = Math.max(200, resizeStart.height + (e.clientY - resizeStart.y));
+      requestAnimationFrame(() => {
+        setSize({ width: newWidth, height: newHeight });
+      });
+    }
+  }, [isDragging, isResizing, dragStart, resizeStart, activeTab]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+    return undefined;
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+  const handleDragStart = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y
+    });
+  };
+
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeStart({
+      x: e.clientX,
+      y: e.clientY,
+      width: size.width,
+      height: size.height
+    });
+  };
+
+  // Set up console interceptor for debug logs
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const originalConsoleLog = console.log;
+    const originalConsoleWarn = console.warn;
+    const originalConsoleError = console.error;
+
+    const addLog = (level: LogEntry['level'], source: string, message: string, data?: any) => {
+      if (isDebugPaused && level === 'debug') return; // Skip debug logs when paused
+      
+      const logEntry: LogEntry = {
+        id: `${Date.now()}-${Math.random()}`,
+        timestamp: new Date(),
+        level,
+        source,
+        message,
+        data
+      };
+      setLogs(prev => [...prev.slice(-99), logEntry]); // Keep last 100 logs
+    };
+
+    // Intercept console methods
+    console.log = (...args) => {
+      originalConsoleLog(...args);
+      const message = args.join(' ');
+      if (message.includes('🗺️') || message.includes('🎯') || message.includes('🔍') || message.includes('📊')) {
+        addLog('debug', 'MiniMap', message, args.length > 1 ? args[1] : undefined);
+      }
+    };
+
+    console.warn = (...args) => {
+      originalConsoleWarn(...args);
+      addLog('warn', 'System', args.join(' '));
+    };
+
+    console.error = (...args) => {
+      originalConsoleError(...args);
+      addLog('error', 'System', args.join(' '));
+    };
+
+    // Global log function for components to use
+    (window as any).debugLog = (source: string, message: string, data?: any) => {
+      if (isDebugPaused) return; // Skip all debug logs when paused
+      addLog('info', source, message, data);
+    };
+
+    return () => {
+      console.log = originalConsoleLog;
+      console.warn = originalConsoleWarn;
+      console.error = originalConsoleError;
+      delete (window as any).debugLog;
+    };
+  }, [isVisible, isDebugPaused]); // Include pause state in dependencies
+
+  const handleSendMessage = () => {
+    if (!messageInput.trim()) return;
+
+    const message: ChatMessage = {
+      id: `${Date.now()}-${Math.random()}`,
+      timestamp: new Date(),
+      sender: 'user',
+      content: messageInput,
+      senderName: 'You'
+    };
+
+    setChatMessages(prev => [...prev, message]);
+    setMessageInput('');
+
+    // Simulate bot response for now
+    setTimeout(() => {
+      const botResponse: ChatMessage = {
+        id: `${Date.now()}-${Math.random()}`,
+        timestamp: new Date(),
+        sender: 'bot',
+        content: `Received: "${messageInput}". Chat functionality is coming soon!`,
+        senderName: 'GraphDone Assistant'
+      };
+      setChatMessages(prev => [...prev, botResponse]);
+    }, 1000);
+  };
+
+  const clearLogs = () => {
+    setLogs([]);
+  };
+
+  const copyLogs = () => {
+    const logText = logs.map(log => 
+      `[${log.timestamp.toLocaleTimeString()}] ${log.level.toUpperCase()} ${log.source}: ${log.message}`
+    ).join('\n');
+    navigator.clipboard.writeText(logText);
+  };
+
+  const formatTimestamp = (date: Date) => {
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit' 
+    });
+  };
+
+  const getLevelColor = (level: LogEntry['level']) => {
+    switch (level) {
+      case 'error': return 'text-red-400';
+      case 'warn': return 'text-yellow-400';
+      case 'info': return 'text-blue-400';
+      case 'debug': return 'text-green-400';
+      default: return 'text-gray-400';
+    }
+  };
+
+  const getSenderIcon = (sender: ChatMessage['sender']) => {
+    switch (sender) {
+      case 'bot': return <Bot className="h-4 w-4 text-blue-400" />;
+      case 'system': return <MessageSquare className="h-4 w-4 text-yellow-400" />;
+      default: return <Users className="h-4 w-4 text-green-400" />;
+    }
+  };
+
+  if (!isVisible) return null;
+
+  const consoleContent = (
+    <div 
+      ref={consoleRef}
+      className={`fixed bg-gray-900/95 backdrop-blur-sm border border-gray-600 rounded-lg shadow-2xl z-[999999] ${isDragging || isResizing ? 'select-none' : ''}`}
+      style={{ 
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+        minWidth: activeTab === 'debug' ? '420px' : '380px',
+        minHeight: isExpanded ? '200px' : '50px',
+        cursor: isDragging ? 'grabbing' : 'default',
+        // Performance optimizations for dragging
+        willChange: isDragging || isResizing ? 'transform, left, top, width, height' : 'auto',
+        transform: isDragging || isResizing ? 'translateZ(0)' : 'none', // GPU acceleration
+        // Reduce expensive effects during drag
+        backdropFilter: isDragging ? 'none' : 'blur(12px)',
+        backgroundColor: isDragging ? 'rgba(17, 24, 39, 0.98)' : 'rgba(17, 24, 39, 0.95)'
+      }}
+    >
+      {/* Header */}
+      <div 
+        className="flex items-center justify-between p-3 border-b border-gray-700 cursor-grab active:cursor-grabbing"
+        onMouseDown={handleDragStart}
+      >
+        <div className="flex items-center space-x-2">
+          <div className="flex space-x-1">
+            <button
+              onClick={() => setActiveTab('chat')}
+              className={`p-1.5 rounded transition-colors ${
+                activeTab === 'chat' 
+                  ? 'bg-blue-600 text-white' 
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+              title="Chat"
+            >
+              <MessageSquare className="h-4 w-4" />
+            </button>
+            <button
+              onClick={() => setActiveTab('debug')}
+              className={`p-1.5 rounded transition-colors ${
+                activeTab === 'debug' 
+                  ? 'bg-green-600 text-white' 
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+              title="Debug Console"
+            >
+              <Bug className="h-4 w-4" />
+            </button>
+          </div>
+          <span className="text-sm font-medium text-gray-200 truncate">
+            {activeTab === 'chat' ? 'Chat & Collaboration' : 'Debug Console'}
+          </span>
+          {activeTab === 'debug' && (
+            <div className="flex items-center space-x-2">
+              {logs.length > 0 && (
+                <span className="text-xs bg-gray-700 px-2 py-0.5 rounded text-gray-300">
+                  {logs.length} logs
+                </span>
+              )}
+              <span className={`text-xs px-2 py-0.5 rounded ${
+                isDebugPaused ? 'bg-yellow-700 text-yellow-200' : 'bg-green-700 text-green-200'
+              }`}>
+                {isDebugPaused ? 'Paused' : 'Recording'}
+              </span>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex items-center space-x-1">
+          {activeTab === 'debug' && (
+            <>
+              <button
+                onClick={() => setIsDebugPaused(!isDebugPaused)}
+                className={`p-1 transition-colors ${
+                  isDebugPaused 
+                    ? 'text-green-400 hover:text-green-300' 
+                    : 'text-yellow-400 hover:text-yellow-300'
+                }`}
+                title={isDebugPaused ? 'Resume logging' : 'Pause logging'}
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                {isDebugPaused ? <Play className="h-4 w-4" /> : <Pause className="h-4 w-4" />}
+              </button>
+              <button
+                onClick={copyLogs}
+                className="p-1 text-gray-400 hover:text-gray-200 transition-colors"
+                title="Copy logs to clipboard"
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <Copy className="h-4 w-4" />
+              </button>
+              <button
+                onClick={clearLogs}
+                className="p-1 text-gray-400 hover:text-red-400 transition-colors"
+                title="Clear logs"
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </>
+          )}
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1 text-gray-400 hover:text-gray-200 transition-colors"
+            title={isExpanded ? "Minimize" : "Expand"}
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            {isExpanded ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+          </button>
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="p-1 text-gray-400 hover:text-red-400 transition-colors"
+              title="Close console"
+              onMouseDown={(e) => e.stopPropagation()}
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {isExpanded && (
+        <>
+          {/* Debug Logs Tab */}
+          {activeTab === 'debug' && (
+            <div className="flex flex-col" style={{ height: size.height - 50 }}>  {/* Adjust for header */}
+              <div className="flex-1 overflow-y-auto p-3 font-mono text-xs">
+                {logs.length === 0 ? (
+                  <div className="text-gray-500 text-center py-8">
+                    No debug logs yet. Interact with the graph to see debug information.
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    {logs.map((log) => (
+                      <div key={log.id} className="space-y-1">
+                        <div className="flex items-start space-x-2">
+                          <span className="text-gray-500 shrink-0">
+                            [{formatTimestamp(log.timestamp)}]
+                          </span>
+                          <span className={`${getLevelColor(log.level)} shrink-0 font-semibold`}>
+                            {log.level.toUpperCase()}
+                          </span>
+                          <span className="text-blue-300 shrink-0">
+                            {log.source}:
+                          </span>
+                          <span className="text-gray-200 break-all">
+                            {log.message}
+                          </span>
+                        </div>
+                        {log.data && (
+                          <div className="ml-8 pl-4 border-l border-gray-600">
+                            <pre className="text-xs text-gray-300 whitespace-pre-wrap break-all">
+                              {typeof log.data === 'object' ? JSON.stringify(log.data, null, 2) : log.data}
+                            </pre>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                    <div ref={logsEndRef} />
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Chat Tab */}
+          {activeTab === 'chat' && (
+            <div className="flex flex-col" style={{ height: size.height - 50 }}> {/* Adjust for header */}
+              <div className="flex-1 overflow-y-auto p-3">
+                {chatMessages.length === 0 ? (
+                  <div className="text-gray-500 text-center py-8">
+                    <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                    Start chatting with team members or AI assistants
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {chatMessages.map((message) => (
+                      <div key={message.id} className="flex items-start space-x-2">
+                        {getSenderIcon(message.sender)}
+                        <div className="flex-1">
+                          <div className="flex items-center space-x-2 mb-1">
+                            <span className="text-sm font-medium text-gray-200">
+                              {message.senderName || message.sender}
+                            </span>
+                            <span className="text-xs text-gray-500">
+                              {formatTimestamp(message.timestamp)}
+                            </span>
+                          </div>
+                          <div className="text-sm text-gray-300">
+                            {message.content}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                    <div ref={chatEndRef} />
+                  </div>
+                )}
+              </div>
+
+              {/* Chat Input */}
+              <div className="border-t border-gray-700 p-3">
+                <div className="flex space-x-2">
+                  <input
+                    type="text"
+                    value={messageInput}
+                    onChange={(e) => setMessageInput(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+                    placeholder="Type a message..."
+                    className="flex-1 bg-gray-800 border border-gray-600 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  <button
+                    onClick={handleSendMessage}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded transition-colors"
+                    title="Send message"
+                  >
+                    <Send className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      
+      {/* Resize Handle */}
+      {isExpanded && (
+        <div
+          className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize bg-gray-600 opacity-50 hover:opacity-75"
+          style={{
+            clipPath: 'polygon(100% 0%, 0% 100%, 100% 100%)'
+          }}
+          onMouseDown={handleResizeStart}
+          title="Drag to resize"
+        />
+      )}
+    </div>
+  );
+
+  return createPortal(consoleContent, document.body);
+};
+
+export default FloatingConsole;
\ No newline at end of file
diff --git a/packages/web/src/components/GanttChart.tsx b/packages/web/src/components/GanttChart.tsx
index ec0e3f95..70aeb474 100644
--- a/packages/web/src/components/GanttChart.tsx
+++ b/packages/web/src/components/GanttChart.tsx
@@ -8,10 +8,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -75,7 +72,7 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
         
         // Priority filter
         if (filterPriority !== 'all') {
-          const priority = node.priorityExec || node.priorityComp || 0;
+          const priority = node.priority || 0;
           const priorityLevel = getPriorityConfig(priority).value;
           if (priorityLevel !== filterPriority) return false;
         }
@@ -90,7 +87,7 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
         const endDate = node.dueDate ? new Date(node.dueDate) : new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
         const duration = Math.max(1, Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)));
         const progress = getStatusCompletionPercentage(node.status as WorkItemStatus);
-        const priority = node.priorityExec || node.priorityComp || 0;
+        const priority = node.priority || 0;
         
         return {
           ...node,
@@ -224,7 +221,7 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
   };
 
   return (
-    <div className="flex flex-col h-full bg-gray-900">
+    <div className="flex flex-col h-full">
       {/* Header */}
       <div className="p-6 border-b border-gray-700">
         <div className="flex items-center justify-between mb-4">
@@ -456,7 +453,7 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
       {/* Main Content */}
       <div className="flex-1 overflow-hidden">
         <div className="h-full overflow-auto" ref={scrollRef}>
-          <div className="bg-gray-800 border border-gray-700">
+          <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700/50">
             <div className="overflow-x-auto">
               <div className="relative" style={{ minWidth: `${800 * zoomLevel}px`, transform: `scale(${zoomLevel})`, transformOrigin: 'top left' }}>
                 {/* Timeline Header */}
@@ -591,8 +588,8 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
                           <div className="relative h-9">
                             {/* Main Task Bar */}
                             <div 
-                              className={`absolute h-6 bg-gray-600 rounded-lg shadow-sm border transition-all duration-200 cursor-pointer ${
-                                isSelected ? 'border-green-500 shadow-lg shadow-green-500/25' : 'border-gray-500'
+                              className={`absolute h-6 bg-gray-600/40 backdrop-blur-sm rounded-lg shadow-sm border transition-all duration-200 cursor-pointer ${
+                                isSelected ? 'border-green-500 shadow-lg shadow-green-500/25' : 'border-gray-500/50'
                               }`}
                               style={{
                                 left: `${Math.max(barLeft, 0)}%`,
@@ -603,7 +600,7 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
                             >
                               {/* Progress Fill */}
                               <div 
-                                className={`h-full rounded-lg transition-all duration-300 ${getProgressColor(item.status as WorkItemStatus)}`}
+                                className={`h-full rounded-lg transition-all duration-300 ${getProgressColor(item.status as WorkItemStatus)} opacity-60`}
                                 style={{ width: `${item.progress}%` }}
                               />
                               
@@ -650,7 +647,7 @@ const GanttChart: React.FC<GanttChartProps> = ({ filteredNodes }) => {
       </div>
 
       {/* Footer with Statistics and Legend */}
-      <div className="border-t border-gray-700 p-4 bg-gray-800">
+      <div className="border-t border-gray-700/50 p-4 bg-gray-800/50 backdrop-blur-sm">
         <div className="flex flex-wrap items-center justify-between gap-4">
           {/* Statistics */}
           <div className="flex items-center space-x-6 text-sm">
diff --git a/packages/web/src/components/GraphErrorBoundary.tsx b/packages/web/src/components/GraphErrorBoundary.tsx
index be428260..59aee3e5 100644
--- a/packages/web/src/components/GraphErrorBoundary.tsx
+++ b/packages/web/src/components/GraphErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertTriangle, RefreshCw, FileText, ChevronDown, ChevronUp } from 'lucide-react';
+import { AlertTriangle, RefreshCw, FileText, ChevronDown, ChevronUp, Copy, Check } from 'lucide-react';
 
 interface Props {
   children: ReactNode;
@@ -13,6 +13,7 @@ interface State {
   errorInfo: ErrorInfo | null;
   showDetails: boolean;
   attemptedRecovery: boolean;
+  copySuccess: boolean;
 }
 
 export class GraphErrorBoundary extends Component<Props, State> {
@@ -23,7 +24,8 @@ export class GraphErrorBoundary extends Component<Props, State> {
       error: null,
       errorInfo: null,
       showDetails: false,
-      attemptedRecovery: false
+      attemptedRecovery: false,
+      copySuccess: false
     };
   }
 
@@ -122,18 +124,43 @@ export class GraphErrorBoundary extends Component<Props, State> {
     return suggestions;
   };
 
+  copyErrorDetails = async () => {
+    const { error, errorInfo } = this.state;
+    const errorText = [
+      '--- GraphDone Error Report ---',
+      `Error: ${error?.message || 'Unknown error'}`,
+      `Stack: ${error?.stack || 'No stack trace'}`,
+      `Component Stack: ${errorInfo?.componentStack || 'No component stack'}`,
+      `Timestamp: ${new Date().toISOString()}`,
+      `User Agent: ${navigator.userAgent}`,
+      `URL: ${window.location.href}`,
+      '--- End Report ---'
+    ].join('\n');
+
+    try {
+      await navigator.clipboard.writeText(errorText);
+      this.setState({ copySuccess: true });
+      setTimeout(() => {
+        this.setState({ copySuccess: false });
+      }, 2000);
+    } catch (err) {
+      // Fallback for browsers that don't support clipboard API
+      console.error('Failed to copy error details:', err);
+    }
+  };
+
   render() {
     if (this.state.hasError) {
       if (this.props.fallbackComponent) {
         return <>{this.props.fallbackComponent}</>;
       }
 
-      const { error, errorInfo, showDetails } = this.state;
+      const { error, errorInfo, showDetails, copySuccess } = this.state;
       const errorMessage = this.getErrorMessage(error);
       const suggestions = this.getSuggestions(error);
 
       return (
-        <div className="h-full flex items-center justify-center bg-gray-900 p-4">
+        <div className="h-full flex items-center justify-center bg-gray-900 p-4 tropical-lagoon-bg">
           <div className="max-w-2xl w-full">
             <div className="bg-gray-800 border border-red-500/30 rounded-lg shadow-xl">
               {/* Error Header */}
@@ -231,6 +258,23 @@ export class GraphErrorBoundary extends Component<Props, State> {
                     Report Issue
                   </button>
                   
+                  <button
+                    onClick={this.copyErrorDetails}
+                    className={`btn ${this.state.copySuccess ? 'btn-success' : 'btn-secondary'} flex items-center transition-all duration-200`}
+                  >
+                    {this.state.copySuccess ? (
+                      <>
+                        <Check className="h-4 w-4 mr-2" />
+                        Copied!
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="h-4 w-4 mr-2" />
+                        Copy Error
+                      </>
+                    )}
+                  </button>
+                  
                   <button
                     onClick={this.handleReset}
                     className="btn btn-primary flex items-center"
diff --git a/packages/web/src/components/GraphSelectionModal.tsx b/packages/web/src/components/GraphSelectionModal.tsx
index 481236bc..249c6346 100644
--- a/packages/web/src/components/GraphSelectionModal.tsx
+++ b/packages/web/src/components/GraphSelectionModal.tsx
@@ -70,10 +70,20 @@ function GraphItem({ graph, onSelect, getGraphTypeIcon }: GraphItemProps) {
     }
   };
 
+  const getCardBackgroundColor = (type: string) => {
+    switch (type) {
+      case 'PROJECT': return 'bg-gradient-to-br from-blue-900/20 via-blue-800/10 to-indigo-900/20 hover:from-blue-800/30 hover:via-blue-700/20 hover:to-indigo-800/30 border-blue-500/30 hover:border-blue-400/50';
+      case 'WORKSPACE': return 'bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-violet-900/20 hover:from-purple-800/30 hover:via-purple-700/20 hover:to-violet-800/30 border-purple-500/30 hover:border-purple-400/50';
+      case 'SUBGRAPH': return 'bg-gradient-to-br from-emerald-900/20 via-green-800/10 to-teal-900/20 hover:from-emerald-800/30 hover:via-green-700/20 hover:to-teal-800/30 border-emerald-500/30 hover:border-emerald-400/50';
+      case 'TEMPLATE': return 'bg-gradient-to-br from-amber-900/20 via-orange-800/10 to-red-900/20 hover:from-amber-800/30 hover:via-orange-700/20 hover:to-red-800/30 border-amber-500/30 hover:border-amber-400/50';
+      default: return 'bg-gradient-to-br from-slate-900/20 via-gray-800/10 to-stone-900/20 hover:from-slate-800/30 hover:via-gray-700/20 hover:to-stone-800/30 border-slate-500/30 hover:border-slate-400/50';
+    }
+  };
+
   return (
     <button
       onClick={() => onSelect(graph.id)}
-      className="w-full flex items-center px-4 py-4 hover:bg-gray-700 transition-colors text-left group rounded-lg border border-gray-600 hover:border-green-500 bg-gray-800 mb-2"
+      className={`w-full flex items-center px-6 py-5 transition-all duration-300 text-left group rounded-xl border shadow-lg hover:shadow-xl hover:scale-[1.01] transform backdrop-blur-sm overflow-hidden ${getCardBackgroundColor(graph.type)}`}
     >
       <div className="flex-shrink-0 mr-4">
         <div className={`w-10 h-10 rounded flex items-center justify-center ${getGraphTypeColor(graph.type)}`}>
@@ -167,36 +177,57 @@ export function GraphSelectionModal({ isOpen, onClose }: GraphSelectionModalProp
 
   return (
     <>
-      <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="fixed inset-0 z-50 overflow-y-auto backdrop-blur-sm">
         <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-          {/* Backdrop */}
+          {/* Enhanced Backdrop with gradient */}
           <div 
-            className="fixed inset-0 transition-opacity bg-black bg-opacity-50"
+            className="fixed inset-0 transition-opacity bg-gradient-to-br from-gray-900/90 via-black/80 to-blue-900/90 animate-in fade-in duration-300"
             onClick={onClose}
           />
 
-          {/* Modal */}
-          <div className="inline-block w-full max-w-4xl p-0 my-6 overflow-hidden text-left align-middle transition-all transform bg-gray-800 shadow-lg rounded border border-gray-700">
-            {/* Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-700 bg-gray-800">
-              <div>
-                <h3 className="text-xl font-semibold text-green-300">
-                  Select Graph
-                </h3>
-                <p className="text-sm text-gray-400 mt-1">Choose your graph to begin</p>
+          {/* Enhanced Modal with better styling */}
+          <div className="inline-block w-full max-w-4xl p-0 my-6 overflow-hidden text-left align-middle transition-all transform bg-gradient-to-br from-gray-800 via-gray-800 to-gray-900 shadow-2xl rounded-2xl border border-gray-600/50 animate-in slide-in-from-bottom-4 duration-300 relative">
+            {/* Gradient accent line at top */}
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-green-500 to-purple-500"></div>
+            
+            {/* Enhanced Header with gradient background */}
+            <div className="flex items-center justify-between px-6 py-5 border-b border-gray-600/50 bg-gradient-to-r from-gray-800/90 to-gray-900/90 backdrop-blur-sm">
+              <div className="flex items-center space-x-3">
+                <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
+                  <Folder className="h-5 w-5 text-white" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold bg-gradient-to-r from-white via-green-100 to-blue-100 bg-clip-text text-transparent">
+                    Select Graph
+                  </h3>
+                </div>
               </div>
               <button
                 onClick={onClose}
-                className="p-2 text-gray-400 hover:text-gray-300 hover:bg-gray-700 rounded transition-colors"
+                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110"
               >
-                <X className="h-6 w-6" />
+                <X className="h-5 w-5" />
               </button>
             </div>
 
             {/* Content */}
-            {availableGraphs.length > 0 ? (
-              <div className="p-4">
-                <div className="max-h-80 overflow-y-auto space-y-2" style={{scrollbarWidth: 'none', msOverflowStyle: 'none'}}>
+            <div className="px-8 pt-1 pb-8 space-y-4 relative">
+              {/* Subtle background pattern */}
+              <div className="absolute inset-0 opacity-5">
+                <div className="w-full h-full" style={{
+                  backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+                  backgroundSize: '20px 20px'
+                }}></div>
+              </div>
+              
+              <div className="relative z-10 mb-4">
+                <p className="text-lg font-medium text-gray-200 mb-2">Choose your graph to begin</p>
+                <p className="text-sm text-gray-400">Select from your available graphs</p>
+              </div>
+              
+              {availableGraphs.length > 0 ? (
+                <div className="relative z-10">
+                <div className="max-h-80 overflow-y-auto space-y-3 px-1" style={{scrollbarWidth: 'none', msOverflowStyle: 'none'}}>
                   <style>{`
                     div::-webkit-scrollbar {
                       display: none;
@@ -211,12 +242,26 @@ export function GraphSelectionModal({ isOpen, onClose }: GraphSelectionModalProp
                     />
                   ))}
                 </div>
-              </div>
-            ) : (
-              <div className="p-8">
-                <div className="text-center max-w-md mx-auto">
+                </div>
+              ) : (
+                <div className="py-12 relative z-10">
+                  {/* Tropical lagoon light scattering background animation - zen mode for empty state */}
+                  <div className="lagoon-caustics absolute inset-0 opacity-30">
+                    <div className="caustic-layer caustic-layer-1"></div>
+                    <div className="caustic-layer caustic-layer-2"></div>
+                    <div className="caustic-layer caustic-layer-3"></div>
+                    <div className="caustic-layer caustic-layer-4"></div>
+                    <div className="caustic-layer caustic-layer-5"></div>
+                    <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+                    <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+                    <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+                    <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+                    <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+                  </div>
+
+                <div className="text-center max-w-md mx-auto relative z-20">
                   {/* Icon */}
-                  <div className="mx-auto mb-6 w-16 h-16 bg-gray-700 rounded flex items-center justify-center">
+                  <div className="mx-auto mb-6 w-16 h-16 bg-gray-700/80 backdrop-blur-sm rounded flex items-center justify-center border border-gray-500/30">
                     <Folder className="h-8 w-8 text-gray-400" />
                   </div>
 
@@ -233,7 +278,7 @@ export function GraphSelectionModal({ isOpen, onClose }: GraphSelectionModalProp
                   {/* CTA Button */}
                   <button
                     onClick={handleCreateGraph}
-                    className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded font-medium transition-colors"
+                    className="px-8 py-4 bg-gradient-to-r from-green-600 via-emerald-600 to-blue-600 text-white rounded-xl hover:from-green-500 hover:via-emerald-500 hover:to-blue-500 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-105 transform border border-green-400/30 font-semibold backdrop-blur-sm"
                   >
                     <div className="flex items-center justify-center">
                       <Plus className="h-4 w-4 mr-2" />
@@ -241,8 +286,9 @@ export function GraphSelectionModal({ isOpen, onClose }: GraphSelectionModalProp
                     </div>
                   </button>
                 </div>
-              </div>
-            )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/web/src/components/GraphSelector.tsx b/packages/web/src/components/GraphSelector.tsx
index c7b9557f..f4b9c1ee 100644
--- a/packages/web/src/components/GraphSelector.tsx
+++ b/packages/web/src/components/GraphSelector.tsx
@@ -1,16 +1,25 @@
 import { useState, useRef, useEffect } from 'react';
-import { ChevronDown, Plus, Folder, FolderOpen, FileText, Share2, Eye, Edit3, Crown } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Plus, Folder, FolderOpen, FileText, Share2, Eye, Edit3, Crown, Trash2, FolderPlus, ChevronRight, Users, Bot, Settings, Zap } from 'lucide-react';
 import { useQuery } from '@apollo/client';
 import { useGraph } from '../contexts/GraphContext';
 import { useAuth } from '../contexts/AuthContext';
 import { GET_WORK_ITEMS, GET_EDGES } from '../lib/queries';
 
-export function GraphSelector() {
+interface GraphSelectorProps {
+  onCreateGraph?: () => void;
+  onEditGraph?: (graph: any) => void;
+  onDeleteGraph?: (graph: any) => void;
+}
+
+export function GraphSelector({ onCreateGraph, onEditGraph, onDeleteGraph }: GraphSelectorProps) {
   const { currentGraph, graphHierarchy, selectGraph } = useGraph();
-  const { currentTeam } = useAuth();
+  const { currentTeam, currentUser } = useAuth();
   const [isOpen, setIsOpen] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set(['team', 'personal']));
+  const [buttonPosition, setButtonPosition] = useState<{ top: number; left: number; width: number } | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   // Get real-time counts for current graph
   const { data: workItemsData } = useQuery(GET_WORK_ITEMS, {
@@ -58,17 +67,27 @@ export function GraphSelector() {
     }
   };
 
-  // Close dropdown when clicking outside (EXACT same pattern as UserSelector)
+  // Close dropdown when clicking outside - Updated for portal
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
+      const target = event.target as Node;
+      
+      // Check if click is outside both the button and the portal dropdown
+      if (buttonRef.current && !buttonRef.current.contains(target)) {
+        // For portal, we need to check if the click is inside any dropdown element
+        const dropdownElement = document.querySelector('[style*="z-index: 999999999"]');
+        if (!dropdownElement || !dropdownElement.contains(target)) {
+          setIsOpen(false);
+        }
       }
     }
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return undefined;
+  }, [isOpen]);
 
   // Graph selection handler - DON'T close dropdown automatically
   const handleGraphSelect = (graphId: string) => {
@@ -76,6 +95,26 @@ export function GraphSelector() {
     // setIsOpen(false); // Commented out - let it stay open
   };
 
+  // Calculate button position for portal
+  const updateButtonPosition = () => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setButtonPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  };
+
+  // Toggle dropdown and calculate position
+  const toggleDropdown = () => {
+    if (!isOpen) {
+      updateButtonPosition();
+    }
+    setIsOpen(!isOpen);
+  };
+
   const getGraphTypeColor = (type: string) => {
     switch (type) {
       case 'PROJECT': return 'text-blue-400 bg-gradient-to-br from-blue-500/20 to-blue-600/30 border border-blue-400/20';
@@ -96,6 +135,71 @@ export function GraphSelector() {
     }
   };
 
+  // Organize graphs into folder structure
+  const organizeGraphsIntoFolders = () => {
+    const folders = {
+      team: [] as any[],
+      personal: [] as any[],
+      system: [] as any[],
+      ai: [] as any[],
+      templates: [] as any[]
+    };
+
+    graphHierarchy.forEach(graph => {
+      // Determine folder based on graph properties
+      if (graph.type === 'TEMPLATE') {
+        folders.templates.push(graph);
+      } else if (graph.permissions === 'OWNER' && !graph.isShared) {
+        folders.personal.push(graph);
+      } else if (graph.isShared) {
+        folders.team.push(graph);
+      } else if (graph.name.toLowerCase().includes('ai') || graph.name.toLowerCase().includes('bot')) {
+        folders.ai.push(graph);
+      } else if (graph.name.toLowerCase().includes('system') || graph.name.toLowerCase().includes('auto')) {
+        folders.system.push(graph);
+      } else {
+        folders.personal.push(graph);
+      }
+    });
+
+    return folders;
+  };
+
+  const folders = organizeGraphsIntoFolders();
+
+  const toggleFolder = (folderId: string) => {
+    const newExpanded = new Set(expandedFolders);
+    if (newExpanded.has(folderId)) {
+      newExpanded.delete(folderId);
+    } else {
+      newExpanded.add(folderId);
+    }
+    setExpandedFolders(newExpanded);
+  };
+
+  const getFolderIcon = (folderId: string) => {
+    const isExpanded = expandedFolders.has(folderId);
+    switch (folderId) {
+      case 'team': return <Users className={`h-4 w-4 ${isExpanded ? 'text-blue-400' : 'text-gray-400'}`} />;
+      case 'personal': return <Folder className={`h-4 w-4 ${isExpanded ? 'text-green-400' : 'text-gray-400'}`} />;
+      case 'system': return <Settings className={`h-4 w-4 ${isExpanded ? 'text-orange-400' : 'text-gray-400'}`} />;
+      case 'ai': return <Bot className={`h-4 w-4 ${isExpanded ? 'text-purple-400' : 'text-gray-400'}`} />;
+      case 'templates': return <FileText className={`h-4 w-4 ${isExpanded ? 'text-amber-400' : 'text-gray-400'}`} />;
+      default: return <Folder className={`h-4 w-4 ${isExpanded ? 'text-gray-300' : 'text-gray-400'}`} />;
+    }
+  };
+
+  const getFolderName = (folderId: string) => {
+    switch (folderId) {
+      case 'team': return `Team (${currentTeam?.name || 'Shared'})`;
+      case 'personal': return 'Personal';
+      case 'system': return 'System';
+      case 'ai': return 'AI Generated';
+      case 'templates': return 'Templates';
+      default: return folderId;
+    }
+  };
+
   // Show no graphs available if we have no available graphs at all
   if (graphHierarchy.length === 0 || !currentGraph) {
     return (
@@ -112,7 +216,8 @@ export function GraphSelector() {
     <div className="relative" ref={dropdownRef}>
       {/* Graph selector button (EXACT same pattern as UserSelector) */}
       <button
-        onClick={() => setIsOpen(!isOpen)}
+        ref={buttonRef}
+        onClick={toggleDropdown}
         className="flex items-center space-x-3 w-full p-3 text-left hover:bg-gray-700/80 rounded-xl transition-all duration-200 hover:scale-[1.02] border border-gray-600/30 hover:border-gray-500/50 shadow-lg hover:shadow-xl backdrop-blur-sm bg-gray-800/50"
       >
         <div className="flex-shrink-0">
@@ -133,13 +238,36 @@ export function GraphSelector() {
         <ChevronDown className={`h-4 w-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
-      {/* Dropdown menu (EXACT same pattern as UserSelector) */}
-      {isOpen && (
-        <div className="absolute bottom-full left-0 right-0 mb-2 bg-gray-800/95 backdrop-blur-lg border border-gray-600/60 rounded-xl shadow-2xl z-50 max-h-96 overflow-hidden">
-          {/* Header */}
+      {/* Dropdown menu with folder structure - Portal based for proper z-index */}
+      {isOpen && buttonPosition && createPortal(
+        <div 
+          className="bg-gray-800/95 backdrop-blur-lg border border-gray-600/60 rounded-xl shadow-2xl max-h-96 overflow-hidden min-w-80"
+          style={{
+            position: 'fixed',
+            top: buttonPosition.top + 8,
+            left: buttonPosition.left,
+            width: Math.max(buttonPosition.width, 320),
+            zIndex: '999999999',
+            pointerEvents: 'all'
+          }}
+        >
+          {/* Header with Create Button */}
           <div className="flex items-center justify-between p-4 border-b border-gray-600/60 bg-gradient-to-r from-emerald-500/10 to-green-500/10 backdrop-blur-sm">
-            <span className="text-sm font-semibold bg-gradient-to-r from-emerald-400 to-green-300 bg-clip-text text-transparent">Select Graph</span>
+            <span className="text-sm font-semibold bg-gradient-to-r from-emerald-400 to-green-300 bg-clip-text text-transparent">Graph Manager</span>
             <div className="flex items-center gap-2">
+              {onCreateGraph && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onCreateGraph();
+                    setIsOpen(false);
+                  }}
+                  className="p-1.5 text-gray-400 hover:text-green-300 hover:bg-gray-700/50 rounded transition-all duration-200"
+                  title="Create New Graph"
+                >
+                  <FolderPlus className="h-4 w-4" />
+                </button>
+              )}
               <button
                 onClick={() => setIsOpen(false)}
                 className="p-1.5 text-gray-400 hover:bg-gray-700 rounded transition-colors"
@@ -150,42 +278,106 @@ export function GraphSelector() {
             </div>
           </div>
 
-          {/* Graph List (EXACT same pattern as UserSelector) */}
-          <div className="max-h-64 overflow-y-auto">
+          {/* Folder Structure */}
+          <div className="max-h-80 overflow-y-auto">
             <div className="p-2">
-              {graphHierarchy.length > 0 ? (
-                graphHierarchy.map((graph) => (
-                  <button
-                    key={graph.id}
-                    onClick={() => handleGraphSelect(graph.id)}
-                    className={`w-full flex items-center space-x-3 p-3 rounded-xl text-left transition-all duration-200 ${
-                      graph.id === currentGraph.id
-                        ? 'bg-gradient-to-r from-emerald-500/20 to-green-500/20 text-emerald-300 border border-emerald-400/30 shadow-md'
-                        : 'hover:bg-gray-700/60 text-gray-300 hover:border-gray-600/40 border border-transparent hover:shadow-md hover:scale-[1.02]'
-                    }`}
-                  >
-                    <div className="flex-shrink-0">
-                      <div className={`w-6 h-6 rounded-lg flex items-center justify-center ${getGraphTypeColor(graph.type)}`}>
-                        {getGraphTypeIcon(graph.type)}
-                      </div>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium truncate">{graph.name}</span>
-                      </div>
-                      <div className="flex items-center gap-2 text-xs text-gray-400">
-                        <span>{graph.id === currentGraph.id ? actualNodeCount : (graph.nodeCount || 0)} node{(graph.id === currentGraph.id ? actualNodeCount : (graph.nodeCount || 0)) !== 1 ? 's' : ''}, {graph.id === currentGraph.id ? actualEdgeCount : (graph.edgeCount || 0)} connection{(graph.id === currentGraph.id ? actualEdgeCount : (graph.edgeCount || 0)) !== 1 ? 's' : ''}</span>
+              {Object.entries(folders).map(([folderId, graphs]) => {
+                if (graphs.length === 0) return null;
+                
+                const isExpanded = expandedFolders.has(folderId);
+                
+                return (
+                  <div key={folderId} className="mb-1">
+                    {/* Folder Header */}
+                    <button
+                      onClick={() => toggleFolder(folderId)}
+                      className="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700/50 transition-colors text-left"
+                    >
+                      <ChevronRight className={`h-3 w-3 text-gray-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
+                      {getFolderIcon(folderId)}
+                      <span className="text-sm font-medium text-gray-300">{getFolderName(folderId)}</span>
+                      <span className="text-xs text-gray-500">({graphs.length})</span>
+                    </button>
+
+                    {/* Folder Contents */}
+                    {isExpanded && (
+                      <div className="ml-4 space-y-1">
+                        {graphs.map((graph) => (
+                          <div key={graph.id} className="flex items-center group">
+                            <button
+                              onClick={() => handleGraphSelect(graph.id)}
+                              className={`flex-1 flex items-center space-x-3 p-2 rounded-lg text-left transition-all duration-200 ${
+                                graph.id === currentGraph?.id
+                                  ? 'bg-gradient-to-r from-emerald-500/20 to-green-500/20 text-emerald-300 border border-emerald-400/30'
+                                  : 'hover:bg-gray-700/40 text-gray-300'
+                              }`}
+                            >
+                              <div className="flex-shrink-0">
+                                <div className={`w-5 h-5 rounded flex items-center justify-center ${getGraphTypeColor(graph.type)}`}>
+                                  {getGraphTypeIcon(graph.type)}
+                                </div>
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="text-sm font-medium truncate">{graph.name}</div>
+                                <div className="text-xs text-gray-400">
+                                  {graph.id === currentGraph?.id ? actualNodeCount : (graph.nodeCount || 0)} nodes, {graph.id === currentGraph?.id ? actualEdgeCount : (graph.edgeCount || 0)} edges
+                                </div>
+                              </div>
+                              {graph.id === currentGraph?.id && (
+                                <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+                              )}
+                            </button>
+                            
+                            {/* Per-Graph Actions */}
+                            <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity ml-2">
+                              {onEditGraph && (
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onEditGraph(graph);
+                                  }}
+                                  className="p-1 text-gray-400 hover:text-blue-300 hover:bg-gray-600/50 rounded transition-colors"
+                                  title="Edit Graph"
+                                >
+                                  <Edit3 className="h-3 w-3" />
+                                </button>
+                              )}
+                              {onDeleteGraph && (
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onDeleteGraph(graph);
+                                  }}
+                                  className="p-1 text-gray-400 hover:text-red-300 hover:bg-gray-600/50 rounded transition-colors"
+                                  title="Delete Graph"
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        ))}
                       </div>
-                    </div>
-                    {graph.id === currentGraph.id && (
-                      <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                     )}
-                  </button>
-                ))
-              ) : (
+                  </div>
+                );
+              })}
+
+              {graphHierarchy.length === 0 && (
                 <div className="p-8 text-center text-gray-500">
-                  <Plus className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                  <p className="text-sm">No graphs found</p>
+                  <FolderPlus className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                  <p className="text-sm mb-3">No graphs found</p>
+                  {onCreateGraph && (
+                    <button
+                      onClick={() => {
+                        onCreateGraph();
+                        setIsOpen(false);
+                      }}
+                      className="px-3 py-2 bg-green-600/20 hover:bg-green-600/30 text-green-300 rounded-lg text-sm transition-colors"
+                    >
+                      Create First Graph
+                    </button>
+                  )}
                 </div>
               )}
             </div>
@@ -193,13 +385,15 @@ export function GraphSelector() {
 
           {/* Footer */}
           {graphHierarchy.length > 0 && (
-            <div className="border-t border-gray-600 p-2 bg-gray-700/50">
-              <div className="text-xs text-gray-400 text-center">
-                {graphHierarchy.length} graph{graphHierarchy.length !== 1 ? 's' : ''} available
+            <div className="border-t border-gray-600 p-3 bg-gray-700/50">
+              <div className="flex items-center justify-between text-xs text-gray-400">
+                <span>{graphHierarchy.length} graph{graphHierarchy.length !== 1 ? 's' : ''} total</span>
+                <span>Organized by: Team, Personal, AI, System, Templates</span>
               </div>
             </div>
           )}
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );
diff --git a/packages/web/src/components/GraphVisualization.tsx b/packages/web/src/components/GraphVisualization.tsx
index 36cb15ad..36ab53ad 100644
--- a/packages/web/src/components/GraphVisualization.tsx
+++ b/packages/web/src/components/GraphVisualization.tsx
@@ -12,10 +12,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityComp: number;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
+  priority: number;
   tags?: string[];
   dueDate?: string;
   assignedTo?: string;
@@ -228,7 +225,7 @@ export function GraphVisualization() {
     // Add node circles
     nodeGroup.append('circle')
       .attr('class', 'node-circle')
-      .attr('r', d => 15 + (d.priorityComp || 0) * 15) // Size based on priority
+      .attr('r', d => 15 + (d.priority || 0) * 15) // Size based on priority
       .attr('fill', d => {
         // Lighter, more vibrant colors
         const colors: Record<string, string> = {
@@ -279,8 +276,8 @@ export function GraphVisualization() {
       .attr('r', 3)
       .attr('cy', 15)
       .attr('fill', d => {
-        if (d.priorityComp > 0.7) return '#dc2626';
-        if (d.priorityComp > 0.4) return '#d97706';
+        if (d.priority > 0.7) return '#dc2626';
+        if (d.priority > 0.4) return '#d97706';
         return '#059669';
       });
 
@@ -290,13 +287,13 @@ export function GraphVisualization() {
         d3.select(this).select('circle.node-circle')
           .transition()
           .duration(200)
-          .attr('r', (15 + (d.priorityComp || 0) * 15) * 1.2);
+          .attr('r', (15 + (d.priority || 0) * 15) * 1.2);
       })
       .on('mouseleave', function(_event, d) {
         d3.select(this).select('circle.node-circle')
           .transition()
           .duration(200)
-          .attr('r', 15 + (d.priorityComp || 0) * 15);
+          .attr('r', 15 + (d.priority || 0) * 15);
       });
 
     // Center the view
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index d42b1440..795bbfaf 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import ReactDOM from 'react-dom/client';
 import * as d3 from 'd3';
-import { Link2, Edit3, Trash2, Folder, FolderOpen, Plus, FileText, Settings, Maximize2, ArrowLeft, X, GitBranch, Minus, Unlink } from 'lucide-react';
+import { Link2, Edit3, Trash2, Folder, FolderOpen, Plus, FileText, Settings, Maximize2, ArrowLeft, X, GitBranch, Minus, Unlink, Crosshair } from 'lucide-react';
 import {
   getPriorityIconElement,
   getStatusIconElement,
@@ -18,7 +18,7 @@ import {
   ListTodo,
   Target
 } from '../constants/workItemConstants';
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation, useApolloClient, gql } from '@apollo/client';
 import { useGraph } from '../contexts/GraphContext';
 import { useAuth } from '../contexts/AuthContext';
 import { useNotifications } from '../contexts/NotificationContext';
@@ -27,8 +27,8 @@ import { GET_WORK_ITEMS, GET_EDGES, CREATE_EDGE, UPDATE_EDGE, DELETE_EDGE, CREAT
 import { validateGraphData, getValidationSummary, ValidationResult } from '../utils/graphDataValidation';
 import { DEFAULT_NODE_CONFIG } from '../constants/workItemConstants';
 
-import { EditNodeModal } from './EditNodeModal';
 import { DeleteNodeModal } from './DeleteNodeModal';
+import { RelationshipEditorWindow } from './RelationshipEditorWindow';
 import { CreateNodeModal } from './CreateNodeModal';
 import { CreateGraphModal } from './CreateGraphModal';
 import { GraphSelectionModal } from './GraphSelectionModal';
@@ -40,6 +40,20 @@ import { NodeDetailsModal } from './NodeDetailsModal';
 import { WorkItem, WorkItemEdge } from '../types/graph';
 import { RelationshipType, RELATIONSHIP_OPTIONS, getRelationshipConfig } from '../constants/workItemConstants';
 
+// LOD thresholds for different zoom levels
+const LOD_THRESHOLDS = {
+  VERY_FAR: 0.1,
+  FAR: 0.3,
+  MEDIUM: 0.6,
+  CLOSE: 1.0,
+};
+
+// Utility functions
+const getSmoothedOpacity = (scale: number, threshold: number, fadeRange: number = 0.2) => {
+  if (scale >= threshold + fadeRange) return 1;
+  if (scale <= threshold - fadeRange) return 0;
+  return (scale - (threshold - fadeRange)) / (fadeRange * 2);
+};
 
 interface NodeMenuState {
   node: WorkItem | null;
@@ -53,7 +67,11 @@ interface EdgeMenuState {
   visible: boolean;
 }
 
-export function InteractiveGraphVisualization() {
+interface InteractiveGraphVisualizationProps {
+  onResetLayout?: () => void;
+}
+
+export function InteractiveGraphVisualization({ onResetLayout }: InteractiveGraphVisualizationProps = {}) {
   const svgRef = useRef<SVGSVGElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const { currentGraph, availableGraphs } = useGraph();
@@ -62,7 +80,7 @@ export function InteractiveGraphVisualization() {
   const navigate = useNavigate();
   const location = useLocation();
   
-  const isFullscreen = location.pathname === '/graph';
+  // Fullscreen mode abandoned - keeping single view mode
 
   // Prevent body scroll when graph view is active
   useEffect(() => {
@@ -178,8 +196,39 @@ export function InteractiveGraphVisualization() {
 
   // Mutation for updating work item positions
   const [updateWorkItemMutation] = useMutation(UPDATE_WORK_ITEM, {
-    // Don't refetch - we want immediate UI updates without waiting for server
-    errorPolicy: 'all'
+    refetchQueries: [
+      { 
+        query: GET_WORK_ITEMS,
+        variables: currentGraph ? {
+          where: {
+            graph: {
+              id: currentGraph.id
+            }
+          }
+        } : { where: {} }
+      },
+      { 
+        query: GET_EDGES,
+        variables: currentGraph ? {
+          where: {
+            source: {
+              graph: {
+                id: currentGraph.id
+              }
+            }
+          }
+        } : { where: {} }
+      }
+    ],
+    awaitRefetchQueries: true, // Wait for refetch to complete
+    errorPolicy: 'all',
+    onCompleted: (data) => {
+      console.log('[Graph Debug] Node update completed successfully', data);
+      // Don't force reinitialization - let data updates flow through naturally
+    },
+    onError: (error) => {
+      console.error('[Graph Debug] Node update failed:', error);
+    }
   });
   
   const [nodeMenu, setNodeMenu] = useState<NodeMenuState>({ node: null, position: { x: 0, y: 0 }, visible: false });
@@ -189,7 +238,6 @@ export function InteractiveGraphVisualization() {
   const [selectedRelationType, setSelectedRelationType] = useState<RelationshipType>('DEFAULT_EDGE');
   const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
   const [showDataHealth, setShowDataHealth] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showCreateNodeModal, setShowCreateNodeModal] = useState(false);
   const [showNodeDetailsModal, setShowNodeDetailsModal] = useState(false);
@@ -201,46 +249,73 @@ export function InteractiveGraphVisualization() {
   const [showUpdateGraphModal, setShowUpdateGraphModal] = useState(false);
   const [showDeleteGraphModal, setShowDeleteGraphModal] = useState(false);
   const [selectedNode, setSelectedNode] = useState<WorkItem | null>(null);
+  const lastSelectedNodeRef = useRef<any>(null); // Track last selected node for centering
   const [selectedEdge, setSelectedEdge] = useState<WorkItemEdge | null>(null);
-  const [showEdgeDetails, setShowEdgeDetails] = useState(false);
-  const [edgeDetailsPosition, setEdgeDetailsPosition] = useState<{ x: number; y: number } | null>(null);
   const [createNodePosition, setCreateNodePosition] = useState<{ x: number; y: number; z: number } | undefined>(undefined);
   const [currentTransform, setCurrentTransform] = useState({ x: 0, y: 0, scale: 1 });
   const [editingEdge, setEditingEdge] = useState<{ edge: WorkItemEdge; position: { x: number; y: number } } | null>(null);
-  const [dropdownPosition, setDropdownPosition] = useState<{ left: number; top: number } | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
   const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number; graphX: number; graphY: number } | null>(null);
+  const [isFlippingEdge, setIsFlippingEdge] = useState(false);
+  const [showRelationshipWindow, setShowRelationshipWindow] = useState(false);
+  const [selectedNodes, setSelectedNodes] = useState<Set<string>>(new Set());
   
-  // Intelligent dropdown positioning - detect when off-screen and slide into view
+  
+  // Handle dragging for relationship selector
   useEffect(() => {
-    if (editingEdge && dropdownRef.current) {
-      const dropdown = dropdownRef.current;
-      const rect = dropdown.getBoundingClientRect();
-      const margin = 20;
-      
-      let newLeft = editingEdge.position.x - rect.width / 2;
-      let newTop = editingEdge.position.y + 10;
-      
-      // Check horizontal boundaries
-      if (rect.right > window.innerWidth - margin) {
-        newLeft = window.innerWidth - rect.width - margin;
-      } else if (rect.left < margin) {
-        newLeft = margin;
-      }
-      
-      // Check vertical boundaries
-      if (rect.bottom > window.innerHeight - margin) {
-        newTop = editingEdge.position.y - rect.height - 10;
-      } else if (newTop < margin) {
-        newTop = margin;
+    let animationFrame: number | null = null;
+    
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging && editingEdge) {
+        if (animationFrame) {
+          cancelAnimationFrame(animationFrame);
+        }
+        
+        animationFrame = requestAnimationFrame(() => {
+          const newX = e.clientX - dragStart.x;
+          const newY = e.clientY - dragStart.y;
+          setDragOffset({ x: newX, y: newY });
+        });
       }
-      
-      // Gradually slide into position if off-screen
-      if (Math.abs(newLeft - rect.left) > 5 || Math.abs(newTop - rect.top) > 5) {
-        setDropdownPosition({ left: newLeft, top: newTop });
+    };
+
+    const handleMouseUp = () => {
+      if (isDragging) {
+        setIsDragging(false);
+        if (animationFrame) {
+          cancelAnimationFrame(animationFrame);
+        }
       }
+    };
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'grabbing';
+      
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        if (animationFrame) {
+          cancelAnimationFrame(animationFrame);
+        }
+      };
     }
-  }, [editingEdge]);
+    
+    // Return cleanup function for when not dragging
+    return () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [isDragging, dragStart, editingEdge]);
+
 
   // Helper function to apply glow effect immediately when node is clicked
   const applyNodeGlowImmediately = useCallback((node: WorkItem) => {
@@ -364,6 +439,77 @@ export function InteractiveGraphVisualization() {
         .style('filter', `url(#${filterId})`);
     }
     
+    // Apply glow effects to all selected nodes (for multi-select)
+    if (selectedNodes.size > 0) {
+      const nodeIdsArray = Array.from(selectedNodes);
+      
+      // Group nodes by type for efficient filter creation
+      const nodesByType = new Map<string, string[]>();
+      
+      svg.selectAll('.node-bg')
+        .filter((d: any) => d && nodeIdsArray.includes(d.id))
+        .each((d: any) => {
+          const nodeType = d.type.toLowerCase();
+          if (!nodesByType.has(nodeType)) {
+            nodesByType.set(nodeType, []);
+          }
+          nodesByType.get(nodeType)!.push(d.id);
+        });
+      
+      // Create glow filters for each node type that has selected nodes
+      nodesByType.forEach((nodeIds, nodeType) => {
+        const nodeTypeConfig = getTypeConfig(nodeType as WorkItemType);
+        const nodeColor = nodeTypeConfig.hexColor;
+        const filterId = `selected-node-glow-${nodeType}`;
+        
+        // Remove existing filter and create new one
+        defs.select(`#${filterId}`).remove();
+        
+        const nodeGlowFilter = defs.append('filter')
+          .attr('id', filterId)
+          .attr('x', '-100%')
+          .attr('y', '-100%')
+          .attr('width', '300%')
+          .attr('height', '300%');
+        
+        // Convert hex to RGB values
+        const hexToRgb = (hex: string) => {
+          const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+          return result ? {
+            r: parseInt(result[1], 16) / 255,
+            g: parseInt(result[2], 16) / 255,
+            b: parseInt(result[3], 16) / 255
+          } : { r: 0.06, g: 0.73, b: 0.51 }; // fallback green
+        };
+        
+        const rgb = hexToRgb(nodeColor);
+        nodeGlowFilter.append('feColorMatrix')
+          .attr('in', 'SourceGraphic')
+          .attr('type', 'matrix')
+          .attr('values', `0 0 0 0 ${rgb.r} 0 0 0 0 ${rgb.g} 0 0 0 0 ${rgb.b} 0 0 0 1 0`);
+        
+        const blur = nodeGlowFilter.append('feGaussianBlur')
+          .attr('stdDeviation', '8')  // Slightly smaller than dialog glow
+          .attr('result', 'coloredBlur');
+        
+        // Subtle pulsing animation for selected nodes
+        blur.append('animate')
+          .attr('attributeName', 'stdDeviation')
+          .attr('values', '6;12;6')
+          .attr('dur', '3s')
+          .attr('repeatCount', 'indefinite');
+        
+        const feMerge = nodeGlowFilter.append('feMerge');
+        feMerge.append('feMergeNode').attr('in', 'coloredBlur');
+        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+        
+        // Apply the glow to nodes of this type that are selected
+        svg.selectAll('.node-bg')
+          .filter((d: any) => d && nodeIds.includes(d.id))
+          .style('filter', `url(#${filterId})`);
+      });
+    }
+    
     // Apply relationship-specific glow to active edge if editingEdge is visible
     if (editingEdge && editingEdge.edge) {
       const relationshipConfig = getRelationshipConfig(editingEdge.edge.type as RelationshipType);
@@ -415,58 +561,14 @@ export function InteractiveGraphVisualization() {
         .attr('stroke-width', 12); // Also make the edge thicker
     }
     
-    // Also apply relationship-specific glow to edge when showing edge details
-    if (showEdgeDetails && selectedEdge) {
-      const relationshipConfig = getRelationshipConfig(selectedEdge.type as RelationshipType);
-      const edgeColor = relationshipConfig.hexColor;
-      const edgeFilterId = `edge-glow-${selectedEdge.type.toLowerCase()}`;
-      
-      // Remove existing filter and create new one with relationship color
-      defs.select(`#${edgeFilterId}`).remove();
-      
-      const edgeGlowFilter = defs.append('filter')
-        .attr('id', edgeFilterId)
-        .attr('x', '-150%')
-        .attr('y', '-150%')
-        .attr('width', '400%')
-        .attr('height', '400%');
-      
-      const hexToRgb = (hex: string) => {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? {
-          r: parseInt(result[1], 16) / 255,
-          g: parseInt(result[2], 16) / 255,
-          b: parseInt(result[3], 16) / 255
-        } : { r: 0.06, g: 0.73, b: 0.51 }; // fallback green
-      };
-      
-      const rgb = hexToRgb(edgeColor);
-      edgeGlowFilter.append('feColorMatrix')
-        .attr('in', 'SourceGraphic')
-        .attr('type', 'matrix')
-        .attr('values', `0 0 0 0 ${rgb.r} 0 0 0 0 ${rgb.g} 0 0 0 0 ${rgb.b} 0 0 0 1 0`);
-      
-      const edgeBlur = edgeGlowFilter.append('feGaussianBlur')
-        .attr('stdDeviation', '25')
-        .attr('result', 'coloredBlur');
-      
-      edgeBlur.append('animate')
-        .attr('attributeName', 'stdDeviation')
-        .attr('values', '15;35;15')
-        .attr('dur', '1.5s')
-        .attr('repeatCount', 'indefinite');
-      
-      const edgeFeMerge = edgeGlowFilter.append('feMerge');
-      edgeFeMerge.append('feMergeNode').attr('in', 'coloredBlur');
-      edgeFeMerge.append('feMergeNode').attr('in', 'SourceGraphic');
-      
-      svg.selectAll('.edge')
-        .filter((d: any) => d && d.id === selectedEdge.id)
-        .style('filter', `url(#${edgeFilterId})`)
-        .attr('stroke-width', 12); // Same thickness as relationship editing
-    }
     
-  }, [nodeMenu.visible, nodeMenu.node?.id, editingEdge?.edge?.id, showEdgeDetails, selectedEdge?.id]);
+  }, [nodeMenu.visible, nodeMenu.node?.id, editingEdge?.edge?.id, selectedEdge?.id, selectedNodes]);
+  
+  // Auto-collapse relationship panel when no items are selected
+  useEffect(() => {
+    // Auto-hide relationship window when no items are selected (optional)
+    // Window will be controlled manually by user interactions
+  }, [selectedNodes.size, editingEdge]);
   
   // Level of detail thresholds
   const LOD_THRESHOLDS = {
@@ -517,13 +619,12 @@ export function InteractiveGraphVisualization() {
       default: return 'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z'; // Circle (fallback)
     }
   };
-  const [showLegend, setShowLegend] = useState(false);
   const [showGraphPanel, setShowGraphPanel] = useState(false);
   const [nodeCounter, setNodeCounter] = useState(1);
   
 
   // Calculate dynamic positioning for panels and minimized buttons to avoid overlap
-  const getPanelPosition = (panelType: 'graph' | 'legend' | 'create') => {
+  const getPanelPosition = (panelType: 'graph' | 'create') => {
     const graphPanelHeight = 295; // Height of expanded graph panel
     const buttonHeight = 48; // Height of minimized buttons (h-12 = 48px)
     const compactSpacing = 12; // Spacing when panel is minimized
@@ -542,23 +643,6 @@ export function InteractiveGraphVisualization() {
         topOffset += buttonHeight + compactSpacing;
       }
       
-      return { top: `${topOffset}px` };
-    } else if (panelType === 'legend') {
-      // Legend panel positioning depends on graph panel AND create button states
-      let topOffset = 20; // Start position
-      
-      // Add graph panel height/button
-      if (showGraphPanel) {
-        topOffset += graphPanelHeight + expandedSpacing;
-      } else {
-        topOffset += buttonHeight + compactSpacing;
-      }
-      
-      // Add create button height (only if not in empty state)
-      if (!showEmptyStateOverlay) {
-        topOffset += buttonHeight + compactSpacing;
-      }
-      
       return { top: `${topOffset}px` };
     }
     
@@ -642,6 +726,9 @@ export function InteractiveGraphVisualization() {
     }
   });
 
+  // Apollo client for direct mutations
+  const client = useApolloClient();
+
   const [deleteEdgeMutation] = useMutation(DELETE_EDGE, {
     refetchQueries: [
       // Refetch all edges for graph visualization (matches ConnectNodeModal)
@@ -716,6 +803,15 @@ export function InteractiveGraphVisualization() {
         setNodeMenu(prev => ({ ...prev, visible: false }));
         setEdgeMenu(prev => ({ ...prev, visible: false }));
       }
+      
+      // Manual text refresh shortcut (R key)
+      if (event.key === 'r' || event.key === 'R') {
+        if (!event.ctrlKey && !event.metaKey && !event.altKey) { // Only plain R key
+          event.preventDefault();
+          refreshTextVisibility();
+          console.log('[Graph Debug] Manual text visibility refresh triggered');
+        }
+      }
     };
 
     document.addEventListener('click', handleClickOutside);
@@ -755,30 +851,42 @@ export function InteractiveGraphVisualization() {
         }).catch(() => {
           // Error handled by GraphQL
         });
-        initializeVisualization();
+        // Don't reinitialize - let refetchQueries handle the update
       }
       
       setIsConnecting(false);
       setConnectionSource(null);
     } else {
-      // Set selected node for the Node Actions panel
+      // Handle node selection with 2-item ring buffer
+      setSelectedNodes(prev => {
+        const newSet = new Set(prev);
+        
+        if (newSet.has(node.id)) {
+          // If clicking on already selected node, deselect it
+          newSet.delete(node.id);
+        } else {
+          // Add node to selection
+          newSet.add(node.id);
+          
+          // Implement 2-item ring buffer: remove oldest if we exceed 2
+          if (newSet.size > 2) {
+            const allNodes = Array.from(newSet);
+            const oldestNode = allNodes[0]; // Remove first (oldest) node
+            newSet.delete(oldestNode);
+          }
+        }
+        
+        return newSet;
+      });
+      
+      // Update single selected node for backwards compatibility
       setSelectedNode(node);
       
+      // Clear any selected edge when selecting nodes
+      setEditingEdge(null);
+      
       // Apply glow effect immediately without waiting for useEffect
       applyNodeGlowImmediately(node);
-      
-      // Show node menu
-      const containerRect = containerRef.current?.getBoundingClientRect();
-      if (containerRect) {
-        setNodeMenu({
-          node,
-          position: {
-            x: event.clientX - containerRect.left,
-            y: event.clientY - containerRect.top
-          },
-          visible: true
-        });
-      }
     }
   }, [isConnecting, connectionSource, selectedRelationType]);
 
@@ -786,6 +894,31 @@ export function InteractiveGraphVisualization() {
 
   const workItems: WorkItem[] = workItemsData?.workItems || [];
   
+  // Text refresh utility function
+  const refreshTextVisibility = useCallback(() => {
+    if (!d3 || !containerRef.current) return;
+    
+    const svg = d3.select(containerRef.current).select('svg');
+    const g = svg.select('.main-group');
+    
+    // Get current zoom scale
+    const currentTransform = d3.zoomTransform(svg.node() as Element);
+    const scale = currentTransform.k;
+    
+    // Force refresh all text elements with proper LOD opacities
+    setTimeout(() => {
+      (g.selectAll('.node-type-text') as any)
+        .style('visibility', 'visible')
+        .style('opacity', getSmoothedOpacity(scale, LOD_THRESHOLDS.FAR));
+      (g.selectAll('.node-title-text') as any)
+        .style('visibility', 'visible')
+        .style('opacity', getSmoothedOpacity(scale, LOD_THRESHOLDS.MEDIUM));
+      (g.selectAll('.node-description-text') as any)
+        .style('visibility', 'visible')
+        .style('opacity', getSmoothedOpacity(scale, LOD_THRESHOLDS.CLOSE));
+    }, 100); // Small delay to ensure DOM is updated
+  }, []);
+
   // Refetch data when graph changes
   useEffect(() => {
     if (currentGraph) {
@@ -794,6 +927,13 @@ export function InteractiveGraphVisualization() {
     }
   }, [currentGraph?.id, refetch, refetchEdges]);
   
+  // Refresh text visibility after data changes - DISABLED to prevent conflicts
+  // useEffect(() => {
+  //   if (workItems && edgesData?.edges) {
+  //     refreshTextVisibility();
+  //   }
+  // }, [workItems?.length, edgesData?.edges?.length, refreshTextVisibility]);
+  
   const workItemEdges: WorkItemEdge[] = [];
   
   // Add edges from Neo4j Edge entities
@@ -833,6 +973,25 @@ export function InteractiveGraphVisualization() {
   // Validate and sanitize data before D3 processing
   const currentValidationResult = validateGraphData(workItems, workItemEdges);
   
+  // Debug logging for data validation issues
+  useEffect(() => {
+    console.log('[Graph Debug] Data validation result:', {
+      totalWorkItems: workItems.length,
+      totalEdges: workItemEdges.length,
+      validNodes: currentValidationResult.validNodes.length,
+      validEdges: currentValidationResult.validEdges.length,
+      errors: currentValidationResult.errors,
+      warnings: currentValidationResult.warnings
+    });
+    
+    if (workItems.length > 0 && currentValidationResult.validNodes.length === 0) {
+      console.error('[Graph Debug] CRITICAL: All nodes filtered out by validation!', {
+        rawWorkItems: workItems,
+        validationResult: currentValidationResult
+      });
+    }
+  }, [workItems.length, currentValidationResult.validNodes.length, currentValidationResult.errors.length]);
+  
   // Update validation state
   useEffect(() => {
     setValidationResult(currentValidationResult);
@@ -863,17 +1022,19 @@ export function InteractiveGraphVisualization() {
         y = centerY + Math.sin(angle) * radius;
       }
       
-      return {
+      const node = {
         ...item,
         x,
         y,
-        priority: {
-          executive: item.priorityExec,
-          individual: item.priorityIndiv,
-          community: item.priorityComm,
-          computed: item.priorityComp
-        }
+        priority: item.priority || 0
       };
+      
+      // DEBUG: Log if this node is being reset to origin
+      if (x === 0 && y === 0 && item.positionX !== 0 && item.positionY !== 0) {
+        console.log('[CRITICAL DEBUG] Node position being reset to origin:', item.id, 'was at:', item.positionX, item.positionY);
+      }
+      
+      return node;
     })
   ];
 
@@ -975,29 +1136,83 @@ export function InteractiveGraphVisualization() {
     const container = containerRef.current;
     const svg = d3.select(svgRef.current);
     
-    // Clear previous content
-    svg.selectAll('*').remove();
+    // Check if this is the first initialization or we need to preserve existing structure
+    const existingMainGroup = svg.select('g.main-graph-group');
+    const isFirstInit = existingMainGroup.empty();
+    
+    // Store current zoom transform if preserving structure
+    let currentTransform = null;
+    if (!isFirstInit) {
+      currentTransform = d3.zoomTransform(svg.node()!);
+    }
     
-    // Clear any existing HTML label containers
-    d3.select(containerRef.current).selectAll('.node-labels-container').remove();
+    if (isFirstInit) {
+      // First initialization - clear everything and create core structure
+      svg.selectAll('*').remove();
+      d3.select(containerRef.current).selectAll('.node-labels-container').remove();
+    } else {
+      // Surgical update - only clear data elements, preserve core structure
+      existingMainGroup.selectAll('.nodes-group').remove();
+      existingMainGroup.selectAll('.edges-group').remove();
+      existingMainGroup.selectAll('.edge-labels-group').remove();
+      d3.select(containerRef.current).selectAll('.node-labels-container').remove();
+    }
 
     const width = container.clientWidth;
     const height = container.clientHeight;
 
     svg.attr('width', width).attr('height', height);
     
-    // Create zoom behavior for empty canvas
+    // Create zoom behavior for empty canvas with reversed wheel direction
     const zoom = d3.zoom<SVGSVGElement, unknown>()
       .scaleExtent([0.1, 3])
+      .wheelDelta((event: WheelEvent) => {
+        // Reverse wheel direction: negative deltaY for zoom in, positive for zoom out
+        return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * -1;
+      })
       .on('zoom', (event) => {
-        const g = svg.select('g');
+        const g = svg.select('g.main-graph-group');
         if (!g.empty()) {
           g.attr('transform', event.transform);
         }
       });
 
+    const g = isFirstInit ? svg.append('g').attr('class', 'main-graph-group') : existingMainGroup;
+    
+    // Create grid pattern and overlay (only on first init)
+    if (isFirstInit) {
+      // Add subtle grid pattern that moves with camera
+      const gridDefs = svg.append('defs');
+      const pattern = gridDefs.append('pattern')
+        .attr('id', 'grid-pattern')
+        .attr('width', 100)
+        .attr('height', 100)
+        .attr('patternUnits', 'userSpaceOnUse');
+      
+      // Grid lines
+      pattern.append('path')
+        .attr('d', 'M 100 0 L 0 0 0 100')
+        .attr('fill', 'none')
+        .attr('stroke', 'rgba(255, 255, 255, 0.03)')
+        .attr('stroke-width', 1);
+      
+      // Add grid overlay
+      const gridOverlay = g.append('rect')
+        .attr('class', 'grid-overlay')
+        .attr('x', -10000)
+        .attr('y', -10000)
+        .attr('width', 20000)
+        .attr('height', 20000)
+        .attr('fill', 'url(#grid-pattern)')
+        .attr('pointer-events', 'none');
+    }
+
     svg.call(zoom);
-    svg.append('g');
+    
+    // Restore zoom transform if this is a surgical update
+    if (!isFirstInit && currentTransform) {
+      svg.call(zoom.transform, currentTransform);
+    }
   }, []);
 
   // Inline node creation function
@@ -1030,10 +1245,7 @@ export function InteractiveGraphVisualization() {
         description: DEFAULT_NODE_CONFIG.description,
         type: DEFAULT_NODE_CONFIG.type,
         status: DEFAULT_NODE_CONFIG.status,
-        priorityExec: DEFAULT_NODE_CONFIG.priorityExec,
-        priorityIndiv: DEFAULT_NODE_CONFIG.priorityIndiv,
-        priorityComm: DEFAULT_NODE_CONFIG.priorityComm,
-        priorityComp: 0.0,
+        priority: 0.0,
         positionX: x,
         positionY: y,
         positionZ: 0,
@@ -1067,6 +1279,53 @@ export function InteractiveGraphVisualization() {
     }
   };
 
+  // Smart data update function - only reinitializes when necessary, preserves camera position
+  const updateVisualizationData = useCallback(() => {
+    if (!simulationRef.current || !svgRef.current) return;
+    
+    console.log('[Graph Debug] Checking for data changes...');
+    
+    const svg = d3.select(svgRef.current);
+    const simulation = simulationRef.current;
+    
+    // Get current data counts from DOM
+    const currentNodeCount = svg.select('.nodes-group').selectAll('.node').size();
+    const currentEdgeCount = svg.select('.edges-group').selectAll('.edge').size();
+    const newNodeCount = nodes.length;
+    const newEdgeCount = validatedEdges.length;
+    
+    console.log('[Graph Debug] Data counts:', {
+      currentNodes: currentNodeCount,
+      newNodes: newNodeCount,
+      currentEdges: currentEdgeCount,
+      newEdges: newEdgeCount
+    });
+
+    // Check if we need full reinitialization (node/edge count changed)
+    const needsReinit = (currentNodeCount !== newNodeCount) || (currentEdgeCount !== newEdgeCount);
+    
+    if (needsReinit) {
+      console.log('[Graph Debug] Data structure changed - triggering reinitialization with preserved camera');
+      setReinitTrigger(prev => prev + 1);
+      return;
+    }
+
+    // If counts are the same, just update simulation data (for property changes)
+    console.log('[Graph Debug] Data counts unchanged - updating simulation data only');
+    
+    // Update simulation with current data (handles property changes)
+    simulation.nodes(nodes as any);
+    const linkForce = simulation.force('link') as d3.ForceLink<any, any>;
+    if (linkForce) {
+      linkForce.links(validatedEdges);
+    }
+
+    // Gentle restart to settle any property changes
+    simulation.alpha(0.1).restart();
+    
+    console.log('[Graph Debug] Simulation data updated');
+  }, [nodes, validatedEdges]);
+
   // Define initializeVisualization function with access to nodes data
   const initializeVisualization = useCallback(() => {
     if (!svgRef.current || !containerRef.current) return;
@@ -1076,15 +1335,42 @@ export function InteractiveGraphVisualization() {
       initializeEmptyVisualization();
       return;
     }
+    
+    // PRESERVE EXISTING NODE POSITIONS before reinitialization
+    const existingPositions = new Map();
+    if (simulationRef.current) {
+      simulationRef.current.nodes().forEach((node: any) => {
+        if (node.x !== undefined && node.y !== undefined) {
+          existingPositions.set(node.id, { x: node.x, y: node.y, vx: node.vx || 0, vy: node.vy || 0 });
+        }
+      });
+    }
 
     const container = containerRef.current;
     const svg = d3.select(svgRef.current);
     
-    // Clear previous content
-    svg.selectAll('*').remove();
+    // Check if this is the first initialization or we need to preserve existing structure
+    const existingMainGroup = svg.select('g.main-graph-group');
+    const isFirstInit = existingMainGroup.empty();
+    
+    // Store current zoom transform if preserving structure
+    let currentTransform = null;
+    if (!isFirstInit) {
+      currentTransform = d3.zoomTransform(svg.node()!);
+    }
     
-    // Clear any existing HTML label containers
-    d3.select(containerRef.current).selectAll('.node-labels-container').remove();
+    if (isFirstInit) {
+      // First initialization - clear everything and create core structure
+      svg.selectAll('*').remove();
+      d3.select(containerRef.current).selectAll('.node-labels-container').remove();
+    } else {
+      // Surgical update - only clear data elements, preserve core structure
+      existingMainGroup.selectAll('.nodes-group').remove();
+      existingMainGroup.selectAll('.edges-group').remove();
+      existingMainGroup.selectAll('.edge-labels-group').remove();
+      existingMainGroup.selectAll('.node-labels-container').remove();
+      d3.select(containerRef.current).selectAll('.node-labels-container').remove();
+    }
 
     const width = container.clientWidth;
     const height = container.clientHeight;
@@ -1093,24 +1379,64 @@ export function InteractiveGraphVisualization() {
 
     svg.attr('width', width).attr('height', height);
     
-    // Create zoom behavior
+    // Create or reuse zoom behavior with reversed wheel direction
     const zoom = d3.zoom<SVGSVGElement, unknown>()
-      .scaleExtent([0.1, 4]);
+      .scaleExtent([0.1, 4])
+      .wheelDelta((event: WheelEvent) => {
+        // Reverse wheel direction: negative deltaY for zoom in, positive for zoom out
+        return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * -1;
+      });
 
-    const g = svg.append('g');
+    const g = isFirstInit ? svg.append('g').attr('class', 'main-graph-group') : existingMainGroup;
+
+    // Create or reuse background for capturing clicks  
+    let background = g.select('rect.background');
+    if (background.empty()) {
+      background = g.append('rect')
+        .attr('class', 'background')
+        .attr('x', -10000)
+        .attr('y', -10000)
+        .attr('width', 20000)
+        .attr('height', 20000)
+        .attr('fill', 'transparent')
+        .style('cursor', 'default') as any;
+    }
 
-    // Add background for capturing clicks to show context menu (make it very large for better detection)
-    const background = g.append('rect')
-      .attr('class', 'background')
-      .attr('x', -10000)
-      .attr('y', -10000)
-      .attr('width', 20000)
-      .attr('height', 20000)
-      .attr('fill', 'transparent')
-      .style('cursor', 'default');
+    // Create or reuse grid pattern and overlay (only on first init)
+    if (isFirstInit) {
+      // Add subtle grid pattern that moves with camera
+      const gridDefs = svg.append('defs');
+      const pattern = gridDefs.append('pattern')
+        .attr('id', 'grid-pattern')
+        .attr('width', 100)
+        .attr('height', 100)
+        .attr('patternUnits', 'userSpaceOnUse');
+      
+      // Grid lines
+      pattern.append('path')
+        .attr('d', 'M 100 0 L 0 0 0 100')
+        .attr('fill', 'none')
+        .attr('stroke', 'rgba(255, 255, 255, 0.03)')
+        .attr('stroke-width', 1);
+      
+      // Add grid overlay
+      const gridOverlay = g.append('rect')
+        .attr('class', 'grid-overlay')
+        .attr('x', -10000)
+        .attr('y', -10000)
+        .attr('width', 20000)
+        .attr('height', 20000)
+        .attr('fill', 'url(#grid-pattern)')
+        .attr('pointer-events', 'none');
+    }
 
-    // Apply zoom behavior to the svg
+    // Apply zoom behavior to the svg (always, but preserve existing transform)
     svg.call(zoom);
+    
+    // Restore zoom transform if this is a surgical update
+    if (!isFirstInit && currentTransform) {
+      svg.call(zoom.transform, currentTransform);
+    }
 
     // Add click handler for context menu on background
     background.on('click', function(event: MouseEvent) {
@@ -1121,27 +1447,26 @@ export function InteractiveGraphVisualization() {
         nodeMenu.visible ||
         edgeMenu.visible ||
         editingEdge !== null ||
-        showEdgeDetails;
+        false; // Removed edge details dialog
       
       if (hasOpenDialogs) {
         // Close all dialogs and menus - first click
         setNodeMenu({ node: null, position: { x: 0, y: 0 }, visible: false });
         setEdgeMenu({ edge: null, position: { x: 0, y: 0 }, visible: false });
         setEditingEdge(null);
-        setShowEdgeDetails(false);
-        setEdgeDetailsPosition(null);
         setContextMenuPosition(null);
         return;
       }
       
-      // No dialogs open - show the context menu
-      const [graphX, graphY] = d3.pointer(event, g.node());
-      setContextMenuPosition({
-        x: event.clientX,
-        y: event.clientY,
-        graphX,
-        graphY
-      });
+      // Clear node selection when clicking on empty space
+      if (selectedNode || selectedNodes.size > 0) {
+        setSelectedNode(null);
+        setSelectedNodes(new Set());
+        return;
+      }
+      
+      // Don't show context menu on single left-click in empty space - only on right-click
+      // This prevents camera jumps from rapid context menu show/hide cycles
     });
 
     // Add right-click handler for context menu
@@ -1163,18 +1488,24 @@ export function InteractiveGraphVisualization() {
 
     // Initialize all nodes at screen center for 2D layout
     nodes.forEach((node: any) => {
-      if (!node.x) node.x = centerX + (Math.random() - 0.5) * 100;
-      if (!node.y) node.y = centerY + (Math.random() - 0.5) * 100;
+      // Reset any user pinning/positioning (like Reset Layout button)
+      node.userPinned = false;
+      node.userPreferredPosition = null;
+      node.userPreferenceVector = null;
       node.fx = null;
       node.fy = null;
+      
+      // Set initial position at screen center with some randomness
+      if (!node.x) node.x = centerX + (Math.random() - 0.5) * 100;
+      if (!node.y) node.y = centerY + (Math.random() - 0.5) * 100;
     });
 
     // Viewport culling - only render visible nodes for performance
     const margin = 200;
-    const visibleNodes = currentTransform.scale < LOD_THRESHOLDS.VERY_FAR ? 
+    const visibleNodes = (currentTransform?.k || 1) < LOD_THRESHOLDS.VERY_FAR ? 
       nodes.filter((node: WorkItem) => {
-        const nodeX = (node.positionX || 0) * currentTransform.scale + currentTransform.x;
-        const nodeY = (node.positionY || 0) * currentTransform.scale + currentTransform.y;
+        const nodeX = (node.positionX || 0) * (currentTransform?.k || 1) + (currentTransform?.x || 0);
+        const nodeY = (node.positionY || 0) * (currentTransform?.k || 1) + (currentTransform?.y || 0);
         return nodeX >= -margin && nodeX <= width + margin && 
                nodeY >= -margin && nodeY <= height + margin;
       }) : nodes;
@@ -1183,6 +1514,21 @@ export function InteractiveGraphVisualization() {
     const simulation = d3.forceSimulation(visibleNodes as any);
     simulationRef.current = simulation; // Store reference for resize handling
     
+    // RESTORE PRESERVED POSITIONS to prevent nodes jumping to origin
+    if (existingPositions.size > 0) {
+      simulation.nodes().forEach((node: any) => {
+        const savedPos = existingPositions.get(node.id);
+        if (savedPos) {
+          node.x = savedPos.x;
+          node.y = savedPos.y;
+          node.vx = savedPos.vx;
+          node.vy = savedPos.vy;
+        }
+      });
+      // Stop simulation immediately to freeze positions
+      simulation.alpha(0).stop();
+    }
+    
     simulation
       .force('link', d3.forceLink(validatedEdges)
         .id((d: any) => d.id)
@@ -1300,7 +1646,7 @@ export function InteractiveGraphVisualization() {
       .on('mouseenter', function(event: MouseEvent, d: WorkItemEdge) {
         // Skip hover effect if edge has active dialog (glow is already applied)
         if ((editingEdge && editingEdge.edge && editingEdge.edge.id === d.id) ||
-            (showEdgeDetails && selectedEdge && selectedEdge.id === d.id)) {
+            false) { // Removed edge details dialog
           return;
         }
         
@@ -1314,7 +1660,7 @@ export function InteractiveGraphVisualization() {
       .on('mouseleave', function(event: MouseEvent, d: WorkItemEdge) {
         // Skip hover reset if edge has active dialog (glow should remain)
         if ((editingEdge && editingEdge.edge && editingEdge.edge.id === d.id) ||
-            (showEdgeDetails && selectedEdge && selectedEdge.id === d.id)) {
+            false) { // Removed edge details dialog
           return;
         }
         
@@ -1360,9 +1706,7 @@ export function InteractiveGraphVisualization() {
           y = window.innerHeight - dialogHeight - 20;
         }
         
-        setEdgeDetailsPosition({ x, y });
         setSelectedEdge(d);
-        setShowEdgeDetails(true);
       })
       .on('mouseover', function(event: MouseEvent, d: WorkItemEdge) {
         // Highlight the corresponding visible edge
@@ -1379,27 +1723,26 @@ export function InteractiveGraphVisualization() {
           .attr('stroke-opacity', 0.7);
       });
 
-    // Add arrowhead markers for middle of edges
-    const defs = svg.append('defs');
-    
-    
-    // Create different arrowhead colors for each edge type
-    RELATIONSHIP_OPTIONS.forEach((option) => {
-      defs.append('marker')
-        .attr('id', `arrowhead-${option.type}`)
-        .attr('viewBox', '-5 -5 10 10')
-        .attr('refX', 0)
-        .attr('refY', 0)
-        .attr('orient', 'auto')
-        .attr('markerWidth', 8)
-        .attr('markerHeight', 8)
-        .append('path')
-        .attr('d', 'M-3,-3 L0,0 L-3,3 L-1,0 Z')
-        .attr('fill', option.hexColor)
-        .attr('stroke', option.hexColor)
-        .attr('stroke-width', currentTransform.scale >= LOD_THRESHOLDS.FAR ? 1 : 0.5)
-      .style('opacity', currentTransform.scale >= LOD_THRESHOLDS.VERY_FAR ? 1 : 0.3);
-    });
+    // Create or get defs element for filters
+    let filterDefs = svg.select('defs') as any;
+    if (filterDefs.empty()) {
+      filterDefs = svg.append('defs') as any;
+    }
+    
+    // Add drop shadow filter for nodes
+    const dropShadowFilter = filterDefs.append('filter')
+      .attr('id', 'node-drop-shadow')
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+    
+    dropShadowFilter.append('feDropShadow')
+      .attr('dx', 2)
+      .attr('dy', 3)
+      .attr('stdDeviation', 3)
+      .attr('flood-color', 'rgba(0, 0, 0, 0.4)')
+      .attr('flood-opacity', 1);
 
     // Create nodes AFTER edges (so they render on top)
     const nodeElements = g.append('g')
@@ -1596,6 +1939,7 @@ export function InteractiveGraphVisualization() {
         }
         return '#1f2937'; // Dark background consistent with theme
       })
+      .style('filter', 'url(#node-drop-shadow)')
       .attr('stroke', (d: WorkItem) => {
         // Use node type color for active dialog
         if (nodeMenu.visible && nodeMenu.node && nodeMenu.node.id === d.id) {
@@ -1668,7 +2012,7 @@ export function InteractiveGraphVisualization() {
       .attr('text-anchor', 'middle')
       .attr('dominant-baseline', 'middle')
       .text((d: WorkItem) => d.type)
-      .style('opacity', currentTransform.scale >= LOD_THRESHOLDS.FAR ? 1 : 0)
+      .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.FAR ? 1 : 0)
       .style('font-size', '13px')
       .style('font-weight', '700')
       .style('fill', (d: WorkItem) => {
@@ -1677,23 +2021,198 @@ export function InteractiveGraphVisualization() {
       })
       .style('pointer-events', 'none');
 
-    // Node title section - with text wrapping
-    nodeElements.each(function(d: WorkItem) {
-      const nodeGroup = d3.select(this);
-      const dimensions = getNodeDimensions(d);
-      const { maxCharsPerLine } = dimensions;
-      
-      // Split title into lines with proper word wrapping - 3-line maximum
-      const words = d.title.split(' ');
-      const lines: string[] = [];
-      let currentLine = '';
-      let hasMoreText = false;
-      
-      for (let i = 0; i < words.length; i++) {
-        const word = words[i];
-        const testLine = currentLine + (currentLine ? ' ' : '') + word;
+    // Edit icon in title bar (centered vertically, left side) - scales with zoom
+    const iconSize = Math.max(16, Math.min(24, titleBarHeight * 0.7));
+    const editIcons = nodeElements.append('g')
+      .attr('class', 'node-edit-icon')
+      .attr('transform', (d: WorkItem) => {
+        const x = -getNodeDimensions(d).width / 2 + iconSize / 2 + 12;
+        const y = -getNodeDimensions(d).height / 2 + 2 + titleBarHeight / 2;
+        return `translate(${x}, ${y}) scale(${1 / (currentTransform?.k || 1)})`;
+      })
+      .style('cursor', 'pointer')
+      .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.FAR ? 0.85 : 0)
+      .style('pointer-events', 'all');
+    
+    // Edit icon background - scales with icon
+    const editBg = editIcons.append('rect')
+      .attr('class', 'edit-bg')
+      .attr('x', -iconSize/2)
+      .attr('y', -iconSize/2)
+      .attr('width', iconSize)
+      .attr('height', iconSize)
+      .attr('rx', 3)
+      .attr('fill', 'rgba(0, 0, 0, 0.7)')
+      .attr('stroke', 'rgba(255, 255, 255, 0.8)')
+      .attr('stroke-width', 1);
+    
+    // Simple gear using text (emoji) - proper size
+    editIcons.append('text')
+      .attr('class', 'edit-gear')
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .style('font-size', `${iconSize * 1.1}px`)
+      .style('fill', '#ffffff')
+      .style('pointer-events', 'none')
+      .text('⚙');
+    
+    // Hover effects for the entire edit icon group
+    editIcons
+      .on('mouseenter', function() {
+        const icon = d3.select(this);
+        // Brighten background and add glow
+        icon.select('.edit-bg')
+          .transition().duration(200)
+          .attr('fill', 'rgba(59, 130, 246, 0.8)')
+          .attr('stroke', '#3b82f6')
+          .attr('stroke-width', 2);
         
-        // Check if this line would be too long
+        // Highlight background
+        icon.select('.edit-bg')
+          .transition().duration(200)
+          .attr('fill', 'rgba(59, 130, 246, 0.9)')
+          .attr('stroke', '#3b82f6')
+          .attr('stroke-width', 2);
+        
+        // Scale up text slightly
+        icon.select('.edit-gear')
+          .transition().duration(200)
+          .style('font-size', `${iconSize * 1.3}px`);
+      })
+      .on('mouseleave', function() {
+        const icon = d3.select(this);
+        // Return to normal state
+        icon.select('.edit-bg')
+          .transition().duration(200)
+          .attr('fill', 'rgba(0, 0, 0, 0.7)')
+          .attr('stroke', 'rgba(255, 255, 255, 0.8)')
+          .attr('stroke-width', 1);
+        
+        // Scale text back to normal
+        icon.select('.edit-gear')
+          .transition().duration(200)
+          .style('font-size', `${iconSize * 1.1}px`);
+      });
+    
+    // Edit icon click handler - opens edit modal
+    editIcons.on('click', (event: MouseEvent, d: WorkItem) => {
+      event.stopPropagation();
+      event.preventDefault();
+      
+      // Set selected node and show details modal for editing
+      setSelectedNode(d);
+      lastSelectedNodeRef.current = d; // Track last selected
+      applyNodeGlowImmediately(d);
+      setShowNodeDetailsModal(true);
+    });
+
+    // Relationship creation icon in title bar (centered vertically, right side) - mirrors edit icon
+    const relationshipIcons = nodeElements.append('g')
+      .attr('class', 'node-relationship-icon')
+      .attr('transform', (d: WorkItem) => {
+        const x = getNodeDimensions(d).width / 2 - iconSize / 2 - 12; // Right side, mirrored from edit icon
+        const y = -getNodeDimensions(d).height / 2 + 2 + titleBarHeight / 2;
+        return `translate(${x}, ${y}) scale(${1 / (currentTransform?.k || 1)})`;
+      })
+      .style('cursor', 'pointer')
+      .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.FAR ? 0.85 : 0)
+      .style('pointer-events', 'all');
+    
+    // Relationship icon background - same as edit icon
+    relationshipIcons.append('rect')
+      .attr('class', 'relationship-bg')
+      .attr('x', -iconSize/2)
+      .attr('y', -iconSize/2)
+      .attr('width', iconSize)
+      .attr('height', iconSize)
+      .attr('rx', 3)
+      .attr('fill', 'rgba(0, 0, 0, 0.7)')
+      .attr('stroke', 'rgba(255, 255, 255, 0.8)')
+      .attr('stroke-width', 1);
+    
+    // Plus sign using text - matching the gear styling
+    relationshipIcons.append('text')
+      .attr('class', 'relationship-plus')
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .style('font-size', `${iconSize * 1.2}px`) // Slightly bigger than gear for visual balance
+      .style('font-weight', 'bold')
+      .style('fill', '#ffffff')
+      .style('pointer-events', 'none')
+      .text('+');
+    
+    // Hover effects for relationship icon - mirroring edit icon
+    relationshipIcons
+      .on('mouseenter', function() {
+        const icon = d3.select(this);
+        
+        // Grow background
+        icon.select('.relationship-bg')
+          .transition().duration(200)
+          .attr('width', iconSize * 1.2)
+          .attr('height', iconSize * 1.2)
+          .attr('x', -iconSize * 0.6)
+          .attr('y', -iconSize * 0.6)
+          .attr('fill', 'rgba(34, 197, 94, 0.9)') // Green color for relationship creation
+          .attr('stroke', 'rgba(255, 255, 255, 1.0)');
+        
+        // Scale up text slightly
+        icon.select('.relationship-plus')
+          .transition().duration(200)
+          .style('font-size', `${iconSize * 1.4}px`);
+      })
+      .on('mouseleave', function() {
+        const icon = d3.select(this);
+        
+        // Shrink background back
+        icon.select('.relationship-bg')
+          .transition().duration(200)
+          .attr('width', iconSize)
+          .attr('height', iconSize)
+          .attr('x', -iconSize/2)
+          .attr('y', -iconSize/2)
+          .attr('fill', 'rgba(0, 0, 0, 0.7)')
+          .attr('stroke', 'rgba(255, 255, 255, 0.8)');
+        
+        // Scale text back to normal
+        icon.select('.relationship-plus')
+          .transition().duration(200)
+          .style('font-size', `${iconSize * 1.2}px`);
+      });
+
+    // Relationship icon click handler - just opens relationship window
+    relationshipIcons.on('click', (event: MouseEvent, d: WorkItem) => {
+      event.stopPropagation();
+      event.preventDefault();
+      
+      console.log('[Graph Debug] + button clicked, opening relationship window');
+      
+      // Simply open the relationship window - avoid changing selectedNodes to prevent graph refresh
+      setShowRelationshipWindow(true);
+      setEditingEdge(null);
+    });
+
+    // Node title section - with text wrapping
+    nodeElements.each(function(d: WorkItem) {
+      const nodeGroup = d3.select(this);
+      const dimensions = getNodeDimensions(d);
+      const { maxCharsPerLine } = dimensions;
+      
+      // Split title into lines with proper word wrapping - 3-line maximum
+      const words = d.title.split(' ');
+      const lines: string[] = [];
+      let currentLine = '';
+      let hasMoreText = false;
+      
+      for (let i = 0; i < words.length; i++) {
+        const word = words[i];
+        const testLine = currentLine + (currentLine ? ' ' : '') + word;
+        
+        // Check if this line would be too long
         if (testLine.length <= maxCharsPerLine) {
           currentLine = testLine;
         } else {
@@ -1739,7 +2258,7 @@ export function InteractiveGraphVisualization() {
           .attr('text-anchor', 'middle')
           .attr('dominant-baseline', 'middle')
           .text(line)
-          .style('opacity', currentTransform.scale >= LOD_THRESHOLDS.MEDIUM ? 1 : 0)
+          .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.MEDIUM ? 1 : 0)
           .style('font-size', '14px')
           .style('font-weight', '600')
           .style('fill', () => {
@@ -1749,30 +2268,6 @@ export function InteractiveGraphVisualization() {
           .style('pointer-events', 'none');
       });
 
-      // Add eye icon at bottom after title text ends
-      const titleEndY = startY + (lines.length * 16) + 8; // 8px gap after title text
-      
-      const eyeIconGroup = nodeGroup.append('g')
-        .attr('class', 'eye-icon-group')
-        .attr('transform', `translate(0, ${titleEndY})`)
-        .style('cursor', 'pointer')
-        .style('pointer-events', 'all')
-        .on('click', function(event) {
-          event.stopPropagation();
-          handleViewNodeDetails(d);
-        });
-      
-      // Eye icon at bottom center
-      eyeIconGroup.append('path')
-        .attr('class', 'eye-icon-path')
-        .attr('d', 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z')
-        .attr('fill', 'none')
-        .attr('stroke', '#ffffff')
-        .attr('stroke-width', '1')
-        .attr('stroke-linecap', 'round')
-        .attr('stroke-linejoin', 'round')
-        .attr('transform', 'translate(-12, -12) scale(0.5)')
-        .style('opacity', '0.7');
     });
 
     // Description section - bigger and more readable
@@ -1792,7 +2287,7 @@ export function InteractiveGraphVisualization() {
         // Hide description if too long instead of truncating
         return d.description.length > maxLength ? '' : d.description;
       })
-      .style('opacity', currentTransform.scale >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
+      .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
       .style('font-size', '11px')
       .style('font-weight', '400')
       .style('fill', (d: WorkItem) => {
@@ -1896,7 +2391,7 @@ export function InteractiveGraphVisualization() {
       const nodeGroup = d3.select(this);
       const dimensions = getNodeDimensions(d);
       
-      const priority = d.priorityComp || d.priorityExec || 0;
+      const priority = d.priority || 0;
       const priorityPercentage = Math.round(priority * 100);
       
       // Get priority color
@@ -2041,31 +2536,27 @@ export function InteractiveGraphVisualization() {
       .style('cursor', 'pointer')
       .on('click', function(event: MouseEvent, d: WorkItemEdge) {
         event.stopPropagation();
+        event.preventDefault(); // Prevent any default behavior
         
-        // Position dropdown to the side to avoid obstructing the glow
-        const clickX = event.clientX;
-        const clickY = event.clientY;
-        const offset = 120; // Distance from edge
-        const dropdownWidth = 250;
-        
-        let x = clickX + offset;
-        let y = clickY;
-        
-        // If dropdown would go off right edge, position to the left
-        if (x + dropdownWidth > window.innerWidth - 20) {
-          x = clickX - offset - dropdownWidth;
-        }
-        
-        // Keep dropdown within bounds
-        if (y + 320 > window.innerHeight - 20) { // 320 is dropdown height
-          y = window.innerHeight - 320 - 20;
+        // Auto-show relationship window when edge is clicked
+        if (!showRelationshipWindow) {
+          setShowRelationshipWindow(true);
+          // Set the selected edge with initial position for new window
+          setEditingEdge({
+            edge: d,
+            position: { x: 200, y: 80 } // Initial position for new window
+          });
+        } else {
+          // Window already visible, just update the edge data (preserve window position)
+          setEditingEdge(prev => prev ? {
+            edge: d,
+            position: prev.position // Keep existing window position
+          } : {
+            edge: d,
+            position: { x: 200, y: 80 }
+          });
         }
-        if (y < 20) y = 20;
-        
-        setEditingEdge({
-          edge: d,
-          position: { x, y }
-        });
+        setDragOffset({ x: 0, y: 0 }); // Reset drag offset
       });
 
     // Add text labels first to measure their size
@@ -2083,12 +2574,12 @@ export function InteractiveGraphVisualization() {
         const config = getRelationshipConfig(d.type as RelationshipType);
         return config.label;
       })
-      .style('opacity', currentTransform.scale >= LOD_THRESHOLDS.CLOSE ? 1 : 0);
+      .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.CLOSE ? 1 : 0);
 
     // Add icons positioned to the left of text
     edgeLabelGroups
       .append('foreignObject')
-      .style('opacity', currentTransform.scale >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
+      .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
       .attr('class', 'edge-label-icon')
       .attr('width', 14)
       .attr('height', 14)
@@ -2291,6 +2782,34 @@ export function InteractiveGraphVisualization() {
           handleNodeClick(event, d);
         }
       }, 10);
+    })
+    .on('contextmenu', (event: MouseEvent, d: any) => {
+      event.preventDefault();
+      event.stopPropagation();
+      
+      // Context menu disabled - just select the node
+      setSelectedNode(d);
+      lastSelectedNodeRef.current = d; // Track last selected
+      
+      // Apply glow effect
+      applyNodeGlowImmediately(d);
+      
+      // Context menu disabled
+      return;
+      /*
+      // Show context menu for advanced actions
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      if (containerRect) {
+        setNodeMenu({
+          node: d,
+          position: {
+            x: event.clientX - containerRect.left,
+            y: event.clientY - containerRect.top
+          },
+          visible: true
+        });
+      }
+      */
     });
 
     const updateEdgePositions = () => {
@@ -2344,9 +2863,48 @@ export function InteractiveGraphVisualization() {
     simulation.on('tick', () => {
       // Allow nodes to move freely without bounds constraints
       
+      // DEBUG: Log if any nodes are at origin during tick
+      const nodesAtOrigin = nodes.filter((n: any) => (n.x === 0 || n.x === undefined) && (n.y === 0 || n.y === undefined));
+      if (nodesAtOrigin.length > 0) {
+        console.log('[CRITICAL DEBUG] Nodes at origin during tick:', nodesAtOrigin.length, 'out of', nodes.length);
+        console.log('[CRITICAL DEBUG] First few nodes at origin:', nodesAtOrigin.slice(0, 3).map((n: any) => ({id: n.id, x: n.x, y: n.y})));
+      }
+      
       // Update node positions
       nodeElements
         .attr('transform', (d: any) => `translate(${d.x || 0},${d.y || 0})`);
+
+      // Ensure text elements are visible and properly positioned after position updates
+      g.selectAll('.node-type-text, .node-title-text, .node-description-text' as any)
+        .style('visibility', 'visible')
+        .style('opacity', function(this: any) {
+          // Restore LOD-appropriate opacity if it was hidden
+          const currentOpacity = parseFloat(d3.select(this).style('opacity')) || 0;
+          if (currentOpacity === 0) {
+            // Get current scale from the svg element
+            const svgElement = svg.node();
+            if (svgElement) {
+              const currentTransform = d3.zoomTransform(svgElement);
+              const scale = currentTransform.k;
+              const classList = d3.select(this as any).attr('class');
+              if (classList?.includes('node-type-text')) return getSmoothedOpacity(scale, LOD_THRESHOLDS.FAR);
+              if (classList?.includes('node-title-text')) return getSmoothedOpacity(scale, LOD_THRESHOLDS.MEDIUM);
+              if (classList?.includes('node-description-text')) return getSmoothedOpacity(scale, LOD_THRESHOLDS.CLOSE);
+            }
+          }
+          return currentOpacity;
+        });
+
+      // Update mini-map with current node positions
+      if ((window as any).updateMiniMapPositions && nodes.length > 0) {
+        const positions: {[key: string]: {x: number, y: number}} = {};
+        nodes.forEach((node: any) => {
+          if (node.x !== undefined && node.y !== undefined) {
+            positions[node.id] = { x: node.x, y: node.y };
+          }
+        });
+        (window as any).updateMiniMapPositions(positions);
+      }
         
       // Always update edges to stay anchored to nodes
       updateEdgePositions();
@@ -2361,6 +2919,20 @@ export function InteractiveGraphVisualization() {
         scale: event.transform.k 
       });
       
+      // Update mini-map viewport
+      if ((window as any).updateMiniMapViewport) {
+        const viewportUpdate = {
+          x: event.transform.x,
+          y: event.transform.y,
+          k: event.transform.k
+        };
+        if ((window as any).debugLog) {
+          (window as any).debugLog('Graph', '🔍 Zoom/pan event', viewportUpdate);
+        }
+        console.log('🔍 ZOOM-EVENT viewport update:', viewportUpdate);
+        (window as any).updateMiniMapViewport(viewportUpdate);
+      }
+      
       // Update LOD based on zoom level
       const scale = event.transform.k;
       
@@ -2372,17 +2944,17 @@ export function InteractiveGraphVisualization() {
       };
       
       // Update text opacities with smooth transitions
-      g.selectAll('.node-type-text')
+      g.selectAll('.node-type-text' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.FAR));
-      g.selectAll('.node-title-text')
+      g.selectAll('.node-title-text' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.MEDIUM));
-      g.selectAll('.node-description-text')
+      g.selectAll('.node-description-text' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.CLOSE));
-      g.selectAll('.edge-label')
+      g.selectAll('.edge-label' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.CLOSE));
-      g.selectAll('.edge-label-icon')
+      g.selectAll('.edge-label-icon' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.CLOSE));
-      g.selectAll('.edge')
+      g.selectAll('.edge' as any)
         .style('opacity', Math.max(0.1, getSmoothedOpacity(LOD_THRESHOLDS.VERY_FAR, 0.1)))
         .attr('stroke-width', function(d: any) {
           // Don't override stroke width if this edge has an active dialog
@@ -2412,10 +2984,251 @@ export function InteractiveGraphVisualization() {
   const simulationRef = useRef<d3.Simulation<any, any> | null>(null);
   const mousedownNodeRef = useRef<any>(null);
 
-  // Initialization effect
+  // Fit view to show all nodes
+  const fitViewToNodes = useCallback(() => {
+    if (!svgRef.current || !containerRef.current || nodes.length === 0) return;
+    
+    const svg = d3.select(svgRef.current);
+    const container = containerRef.current;
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    
+    // Calculate bounding box of all nodes
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    
+    nodes.forEach((node: any) => {
+      const x = node.x || 0;
+      const y = node.y || 0;
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    });
+    
+    if (!isFinite(minX)) return; // No valid positions
+    
+    // Add padding
+    const padding = 100;
+    minX -= padding;
+    maxX += padding;
+    minY -= padding;
+    maxY += padding;
+    
+    const boundsWidth = maxX - minX;
+    const boundsHeight = maxY - minY;
+    
+    // Calculate scale to fit all nodes
+    const scale = Math.min(
+      width / boundsWidth,
+      height / boundsHeight,
+      2 // Max zoom level
+    );
+    
+    // Calculate translate to center the bounds
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const boundsCenterX = (minX + maxX) / 2;
+    const boundsCenterY = (minY + maxY) / 2;
+    
+    const translateX = centerX - boundsCenterX * scale;
+    const translateY = centerY - boundsCenterY * scale;
+    
+    // Apply the transform
+    const transform = d3.zoomIdentity.translate(translateX, translateY).scale(scale);
+    svg.call(d3.zoom<SVGSVGElement, unknown>().transform as any, transform);
+  }, [nodes]);
+
+  // Center on specific node
+  const centerOnNode = useCallback((nodeId?: string) => {
+    const nodeToCenter = nodeId 
+      ? nodes.find((n: any) => n.id === nodeId)
+      : lastSelectedNodeRef.current || nodes[0];
+      
+    if (!nodeToCenter || !svgRef.current) return;
+    
+    const svg = d3.select(svgRef.current);
+    const svgElement = svgRef.current;
+    const { width, height } = svgElement.getBoundingClientRect();
+    
+    // Get node position
+    const nodeX = nodeToCenter.x || 0;
+    const nodeY = nodeToCenter.y || 0;
+    
+    // Calculate transform to center this node
+    const centerX = width / 2;
+    const centerY = height / 2;
+    
+    // Get current zoom scale (maintain it)
+    const currentScale = currentTransform?.scale || 1;
+    
+    // Calculate translation to center the node
+    const translateX = centerX - nodeX * currentScale;
+    const translateY = centerY - nodeY * currentScale;
+    
+    // Apply transform with smooth transition
+    const transform = d3.zoomIdentity.translate(translateX, translateY).scale(currentScale);
+    svg.transition()
+      .duration(750)
+      .call(d3.zoom<SVGSVGElement, unknown>().transform as any, transform);
+      
+    // Update mini-map viewport
+    if ((window as any).updateMiniMapViewport) {
+      const viewportUpdate = {
+        x: translateX,
+        y: translateY,
+        k: currentScale
+      };
+      if ((window as any).debugLog) {
+        (window as any).debugLog('Graph', '🎯 Center on node', viewportUpdate);
+      }
+      console.log('🎯 CENTER-ON-NODE viewport update:', viewportUpdate);
+      (window as any).updateMiniMapViewport(viewportUpdate);
+    }
+  }, [nodes, currentTransform]);
+
+  // Track viewport dimensions for mini-map
   useEffect(() => {
-    // Always initialize visualization (handles both empty and populated states)
+    if (!svgRef.current) return;
+    
+    const updateDimensions = () => {
+      if (!svgRef.current) return;
+      const { width, height } = svgRef.current.getBoundingClientRect();
+      const dimensions = { width, height };
+      if ((window as any).debugLog) {
+        (window as any).debugLog('Graph', '📊 Viewport dimensions updated', dimensions);
+      }
+      console.log('📊 VIEWPORT DIMENSIONS:', dimensions);
+      if ((window as any).updateViewportDimensions) {
+        (window as any).updateViewportDimensions(dimensions);
+      }
+    };
+    
+    // Initial dimensions
+    updateDimensions();
+    
+    // Set up resize observer
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(svgRef.current);
+    
+    // Also listen to window resize for good measure
+    window.addEventListener('resize', updateDimensions);
+    
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, []);
+
+  // Reset layout function
+  const resetLayout = useCallback(() => {
+    nodes.forEach((node: any) => {
+      node.userPinned = false;
+      node.userPreferredPosition = null;
+      node.userPreferenceVector = null;
+      node.fx = null;
+      node.fy = null;
+      // Clear positioning cache to force recalculation
+      node.targetX = null;
+      node.targetY = null;
+    });
     initializeVisualization();
+    // Auto-fit after reset
+    setTimeout(() => {
+      fitViewToNodes();
+    }, 1000);
+  }, [nodes, initializeVisualization, fitViewToNodes]);
+
+  // Auto-fit view when component first mounts with nodes - using stable dependency
+  const hasNodes = nodes.length > 0;
+  useEffect(() => {
+    if (hasNodes && svgRef.current) {
+      // Check if this is the initial load (no previous transform stored)
+      const hasStoredTransform = sessionStorage.getItem('graphViewTransform');
+      if (!hasStoredTransform) {
+        // First time loading - auto fit after simulation settles
+        const timer = setTimeout(() => {
+          fitViewToNodes();
+          // Store the fitted transform
+          if (svgRef.current) {
+            const svg = d3.select(svgRef.current);
+            const transform = d3.zoomTransform(svg.node()!);
+            sessionStorage.setItem('graphViewTransform', JSON.stringify({
+              x: transform.x,
+              y: transform.y,
+              k: transform.k
+            }));
+          }
+        }, 1500);
+        return () => clearTimeout(timer);
+      } else {
+        // Restore previous transform
+        try {
+          const saved = JSON.parse(hasStoredTransform);
+          const timer = setTimeout(() => {
+            if (svgRef.current) {
+              const svg = d3.select(svgRef.current);
+              const transform = d3.zoomIdentity.translate(saved.x, saved.y).scale(saved.k);
+              svg.call(d3.zoom<SVGSVGElement, unknown>().transform as any, transform);
+            }
+          }, 500);
+          return () => clearTimeout(timer);
+        } catch (e) {
+          // If stored transform is invalid, auto-fit
+          const timer = setTimeout(() => {
+            fitViewToNodes();
+          }, 1500);
+          return () => clearTimeout(timer);
+        }
+      }
+    }
+    return undefined;
+  }, [hasNodes]); // Removed fitViewToNodes dependency to prevent camera jumps
+
+  // Expose reset function to parent component
+  useEffect(() => {
+    if (onResetLayout) {
+      // Set up a way for parent to trigger reset
+      (window as any).triggerGraphReset = resetLayout;
+    }
+    return () => {
+      if ((window as any).triggerGraphReset === resetLayout) {
+        delete (window as any).triggerGraphReset;
+      }
+    };
+  }, [resetLayout, onResetLayout]);
+
+  // Force reinitialization trigger - incremented when view needs refresh
+  const [reinitTrigger, setReinitTrigger] = useState(0);
+
+  // Comprehensive reinitialization effect - ONLY when actually needed
+  useEffect(() => {
+    console.log('[Graph Debug] Checking if reinitialization needed...', { 
+      nodesLength: nodes.length, 
+      edgesLength: validatedEdges.length,
+      trigger: reinitTrigger,
+      currentGraph: currentGraph?.id
+    });
+    
+    // Only reinitialize if this is truly necessary
+    const shouldReinit = 
+      !svgRef.current ||
+      !containerRef.current ||
+      nodes.length === 0 ||
+      !d3.select(svgRef.current).select('.main-graph-group').node() ||
+      reinitTrigger > 0;
+    
+    if (shouldReinit) {
+      console.log('[Graph Debug] Full reinitialization required');
+      initializeVisualization();
+      // Reset trigger after use
+      if (reinitTrigger > 0) {
+        setReinitTrigger(0);
+      }
+    } else {
+      console.log('[Graph Debug] Using selective updates instead of full reinit');
+      // Use selective data updates instead of full reinitialization
+      updateVisualizationData();
+    }
 
     const handleResize = () => {
       if (!containerRef.current || !svgRef.current || !simulationRef.current) return;
@@ -2437,32 +3250,66 @@ export function InteractiveGraphVisualization() {
         .alpha(0.3) // Restart simulation with some energy
         .restart();
     };
-
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [nodes.length, validatedEdges.length]); // Only re-initialize when data changes, not on every render
+  }, [
+    nodes.length, 
+    validatedEdges.length, 
+    currentGraph?.id, // Re-init when graph changes
+    reinitTrigger, // Manual trigger
+    loading, // Re-init when loading completes
+    edgesLoading // Re-init when edges loading completes
+    // Removed JSON.stringify dependency - it was triggering reinitialization on every node property change
+  ]);
+
+  // Manual reinitialization function (expose globally for debugging)
+  useEffect(() => {
+    (window as any).forceGraphReinit = () => {
+      console.log('[Graph Debug] Forcing manual reinitialization...');
+      setReinitTrigger(prev => prev + 1);
+    };
+    
+    // Auto-reinit on view switches or navigation changes - DISABLED to prevent conflicts
+    // const handleVisibilityChange = () => {
+    //   if (!document.hidden) {
+    //     console.log('[Graph Debug] View became visible, checking if reinit needed...');
+    //     setTimeout(() => {
+    //       const svg = d3.select(containerRef.current).select('svg');
+    //       const hasNodes = svg.select('.nodes-group').selectAll('.node').size() > 0;
+    //       if (nodes.length > 0 && !hasNodes) {
+    //         console.log('[Graph Debug] Missing nodes detected, forcing reinit...');
+    //         setReinitTrigger(prev => prev + 1);
+    //       }
+    //     }, 100);
+    //   }
+    // };
+    
+    // document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      delete (window as any).forceGraphReinit;
+    };
+  }, [nodes.length]);
 
-  // Handle case where no graph is selected
-  if (!currentGraph) {
-    return (
-      <div className="graph-container relative w-full h-full bg-gray-900 flex items-center justify-center">
-        <div className="text-center">
-          <div className="text-yellow-300 text-xl mb-4">📊 No Graph Selected</div>
-          <div className="text-gray-400 text-lg font-medium mb-6">Choose a graph to start visualizing</div>
-          <button 
-            onClick={() => setShowGraphSwitcher(true)}
-            className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
-          >
-            Select Graph
-          </button>
-        </div>
-      </div>
-    );
-  }
+  // Keyboard shortcut for manual reinit (Shift+R)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'R' && event.shiftKey) {
+        event.preventDefault();
+        console.log('[Graph Debug] Manual reinit triggered by Shift+R');
+        setReinitTrigger(prev => prev + 1);
+      }
+    };
+    
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  // Set empty state overlay when no graph is selected
+  const showNoGraphMessage = !currentGraph;
 
   if (loading || edgesLoading) {
     return (
-      <div className="graph-container relative w-full h-full bg-gray-900 flex items-center justify-center">
+      <div className="graph-container relative w-full h-full flex items-center justify-center">
         <div className="text-center">
           <div className="w-8 h-8 border-2 border-green-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
           <div className="text-green-300 text-lg font-medium">Loading graph data...</div>
@@ -2515,8 +3362,8 @@ export function InteractiveGraphVisualization() {
     const isNetworkError = errorMessage.includes('Cannot connect');
     
     return (
-      <div ref={containerRef} className="graph-container relative w-full h-full bg-gray-900">
-        <svg ref={svgRef} className="w-full h-full" style={{ background: 'radial-gradient(circle at center, #1f2937 0%, #111827 100%)' }}>
+      <div ref={containerRef} className="graph-container relative w-full h-full">
+        <svg ref={svgRef} className="w-full h-full">
           {/* Error message centered in SVG */}
           <foreignObject x="20%" y="30%" width="60%" height="40%">
             <div className="w-full h-full flex items-center justify-center p-4">
@@ -2575,15 +3422,10 @@ export function InteractiveGraphVisualization() {
 
   const handleEditNode = (node: WorkItem) => {
     setSelectedNode(node);
-    setShowEditModal(true);
+    setShowNodeDetailsModal(true);
     setNodeMenu(prev => ({ ...prev, visible: false }));
   };
 
-  const handleCloseEditModal = () => {
-    setShowEditModal(false);
-    setSelectedNode(null);
-  };
-
   const handleDeleteNode = (node: WorkItem) => {
     setSelectedNode(node);
     setShowDeleteModal(true);
@@ -2687,11 +3529,10 @@ export function InteractiveGraphVisualization() {
 
 
   return (
-    <div ref={containerRef} className="graph-container relative w-full h-full bg-gray-900 overflow-hidden">
+    <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none">
       <svg 
         ref={svgRef} 
         className="w-full h-full" 
-        style={{ background: 'radial-gradient(circle at center, #1f2937 0%, #111827 100%)' }}
       />
       
       
@@ -2722,287 +3563,32 @@ export function InteractiveGraphVisualization() {
         </div>
       )}
       
-      {/* Graph Control Panel */}
-      {showGraphPanel && !isFullscreen ? (
-        <div className="absolute left-4 z-40" style={{ top: '20px' }}>
-          <div className={`bg-gray-800/95 backdrop-blur-sm border border-gray-600/60 rounded-lg shadow-xl ${isFullscreen ? 'p-0 w-32' : 'p-4 w-64'}`}>
-            {/* Current Graph Header */}
-            <div className={`flex items-center space-x-2 mb-3 ${isFullscreen ? 'p-2' : ''}`}>
-              <div className="w-6 h-6 bg-green-500 rounded flex items-center justify-center flex-shrink-0">
-                {getGraphTypeIcon(currentGraph?.type)}
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="text-xs font-semibold text-white truncate">{currentGraph?.name || 'No Graph'}</div>
-              </div>
-              <div className="w-2 h-2 bg-green-400 rounded-full flex-shrink-0 animate-pulse"></div>
-              <button
-                onClick={() => setShowGraphPanel(false)}
-                className="p-1 rounded text-gray-400 hover:text-white hover:bg-gray-700/50 transition-colors"
-                title="Minimize graph panel"
-              >
-                <Minus className="h-4 w-4" />
-              </button>
-            </div>
-
-{!isFullscreen && (
-          /* Graph Stats */
-          <div className="grid grid-cols-3 gap-1 mb-3">
-            <div className="bg-gray-700/50 rounded p-1 text-center">
-              <div className="text-white text-sm font-medium">{nodes.length}</div>
-              <div className="text-gray-400 text-xs">Nodes</div>
-            </div>
-            <div className="bg-gray-700/50 rounded p-1 text-center">
-              <div className="text-white text-sm font-medium">{validatedEdges.length}</div>
-              <div className="text-gray-400 text-xs">Edges</div>
+      {/* No Graph Selected Overlay */}
+      {showNoGraphMessage && (
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className="max-w-lg text-center bg-gray-800/90 backdrop-blur-sm rounded-xl p-8 border border-gray-600/50 shadow-2xl pointer-events-auto">
+            <div className="text-yellow-300 text-4xl mb-4">
+              📊
             </div>
-            <div className="bg-gray-700/50 rounded p-1 text-center">
-              <div className="text-white text-sm font-medium">{currentGraph?.contributorCount || 0}</div>
-              <div className="text-gray-400 text-xs">Users</div>
+            <h3 className="text-2xl font-bold text-white mb-3">
+              No Graph Selected
+            </h3>
+            <div className="text-gray-400 mb-8 leading-relaxed">
+              Choose a graph to start visualizing your data and see the magic of GraphDone in action.
             </div>
-          </div>
-          )}
-
-          {/* Action Buttons */}
-          <div className={isFullscreen ? "space-y-1 p-2" : "space-y-2"}>
-            {isFullscreen ? (
-              <>
-                {/* Reset Layout Button */}
-                <button 
-                  onClick={() => {
-                    nodes.forEach((node: any) => {
-                      node.userPinned = false;
-                      node.userPreferredPosition = null;
-                      node.userPreferenceVector = null;
-                      node.fx = null;
-                      node.fy = null;
-                    });
-                    if (simulationRef.current) {
-                      simulationRef.current.alpha(0.3).restart();
-                    }
-                  }}
-                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-1 px-1 rounded text-xs flex items-center justify-center space-x-1"
-                >
-                  <Settings className="w-3 h-3" />
-                  <span>Reset</span>
-                </button>
-
-                {/* Create Node Button */}
-                <button 
-                  onClick={() => setShowCreateNodeModal(true)}
-                  className="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-1 px-1 rounded text-xs flex items-center justify-center space-x-1"
-                >
-                  <Plus className="w-3 h-3" />
-                  <span>Create</span>
-                </button>
-
-                {/* Node Types - minimal */}
-                <div className="border-t border-gray-600 pt-1">
-                  <div className="grid grid-cols-2 gap-1">
-                    <button 
-                      onClick={() => createInlineNode(400, 300)}
-                      className="bg-gray-700 hover:bg-gray-600 text-white text-xs py-1 px-1 rounded flex items-center justify-center"
-                      title="Task"
-                    >
-                      <ListTodo className="w-3 h-3" />
-                    </button>
-                    <button 
-                      onClick={() => createInlineNode(400, 300)}
-                      className="bg-gray-700 hover:bg-gray-600 text-white text-xs py-1 px-1 rounded flex items-center justify-center"
-                      title="Goal"
-                    >
-                      <Target className="w-3 h-3" />
-                    </button>
-                  </div>
-                </div>
-              </>
-            ) : (
-              <>
-                {/* Create New Graph Button */}
-                <button 
-                  onClick={() => setShowCreateGraphModal(true)}
-                  className="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 px-3 rounded-md transition-colors duration-200 flex items-center justify-center space-x-2"
-                >
-                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                  </svg>
-                  <span className="text-sm">Create New Graph</span>
-                </button>
-
-                {/* Switch Graph Button */}
-                <button 
-                  onClick={() => setShowGraphSwitcher(true)}
-                  className="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2.5 px-3 rounded-lg transition-colors flex items-center justify-between"
-                >
-                  <div className="flex items-center space-x-2">
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
-                    </svg>
-                    <span className="text-sm">Switch Graph</span>
-                  </div>
-                  <span className="text-xs bg-white px-2 py-1 rounded-full text-yellow-700 font-bold shadow-md">{availableGraphs.length}</span>
-                </button>
-
-                {/* Update and Delete Graph Buttons */}
-                {currentGraph && (
-                  <div className="grid grid-cols-2 gap-2 mt-2">
-                    <button 
-                      onClick={() => setShowUpdateGraphModal(true)}
-                      className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-3 rounded-md transition-colors duration-200 flex items-center justify-center space-x-2"
-                    >
-                      <Settings className="w-4 h-4" />
-                      <span className="text-sm">Edit</span>
-                    </button>
-                    <button 
-                      onClick={() => setShowDeleteGraphModal(true)}
-                      className="bg-red-600 hover:bg-red-700 text-white font-medium py-2.5 px-3 rounded-md transition-colors duration-200 flex items-center justify-center space-x-2"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                      <span className="text-sm">Delete</span>
-                    </button>
-                  </div>
-                )}
-              </>
-            )}
+            
+            <button 
+              onClick={() => setShowGraphSwitcher(true)}
+              className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center gap-3 mx-auto pointer-events-auto cursor-pointer shadow-lg hover:shadow-xl hover:shadow-green-500/25 transform hover:-translate-y-0.5 hover:scale-105"
+            >
+              Select Graph
+            </button>
           </div>
         </div>
-      </div>
-      ) : !isFullscreen && (
-        <button
-          onClick={() => setShowGraphPanel(true)}
-          className="absolute left-4 z-40 backdrop-blur-sm border-0 rounded-lg shadow-xl px-3 py-2 text-white font-semibold transition-all duration-300 flex items-center space-x-2 transform hover:scale-105 w-36 h-10"
-          style={{ 
-            ...getPanelPosition('graph'),
-            background: 'linear-gradient(135deg, #4285f4, #0f9d58, #ea4335)',
-            boxShadow: '0 10px 25px rgba(66, 133, 244, 0.4)'
-          }}
-          title="Show graph panel"
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = 'linear-gradient(135deg, #1a73e8, #137333, #d93025)';
-            e.currentTarget.style.boxShadow = '0 15px 35px rgba(66, 133, 244, 0.6)';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = 'linear-gradient(135deg, #4285f4, #0f9d58, #ea4335)';
-            e.currentTarget.style.boxShadow = '0 10px 25px rgba(66, 133, 244, 0.4)';
-          }}
-        >
-          <div className="flex items-center justify-between w-full">
-            <div className="flex items-center space-x-2">
-              <Settings className="h-4 w-4" />
-              <span className="text-xs font-medium">Graph Panel</span>
-            </div>
-            <div className="w-2 h-2 bg-green-400 rounded-full flex-shrink-0 animate-pulse"></div>
-          </div>
-        </button>
       )}
+      
 
-      {/* Data Health Indicator */}
-      {validationResult && (validationResult.errors.length > 0 || validationResult.warnings.length > 0) && (
-        <div className="absolute top-20 right-6 z-40">
-          <button 
-            onClick={() => setShowDataHealth(!showDataHealth)}
-            className="bg-yellow-600/90 backdrop-blur-sm border border-yellow-500 rounded-lg px-3 py-2 shadow-md hover:bg-yellow-500 transition-all duration-200"
-            data-testid="data-health-indicator"
-          >
-            <div className="flex items-center space-x-2">
-              <AlertTriangle className="w-4 h-4 text-yellow-100" />
-              <span className="text-sm font-medium text-yellow-100">Data Issues</span>
-              <span className="text-xs bg-yellow-500 text-yellow-900 rounded-full px-2 py-0.5">
-                {validationResult.errors.length + validationResult.warnings.length}
-              </span>
-            </div>
-          </button>
-          
-          {/* Data Health Dashboard */}
-          {showDataHealth && (
-            <div className="absolute top-full right-0 mt-2 w-96 bg-gray-800/95 backdrop-blur-sm border border-gray-600 rounded-lg shadow-xl z-50 animate-in fade-in slide-in-from-top-2 duration-200">
-              <div className="p-4 border-b border-gray-600" data-testid="validation-summary">
-                <h3 className="text-sm font-medium text-yellow-300 mb-2">Data Health Summary</h3>
-                <p className="text-xs text-gray-400 mb-3">{getValidationSummary(validationResult)}</p>
-                
-                <div className="grid grid-cols-2 gap-3 text-xs">
-                  <div className="bg-green-900/30 border border-green-500/30 rounded p-2">
-                    <div className="text-green-300 font-medium">Valid Data</div>
-                    <div className="text-green-100">{validationResult.stats.validNodes} nodes, {validationResult.stats.validEdges} edges</div>
-                  </div>
-                  <div className="bg-red-900/30 border border-red-500/30 rounded p-2">
-                    <div className="text-red-300 font-medium">Invalid Data</div>
-                    <div className="text-red-100">{validationResult.stats.invalidNodes} nodes, {validationResult.stats.invalidEdges} edges</div>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Errors Section */}
-              {validationResult.errors.length > 0 && (
-                <div className="p-4 border-b border-gray-600">
-                  <h4 className="text-sm font-medium text-red-300 mb-2 flex items-center">
-                    <AlertCircle className="w-4 h-4 mr-2" />
-                    Errors ({validationResult.errors.length})
-                  </h4>
-                  <div className="max-h-32 overflow-y-auto space-y-2">
-                    {validationResult.errors.slice(0, 5).map((error, index) => (
-                      <div key={index} className="text-xs bg-red-900/20 border border-red-500/30 rounded p-2">
-                        <div className="text-red-200 font-medium">{error.message}</div>
-                        {error.suggestion && (
-                          <div className="text-red-300 mt-1">💡 {error.suggestion}</div>
-                        )}
-                      </div>
-                    ))}
-                    {validationResult.errors.length > 5 && (
-                      <div className="text-xs text-gray-400 text-center">... and {validationResult.errors.length - 5} more errors</div>
-                    )}
-                  </div>
-                </div>
-              )}
-              
-              {/* Warnings Section */}
-              {validationResult.warnings.length > 0 && (
-                <div className="p-4">
-                  <h4 className="text-sm font-medium text-yellow-300 mb-2 flex items-center">
-                    <AlertTriangle className="w-4 h-4 mr-2" />
-                    Warnings ({validationResult.warnings.length})
-                  </h4>
-                  <div className="max-h-32 overflow-y-auto space-y-2">
-                    {validationResult.warnings.slice(0, 3).map((warning, index) => (
-                      <div key={index} className="text-xs bg-yellow-900/20 border border-yellow-500/30 rounded p-2">
-                        <div className="text-yellow-200 font-medium">{warning.message}</div>
-                        {warning.suggestion && (
-                          <div className="text-yellow-300 mt-1">💡 {warning.suggestion}</div>
-                        )}
-                      </div>
-                    ))}
-                    {validationResult.warnings.length > 3 && (
-                      <div className="text-xs text-gray-400 text-center">... and {validationResult.warnings.length - 3} more warnings</div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
 
-      {/* Graph Controls */}
-      <div className="absolute bottom-4 right-4 space-y-2">        
-        <button
-          onClick={() => {
-            // Reset all user preferences and return to algorithmic positioning
-            nodes.forEach((node: any) => {
-              node.userPinned = false;
-              node.userPreferredPosition = null;
-              node.userPreferenceVector = null;
-              node.fx = null;
-              node.fy = null;
-              // Clear positioning cache to force recalculation
-              node.targetX = null;
-              node.targetY = null;
-            });
-            initializeVisualization();
-          }}
-          className="block w-full bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-xs font-medium transition-colors shadow-lg backdrop-blur-sm border border-green-500/30"
-        >
-          Reset Layout
-        </button>
-      </div>
 
       {/* Connection Mode Indicator */}
       {isConnecting && (
@@ -3124,22 +3710,22 @@ export function InteractiveGraphVisualization() {
               <div className="flex flex-col space-y-1">
                 <div className="flex items-center">
                   {(() => {
-                    const priority = nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0;
+                    const priority = nodeMenu.node?.priority || 0;
                     return getPriorityIconElement(priority, "h-3 w-3 mr-1");
                   })()}
                   <span className="text-gray-400">Priority:</span>
-                  <span className="ml-1 font-medium">{Math.round((nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) * 100)}%</span>
+                  <span className="ml-1 font-medium">{Math.round((nodeMenu.node?.priority || 0) * 100)}%</span>
                 </div>
                 <div className="w-full bg-gray-600 rounded-full h-1.5">
                   <div 
                     className={`h-1.5 rounded-full transition-all duration-300 ${
-                      (nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) >= 0.8 ? 'bg-red-400' :
-                      (nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) >= 0.6 ? 'bg-orange-400' :
-                      (nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) >= 0.4 ? 'bg-yellow-400' :
-                      (nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) >= 0.2 ? 'bg-blue-400' :
+                      (nodeMenu.node?.priority || 0) >= 0.8 ? 'bg-red-400' :
+                      (nodeMenu.node?.priority || 0) >= 0.6 ? 'bg-orange-400' :
+                      (nodeMenu.node?.priority || 0) >= 0.4 ? 'bg-yellow-400' :
+                      (nodeMenu.node?.priority || 0) >= 0.2 ? 'bg-blue-400' :
                       'bg-gray-400'
                     }`}
-                    style={{ width: `${Math.round((nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) * 100)}%` }}
+                    style={{ width: `${Math.round((nodeMenu.node?.priority || 0) * 100)}%` }}
                   />
                 </div>
               </div>
@@ -3207,6 +3793,16 @@ export function InteractiveGraphVisualization() {
               <Edit3 className="h-4 w-4 mr-3" />
               Edit Node Details
             </button>
+            <button 
+              onClick={() => {
+                centerOnNode(nodeMenu.node!.id);
+                setNodeMenu(prev => ({ ...prev, visible: false }));
+              }}
+              className="w-full flex items-center px-4 py-2 text-sm text-gray-200 hover:bg-gray-700"
+            >
+              <Crosshair className="h-4 w-4 mr-3" />
+              Center on Node
+            </button>
             <button 
               onClick={() => handleDeleteNode(nodeMenu.node!)}
               className="w-full flex items-center px-4 py-2 text-sm text-red-400 hover:bg-red-900/50"
@@ -3270,100 +3866,130 @@ export function InteractiveGraphVisualization() {
       {/* Context Menu */}
       {contextMenuPosition && (
         <div
-          className="fixed z-50 bg-gray-800 border border-gray-600 rounded-lg shadow-2xl py-2 min-w-[200px]"
+          className="fixed z-50 bg-black/90 backdrop-blur-md border border-white/10 rounded-lg shadow-2xl overflow-hidden min-w-[200px]"
           style={{
-            left: Math.min(contextMenuPosition.x, window.innerWidth - 220),
-            top: Math.min(contextMenuPosition.y, window.innerHeight - 200)
+            left: Math.min(contextMenuPosition?.x || 0, window.innerWidth - 220),
+            top: Math.min(contextMenuPosition?.y || 0, window.innerHeight - 120),
+            boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05)',
+            animation: 'slideInScale 0.2s ease-out'
           }}
           onClick={(e) => e.stopPropagation()}
         >
-          <button
-            onClick={() => {
-              createInlineNode(contextMenuPosition.graphX, contextMenuPosition.graphY);
-              setContextMenuPosition(null);
-            }}
-            className="w-full text-left px-4 py-2 hover:bg-gray-700 text-gray-200 flex items-center space-x-2"
-          >
-            <Plus className="h-4 w-4" />
-            <span>Create Node</span>
-          </button>
-          
-          <button
-            onClick={() => {
-              // Zoom to fit button clicked
-              // Zoom to fit all nodes - completely rewritten for proper detection
-              const svg = d3.select(svgRef.current);
-              const containerRect = containerRef.current?.getBoundingClientRect();
-              if (svg.node() && containerRect && nodes.length > 0) {
-                // Get all node positions (both from simulation and stored positions)
-                const allPositions = nodes.map(node => ({
-                  x: node.x !== undefined ? node.x : (node.positionX || 0),
-                  y: node.y !== undefined ? node.y : (node.positionY || 0)
-                })).filter(pos => pos.x !== undefined && pos.y !== undefined);
-                
-                if (allPositions.length === 0) {
-                  // No valid node positions found
-                  setContextMenuPosition(null);
-                  return;
+          <div className="py-2">
+            {/* Reload Button - at the top for recovery */}
+            <button
+              onClick={() => {
+                console.log('[Graph Debug] User triggered page reload from context menu');
+                window.location.reload();
+              }}
+              className="w-full text-left px-4 py-3 hover:bg-red-500/10 text-gray-200 flex items-center space-x-3 transition-all duration-300 ease-out group rounded-lg mx-2 border-b border-white/5 mb-2"
+            >
+              <div className="w-6 h-6 rounded-lg bg-gray-700/50 flex items-center justify-center group-hover:bg-red-500/20 transition-all duration-300 ease-out">
+                <ArrowLeft className="h-4 w-4 text-gray-400 group-hover:text-red-400 transition-colors duration-300 transform group-hover:rotate-[-90deg]" />
+              </div>
+              <span className="text-gray-300 font-medium group-hover:text-red-400 transition-colors duration-300">Reload Page</span>
+              <div className="ml-auto text-xs text-gray-500 group-hover:text-red-400">Recovery</div>
+            </button>
+            
+            <button
+              onClick={() => {
+                createInlineNode(contextMenuPosition?.graphX || 0, contextMenuPosition?.graphY || 0);
+                setContextMenuPosition(null);
+              }}
+              className="w-full text-left px-4 py-3 hover:bg-white/8 text-gray-200 flex items-center space-x-3 transition-all duration-300 ease-out group rounded-lg mx-2"
+            >
+              <div className="w-6 h-6 rounded-lg bg-gray-700/50 flex items-center justify-center group-hover:bg-emerald-500/20 transition-all duration-300 ease-out">
+                <Plus className="h-4 w-4 text-gray-400 group-hover:text-emerald-400 transition-colors duration-300" />
+              </div>
+              <span className="text-gray-300 font-medium group-hover:text-white transition-colors duration-300">Create Node</span>
+              <div className="ml-auto">
+                <div className="w-1.5 h-1.5 bg-emerald-400 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></div>
+              </div>
+            </button>
+            
+            <button
+              onClick={() => {
+                // Zoom to fit button clicked
+                // Zoom to fit all nodes - completely rewritten for proper detection
+                const svg = d3.select(svgRef.current);
+                const containerRect = containerRef.current?.getBoundingClientRect();
+                if (svg.node() && containerRect && nodes.length > 0) {
+                  // Get all node positions (both from simulation and stored positions)
+                  const allPositions = nodes.map(node => ({
+                    x: node.x !== undefined ? node.x : (node.positionX || 0),
+                    y: node.y !== undefined ? node.y : (node.positionY || 0)
+                  })).filter(pos => pos.x !== undefined && pos.y !== undefined);
+                  
+                  if (allPositions.length === 0) {
+                    // No valid node positions found
+                    setContextMenuPosition(null);
+                    return;
+                  }
+                  
+                  // Find the absolute bounds of all nodes
+                  const minX = Math.min(...allPositions.map(p => p.x));
+                  const maxX = Math.max(...allPositions.map(p => p.x));
+                  const minY = Math.min(...allPositions.map(p => p.y));
+                  const maxY = Math.max(...allPositions.map(p => p.y));
+                  
+                  // Add generous padding for node sizes and breathing room
+                  const nodePadding = 150; // Account for node size
+                  const extraMargin = 300; // Extra breathing room
+                  const totalPadding = nodePadding + extraMargin;
+                  
+                  const boundsWidth = (maxX - minX) + (2 * totalPadding);
+                  const boundsHeight = (maxY - minY) + (2 * totalPadding);
+                  
+                  // Calculate how much we need to scale to fit everything
+                  const containerWidth = containerRect.width;
+                  const containerHeight = containerRect.height;
+                  
+                  const scaleX = containerWidth / boundsWidth;
+                  const scaleY = containerHeight / boundsHeight;
+                  const scale = Math.min(scaleX, scaleY, 0.2); // Very conservative max scale for wide zoom out
+                  
+                  // Find the center of all nodes
+                  const centerX = (minX + maxX) / 2;
+                  const centerY = (minY + maxY) / 2;
+                  
+                  // Calculate translation to center the nodes
+                  const translateX = (containerWidth / 2) - (centerX * scale);
+                  const translateY = (containerHeight / 2) - (centerY * scale);
+                  
+                  // Zoom to fit calculation complete
+                  
+                  // Create the transform and update D3's zoom behavior state properly
+                  const newTransform = d3.zoomIdentity.translate(translateX, translateY).scale(scale);
+                  
+                  // Update D3's internal zoom state immediately (no transition)
+                  svg.property('__zoom', newTransform);
+                  
+                  // Apply the visual transform with transition
+                  const g = svg.select('g');
+                  g.transition()
+                    .duration(750)
+                    .attr('transform', newTransform.toString())
+                    .on('end', () => {
+                      // Update the current transform state
+                      setCurrentTransform({ x: translateX, y: translateY, scale: scale });
+                    });
                 }
-                
-                // Find the absolute bounds of all nodes
-                const minX = Math.min(...allPositions.map(p => p.x));
-                const maxX = Math.max(...allPositions.map(p => p.x));
-                const minY = Math.min(...allPositions.map(p => p.y));
-                const maxY = Math.max(...allPositions.map(p => p.y));
-                
-                // Add generous padding for node sizes and breathing room
-                const nodePadding = 150; // Account for node size
-                const extraMargin = 300; // Extra breathing room
-                const totalPadding = nodePadding + extraMargin;
-                
-                const boundsWidth = (maxX - minX) + (2 * totalPadding);
-                const boundsHeight = (maxY - minY) + (2 * totalPadding);
-                
-                // Calculate how much we need to scale to fit everything
-                const containerWidth = containerRect.width;
-                const containerHeight = containerRect.height;
-                
-                const scaleX = containerWidth / boundsWidth;
-                const scaleY = containerHeight / boundsHeight;
-                const scale = Math.min(scaleX, scaleY, 0.2); // Very conservative max scale for wide zoom out
-                
-                // Find the center of all nodes
-                const centerX = (minX + maxX) / 2;
-                const centerY = (minY + maxY) / 2;
-                
-                // Calculate translation to center the nodes
-                const translateX = (containerWidth / 2) - (centerX * scale);
-                const translateY = (containerHeight / 2) - (centerY * scale);
-                
-                // Zoom to fit calculation complete
-                
-                // Create the transform and update D3's zoom behavior state properly
-                const newTransform = d3.zoomIdentity.translate(translateX, translateY).scale(scale);
-                
-                // Update D3's internal zoom state immediately (no transition)
-                svg.property('__zoom', newTransform);
-                
-                // Apply the visual transform with transition
-                const g = svg.select('g');
-                g.transition()
-                  .duration(750)
-                  .attr('transform', newTransform.toString())
-                  .on('end', () => {
-                    // Update the current transform state
-                    setCurrentTransform({ x: translateX, y: translateY, scale: scale });
-                  });
-              }
-              setContextMenuPosition(null);
-            }}
-            className="w-full text-left px-4 py-2 hover:bg-gray-700 text-gray-200 flex items-center space-x-2"
-          >
-            <div className="h-4 w-4 flex items-center justify-center">
-              <div className="w-3 h-3 border border-gray-400 rounded"></div>
-            </div>
-            <span>Zoom to Fit</span>
-          </button>
+                setContextMenuPosition(null);
+              }}
+              className="w-full text-left px-4 py-3 hover:bg-white/8 text-gray-200 flex items-center space-x-3 transition-all duration-300 ease-out group rounded-lg mx-2"
+            >
+              <div className="w-6 h-6 rounded-lg bg-gray-700/50 flex items-center justify-center group-hover:bg-blue-500/20 transition-all duration-300 ease-out">
+                <svg className="w-4 h-4 text-gray-400 group-hover:text-blue-400 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" strokeWidth="2"/>
+                  <path d="M9 9h6v6H9z" strokeWidth="2"/>
+                </svg>
+              </div>
+              <span className="text-gray-300 font-medium group-hover:text-white transition-colors duration-300">Zoom to Fit</span>
+              <div className="ml-auto">
+                <div className="w-1.5 h-1.5 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></div>
+              </div>
+            </button>
+          </div>
         </div>
       )}
 
@@ -3375,329 +4001,33 @@ export function InteractiveGraphVisualization() {
         />
       )}
 
-      {/* Modern Inline Edge Type Editor Dropdown */}
-      {editingEdge && (
-        <>
-          {/* Backdrop for edge editor */}
-          <div 
-            className="fixed inset-0 z-40" 
-            onClick={() => setEditingEdge(null)}
-          />
-          <div
-            ref={dropdownRef}
-            className="absolute z-50"
-            style={{
-              left: dropdownPosition?.left ?? (() => {
-                const dropdownWidth = 250;
-                const margin = 20;
-                const x = editingEdge.position.x;
-                
-                // If dropdown would go off the right edge, align it to the right
-                if (x + dropdownWidth/2 > window.innerWidth - margin) {
-                  return window.innerWidth - dropdownWidth - margin;
-                }
-                // If dropdown would go off the left edge, align it to the left
-                if (x - dropdownWidth/2 < margin) {
-                  return margin;
-                }
-                // Otherwise center it on the cursor
-                return x - dropdownWidth/2;
-              })(),
-              top: dropdownPosition?.top ?? (() => {
-                const dropdownHeight = 320; // Estimate for full dropdown height
-                const margin = 20;
-                const y = editingEdge.position.y;
-                
-                // If dropdown would go off the bottom, position it above the cursor
-                if (y + dropdownHeight > window.innerHeight - margin) {
-                  return Math.max(margin, y - dropdownHeight - 10);
-                }
-                // Otherwise position it below the cursor
-                return Math.min(y + 10, window.innerHeight - dropdownHeight - margin);
-              })(),
-              minWidth: '250px',
-              animation: 'fadeInScale 0.2s ease-out',
-              transition: 'left 0.3s ease-out, top 0.3s ease-out'
-            }}
-            onClick={(e) => e.stopPropagation()}
-        >
-          {/* Remove arrow since dropdown is at same position as label */}
-          
-          {/* Dropdown content with professional shadow */}
-          <div className="bg-gray-800/98 backdrop-blur-xl border border-gray-700/50 rounded-lg shadow-2xl overflow-hidden"
-               style={{
-                 boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3)'
-               }}>
-            {/* Header */}
-            <div className="px-3 py-2 bg-gradient-to-r from-gray-800 to-gray-700 border-b border-gray-700/50">
-              <div className="text-xs font-semibold text-gray-300 flex items-center justify-between">
-                <span>Select Relationship Type</span>
-                <button
-                  onClick={() => setEditingEdge(null)}
-                  className="text-gray-500 hover:text-gray-300 transition-colors"
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </div>
-            </div>
-            
-            {/* Options with scroll */}
-            <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-800">
-              <div className="p-1">
-                {RELATIONSHIP_OPTIONS.map((option, index) => (
-                  <button
-                    key={option.type}
-                    onClick={() => {
-                      // Update the edge type with animation
-                      updateEdgeMutation({
-                        variables: {
-                          where: { id: editingEdge.edge.id },
-                          update: { type: option.type }
-                        }
-                      }).then((result) => {
-                        
-                        // Immediately update the D3 visualization without waiting for refetch
-                        const svg = d3.select(svgRef.current);
-                        const edgeId = editingEdge.edge.id;
-                        const newType = option.type;
-                        const config = getRelationshipConfig(newType);
-                        
-                        // Update edge label text and layout immediately
-                        svg.selectAll('.edge-label-group')
-                          .filter((d: any) => d.id === edgeId)
-                          .each(function() {
-                            const group = d3.select(this);
-                            const textElement = group.select('.edge-label');
-                            
-                            // Update text
-                            textElement.text(config.label);
-                            
-                            // Update icon to match new relationship type
-                            const iconElement = group.select('.edge-label-icon');
-                            const { IconComponent } = getRelationshipIconForD3(newType);
-                            const iconContainer = iconElement.node();
-                            if (iconContainer) {
-                              const uniqueId = `edge-icon-${edgeId}-${Date.now()}`;
-                              iconElement.html(`<div id="${uniqueId}" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"></div>`);
-                              
-                              const newContainer = document.getElementById(uniqueId);
-                              if (newContainer) {
-                                const root = ReactDOM.createRoot(newContainer);
-                                root.render(React.createElement(IconComponent, { 
-                                  className: "h-3 w-3 text-white"
-                                }));
-                              }
-                            }
-                            
-                            // Recalculate layout after text change
-                            const bbox = (textElement.node() as SVGTextElement).getBBox();
-                            const iconWidth = 14;
-                            const spacing = 8;
-                            const paddingLeft = 6;
-                            const paddingRight = 8;
-                            const totalWidth = paddingLeft + iconWidth + spacing + bbox.width + paddingRight;
-                            const totalHeight = Math.max(22, bbox.height + 8);
-                            
-                            // Update background rectangle
-                            group.select('.edge-label-bg')
-                              .attr('width', totalWidth)
-                              .attr('height', totalHeight)
-                              .attr('x', -totalWidth / 2)
-                              .attr('y', -totalHeight / 2)
-                              .style('fill', config.hexColor);
-                            
-                            // Reposition icon
-                            group.select('.edge-label-icon')
-                              .attr('x', -totalWidth / 2 + paddingLeft)
-                              .attr('y', -totalHeight / 2 + (totalHeight - 14) / 2);
-                            
-                            // Reposition text  
-                            textElement
-                              .attr('x', -totalWidth / 2 + paddingLeft + iconWidth + spacing)
-                              .attr('text-anchor', 'start');
-                          });
-                        
-                        // Update edge stroke color immediately
-                        svg.selectAll('.edge')
-                          .filter((d: any) => d.id === edgeId)
-                          .attr('stroke', config.hexColor);
-                        
-                        
-                        setEditingEdge(null);
-                      }).catch(() => {
-                      });
-                    }}
-                    className={`w-full flex items-center px-3 py-2.5 rounded-lg transition-all duration-150 group ${
-                      editingEdge.edge.type === option.type
-                        ? 'bg-gradient-to-r from-blue-600/20 to-purple-600/20 text-white border border-blue-500/30'
-                        : 'text-gray-300 hover:bg-gray-700/50 hover:text-white'
-                    }`}
-                    style={{
-                      animationDelay: `${index * 20}ms`
-                    }}
-                  >
-                    <div className="flex items-center space-x-3 flex-1">
-                      {/* Icon with color */}
-                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-transform group-hover:scale-110 ${
-                        editingEdge.edge.type === option.type 
-                          ? 'bg-gradient-to-br from-blue-500/20 to-purple-500/20' 
-                          : 'bg-gray-700/50'
-                      }`}>
-                        {getRelationshipIconElement(option.type, 'h-4 w-4')}
-                      </div>
-                      
-                      {/* Label and description */}
-                      <div className="text-left">
-                        <div className="font-medium text-sm">{option.label}</div>
-                        <div className="text-xs text-gray-500 mt-0.5">{option.description}</div>
-                      </div>
-                    </div>
-                    
-                    {/* Selected indicator */}
-                    {editingEdge.edge.type === option.type && (
-                      <div className="flex items-center space-x-1">
-                        <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-                        <span className="text-xs text-green-400 font-medium">Current</span>
-                      </div>
-                    )}
-                  </button>
-                ))}
-              </div>
-            </div>
-            
-            {/* Footer with current selection */}
-            <div className="px-3 py-2 bg-gray-900/50 border-t border-gray-700/50">
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-gray-500">
-                  Current: <span className="text-gray-300 font-medium">
-                    {getRelationshipConfig(editingEdge.edge.type as RelationshipType).label}
-                  </span>
-                </span>
-                <kbd className="px-1.5 py-0.5 text-xs bg-gray-800 rounded border border-gray-700 text-gray-400">
-                  ESC to close
-                </kbd>
-              </div>
-            </div>
-          </div>
-        </div>
-        </>
-      )}
-
-      {/* Create Node Button - Hide when no nodes exist */}
-      {!showEmptyStateOverlay && !isFullscreen && (
-      <button
-        onClick={() => createInlineNode(400, 300)}
-        className="absolute left-4 z-40 backdrop-blur-sm border-0 rounded-lg shadow-xl px-3 py-2 text-white font-semibold transition-all duration-300 flex items-center space-x-2 transform hover:scale-105 w-36 h-10"
-        style={{ 
-          ...getPanelPosition('create'),
-          background: 'linear-gradient(135deg, #10b981, #059669)',
-          boxShadow: '0 10px 25px rgba(16, 185, 129, 0.4)'
+      {/* Relationship Editor Window */}
+      <RelationshipEditorWindow
+        isVisible={showRelationshipWindow}
+        editingEdge={editingEdge}
+        selectedNodes={selectedNodes}
+        workItems={workItems}
+        onClose={() => setShowRelationshipWindow(false)}
+        onFlipDirection={() => {
+          // The component handles flip internally
+          setEditingEdge(null); // Clear after flip
         }}
-        title="Create new node"
-        onMouseEnter={(e) => {
-          e.currentTarget.style.background = 'linear-gradient(135deg, #059669, #047857)';
-          e.currentTarget.style.boxShadow = '0 15px 35px rgba(16, 185, 129, 0.6)';
+        onDeleteEdge={(edgeId) => {
+          setEditingEdge(null); // Clear after delete
         }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.background = 'linear-gradient(135deg, #10b981, #059669)';
-          e.currentTarget.style.boxShadow = '0 10px 25px rgba(16, 185, 129, 0.4)';
+        onCreateEdge={(sourceId, targetId, type) => {
+          // Clear selection after create
+          setSelectedNodes(new Set());
         }}
-      >
-        <div className="flex items-center justify-between w-full">
-          <div className="flex items-center space-x-2">
-            <Plus className="h-4 w-4" />
-            <span className="text-xs font-medium">Create Node</span>
-          </div>
-        </div>
-      </button>
-      )}
+        showSuccess={showSuccess}
+        showError={showError}
+        refetchEdges={refetchEdges}
+        onClearSelection={() => {
+          setSelectedNodes(new Set());
+        }}
+      />
 
 
-      {/* Legend */}
-      {showLegend && !isFullscreen ? (
-        <div className="absolute left-4 bg-gray-800/95 backdrop-blur-sm border border-gray-600/60 rounded-lg shadow-xl p-4 w-64" style={getPanelPosition('legend')}>
-          <div className="flex items-center justify-between mb-3">
-            <div className="text-sm font-semibold text-white">Node Types</div>
-            <button
-              onClick={() => setShowLegend(false)}
-              className="p-1 rounded text-gray-400 hover:text-white hover:bg-gray-700/50 transition-colors"
-              title="Minimize legend"
-            >
-              <Minus className="h-4 w-4" />
-            </button>
-          </div>
-          <div className="grid grid-cols-2 gap-2 text-sm text-gray-300">
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('EPIC', "w-4 h-4")}
-              <span>Epic</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('TASK', "w-4 h-4")}
-              <span>Task</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('MILESTONE', "w-4 h-4")}
-              <span>Milestone</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('BUG', "w-4 h-4")}
-              <span>Bug</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('OUTCOME', "w-4 h-4")}
-              <span>Outcome</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('IDEA', "w-4 h-4")}
-              <span>Idea</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('FEATURE', "w-4 h-4")}
-              <span>Feature</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              {getTypeIconElement('RESEARCH', "w-4 h-4")}
-              <span>Research</span>
-            </div>
-          </div>
-          <hr className="border-gray-600 mt-3" />
-          <div className="pt-3">
-            <div className="text-sm text-gray-500 opacity-85 w-full leading-relaxed text-left">
-              • Select nodes to access menu<br/>
-              • Drag to reposition<br/>
-              • Scroll for zoom<br/>
-              • Select edges for options
-            </div>
-          </div>
-        </div>
-      ) : !isFullscreen && (
-        <button
-          onClick={() => setShowLegend(true)}
-          className="absolute left-4 z-40 backdrop-blur-sm border-0 rounded-lg shadow-xl px-3 py-2 text-white font-semibold transition-all duration-300 flex items-center space-x-2 transform hover:scale-105 w-36 h-10"
-          style={{ 
-            ...getPanelPosition('legend'),
-            background: 'linear-gradient(135deg, #ec4899, #f97316)',
-            boxShadow: '0 10px 25px rgba(236, 72, 153, 0.4)'
-          }}
-          title="Show legend"
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = 'linear-gradient(135deg, #f43f5e, #ec4899)';
-            e.currentTarget.style.boxShadow = '0 15px 35px rgba(244, 63, 94, 0.6)';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = 'linear-gradient(135deg, #ec4899, #f97316)';
-            e.currentTarget.style.boxShadow = '0 10px 25px rgba(236, 72, 153, 0.4)';
-          }}
-        >
-          <div className="flex items-center justify-between w-full">
-            <div className="flex items-center space-x-2">
-              <FileText className="h-4 w-4" />
-              <span className="text-xs font-medium">Node Types</span>
-            </div>
-          </div>
-        </button>
-      )}
-
       {/* Node Details Modal */}
       {showNodeDetailsModal && selectedNode && (
         <NodeDetailsModal
@@ -3709,219 +4039,18 @@ export function InteractiveGraphVisualization() {
           node={selectedNode}
           edges={validatedEdges}
           nodes={validatedNodes}
-          onEdit={(node) => {
+          onConnectToExisting={(node) => {
             setShowNodeDetailsModal(false);
-            setShowEditModal(true);
-            // Don't set selectedNode again since it's already the correct node
+            handleConnectToExistingNodes(node);
           }}
-        />
-      )}
-
-      {/* Edit Node Modal */}
-      {showEditModal && selectedNode && (
-        <EditNodeModal
-          isOpen={showEditModal}
-          onClose={handleCloseEditModal}
-          node={selectedNode}
-        />
-      )}
-
-      {/* Delete Node Modal */}
-      {showDeleteModal && selectedNode && (
-        <DeleteNodeModal
-          isOpen={showDeleteModal}
-          onClose={handleCloseDeleteModal}
-          nodeId={selectedNode.id}
-          nodeTitle={selectedNode.title}
-          nodeType={selectedNode.type}
-          onOpenDisconnectModal={handleOpenDisconnectFromDelete}
-        />
-      )}
-
-      {/* Create Graph Modal */}
-      {showCreateGraphModal && (
-        <CreateGraphModal
-          isOpen={showCreateGraphModal}
-          onClose={() => setShowCreateGraphModal(false)}
-        />
-      )}
-
-      {/* Graph Selection Modal */}
-      {showGraphSwitcher && (
-        <GraphSelectionModal
-          isOpen={showGraphSwitcher}
-          onClose={() => setShowGraphSwitcher(false)}
-        />
-      )}
-
-      {/* Update Graph Modal */}
-      {showUpdateGraphModal && (
-        <UpdateGraphModal
-          isOpen={showUpdateGraphModal}
-          onClose={() => setShowUpdateGraphModal(false)}
-        />
-      )}
-
-      {/* Delete Graph Modal */}
-      {showDeleteGraphModal && (
-        <DeleteGraphModal
-          isOpen={showDeleteGraphModal}
-          onClose={() => setShowDeleteGraphModal(false)}
-        />
-      )}
-
-
-      {/* Create Node Modal */}
-      {showCreateNodeModal && selectedNode && (
-        <CreateNodeModal
-          isOpen={showCreateNodeModal}
-          onClose={handleCloseCreateNodeModal}
-          parentNodeId={selectedNode.id}
-          position={createNodePosition}
-        />
-      )}
-
-      {/* Create Node Modal - For Empty State */}
-      {showCreateNodeModal && !selectedNode && (
-        <CreateNodeModal
-          isOpen={showCreateNodeModal}
-          onClose={() => setShowCreateNodeModal(false)}
-        />
-      )}
-
-      {/* Connect Node Modal - With Connect and Disconnect Tabs */}
-      {showConnectModal && selectedNode && (
-        <ConnectNodeModal
-          isOpen={showConnectModal}
-          onClose={handleCloseConnectModal}
-          sourceNode={{
-            id: selectedNode.id,
-            title: selectedNode.title,
-            type: selectedNode.type
+          onDisconnect={(node) => {
+            setShowNodeDetailsModal(false);
+            handleDisconnectNodes(node);
           }}
-          initialTab={connectModalInitialTab}
-          onAllConnectionsRemoved={openedFromDeleteModal ? () => {
-            // Auto-return to delete modal when all connections removed
-            setShowConnectModal(false);
-            setOpenedFromDeleteModal(false);
-            setConnectModalInitialTab('connect');
-            setShowDeleteModal(true);
-          } : undefined}
         />
       )}
 
-      {/* Edge Details Panel */}
-      {showEdgeDetails && selectedEdge && (
-        <>
-          {/* Backdrop for edge details */}
-          <div 
-            className="fixed inset-0 z-40" 
-            onClick={() => {
-              setShowEdgeDetails(false);
-              setSelectedEdge(null);
-              setEdgeDetailsPosition(null);
-            }}
-          />
-          <div 
-            className="fixed w-80 bg-gray-800 border border-gray-600 rounded-lg shadow-xl z-50"
-            style={{
-              left: `${edgeDetailsPosition ? Math.min(edgeDetailsPosition.x - 160, window.innerWidth - 320) : window.innerWidth - 340}px`,
-              top: `${edgeDetailsPosition ? Math.max(edgeDetailsPosition.y - 100, 10) : 20}px`
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-          <div className="p-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-semibold text-white">Edge Details</h3>
-              <button
-                onClick={() => {
-                  setShowEdgeDetails(false);
-                  setSelectedEdge(null);
-                  setEdgeDetailsPosition(null);
-                }}
-                className="text-gray-400 hover:text-white"
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-            
-            <div className="space-y-3">
-              <div>
-                <label className="text-sm font-medium text-gray-300">Relationship Type</label>
-                <div className="flex items-center space-x-2 mt-1">
-                  {getRelationshipIconElement(selectedEdge.type, 'h-4 w-4')}
-                  <span className="text-white">{getRelationshipConfig(selectedEdge.type).label}</span>
-                </div>
-              </div>
-              
-              <div>
-                <label className="text-sm font-medium text-gray-300">From</label>
-                <p className="text-white text-sm mt-1">
-                  {typeof selectedEdge.source === 'string' ? selectedEdge.source : (selectedEdge.source as any)?.title || (selectedEdge.source as any)?.id || 'Unknown'}
-                </p>
-              </div>
-              
-              <div>
-                <label className="text-sm font-medium text-gray-300">To</label>
-                <p className="text-white text-sm mt-1">
-                  {typeof selectedEdge.target === 'string' ? selectedEdge.target : (selectedEdge.target as any)?.title || (selectedEdge.target as any)?.id || 'Unknown'}
-                </p>
-              </div>
-              
-              {selectedEdge.description && (
-                <div>
-                  <label className="text-sm font-medium text-gray-300">Description</label>
-                  <p className="text-white text-sm mt-1">{selectedEdge.description}</p>
-                </div>
-              )}
-              
-              <div className="pt-4 border-t border-gray-600">
-                <button
-                  onClick={async () => {
-                    try {
-                      await deleteEdgeMutation({
-                        variables: { where: { id: selectedEdge.id } }
-                      });
-                      setShowEdgeDetails(false);
-                      setSelectedEdge(null);
-                      setEdgeDetailsPosition(null);
-                      showSuccess('Edge Deleted', 'Relationship removed successfully');
-                    } catch (error: any) {
-                      showError('Delete Failed', error.message || 'Could not delete edge');
-                    }
-                  }}
-                  className="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"
-                >
-                  <Trash2 className="h-4 w-4" />
-                  <span>Delete Relationship</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        </>
-      )}
-
-      {/* Fullscreen Toggle */}
-      {isFullscreen ? (
-        <button
-          onClick={() => navigate('/')}
-          className="absolute top-4 right-6 z-50 bg-gray-800 hover:bg-gray-700 text-white p-3 rounded-lg border border-gray-600 flex items-center space-x-2 transition-colors shadow-lg"
-          title="Back to Workspace"
-        >
-          <ArrowLeft className="h-5 w-5" />
-          <span>Back</span>
-        </button>
-      ) : (
-        <button
-          onClick={() => navigate('/graph')}
-          className="absolute top-4 right-6 z-50 bg-gray-800 hover:bg-gray-700 text-white p-3 rounded-lg border border-gray-600 flex items-center space-x-2 transition-colors shadow-lg"
-          title="Full Zen Mode"
-        >
-          <Maximize2 className="h-5 w-5" />
-          <span>Zen Mode</span>
-        </button>
-      )}
+{/* Fullscreen toggle removed - fullscreen mode abandoned */}
 
     </div>
   );
diff --git a/packages/web/src/components/KanbanView.tsx b/packages/web/src/components/KanbanView.tsx
index 3e9acddd..d67aab40 100644
--- a/packages/web/src/components/KanbanView.tsx
+++ b/packages/web/src/components/KanbanView.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { 
-  Edit,
-  Trash2
+  GitBranch,
+  ArrowRight,
+  ArrowLeft
 } from 'lucide-react';
 import {
   CheckCircle,
@@ -17,7 +18,8 @@ import {
   getStatusIconElement,
   WORK_ITEM_STATUSES,
   getContributorColor,
-  getDueDateColorScheme
+  getDueDateColorScheme,
+  getTypeGradientBackground
 } from '../constants/workItemConstants';
 import { TagDisplay } from './TagDisplay';
 import { AnimatedPriority } from './AnimatedPriority';
@@ -29,10 +31,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -42,14 +41,21 @@ interface WorkItem {
   assignedTo?: { id: string; name: string; username: string; };
   graph?: { id: string; name: string; team?: { id: string; name: string; } };
   contributors?: Array<{ id: string; name: string; type: string; }>;
-  dependencies?: Array<{ id: string; title: string; type: string; }>;
-  dependents?: Array<{ id: string; title: string; type: string; }>;
+  dependencies?: Array<{ id: string; title: string; type: string; status: string; }>;
+  dependents?: Array<{ id: string; title: string; type: string; status: string; }>;
+}
+
+interface Edge {
+  id: string;
+  type: string;
+  source: { id: string; title: string; type: string; };
+  target: { id: string; title: string; type: string; };
 }
 
 interface KanbanViewProps {
   filteredNodes: WorkItem[];
   handleEditNode: (node: WorkItem) => void;
-  handleDeleteNode: (node: WorkItem) => void;
+  edges: Edge[];
 }
 
 const formatLabel = (label: string) => {
@@ -64,8 +70,31 @@ const getNodeTypeColor = (type: string) => {
   return `${config.color} ${config.bgColor} ${config.borderColor} border`;
 };
 
+const getNodeTypeKanbanBackground = (type: string) => {
+  return getTypeGradientBackground(type as WorkItemType, 'kanban');
+};
+
 const getNodePriority = (node: WorkItem) => {
-  return node.priorityExec || 0;
+  return node.priority || 0;
+};
+
+const getNodeTypeKanbanBorderColor = (type: string) => {
+  return getTypeConfig(type as WorkItemType).hexColor;
+};
+
+const getConnectionDetails = (node: WorkItem, edges: Edge[]) => {
+  const incomingEdges = edges.filter(edge => edge.target.id === node.id);
+  const outgoingEdges = edges.filter(edge => edge.source.id === node.id);
+  const incomingCount = incomingEdges.length;
+  const outgoingCount = outgoingEdges.length;
+  const totalCount = incomingCount + outgoingCount;
+  return { 
+    incomingCount, 
+    outgoingCount, 
+    totalCount,
+    incomingEdges,
+    outgoingEdges
+  };
 };
 
 
@@ -84,7 +113,7 @@ const getContributorAvatar = (contributor?: string) => {
   );
 };
 
-const KanbanView: React.FC<KanbanViewProps> = ({ filteredNodes, handleEditNode, handleDeleteNode }) => {
+const KanbanView: React.FC<KanbanViewProps> = ({ filteredNodes, handleEditNode, edges }) => {
   const statuses = Object.keys(WORK_ITEM_STATUSES) as WorkItemStatus[];
 
   const nodesByStatus = statuses.reduce((acc, status) => {
@@ -100,8 +129,8 @@ const KanbanView: React.FC<KanbanViewProps> = ({ filteredNodes, handleEditNode,
         
         return (
           <div key={status} className="flex-shrink-0 w-80">
-            <div className="bg-gray-800 rounded-lg h-full">
-              <div className={`p-4 border-b border-gray-600`}>
+            <div className="bg-gray-800/40 backdrop-blur-sm rounded-lg h-full">
+              <div className={`p-4 border-b border-gray-600/30`}>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center space-x-3">
                     <div className={`${config.bgColor} rounded-lg p-2 border ${config.borderColor}`}>
@@ -126,7 +155,14 @@ const KanbanView: React.FC<KanbanViewProps> = ({ filteredNodes, handleEditNode,
                   .map((node) => (
                   <div
                     key={node.id}
-                    className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md dark:shadow-md dark:hover:shadow-lg transition-all duration-200 cursor-pointer border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700/50 hover:scale-[1.02] hover:-translate-y-1 group"
+                    onClick={() => handleEditNode(node)}
+                    className={`${getNodeTypeKanbanBackground(node.type)} rounded-lg p-4 shadow-md hover:shadow-lg hover:shadow-white/10 transition-all duration-200 cursor-pointer border border-gray-600/40 hover:border-gray-500/60 hover:scale-[1.02] hover:-translate-y-1 hover:brightness-125 group backdrop-blur-sm`}
+                    style={{
+                      borderLeft: `4px solid ${getNodeTypeKanbanBorderColor(node.type)}`,
+                      borderLeftWidth: '4px',
+                      borderLeftStyle: 'solid',
+                      borderLeftColor: getNodeTypeKanbanBorderColor(node.type)
+                    }}
                   >
                     <div className="flex items-start justify-between mb-2">
                       <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getNodeTypeColor(node.type)}`}>
@@ -134,29 +170,42 @@ const KanbanView: React.FC<KanbanViewProps> = ({ filteredNodes, handleEditNode,
                         <span className="ml-1">{formatLabel(node.type)}</span>
                       </span>
                       
-                      {/* Action buttons - appear on hover */}
-                      <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleEditNode(node);
-                          }}
-                          className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400 transition-colors"
-                          title="Edit node"
-                        >
-                          <Edit className="h-4 w-4" />
-                        </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleDeleteNode(node);
-                          }}
-                          className="flex items-center justify-center w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 transition-colors"
-                          title="Delete node"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </button>
-                      </div>
+                      {/* Connections */}
+                      {(() => {
+                        const { incomingCount, outgoingCount, totalCount } = getConnectionDetails(node, edges);
+                        
+                        if (totalCount === 0) {
+                          return (
+                            <div className="flex items-center space-x-1 text-gray-400 dark:text-gray-500">
+                              <GitBranch className="h-3 w-3" />
+                              <span className="text-xs">0</span>
+                            </div>
+                          );
+                        }
+                        
+                        return (
+                          <div className="flex items-center space-x-2">
+                            <div className="flex items-center space-x-1">
+                              <GitBranch className="h-3 w-3 text-gray-500 dark:text-gray-400" />
+                              <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{totalCount}</span>
+                            </div>
+                            <div className="flex items-center space-x-1">
+                              {incomingCount > 0 && (
+                                <div className="flex items-center space-x-1 px-1 py-0.5 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-500/30 rounded">
+                                  <ArrowLeft className="h-2 w-2 text-red-500" />
+                                  <span className="text-xs font-medium text-red-600 dark:text-red-400">{incomingCount}</span>
+                                </div>
+                              )}
+                              {outgoingCount > 0 && (
+                                <div className="flex items-center space-x-1 px-1 py-0.5 bg-purple-100 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-500/30 rounded">
+                                  <ArrowRight className="h-2 w-2 text-purple-500" />
+                                  <span className="text-xs font-medium text-purple-600 dark:text-purple-400">{outgoingCount}</span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      })()}
                     </div>
                     
                     <h4 className="text-gray-900 dark:text-white font-medium mb-2 text-base break-words">{node.title}</h4>
@@ -232,7 +281,7 @@ const KanbanView: React.FC<KanbanViewProps> = ({ filteredNodes, handleEditNode,
                           </div>
                         ) : (
                           <div className="space-y-1 text-left">
-                            <div className="inline-flex items-center px-2 py-1 bg-gray-100 border border-gray-200 text-gray-600 text-xs font-medium rounded dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+                            <div className="inline-flex items-center px-2 py-1 bg-gray-100/50 border border-gray-200/50 text-gray-600 text-xs font-medium rounded dark:bg-gray-800/30 dark:border-gray-700/30 dark:text-gray-400 backdrop-blur-sm">
                               No due date
                             </div>
                             <div className="text-xs text-gray-500 dark:text-gray-400">
diff --git a/packages/web/src/components/Layout.tsx b/packages/web/src/components/Layout.tsx
index 800253de..3c2fd099 100644
--- a/packages/web/src/components/Layout.tsx
+++ b/packages/web/src/components/Layout.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Brain, Bot, BarChart3, Settings, Menu, Server, Globe, Shield, Users } from 'lucide-react';
+import { Brain, Bot, BarChart3, Settings, Menu, Server, Globe, Shield, Users, Terminal } from 'lucide-react';
 import { UserSelector } from './UserSelector';
 import { GraphSelector } from './GraphSelector';
 import { useAuth } from '../contexts/AuthContext';
 import { McpHealthIndicator } from './McpHealthIndicator';
+import FloatingConsole from './FloatingConsole';
+import { APP_VERSION } from '../utils/version';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -13,6 +15,8 @@ interface LayoutProps {
 export function Layout({ children }: LayoutProps) {
   const location = useLocation();
   const [sidebarOpen, setSidebarOpen] = React.useState(false);
+  const [showFloatingConsole, setShowFloatingConsole] = React.useState(false);
+  const desktopSidebarCollapsed = true; // Zen mode permanently on
   const { currentTeam, currentUser } = useAuth();
 
   const navigation = [
@@ -26,10 +30,39 @@ export function Layout({ children }: LayoutProps) {
   ];
 
   return (
-    <div className="min-h-screen bg-gray-900">
+    <div 
+      className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative overflow-hidden"
+      style={{
+        '--sidebar-width': desktopSidebarCollapsed ? '4rem' : '16rem'
+      } as React.CSSProperties}
+    >
+      {/* Tropical lagoon light scattering background animation - zen mode everywhere */}
+      <div className="lagoon-caustics">
+        <div className="caustic-layer caustic-layer-1"></div>
+        <div className="caustic-layer caustic-layer-2"></div>
+        <div className="caustic-layer caustic-layer-3"></div>
+        <div className="caustic-layer caustic-layer-4"></div>
+        <div className="caustic-layer caustic-layer-5"></div>
+        <div className="caustic-layer caustic-layer-6"></div>
+        <div className="caustic-layer caustic-layer-7"></div>
+        <div className="caustic-layer caustic-layer-8"></div>
+        <div className="caustic-layer caustic-layer-9"></div>
+        <div className="caustic-layer caustic-layer-10"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-6"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-7"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-8"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-9"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-10"></div>
+      </div>
+      
       {/* Mobile menu button */}
-      <div className="lg:hidden">
-        <div className="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-700">
+      <div className="lg:hidden relative z-30">
+        <div className="flex items-center justify-between bg-gray-800/90 backdrop-blur-sm px-4 py-2 border-b border-gray-700/50">
           <div className="flex items-center">
             <button
               type="button"
@@ -38,7 +71,9 @@ export function Layout({ children }: LayoutProps) {
             >
               <Menu className="h-6 w-6" aria-hidden="true" />
             </button>
-            <h1 className="ml-3 text-xl font-bold text-green-400">GraphDone</h1>
+            <Link to="/" className="ml-3 text-xl font-bold text-green-400 hover:text-green-300 transition-colors">
+              GraphDone
+            </Link>
           </div>
         </div>
       </div>
@@ -48,17 +83,22 @@ export function Layout({ children }: LayoutProps) {
         <div className={`
           ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
           lg:translate-x-0 lg:static lg:inset-0
-          fixed inset-y-0 left-0 z-50 w-64 bg-gray-800 border-r border-gray-700
-          transform transition-transform duration-200 ease-in-out
+          fixed inset-y-0 left-0 z-50 bg-gray-800/95 backdrop-blur-sm border-r border-gray-700/50
+          transform transition-all duration-200 ease-in-out
+          ${desktopSidebarCollapsed ? 'lg:w-16' : 'w-64'}
         `}>
           <div className="flex flex-col h-full">
             {/* Logo */}
-            <div className="flex items-center h-16 px-6 border-b border-gray-700">
+            <div className={`flex items-center h-16 px-6 border-b border-gray-700 ${desktopSidebarCollapsed ? 'lg:justify-center lg:px-4' : ''}`}>
               <img src="/favicon.svg" alt="GraphDone Logo" className="h-8 w-8" />
-              <span className="ml-3 text-xl font-bold text-green-300">GraphDone</span>
+              {!desktopSidebarCollapsed && (
+                <Link to="/" className="ml-3 text-xl font-bold text-green-300 hover:text-green-400 transition-colors">
+                  GraphDone
+                </Link>
+              )}
             </div>
 
-            {/* Navigation */}
+            {/* Navigation Buttons - Section 2 */}
             <nav className="flex-1 px-4 py-6 space-y-2">
               {navigation.map((item) => {
                 const Icon = item.icon;
@@ -75,16 +115,28 @@ export function Layout({ children }: LayoutProps) {
                   return (
                     <div
                       key={item.name}
-                      className="flex items-center px-3 py-3 rounded-lg transition-colors group cursor-not-allowed opacity-50"
-                      title={`${item.description} (${restrictionMessage})`}
+                      className={`
+                        flex items-center px-3 py-3 rounded-lg transition-colors group cursor-not-allowed opacity-50 relative
+                        ${desktopSidebarCollapsed ? 'lg:justify-center lg:px-2' : ''}
+                      `}
+                      title={desktopSidebarCollapsed ? `${item.name}: ${restrictionMessage}` : `${item.description} (${restrictionMessage})`}
                     >
-                      <Icon className="h-5 w-5 mr-3 flex-shrink-0 text-gray-500" />
-                      <div className="flex-1 min-w-0">
-                        <div className="text-sm font-medium text-gray-500">{item.name}</div>
-                        <div className="text-xs text-gray-600 truncate">
-                          {restrictionMessage}
+                      <Icon className="h-5 w-5 flex-shrink-0 text-gray-500" />
+                      {!desktopSidebarCollapsed && (
+                        <div className="flex-1 min-w-0 ml-3">
+                          <div className="text-sm font-medium text-gray-500">{item.name}</div>
+                          <div className="text-xs text-gray-600 truncate">
+                            {restrictionMessage}
+                          </div>
                         </div>
-                      </div>
+                      )}
+                      {/* Tooltip for collapsed mode */}
+                      {desktopSidebarCollapsed && (
+                        <div className="hidden lg:group-hover:block absolute left-full top-1/2 transform -translate-y-1/2 ml-2 px-2 py-1 bg-gray-800 border border-gray-600 rounded shadow-lg text-sm whitespace-nowrap z-50">
+                          <div className="font-medium text-gray-500">{item.name}</div>
+                          <div className="text-xs text-gray-600">{restrictionMessage}</div>
+                        </div>
+                      )}
                     </div>
                   );
                 }
@@ -94,34 +146,48 @@ export function Layout({ children }: LayoutProps) {
                     key={item.name}
                     to={item.href}
                     className={`
-                      flex items-center px-3 py-3 rounded-lg transition-colors group
+                      flex items-center px-3 py-3 rounded-lg transition-colors group relative
+                      ${desktopSidebarCollapsed ? 'lg:justify-center lg:px-2' : ''}
                       ${isActive
                         ? 'bg-green-900/30 text-green-300 border border-green-500/30'
                         : 'text-gray-300 hover:bg-gray-700'
                       }
                     `}
                     onClick={() => setSidebarOpen(false)}
-                    title={item.description}
+                    title={desktopSidebarCollapsed ? `${item.name}: ${item.description}` : item.description}
                   >
-                    <Icon className="h-5 w-5 mr-3 flex-shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium">{item.name}</div>
-                      <div className="text-xs text-gray-400 truncate group-hover:text-gray-300">
-                        {item.description}
+                    <Icon className="h-5 w-5 flex-shrink-0" />
+                    {!desktopSidebarCollapsed && (
+                      <>
+                        <div className="flex-1 min-w-0 ml-3">
+                          <div className="text-sm font-medium">{item.name}</div>
+                          <div className="text-xs text-gray-400 truncate group-hover:text-gray-300">
+                            {item.description}
+                          </div>
+                        </div>
+                      </>
+                    )}
+                    {/* Tooltip for collapsed mode */}
+                    {desktopSidebarCollapsed && (
+                      <div className="hidden lg:group-hover:block absolute left-full top-1/2 transform -translate-y-1/2 ml-2 px-2 py-1 bg-gray-800 border border-gray-600 rounded shadow-lg text-sm whitespace-nowrap z-50">
+                        <div className="font-medium">{item.name}</div>
+                        <div className="text-xs text-gray-400">{item.description}</div>
                       </div>
-                    </div>
+                    )}
                   </Link>
                 );
               })}
             </nav>
 
             {/* Graph Selector */}
-            <div className="border-t border-gray-700">
-              <GraphSelector />
-            </div>
+            {!desktopSidebarCollapsed && (
+              <div className="border-t border-gray-700">
+                <GraphSelector />
+              </div>
+            )}
 
             {/* Guest Mode Indicator */}
-            {currentUser?.role === 'GUEST' && (
+            {currentUser?.role === 'GUEST' && !desktopSidebarCollapsed && (
               <div className="border-t border-gray-700 p-4">
                 <div className="bg-purple-900/30 border border-purple-500/30 rounded-lg p-3">
                   <div className="flex items-center space-x-2">
@@ -136,32 +202,101 @@ export function Layout({ children }: LayoutProps) {
             )}
 
             {/* User Selector */}
-            <div className="border-t border-gray-700">
-              <UserSelector />
-            </div>
-
-            {/* Footer with MCP Status */}
-            <div className="p-4 border-t border-gray-700">
-              {/* MCP Health Indicator */}
-              <div className="mb-3 flex items-center justify-between">
-                <span className="text-xs text-gray-400">MCP Server</span>
-                <McpHealthIndicator showDetails={false} />
+            {!desktopSidebarCollapsed && (
+              <div className="border-t border-gray-700">
+                <UserSelector />
               </div>
-              
-              {currentTeam && (
-                <div className="mb-2">
-                  <p className="text-xs text-gray-300 font-medium">{currentTeam.name}</p>
-                  <p className="text-xs text-gray-500">
-                    {currentTeam.memberCount || 0} members
+            )}
+
+            {/* Status Section - Section 3 */}
+            <div className={`p-4 border-t border-gray-700 ${desktopSidebarCollapsed ? 'lg:px-2' : ''}`}>
+              {!desktopSidebarCollapsed ? (
+                <>
+                  {/* MCP Health Indicator */}
+                  <div className="mb-3 flex items-center justify-between">
+                    <span className="text-xs text-gray-400">MCP Server</span>
+                    <McpHealthIndicator showDetails={false} />
+                  </div>
+                </>
+              ) : (
+                <div className="flex justify-center">
+                  <McpHealthIndicator showDetails={false} />
+                </div>
+              )}
+            </div>
+            
+            {/* Console & Tools Section - Section 4 */}
+            <div className={`p-4 border-t border-gray-700/50 ${desktopSidebarCollapsed ? 'lg:px-2' : ''}`}>
+              {!desktopSidebarCollapsed ? (
+                <>
+                  {/* Debug Console Toggle */}
+                  <div className="mb-3">
+                    <button
+                      onClick={() => setShowFloatingConsole(!showFloatingConsole)}
+                      className="w-full flex items-center justify-between p-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700/50 rounded-lg transition-all duration-200"
+                      title="Toggle Debug/Chat Console"
+                    >
+                      <span className="flex items-center">
+                        <Terminal className="h-4 w-4 mr-2 text-green-400" />
+                        <span>Debug Console</span>
+                      </span>
+                      {showFloatingConsole && (
+                        <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
+                      )}
+                    </button>
+                  </div>
+                  
+                  {currentTeam && (
+                    <div className="mb-2">
+                      <p className="text-xs text-gray-300 font-medium">{currentTeam.name}</p>
+                      <p className="text-xs text-gray-500">
+                        {currentTeam.memberCount || 0} members
+                      </p>
+                    </div>
+                  )}
+                  <p className="text-xs text-gray-400">
+                    v{APP_VERSION}
                   </p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    For teams who think differently
+                  </p>
+                </>
+              ) : (
+                <div className="flex justify-center">
+                  <button
+                    onClick={() => setShowFloatingConsole(!showFloatingConsole)}
+                    className="p-2 text-gray-300 hover:text-white hover:bg-gray-700/50 rounded-lg transition-all duration-200 relative"
+                    title="Toggle Debug/Chat Console"
+                  >
+                    <Terminal className="h-4 w-4 text-green-400" />
+                    {showFloatingConsole && (
+                      <div className="absolute -top-1 -right-1 w-2 h-2 bg-green-400 rounded-full animate-pulse" />
+                    )}
+                  </button>
                 </div>
               )}
-              <p className="text-xs text-gray-400">
-                v0.2.1-alpha
-              </p>
-              <p className="text-xs text-gray-500 mt-1">
-                For teams who think differently
-              </p>
+            </div>
+            
+            {/* Footer Info Section */}
+            <div className={`p-4 border-t border-gray-700/30 ${desktopSidebarCollapsed ? 'lg:px-2' : ''}`}>
+              {!desktopSidebarCollapsed && (
+                <>
+                  {currentTeam && (
+                    <div className="mb-2">
+                      <p className="text-xs text-gray-300 font-medium">{currentTeam.name}</p>
+                      <p className="text-xs text-gray-500">
+                        {currentTeam.memberCount || 0} members
+                      </p>
+                    </div>
+                  )}
+                  <p className="text-xs text-gray-400">
+                    v{APP_VERSION}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    For teams who think differently
+                  </p>
+                </>
+              )}
             </div>
           </div>
         </div>
@@ -175,12 +310,19 @@ export function Layout({ children }: LayoutProps) {
         )}
 
         {/* Main content */}
-        <div className="flex-1 flex flex-col min-w-0">
-          <main className="flex-1">
+        <div className="flex-1 flex flex-col min-w-0 relative z-20">
+          <main className="flex-1 select-none">
             {children}
           </main>
         </div>
       </div>
+      
+      {/* Global Floating Console */}
+      <FloatingConsole
+        isVisible={showFloatingConsole}
+        onToggle={() => setShowFloatingConsole(!showFloatingConsole)}
+        onClose={() => setShowFloatingConsole(false)}
+      />
     </div>
   );
 }
\ No newline at end of file
diff --git a/packages/web/src/components/LoginSecurityDialog.tsx b/packages/web/src/components/LoginSecurityDialog.tsx
new file mode 100644
index 00000000..1f4b0d64
--- /dev/null
+++ b/packages/web/src/components/LoginSecurityDialog.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { X, Shield, Lock, Database, AlertTriangle } from 'lucide-react';
+
+interface LoginSecurityDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function LoginSecurityDialog({ isOpen, onClose }: LoginSecurityDialogProps) {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div 
+      className="fixed inset-0 z-[999999999] flex items-center justify-center p-4"
+      style={{ 
+        backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        backdropFilter: 'blur(4px)',
+        pointerEvents: 'all'
+      }}
+      onClick={onClose}
+    >
+      <div 
+        className="bg-gray-800 border border-gray-700 rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-700">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-green-900 rounded-full flex items-center justify-center">
+              <Shield className="h-5 w-5 text-green-400" />
+            </div>
+            <div>
+              <h2 className="text-xl font-semibold text-gray-100">🔒 How We Protect Your Account</h2>
+              <p className="text-sm text-gray-400">GraphDone authentication security practices</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Password Security */}
+          <div className="space-y-3">
+            <div className="flex items-start space-x-3">
+              <div className="w-8 h-8 bg-green-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                <Lock className="h-4 w-4 text-green-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-green-400 mb-1">✓ Secure Password Handling</h3>
+                <p className="text-sm text-gray-300 mb-2">
+                  Your passwords are never stored in plain text. We use industry-standard bcrypt hashing 
+                  with 10 rounds of salt, making it computationally infeasible to reverse.
+                </p>
+                <div className="bg-gray-900 border border-gray-600 rounded p-3 text-xs font-mono text-gray-400">
+                  your-password → bcrypt.hash(password, 10) → $2b$10$encrypted-hash-never-reversible
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Database Security */}
+          <div className="space-y-3">
+            <div className="flex items-start space-x-3">
+              <div className="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                <Database className="h-4 w-4 text-blue-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-blue-400 mb-1">✓ Secure Database Storage</h3>
+                <p className="text-sm text-gray-300 mb-2">
+                  Authentication data is stored in a local SQLite database with restricted file permissions (600). 
+                  Password hashes are never exposed through our API responses.
+                </p>
+                <ul className="text-xs text-gray-400 space-y-1 ml-4">
+                  <li>• Local file-based storage (no network exposure)</li>
+                  <li>• Restricted file permissions (owner read/write only)</li>
+                  <li>• API responses always exclude password hashes</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Current Limitations */}
+          <div className="space-y-3">
+            <div className="flex items-start space-x-3">
+              <div className="w-8 h-8 bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                <AlertTriangle className="h-4 w-4 text-orange-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-orange-400 mb-1">⚠ Security Enhancements In Progress</h3>
+                <p className="text-sm text-gray-300 mb-2">
+                  We're actively implementing additional security measures:
+                </p>
+                <ul className="text-sm text-gray-300 space-y-1 ml-4">
+                  <li>• <span className="text-orange-400">Rate limiting</span> - Preventing brute force login attempts</li>
+                  <li>• <span className="text-orange-400">Account lockout</span> - Temporary locks after failed attempts</li>
+                  <li>• <span className="text-orange-400">Login history</span> - Track and monitor access patterns</li>
+                  <li>• <span className="text-orange-400">Encryption at rest</span> - Database file encryption</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Development Notice */}
+          <div className="bg-yellow-900 border border-yellow-700 rounded-lg p-4">
+            <div className="flex items-start space-x-3">
+              <div className="text-yellow-400 flex-shrink-0 mt-0.5">⚡</div>
+              <div>
+                <h3 className="font-semibold text-yellow-400 mb-1">Development Environment</h3>
+                <p className="text-sm text-yellow-200">
+                  This is a development environment with demo users. In production, default passwords 
+                  will be disabled and stronger security measures will be enforced.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Password Requirements */}
+          <div className="bg-gray-900 border border-gray-600 rounded-lg p-4">
+            <h3 className="font-semibold text-gray-100 mb-2">Password Requirements</h3>
+            <ul className="text-sm text-gray-300 space-y-1">
+              <li>• Minimum 8 characters (enforced during signup)</li>
+              <li>• Mix of uppercase, lowercase, numbers, and symbols recommended</li>
+              <li>• Password confirmation required</li>
+              <li>• Strength meter provides real-time feedback</li>
+            </ul>
+          </div>
+
+          {/* Data Protection */}
+          <div className="text-xs text-gray-400 border-t border-gray-700 pt-4">
+            <p>
+              <strong className="text-gray-300">Privacy Commitment:</strong> We never log, store, or transmit your actual passwords. 
+              Only salted, irreversibly hashed representations are maintained for authentication purposes. 
+              Your privacy and security are our top priority.
+            </p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-gray-700 p-6 bg-gray-750">
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-gray-400">
+              Questions about security? Check our{' '}
+              <a href="/docs/security" className="text-green-400 hover:text-green-300">
+                security documentation
+              </a>
+            </div>
+            <button
+              onClick={onClose}
+              className="btn btn-primary text-sm"
+            >
+              Got it, thanks
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
\ No newline at end of file
diff --git a/packages/web/src/components/NodeDetailsModal.tsx b/packages/web/src/components/NodeDetailsModal.tsx
index 919653b6..e4dbe84e 100644
--- a/packages/web/src/components/NodeDetailsModal.tsx
+++ b/packages/web/src/components/NodeDetailsModal.tsx
@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { 
-  X, User, Flag, Edit3, 
-  GitBranch, ArrowRight, ArrowLeft, Ban, Link2, Folder, Split, Copy, Shield, Bookmark, Package
+  X, User, Flag, Edit3, Save, ChevronDown, Plus, Unlink, Trash2,
+  GitBranch, ArrowRight, ArrowLeft, Ban, Link2, Folder, Split, Copy, Shield, Bookmark, Package,
+  Sparkles, Hash, Crown, Activity, Gem, Rocket, Star, Brain
 } from 'lucide-react';
+import { useMutation } from '@apollo/client';
+import { UPDATE_WORK_ITEM, GET_WORK_ITEMS, CREATE_EDGE, GET_EDGES, DELETE_EDGE, DELETE_WORK_ITEM } from '../lib/queries';
+import { useAuth } from '../contexts/AuthContext';
+import { useGraph } from '../contexts/GraphContext';
+import { useNotifications } from '../contexts/NotificationContext';
 import {
   Calendar, Clock,
-  Layers, Trophy, Target, Sparkles, ListTodo, AlertTriangle, Lightbulb, Microscope,
+  Layers, Trophy, Target, ListTodo, AlertTriangle, Lightbulb, Microscope,
   ClipboardList, CheckCircle, AlertCircle, Flame, Zap, Triangle, Circle, ArrowDown,
   getRelationshipIconElement,
   getRelationshipConfig,
@@ -17,7 +23,14 @@ import {
   getPriorityConfig,
   getTypeIconElement,
   getStatusIconElement,
-  getPriorityIconElement
+  getPriorityIconElement,
+  STATUS_OPTIONS,
+  TYPE_OPTIONS,
+  DEFAULT_NODE_CONFIG,
+  RELATIONSHIP_TYPES,
+  getTypeColorScheme,
+  getStatusColorScheme,
+  getPriorityColorScheme
 } from '../constants/workItemConstants';
 import { WorkItem, WorkItemEdge } from '../types/graph';
 
@@ -28,21 +41,304 @@ interface NodeDetailsModalProps {
   edges?: WorkItemEdge[];
   nodes?: WorkItem[];
   onEdit?: (node: WorkItem) => void;
+  onConnectToExisting?: (node: WorkItem) => void;
+  onDisconnect?: (node: WorkItem) => void;
+  onDelete?: (node: WorkItem) => void;
 }
 
-export function NodeDetailsModal({ isOpen, onClose, node, edges = [], nodes = [], onEdit }: NodeDetailsModalProps) {
+export function NodeDetailsModal({ 
+  isOpen, 
+  onClose, 
+  node, 
+  edges = [], 
+  nodes = [], 
+  onEdit,
+  onConnectToExisting,
+  onDisconnect,
+  onDelete 
+}: NodeDetailsModalProps) {
+  const { currentGraph } = useGraph();
+  const { showSuccess, showError, showWarning } = useNotifications();
+  const [editedNode, setEditedNode] = useState<WorkItem | null>(null);
+  const [showTypeDropdown, setShowTypeDropdown] = useState(false);
+  const [showStatusDropdown, setShowStatusDropdown] = useState(false);
+  const [showConnectDropdown, setShowConnectDropdown] = useState(false);
+  const [showDisconnectDropdown, setShowDisconnectDropdown] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteConfirmed, setDeleteConfirmed] = useState(false);
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [selectedNodesForConnection, setSelectedNodesForConnection] = useState<string[]>([]);
+  const [selectedEdgesForDisconnection, setSelectedEdgesForDisconnection] = useState<string[]>([]);
+  const connectDropdownRef = useRef<HTMLDivElement>(null);
+  const disconnectDropdownRef = useRef<HTMLDivElement>(null);
+  const datePickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (node) {
+      setEditedNode({ ...node });
+    }
+  }, [node]);
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (connectDropdownRef.current && !connectDropdownRef.current.contains(event.target as Node)) {
+        setShowConnectDropdown(false);
+      }
+      if (disconnectDropdownRef.current && !disconnectDropdownRef.current.contains(event.target as Node)) {
+        setShowDisconnectDropdown(false);
+      }
+    }
+
+    if (showConnectDropdown || showDisconnectDropdown) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+    
+    return () => {}; // Ensure all code paths return a value
+  }, [showConnectDropdown, showDisconnectDropdown]);
+
+  const [createEdge] = useMutation(CREATE_EDGE, {
+    refetchQueries: [{ query: GET_EDGES }],
+    // Remove individual success messages - we'll show a batch message instead
+    onError: (error) => {
+      showError(`Failed to create connection: ${error.message}`);
+    }
+  });
+
+  const [deleteEdge] = useMutation(DELETE_EDGE, {
+    refetchQueries: [{ query: GET_EDGES }],
+    // Remove individual success messages - we'll show a batch message instead
+    onError: (error) => {
+      showError(`Failed to remove connection: ${error.message}`);
+    }
+  });
+
+  // Toggle node selection for batch connection
+  const toggleNodeSelection = (nodeId: string) => {
+    setSelectedNodesForConnection(prev => 
+      prev.includes(nodeId) 
+        ? prev.filter(id => id !== nodeId)
+        : [...prev, nodeId]
+    );
+  };
+
+  // Toggle edge selection for batch disconnection
+  const toggleEdgeSelection = (edgeId: string) => {
+    setSelectedEdgesForDisconnection(prev => 
+      prev.includes(edgeId) 
+        ? prev.filter(id => id !== edgeId)
+        : [...prev, edgeId]
+    );
+  };
+
+  // Connect to selected nodes
+  const handleConnectSelected = async () => {
+    if (selectedNodesForConnection.length === 0) return;
+    
+    const count = selectedNodesForConnection.length;
+    const isPlural = count > 1;
+    
+    try {
+      const edgeInputs = selectedNodesForConnection.map(targetNodeId => ({
+        type: RELATIONSHIP_TYPES.DEFAULT_EDGE.type,
+        weight: 1.0,
+        source: { connect: { where: { node: { id: currentNode.id } } } },
+        target: { connect: { where: { node: { id: targetNodeId } } } }
+      }));
+
+      await createEdge({
+        variables: { input: edgeInputs }
+      });
+
+      showSuccess(`Connected to ${count} node${isPlural ? 's' : ''} successfully`);
+      setSelectedNodesForConnection([]);
+      setShowConnectDropdown(false);
+    } catch (error) {
+      console.error('Error creating connections:', error);
+      showError('Failed to create some connections');
+    }
+  };
+
+  // Disconnect selected edges
+  const handleDisconnectSelected = async () => {
+    if (selectedEdgesForDisconnection.length === 0) return;
+    
+    const count = selectedEdgesForDisconnection.length;
+    const isPlural = count > 1;
+    
+    try {
+      for (const edgeId of selectedEdgesForDisconnection) {
+        await deleteEdge({
+          variables: { where: { id: edgeId } }
+        });
+      }
+
+      showSuccess(`Removed ${count} connection${isPlural ? 's' : ''} successfully`);
+      setSelectedEdgesForDisconnection([]);
+      setShowDisconnectDropdown(false);
+    } catch (error) {
+      console.error('Error removing connections:', error);
+      showError('Failed to remove some connections');
+    }
+  };
+
+  // Handle disconnecting from a node
+  const handleDisconnect = async (edgeId: string) => {
+    try {
+      await deleteEdge({
+        variables: {
+          where: { id: edgeId }
+        }
+      });
+    } catch (error) {
+      console.error('Error removing connection:', error);
+    }
+  };
+
+  const [updateWorkItem, { loading: updating }] = useMutation(UPDATE_WORK_ITEM, {
+    refetchQueries: [
+      { 
+        query: GET_WORK_ITEMS,
+        variables: currentGraph ? {
+          where: { graph: { id: currentGraph.id } }
+        } : { where: {} }
+      }
+    ],
+    onCompleted: () => {
+      showSuccess('Node updated successfully');
+    },
+    onError: (error) => {
+      showError(`Failed to update node: ${error.message}`);
+    }
+  });
+
+  const [deleteWorkItem, { loading: deleting }] = useMutation(DELETE_WORK_ITEM, {
+    refetchQueries: [
+      { 
+        query: GET_WORK_ITEMS,
+        variables: currentGraph ? {
+          where: { graph: { id: currentGraph.id } }
+        } : { where: {} }
+      },
+      { query: GET_EDGES }
+    ],
+    onCompleted: () => {
+      showSuccess('Node deleted successfully');
+      onClose();
+    },
+    onError: (error) => {
+      showError(`Failed to delete node: ${error.message}`);
+    }
+  });
+
+  const handleSave = async () => {
+    if (!editedNode || !node) return;
+
+    try {
+      const updateInput: any = {
+        title: editedNode.title,
+        description: editedNode.description,
+        type: editedNode.type,
+        status: editedNode.status,
+        priority: editedNode.priority,
+        tags: editedNode.tags || [],
+        dueDate: editedNode.dueDate,
+      };
+
+      // Handle assignedTo relationship properly for Neo4j GraphQL
+      const currentAssignedToId = typeof node.assignedTo === 'string' ? node.assignedTo : node.assignedTo?.id;
+      const newAssignedToId = typeof editedNode.assignedTo === 'string' ? editedNode.assignedTo : editedNode.assignedTo?.id;
+      
+      if (newAssignedToId && newAssignedToId !== currentAssignedToId) {
+        // Connect to new user
+        updateInput.assignedTo = {
+          connect: {
+            where: { node: { id: newAssignedToId } }
+          }
+        };
+      } else if (!newAssignedToId && currentAssignedToId) {
+        // Disconnect current user
+        updateInput.assignedTo = {
+          disconnect: {
+            where: { node: { id: currentAssignedToId } }
+          }
+        };
+      }
+
+      await updateWorkItem({
+        variables: {
+          where: { id: node.id },
+          update: updateInput
+        }
+      });
+    } catch (error) {
+      console.error('Failed to update node:', error);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!node) return;
+
+    // Check if node has any connections
+    const hasConnections = nodeConnections.length > 0;
+    
+    if (hasConnections) {
+      // Use warning notification (yellow/orange) instead of error (red)
+      showWarning(
+        'Cannot Delete Node',
+        `This node has ${nodeConnections.length} connection(s). Please disconnect all relationships first before deleting.`
+      );
+      return;
+    }
+
+    // Show inline confirmation instead of browser popup
+    setShowDeleteConfirm(true);
+    setDeleteConfirmed(false); // Reset checkbox
+  };
+
+  const confirmDelete = async () => {
+    if (!node) return;
+
+    try {
+      await deleteWorkItem({
+        variables: {
+          where: { id: node.id }
+        }
+      });
+    } catch (error) {
+      console.error('Failed to delete node:', error);
+    }
+  };
+
+  
   if (!isOpen || !node) return null;
 
+  const currentNode = editedNode || node;
+
+  // Check if any changes have been made
+  const hasChanges = editedNode && node && (
+    editedNode.title !== node.title ||
+    editedNode.description !== node.description ||
+    editedNode.type !== node.type ||
+    editedNode.status !== node.status ||
+    editedNode.priority !== node.priority ||
+    JSON.stringify(editedNode.tags || []) !== JSON.stringify(node.tags || []) ||
+    (typeof editedNode.assignedTo === 'string' ? editedNode.assignedTo : editedNode.assignedTo?.id) !== 
+    (typeof node.assignedTo === 'string' ? node.assignedTo : node.assignedTo?.id) ||
+    editedNode.dueDate !== node.dueDate
+  );
+
   // Use the same priority calculation as ListView for consistency
   const getNodePriority = (node: WorkItem) => {
-    return node.priorityComp || node.priorityExec || 0;
+    return node.priority || 0;
   };
   
-  const totalPriority = getNodePriority(node);
+  const totalPriority = getNodePriority(currentNode);
 
   const getStatusColor = (status: string) => {
-    const statusConfig = getStatusConfig(status as WorkItemStatus);
-    return `${statusConfig.color} ${statusConfig.bgColor}`;
+    const statusScheme = getStatusColorScheme(status as WorkItemStatus);
+    return `${statusScheme.text} ${statusScheme.background}`;
   };
 
   const getStatusIcon = (status: string) => {
@@ -50,8 +346,8 @@ export function NodeDetailsModal({ isOpen, onClose, node, edges = [], nodes = []
   };
 
   const getTypeColor = (type: string) => {
-    const typeConfig = getTypeConfig(type as WorkItemType);
-    return `${typeConfig.color} ${typeConfig.bgColor}`;
+    const typeScheme = getTypeColorScheme(type as WorkItemType);
+    return `${typeScheme.text} ${typeScheme.background}`;
   };
 
   const getTypeIcon = (type: string) => {
@@ -73,28 +369,54 @@ export function NodeDetailsModal({ isOpen, onClose, node, edges = [], nodes = []
   };
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric'
-    });
+    // Parse the ISO date string directly to avoid timezone issues
+    const date = new Date(dateString);
+    const day = date.getUTCDate();
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const month = monthNames[date.getUTCMonth()];
+    const year = date.getUTCFullYear();
+    return `${day} ${month} ${year}`;
   };
 
-  const priorityInfo = getPriorityLevel(totalPriority);
+  const priorityInfo = getPriorityLevel(editedNode?.priority || totalPriority);
 
   // Get connections for this node
   const nodeConnections = edges.filter(edge => 
-    edge.source === node.id || edge.target === node.id
+    edge.source === currentNode.id || edge.target === currentNode.id
   );
 
-  const incomingConnections = nodeConnections.filter(edge => edge.target === node.id);
-  const outgoingConnections = nodeConnections.filter(edge => edge.source === node.id);
+  const incomingConnections = nodeConnections.filter(edge => edge.target === currentNode.id);
+  const outgoingConnections = nodeConnections.filter(edge => edge.source === currentNode.id);
 
 
   const getConnectedNode = (nodeId: string) => {
     return nodes.find(n => n.id === nodeId);
   };
 
+  // Get nodes available for connection (exclude current node and already connected nodes)
+  const getAvailableNodes = () => {
+    const connectedNodeIds = nodeConnections.map(edge => 
+      edge.source === currentNode.id ? edge.target : edge.source
+    );
+    return nodes.filter(n => 
+      n.id !== currentNode.id && !connectedNodeIds.includes(n.id)
+    );
+  };
+
+  // Get currently connected nodes with their connection info
+  const getConnectedNodes = () => {
+    return nodeConnections.map(edge => {
+      const isIncoming = edge.target === currentNode.id;
+      const connectedNodeId = isIncoming ? edge.source : edge.target;
+      const connectedNode = getConnectedNode(connectedNodeId);
+      return {
+        node: connectedNode,
+        edge,
+        isIncoming
+      };
+    }).filter(item => item.node);
+  };
+
   const getRelationshipColor = (type: string) => {
     const config = getRelationshipConfig(type as RelationshipType);
     return `${config.color} ${config.color.replace('text-', 'bg-')}/10`;
@@ -106,241 +428,436 @@ export function NodeDetailsModal({ isOpen, onClose, node, edges = [], nodes = []
   };
 
   const getRelationshipIcon = (type: string) => {
-    return getRelationshipIconElement(type as RelationshipType, "h-3 w-3");
+    return getRelationshipIconElement(type as RelationshipType, "h-4 w-4");
   };
 
   return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 bg-black/70 backdrop-blur-lg z-50 flex items-center justify-center p-4">
       <div 
         className="fixed inset-0 cursor-pointer" 
         onClick={onClose}
       />
       <div 
-        className="relative bg-gray-900 border border-gray-700 shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg animate-in fade-in zoom-in-95 duration-300"
+        className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 border border-gray-600/50 shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-2xl animate-in fade-in zoom-in-95 duration-300 ring-1 ring-white/20 overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-700">
-          <div className="flex items-center space-x-3">
-            <span className={`flex items-center space-x-2 px-3 py-1 rounded-md text-sm font-medium ${getTypeColor(node.type)}`}>
-              {getTypeIcon(node.type)}
-              <span>{node.type}</span>
-            </span>
-            <span className={`flex items-center space-x-2 px-3 py-1 rounded-md text-sm font-medium ${getStatusColor(node.status)}`}>
-              {getStatusIcon(node.status)}
-              <span>{node.status.replace(/_/g, ' ')}</span>
-            </span>
-          </div>
-          <div className="flex items-center space-x-2">
-            {onEdit && (
+        {/* Gradient accent line at top */}
+        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-green-500 to-purple-500"></div>
+        
+        {/* Subtle background pattern */}
+        <div className="absolute inset-0 opacity-5 pointer-events-none">
+          <div className="w-full h-full" style={{
+            backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+            backgroundSize: '24px 24px'
+          }}></div>
+        </div>
+
+        {/* Enhanced Header */}
+        <div className="relative flex items-center justify-between p-8 border-b border-gray-600/50 bg-gradient-to-r from-gray-800/30 via-gray-700/20 to-gray-800/30 backdrop-blur-sm">
+          <div className="flex items-center space-x-20">
+            {/* Enhanced Clickable Type Badge */}
+            <div className="relative">
               <button
-                onClick={() => onEdit(node)}
-                className="p-2 text-gray-400 hover:text-gray-300 hover:bg-gray-800 rounded-lg transition-colors"
-                title="Edit Node"
+                onClick={() => setShowTypeDropdown(!showTypeDropdown)}
+                className={`flex items-center space-x-3 px-5 py-3 rounded-xl text-sm font-semibold hover:scale-105 transition-all duration-200 cursor-pointer shadow-lg backdrop-blur-sm ${getTypeColor(currentNode.type)} border border-opacity-30 hover:border-opacity-50`}
               >
-                <Edit3 className="h-5 w-5" />
+                <div className="flex items-center space-x-2">
+                  {getTypeIcon(currentNode.type)}
+                  <span className="bg-gradient-to-r from-white to-gray-100 bg-clip-text text-transparent font-bold">{currentNode.type}</span>
+                </div>
+                <ChevronDown className="h-4 w-4 opacity-70" />
               </button>
-            )}
+              
+              {/* Enhanced Type Dropdown */}
+              {showTypeDropdown && (
+                <div className="absolute top-full left-0 mt-1 w-56 bg-gray-900 border-2 border-gray-500 rounded-lg shadow-2xl z-[9999] max-h-[350px] overflow-y-auto overflow-x-hidden">
+                  {TYPE_OPTIONS.filter(opt => opt.value !== 'all').map((type) => (
+                    <button
+                      key={type.value}
+                      onClick={() => {
+                        setEditedNode(prev => prev ? { ...prev, type: type.value as WorkItemType } : null);
+                        setShowTypeDropdown(false);
+                      }}
+                      className={`w-full flex items-center justify-between px-4 py-3 hover:bg-gray-800 transition-colors text-left border-b border-gray-600 last:border-b-0 ${getTypeColorScheme(type.value as WorkItemType).text} text-white`}
+                    >
+                      <div className="flex items-center space-x-2">
+                        {type.icon && <type.icon className={`h-4 w-4 ${getTypeColorScheme(type.value as WorkItemType).text}`} />}
+                        <span>{type.label}</span>
+                      </div>
+                      {currentNode.type === type.value && (
+                        <span className="text-green-400 ml-1">✓</span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Enhanced Clickable Status Badge */}
+            <div className="relative">
+              <button
+                onClick={() => setShowStatusDropdown(!showStatusDropdown)}
+                className={`flex items-center space-x-3 px-5 py-3 rounded-xl text-sm font-semibold hover:scale-105 transition-all duration-200 cursor-pointer shadow-lg backdrop-blur-sm ${getStatusColor(currentNode.status)} border border-opacity-30 hover:border-opacity-50`}
+              >
+                <div className="flex items-center space-x-2">
+                  {getStatusIcon(currentNode.status)}
+                  <span className="bg-gradient-to-r from-white to-gray-100 bg-clip-text text-transparent font-bold">{currentNode.status.replace(/_/g, ' ')}</span>
+                </div>
+                <ChevronDown className="h-4 w-4 opacity-70" />
+              </button>
+              
+              {/* Enhanced Status Dropdown */}
+              {showStatusDropdown && (
+                <div className="absolute top-full left-0 mt-1 w-56 bg-gray-900 border-2 border-gray-500 rounded-lg shadow-2xl z-[9999] max-h-[350px] overflow-y-auto overflow-x-hidden">
+                  {STATUS_OPTIONS.filter(opt => opt.value !== 'all').map((status) => (
+                    <button
+                      key={status.value}
+                      onClick={() => {
+                        setEditedNode(prev => prev ? { ...prev, status: status.value as WorkItemStatus } : null);
+                        setShowStatusDropdown(false);
+                      }}
+                      className={`w-full flex items-center justify-between px-4 py-3 hover:bg-gray-800 transition-colors text-left border-b border-gray-600 last:border-b-0 ${getStatusColorScheme(status.value as WorkItemStatus).text} text-white`}
+                    >
+                      <div className="flex items-center space-x-2">
+                        {status.icon && <status.icon className={`h-4 w-4 ${getStatusColorScheme(status.value as WorkItemStatus).text}`} />}
+                        <span>{status.label}</span>
+                      </div>
+                      {currentNode.status === status.value && (
+                        <span className="text-green-400 ml-2">✓</span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center space-x-3">
+            <button
+              onClick={handleSave}
+              disabled={updating || !hasChanges}
+              className={`flex items-center space-x-2 px-6 py-3 rounded-xl transition-all duration-300 text-sm font-semibold shadow-lg ${
+                hasChanges && !updating
+                  ? 'bg-gradient-to-r from-green-600 to-emerald-600 text-white hover:from-green-500 hover:to-emerald-500 hover:scale-105 transform border border-green-400/30'
+                  : 'bg-gray-700 text-gray-500 cursor-not-allowed border border-gray-600'
+              }`}
+              title={hasChanges ? "Save Changes" : "No changes to save"}
+            >
+              <Save className="h-4 w-4" />
+              <span>Save</span>
+            </button>
             <button
               onClick={onClose}
-              className="p-2 text-gray-400 hover:text-gray-300 hover:bg-gray-800 rounded-lg transition-colors"
+              className="p-3 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110 shadow-lg backdrop-blur-sm"
             >
               <X className="h-5 w-5" />
             </button>
           </div>
         </div>
 
-        {/* Content */}
-        <div className="p-6">
-          {/* Title */}
-          <h2 className="text-2xl font-bold text-white mb-4">{node.title}</h2>
+        {/* Enhanced Content */}
+        <div className="flex p-8 gap-8 bg-gradient-to-br from-gray-800/20 via-transparent to-gray-900/20">
+          {/* Enhanced Left Column - Main Content */}
+          <div className="flex-1">
+          {/* Enhanced Title - Always Editable */}
+          <div className="mb-6">
+            <input
+              type="text"
+              value={editedNode?.title || ''}
+              onChange={(e) => setEditedNode(prev => prev ? { ...prev, title: e.target.value } : null)}
+              className="text-2xl font-bold bg-gray-800 border border-gray-600 text-white placeholder-gray-400 mb-2 w-full focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 hover:border-gray-500 p-4 rounded-xl shadow-lg cursor-text"
+              placeholder="Enter title..."
+              autoComplete="off"
+            />
+          </div>
 
-          {/* Description */}
-          {node.description && (
-            <div className="mb-6">
-              <h3 className="text-sm font-medium text-gray-400 mb-2">Description</h3>
-              <p className="text-gray-300 leading-relaxed">{node.description}</p>
-            </div>
-          )}
-
-          {/* Type and Status */}
-          <div className="flex items-center space-x-4 mb-6">
-            <div>
-              <h3 className="text-sm font-medium text-gray-400 mb-2">Type</h3>
-              <span className={`flex items-center space-x-2 px-3 py-1 rounded-md text-sm font-medium ${getTypeColor(node.type)}`}>
-                {getTypeIcon(node.type)}
-                <span>{node.type}</span>
-              </span>
-            </div>
-            {node.status && (
-              <div>
-                <h3 className="text-sm font-medium text-gray-400 mb-2">Status</h3>
-                <span className={`flex items-center space-x-2 px-3 py-1 rounded-md text-sm font-medium ${getStatusColor(node.status)}`}>
-                  {getStatusIcon(node.status)}
-                  <span>{node.status.replace(/_/g, ' ')}</span>
-                </span>
+          {/* Enhanced Description - Always Editable */}
+          <div className="mb-8">
+            <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+              <div className="p-2 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-lg mr-3 border border-emerald-500/30">
+                <Edit3 className="h-4 w-4 text-emerald-400" />
               </div>
-            )}
+              Description
+            </h3>
+            <textarea
+              value={editedNode?.description || ''}
+              onChange={(e) => setEditedNode(prev => prev ? { ...prev, description: e.target.value } : null)}
+              className="w-full text-white bg-gray-800 border border-gray-600 rounded-xl placeholder-gray-400 p-5 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 resize-none hover:border-gray-500 shadow-lg cursor-text"
+              placeholder="Enter description"
+              rows={4}
+              autoComplete="off"
+            />
           </div>
 
-          {/* Details Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* Priority */}
-            <div>
-              <h3 className="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                <Flag className={`h-4 w-4 mr-2 ${priorityInfo.flagColor}`} />
+
+          {/* Enhanced Details Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Enhanced Priority - Editable */}
+            <div className="bg-gradient-to-br from-gray-800/30 to-gray-700/20 border border-gray-600/30 rounded-xl p-6 shadow-lg backdrop-blur-sm">
+              <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+                <div className={`p-2 bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-lg mr-3 border border-orange-500/30`}>
+                  <Flag className={`h-4 w-4 ${priorityInfo.flagColor}`} />
+                </div>
                 Priority
               </h3>
-              <div className="space-y-3">
-                <div className="flex items-center space-x-3">
-                  <span className={`flex items-center space-x-2 px-3 py-1 rounded-md text-sm font-medium ${priorityInfo.color}`}>
-                    {getPriorityIcon(totalPriority)}
+              <div className="space-y-4">
+                <input
+                  type="range"
+                  min="0"
+                  max="1"
+                  step="0.1"
+                  value={editedNode?.priority || 0}
+                  onChange={(e) => setEditedNode(prev => prev ? { ...prev, priority: parseFloat(e.target.value) } : null)}
+                  className={`w-full h-3 bg-gray-700/50 rounded-xl appearance-none cursor-pointer slider shadow-inner ${
+                    getPriorityConfig(editedNode?.priority || 0).value === 'critical' ? 'accent-red-500' :
+                    getPriorityConfig(editedNode?.priority || 0).value === 'high' ? 'accent-orange-500' :
+                    getPriorityConfig(editedNode?.priority || 0).value === 'moderate' ? 'accent-yellow-500' :
+                    getPriorityConfig(editedNode?.priority || 0).value === 'low' ? 'accent-blue-500' :
+                    'accent-gray-500'
+                  }`}
+                  style={{
+                    background: `linear-gradient(to right, ${
+                      getPriorityColorScheme(editedNode?.priority || 0).hex
+                    } 0%, ${
+                      getPriorityColorScheme(editedNode?.priority || 0).hex
+                    } ${((editedNode?.priority || 0) * 100)}%, #374151 ${((editedNode?.priority || 0) * 100)}%, #374151 100%)`
+                  }}
+                />
+                <div className="flex items-center justify-between">
+                  <span className={`flex items-center space-x-3 px-4 py-2 rounded-xl text-sm font-semibold shadow-lg ${priorityInfo.color} ${getPriorityColorScheme(editedNode?.priority || 0).background} border border-opacity-30`}>
+                    {getPriorityIconElement(editedNode?.priority || 0, "h-4 w-4")}
                     <span>{priorityInfo.label}</span>
                   </span>
-                  <span className="text-gray-500 text-sm">({Math.round(totalPriority * 100)}%)</span>
-                </div>
-                
-                {/* Simple Priority Progress Bar - matching node style */}
-                <div className="flex items-center space-x-2">
-                  <div className="relative w-32 h-1 bg-gray-700 rounded-full overflow-hidden">
-                    <div 
-                      className="absolute h-full rounded-full transition-all duration-300"
-                      style={{ 
-                        width: `${Math.round(totalPriority * 100)}%`,
-                        backgroundColor: totalPriority >= 0.8 ? '#ef4444' : // Critical - red
-                                       totalPriority >= 0.6 ? '#f97316' : // High - orange
-                                       totalPriority >= 0.4 ? '#eab308' : // Medium - yellow
-                                       totalPriority >= 0.2 ? '#3b82f6' : // Low - blue
-                                       '#6b7280' // Minimal - gray
-                      }}
-                    />
-                  </div>
+                  <span className="text-gray-300 text-sm font-medium bg-gray-700/30 px-3 py-1 rounded-lg">{Math.round((editedNode?.priority || 0) * 100)}%</span>
                 </div>
               </div>
             </div>
 
-            {/* Assigned To */}
-            {node.assignedTo && (
-              <div>
-                <h3 className="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                  <User className="h-4 w-4 mr-2" />
-                  Assigned To
-                </h3>
-                {typeof node.assignedTo === 'string' ? (
-                  <div className="text-gray-300">{node.assignedTo}</div>
-                ) : (
-                  <>
-                    <div className="text-gray-300">{node.assignedTo.name}</div>
-                    <div className="text-gray-500 text-sm">@{node.assignedTo.username}</div>
-                  </>
-                )}
+            {/* Enhanced Assigned To - Editable */}
+            <div className="bg-gradient-to-br from-gray-800/30 to-gray-700/20 border border-gray-600/30 rounded-xl p-6 shadow-lg backdrop-blur-sm">
+              <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+                <div className="p-2 bg-gradient-to-br from-violet-500/20 to-purple-500/20 rounded-lg mr-3 border border-violet-500/30">
+                  <User className="h-4 w-4 text-violet-400" />
+                </div>
+                Contributor
+              </h3>
+              <div className="relative">
+                <select
+                  value={typeof editedNode?.assignedTo === 'string' ? editedNode.assignedTo : (editedNode?.assignedTo?.id || '')}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    setEditedNode(prev => prev ? { 
+                      ...prev, 
+                      assignedTo: value ? { id: value, name: e.target.selectedOptions[0].text.split(' (')[0], username: value } : undefined 
+                    } : null);
+                  }}
+                  className="w-full bg-gray-800 border border-gray-600 rounded-xl px-5 py-4 text-white focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 appearance-none hover:border-gray-500 shadow-lg font-medium"
+                >
+                  <option value="">No contributor</option>
+                  <option value="user-1">John Doe (@john)</option>
+                  <option value="user-2">Jane Smith (@jane)</option>
+                  <option value="user-3">Mike Johnson (@mike)</option>
+                  <option value="user-4">Sarah Wilson (@sarah)</option>
+                  <option value="user-5">Alex Chen (@alex)</option>
+                </select>
+                <ChevronDown className="absolute right-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
               </div>
-            )}
+              {editedNode?.assignedTo && typeof editedNode.assignedTo === 'object' && (
+                <div className="mt-2 text-xs text-gray-500">@{editedNode.assignedTo.username}</div>
+              )}
+            </div>
 
-            {/* Owner */}
-            <div>
-              <h3 className="text-sm font-medium text-gray-400 mb-2">Owner</h3>
-              {node.owner ? (
-                <>
-                  <div className="text-gray-300">{node.owner.name}</div>
-                  <div className="text-gray-500 text-sm">@{node.owner.username}</div>
-                </>
+            {/* Enhanced Owner */}
+            <div className="bg-gradient-to-br from-gray-800/30 to-gray-700/20 border border-gray-600/30 rounded-xl p-6 shadow-lg backdrop-blur-sm">
+              <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+                <div className="p-2 bg-gradient-to-br from-amber-500/20 to-yellow-500/20 rounded-lg mr-3 border border-amber-500/30">
+                  <Crown className="h-4 w-4 text-amber-400" />
+                </div>
+                Owner
+              </h3>
+              {currentNode.owner ? (
+                <div className="bg-gradient-to-r from-gray-700/50 to-gray-600/30 border border-gray-600/40 rounded-lg p-4 backdrop-blur-sm">
+                  <div className="text-gray-200 font-medium">{currentNode.owner.name}</div>
+                  <div className="text-gray-400 text-sm mt-1">@{currentNode.owner.username}</div>
+                </div>
               ) : (
-                <>
-                  <div className="text-gray-300">Default Admin</div>
-                  <div className="text-gray-500 text-sm">@admin</div>
-                </>
+                <div className="bg-gradient-to-r from-gray-700/50 to-gray-600/30 border border-gray-600/40 rounded-lg p-4 backdrop-blur-sm">
+                  <div className="text-gray-200 font-medium">System Administrator</div>
+                  <div className="text-gray-400 text-sm mt-1">@admin</div>
+                </div>
               )}
             </div>
 
-            {/* Due Date */}
-            {node.dueDate && (
-              <div>
-                <h3 className="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                  <Calendar className="h-4 w-4 mr-2" />
-                  Due Date
-                </h3>
-                <div className="text-gray-300">{formatDate(node.dueDate)}</div>
-              </div>
-            )}
-
-            {/* Created/Updated */}
-            <div>
-              <h3 className="text-sm font-medium text-gray-400 mb-2 flex items-center">
-                <Clock className="h-4 w-4 mr-2" />
-                Timestamps
+            {/* Enhanced Due Date - Editable */}
+            <div className="bg-gradient-to-br from-gray-800/30 to-gray-700/20 border border-gray-600/30 rounded-xl p-6 shadow-lg backdrop-blur-sm">
+              <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+                <div className="p-2 bg-gradient-to-br from-teal-500/20 to-cyan-500/20 rounded-lg mr-3 border border-teal-500/30">
+                  <Calendar className="h-4 w-4 text-teal-400" />
+                </div>
+                Due Date
               </h3>
-              <div className="text-gray-300 space-y-1">
-                {node.createdAt && (
-                  <div className="text-sm">
-                    <span className="text-gray-500">Created:</span> {formatDate(node.createdAt)}
-                  </div>
-                )}
-                {node.updatedAt && (
-                  <div className="text-sm">
-                    <span className="text-gray-500">Updated:</span> {formatDate(node.updatedAt)}
-                  </div>
-                )}
-              </div>
+              <input
+                type="date"
+                value={editedNode?.dueDate ? editedNode.dueDate.split('T')[0] : ''}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  setEditedNode(prev => prev ? { 
+                    ...prev, 
+                    dueDate: value ? `${value}T23:59:59.999Z` : undefined 
+                  } : null);
+                }}
+                className="w-full bg-gray-800 border border-gray-600 rounded-xl px-5 py-4 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 hover:border-gray-500 shadow-lg font-medium"
+                placeholder="dd/mm/yyyy"
+              />
+              {editedNode?.dueDate && (
+                <div className="mt-1 text-xs text-gray-500">
+                  {formatDate(editedNode.dueDate)}
+                </div>
+              )}
             </div>
+
           </div>
 
-          {/* Tags */}
-          {node.tags && node.tags.length > 0 && (
-            <div className="mt-6">
-              <h3 className="text-sm font-medium text-gray-400 mb-2">Tags</h3>
-              <div className="flex flex-wrap gap-2">
-                {node.tags.map((tag, index) => (
+          {/* Enhanced Tags - Editable */}
+          <div className="mt-8">
+            <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+              <div className="p-2 bg-gradient-to-br from-sky-500/20 to-blue-500/20 rounded-lg mr-3 border border-sky-500/30">
+                <Hash className="h-4 w-4 text-sky-400" />
+              </div>
+              Tags
+            </h3>
+            <div className="bg-gradient-to-br from-gray-800/40 to-gray-700/30 border border-gray-600/40 rounded-xl p-5 shadow-lg backdrop-blur-sm">
+              <div className="flex flex-wrap gap-3">
+                {/* Enhanced Existing Tags */}
+                {editedNode?.tags?.map((tag, index) => (
                   <span
                     key={index}
-                    className="px-2 py-1 bg-gray-700 text-gray-300 rounded-md text-xs"
+                    className="flex items-center px-3 py-2 bg-gradient-to-r from-gray-700/60 to-gray-600/40 text-gray-200 rounded-lg text-xs font-medium group hover:from-gray-600/60 hover:to-gray-500/40 transition-all duration-200 hover:scale-105 shadow-md border border-gray-600/30"
                   >
-                    {tag}
+                    <span>{tag}</span>
+                    <button
+                      onClick={() => {
+                        const newTags = editedNode.tags?.filter((_, i) => i !== index) || [];
+                        setEditedNode(prev => prev ? { ...prev, tags: newTags } : null);
+                      }}
+                      className="ml-2 text-gray-400 hover:text-red-400 transition-all duration-200 hover:scale-125"
+                      title="Remove tag"
+                    >
+                      ×
+                    </button>
                   </span>
-                ))}
+              ))}
+                
+                {/* Enhanced Inline Add Tag Input */}
+                {(!editedNode?.tags || editedNode.tags.length < 5) && (
+                  <div className="flex items-center">
+                    <input
+                      type="text"
+                      placeholder="Add Tag"
+                      className="text-xs bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 min-w-20 shadow-lg font-medium"
+                      style={{ width: `${Math.max(20, 8)}ch` }}
+                      onInput={(e) => {
+                        const input = e.target as HTMLInputElement;
+                        const textLength = input.value.length;
+                        input.style.width = `${Math.max(20, textLength + 2)}ch`;
+                      }}
+                      onKeyPress={(e) => {
+                        if (e.key === 'Enter') {
+                          const input = e.target as HTMLInputElement;
+                          const newTag = input.value.trim();
+                          const currentTags = editedNode?.tags || [];
+                          if (newTag && !currentTags.includes(newTag) && currentTags.length < 5) {
+                            setEditedNode(prev => prev ? { ...prev, tags: [...currentTags, newTag] } : null);
+                            input.value = '';
+                            input.style.width = '20ch';
+                          }
+                        }
+                      }}
+                    />
+                  </div>
+                )}
+                
+                {/* Enhanced Max tags indicator */}
+                {editedNode?.tags && editedNode.tags.length >= 5 && (
+                  <span className="text-xs text-amber-400 italic font-medium bg-amber-500/10 px-2 py-1 rounded-lg border border-amber-500/20">Max 5 tags</span>
+                )}
+              </div>
+              {/* Tip for creating tags */}
+              <div className="mt-3 text-xs text-gray-400 italic flex items-center">
+                <div className="w-1 h-1 bg-sky-400 rounded-full mr-2"></div>
+                Type and press Enter to create tags • Maximum 5 tags allowed
               </div>
             </div>
-          )}
+          </div>
+
+          {/* Enhanced Timestamps */}
+          <div className="mt-8">
+            <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center">
+              <div className="p-2 bg-gradient-to-br from-lime-500/20 to-green-500/20 rounded-lg mr-3 border border-lime-500/30">
+                <Clock className="h-4 w-4 text-lime-400" />
+              </div>
+              Timestamps
+            </h3>
+            <div className="bg-gradient-to-br from-gray-800/40 to-gray-700/30 border border-gray-600/40 rounded-xl p-5 shadow-lg backdrop-blur-sm space-y-3">
+              {currentNode.createdAt && (
+                <div className="text-sm flex justify-between items-center">
+                  <span className="text-gray-400 font-medium">Created:</span> 
+                  <span className="text-gray-200 font-semibold bg-gray-700/50 px-3 py-1 rounded-lg">{formatDate(currentNode.createdAt)}</span>
+                </div>
+              )}
+              {currentNode.updatedAt && (
+                <div className="text-sm flex justify-between items-center">
+                  <span className="text-gray-400 font-medium">Updated:</span> 
+                  <span className="text-gray-200 font-semibold bg-gray-700/50 px-3 py-1 rounded-lg">{formatDate(currentNode.updatedAt)}</span>
+                </div>
+              )}
+            </div>
+          </div>
 
-          {/* Connections */}
-          <div className="mt-6">
-            <h3 className="text-sm font-medium text-gray-400 mb-4 flex items-center">
-              <GitBranch className="h-4 w-4 mr-2" />
+          {/* Enhanced Connections */}
+          <div className="mt-8">
+            <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-6 flex items-center">
+              <div className="p-2 bg-gradient-to-br from-fuchsia-500/20 to-pink-500/20 rounded-lg mr-3 border border-fuchsia-500/30">
+                <GitBranch className="h-4 w-4 text-fuchsia-400" />
+              </div>
               Connections ({nodeConnections.length})
             </h3>
             
             {nodeConnections.length === 0 ? (
-              <div className="text-center py-8">
-                <GitBranch className="h-12 w-12 text-gray-600 mx-auto mb-3" />
-                <p className="text-gray-500 text-sm">No connections yet</p>
-                <p className="text-gray-600 text-xs mt-1">Connect this node to other nodes to see relationships here</p>
+              <div className="bg-gradient-to-br from-gray-800/40 to-gray-700/30 border border-gray-600/40 rounded-xl p-8 shadow-lg backdrop-blur-sm text-center">
+                <div className="p-4 bg-gradient-to-br from-gray-700/30 to-gray-600/20 rounded-xl inline-block mb-4 border border-gray-600/30">
+                  <GitBranch className="h-12 w-12 text-gray-500 mx-auto" />
+                </div>
+                <p className="text-gray-400 text-sm font-medium mb-2">No connections yet</p>
+                <p className="text-gray-500 text-xs">Connect this node to other nodes to see relationships here</p>
               </div>
             ) : (
               
-              <div className="space-y-4">
-                {/* Incoming Connections */}
+              <div className="bg-gradient-to-br from-gray-800/40 to-gray-700/30 border border-gray-600/40 rounded-xl p-6 shadow-lg backdrop-blur-sm space-y-6">
+                {/* Enhanced Incoming Connections */}
                 {incomingConnections.length > 0 && (
                   <div>
-                    <h4 className="text-xs font-medium text-gray-500 mb-2 flex items-center">
-                      <ArrowRight className="h-3 w-3 mr-1" />
+                    <h4 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
+                      <div className="p-2 bg-gradient-to-br from-red-500/20 to-pink-500/20 rounded-lg mr-3 border border-red-500/30">
+                        <ArrowRight className="h-4 w-4 text-red-400" />
+                      </div>
                       Incoming ({incomingConnections.length})
                     </h4>
-                    <div className="space-y-2">
+                    <div className="space-y-3">
                       {incomingConnections.map((edge) => {
                         const connectedNode = getConnectedNode(edge.source);
                         return (
-                          <div key={edge.id} className="flex items-center space-x-3 p-2 bg-gray-800/50 rounded-md">
-                            <div className="flex items-center space-x-2 flex-1">
+                          <div key={edge.id} className="p-4 bg-gradient-to-r from-red-900/30 to-gray-800/50 border border-red-500/30 rounded-xl hover:from-red-900/40 hover:to-gray-800/60 hover:border-red-400/40 transition-all duration-200 hover:scale-[1.02] shadow-md backdrop-blur-sm">
+                            <div className="flex items-start gap-2">
                               {connectedNode && (
-                                <span className={`flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${getTypeColor(connectedNode.type)}`}>
+                                <div className={`inline-flex items-center space-x-1 px-2 py-1 rounded text-sm font-medium ${getTypeColor(connectedNode.type)}`}>
                                   {getTypeIcon(connectedNode.type)}
-                                  <span className="max-w-32 truncate">{connectedNode.title}</span>
-                                </span>
+                                  <span>{connectedNode.title}</span>
+                                </div>
                               )}
-                              <span className={`flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${getRelationshipColor(edge.type)}`}>
+                              <div className={`inline-flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${getRelationshipColor(edge.type)} flex-shrink-0`}>
                                 {getRelationshipIcon(edge.type)}
-                                <span>{getRelationshipDisplayName(edge.type)}</span>
-                              </span>
+                                <span className="whitespace-nowrap">{getRelationshipDisplayName(edge.type)}</span>
+                              </div>
                             </div>
                           </div>
                         );
@@ -349,29 +866,31 @@ export function NodeDetailsModal({ isOpen, onClose, node, edges = [], nodes = []
                   </div>
                 )}
 
-                {/* Outgoing Connections */}
+                {/* Enhanced Outgoing Connections */}
                 {outgoingConnections.length > 0 && (
                   <div>
-                    <h4 className="text-xs font-medium text-gray-500 mb-2 flex items-center">
-                      <ArrowLeft className="h-3 w-3 mr-1" />
+                    <h4 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
+                      <div className="p-2 bg-gradient-to-br from-purple-500/20 to-violet-500/20 rounded-lg mr-3 border border-purple-500/30">
+                        <ArrowLeft className="h-4 w-4 text-purple-400" />
+                      </div>
                       Outgoing ({outgoingConnections.length})
                     </h4>
-                    <div className="space-y-2">
+                    <div className="space-y-3">
                       {outgoingConnections.map((edge) => {
                         const connectedNode = getConnectedNode(edge.target);
                         return (
-                          <div key={edge.id} className="flex items-center space-x-3 p-2 bg-gray-800/50 rounded-md">
-                            <div className="flex items-center space-x-2 flex-1">
+                          <div key={edge.id} className="p-4 bg-gradient-to-r from-purple-900/30 to-gray-800/50 border border-purple-500/30 rounded-xl hover:from-purple-900/40 hover:to-gray-800/60 hover:border-purple-400/40 transition-all duration-200 hover:scale-[1.02] shadow-md backdrop-blur-sm">
+                            <div className="flex items-start gap-2">
                               {connectedNode && (
-                                <span className={`flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${getTypeColor(connectedNode.type)}`}>
+                                <div className={`inline-flex items-center space-x-1 px-2 py-1 rounded text-sm font-medium ${getTypeColor(connectedNode.type)}`}>
                                   {getTypeIcon(connectedNode.type)}
-                                  <span className="max-w-32 truncate">{connectedNode.title}</span>
-                                </span>
+                                  <span>{connectedNode.title}</span>
+                                </div>
                               )}
-                              <span className={`flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${getRelationshipColor(edge.type)}`}>
+                              <div className={`inline-flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${getRelationshipColor(edge.type)} flex-shrink-0`}>
                                 {getRelationshipIcon(edge.type)}
-                                <span>{getRelationshipDisplayName(edge.type)}</span>
-                              </span>
+                                <span className="whitespace-nowrap">{getRelationshipDisplayName(edge.type)}</span>
+                              </div>
                             </div>
                           </div>
                         );
@@ -383,10 +902,236 @@ export function NodeDetailsModal({ isOpen, onClose, node, edges = [], nodes = []
             )}
           </div>
 
-          {/* Node ID */}
-          <div className="mt-6 pt-4 border-t border-gray-700">
-            <div className="text-xs text-gray-500">
-              <span className="font-mono">{node.id}</span>
+            {/* Enhanced Node ID */}
+            <div className="mt-8 pt-6 border-t border-gray-600/50">
+              <div className="bg-gradient-to-br from-gray-800/40 to-gray-700/30 border border-gray-600/40 rounded-xl p-5 shadow-lg backdrop-blur-sm">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="p-2 bg-gradient-to-br from-amber-500/20 to-yellow-500/20 rounded-lg border border-amber-500/30">
+                      <Star className="h-4 w-4 text-amber-400" />
+                    </div>
+                    <span className="text-sm text-gray-300 uppercase font-semibold">Node ID</span>
+                  </div>
+                  <span className="text-xs text-gray-400 font-mono bg-gray-700/50 px-3 py-2 rounded-lg border border-gray-600/40">{currentNode.id}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Enhanced Right Column - Action Buttons */}
+          <div className="w-56 flex-shrink-0 relative">
+            <h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-6 flex items-center">
+              <div className="p-2 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg mr-3 border border-cyan-500/30">
+                <Rocket className="h-4 w-4 text-cyan-400" />
+              </div>
+              Actions
+            </h3>
+            <div className="space-y-4">
+              {/* Enhanced Connect Dropdown */}
+              <div className="relative" ref={connectDropdownRef}>
+                <button
+                  onClick={() => setShowConnectDropdown(!showConnectDropdown)}
+                  disabled={getAvailableNodes().length === 0}
+                  className="w-full flex items-center justify-between space-x-2 px-5 py-4 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500 disabled:from-gray-600 disabled:to-gray-600 disabled:cursor-not-allowed text-white rounded-xl transition-all duration-300 text-sm font-semibold shadow-lg hover:scale-105 transform border border-green-400/30"
+                >
+                  <div className="flex items-center space-x-2">
+                    <Link2 className="h-4 w-4" />
+                    <span>Connect ({getAvailableNodes().length})</span>
+                  </div>
+                  <ChevronDown className={`h-4 w-4 transition-transform ${showConnectDropdown ? 'rotate-180' : ''}`} />
+                </button>
+                
+                {showConnectDropdown && getAvailableNodes().length > 0 && (
+                  <div className="absolute top-full left-0 mt-2 w-full bg-gray-900 border border-gray-600 rounded-lg shadow-xl z-50 max-h-80 overflow-y-auto">
+                    {/* Multi-select list */}
+                    <div className="p-2 max-h-48 overflow-y-auto">
+                      {getAvailableNodes().map((availableNode) => (
+                        <label
+                          key={availableNode.id}
+                          className="flex items-center space-x-3 p-2 hover:bg-gray-700 rounded cursor-pointer transition-colors"
+                        >
+                          <div
+                            onClick={() => toggleNodeSelection(availableNode.id)}
+                            className={`w-4 h-4 min-w-[16px] min-h-[16px] border flex items-center justify-center transition-colors cursor-pointer ${
+                              selectedNodesForConnection.includes(availableNode.id)
+                                ? 'bg-green-600 border-green-600' 
+                                : 'bg-gray-700 border-gray-600 hover:border-gray-500'
+                            }`}
+                          >
+                            {selectedNodesForConnection.includes(availableNode.id) && (
+                              <span className="text-white text-xs font-bold">✓</span>
+                            )}
+                          </div>
+                          <div className="flex items-center space-x-2 flex-1">
+                            {getTypeIcon(availableNode.type)}
+                            <div>
+                              <div className="text-white font-medium text-sm">{availableNode.title}</div>
+                              <div className="text-xs text-gray-400">{availableNode.type}</div>
+                            </div>
+                          </div>
+                        </label>
+                      ))}
+                    </div>
+                    
+                    {/* Action buttons */}
+                    <div className="border-t border-gray-600 p-2 space-y-2">
+                      <button
+                        onClick={handleConnectSelected}
+                        disabled={selectedNodesForConnection.length === 0}
+                        className="w-full px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white text-sm font-medium rounded transition-colors"
+                      >
+                        Connect Selected ({selectedNodesForConnection.length})
+                      </button>
+                      <div className="flex space-x-2">
+                        <button
+                          onClick={() => setSelectedNodesForConnection(getAvailableNodes().map(n => n.id))}
+                          className="flex-1 px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 rounded transition-colors"
+                        >
+                          Select All
+                        </button>
+                        <button
+                          onClick={() => setSelectedNodesForConnection([])}
+                          className="flex-1 px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 rounded transition-colors"
+                        >
+                          Clear
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Enhanced Disconnect Dropdown */}
+              <div className="relative" ref={disconnectDropdownRef}>
+                <button
+                  onClick={() => setShowDisconnectDropdown(!showDisconnectDropdown)}
+                  disabled={getConnectedNodes().length === 0}
+                  className="w-full flex items-center justify-between space-x-2 px-5 py-4 bg-gradient-to-r from-yellow-600 to-amber-600 hover:from-yellow-500 hover:to-amber-500 disabled:from-gray-600 disabled:to-gray-600 disabled:cursor-not-allowed text-white rounded-xl transition-all duration-300 text-sm font-semibold shadow-lg hover:scale-105 transform border border-yellow-400/30"
+                >
+                  <div className="flex items-center space-x-2">
+                    <Unlink className="h-4 w-4" />
+                    <span>Disconnect ({getConnectedNodes().length})</span>
+                  </div>
+                  <ChevronDown className={`h-4 w-4 transition-transform ${showDisconnectDropdown ? 'rotate-180' : ''}`} />
+                </button>
+                
+                {showDisconnectDropdown && getConnectedNodes().length > 0 && (
+                  <div className="absolute top-full left-0 mt-2 w-full bg-gray-900 border border-gray-600 rounded-lg shadow-xl z-50 max-h-80 overflow-y-auto">
+                    {/* Multi-select list */}
+                    <div className="p-2 max-h-48 overflow-y-auto">
+                      {getConnectedNodes().map(({ node: connectedNode, edge, isIncoming }) => (
+                        <label
+                          key={edge.id}
+                          className="flex items-center space-x-3 p-2 hover:bg-gray-700 rounded cursor-pointer transition-colors"
+                        >
+                          <div
+                            onClick={() => toggleEdgeSelection(edge.id)}
+                            className={`w-4 h-4 min-w-[16px] min-h-[16px] border flex items-center justify-center transition-colors cursor-pointer ${
+                              selectedEdgesForDisconnection.includes(edge.id)
+                                ? 'bg-yellow-600 border-yellow-600' 
+                                : 'bg-gray-700 border-gray-600 hover:border-gray-500'
+                            }`}
+                          >
+                            {selectedEdgesForDisconnection.includes(edge.id) && (
+                              <span className="text-white text-xs font-bold">✓</span>
+                            )}
+                          </div>
+                          <div className="flex items-center space-x-2 flex-1">
+                            {getTypeIcon(connectedNode!.type)}
+                            <div>
+                              <div className="text-white font-medium text-sm">{connectedNode!.title}</div>
+                              <div className="text-xs text-gray-400">{connectedNode!.type}</div>
+                            </div>
+                          </div>
+                        </label>
+                      ))}
+                    </div>
+                    
+                    {/* Action buttons */}
+                    <div className="border-t border-gray-600 p-2 space-y-2">
+                      <button
+                        onClick={handleDisconnectSelected}
+                        disabled={selectedEdgesForDisconnection.length === 0}
+                        className="w-full px-3 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white text-sm font-medium rounded transition-colors"
+                      >
+                        Remove Selected ({selectedEdgesForDisconnection.length})
+                      </button>
+                      <div className="flex space-x-2">
+                        <button
+                          onClick={() => setSelectedEdgesForDisconnection(getConnectedNodes().map(item => item.edge.id))}
+                          className="flex-1 px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 rounded transition-colors"
+                        >
+                          Select All
+                        </button>
+                        <button
+                          onClick={() => setSelectedEdgesForDisconnection([])}
+                          className="flex-1 px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 rounded transition-colors"
+                        >
+                          Clear
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {!showDeleteConfirm ? (
+                <button
+                  onClick={handleDelete}
+                  disabled={deleting}
+                  className="w-full flex items-center justify-center space-x-2 px-5 py-4 bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 disabled:from-red-400 disabled:to-rose-400 disabled:cursor-not-allowed text-white rounded-xl transition-all duration-300 text-sm font-semibold shadow-lg hover:scale-105 transform border border-red-400/30"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  <span>{deleting ? 'Deleting...' : 'Delete Node'}</span>
+                </button>
+              ) : (
+                <div className="space-y-4 p-6 bg-gradient-to-br from-red-900/30 to-red-800/20 border border-red-500/40 rounded-xl shadow-lg backdrop-blur-sm">
+                  <div className="text-sm text-red-300 text-center font-semibold">
+                    Delete "{currentNode.title}"?
+                  </div>
+                  <div className="text-xs text-red-400 text-center leading-relaxed">
+                    This action cannot be undone and will permanently remove this node.
+                  </div>
+                  
+                  {/* Confirmation Checkbox */}
+                  <label className="flex items-center space-x-2 cursor-pointer">
+                    <div
+                      onClick={() => setDeleteConfirmed(!deleteConfirmed)}
+                      className={`w-4 h-4 min-w-[16px] min-h-[16px] border flex items-center justify-center transition-colors cursor-pointer ${
+                        deleteConfirmed 
+                          ? 'bg-red-600 border-red-600' 
+                          : 'bg-gray-700 border-gray-600 hover:border-gray-500'
+                      }`}
+                    >
+                      {deleteConfirmed && (
+                        <span className="text-white text-xs font-bold">✓</span>
+                      )}
+                    </div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">
+                      I understand this action cannot be undone
+                    </span>
+                  </label>
+                  
+                  <div className="grid grid-cols-2 gap-3">
+                    <button
+                      onClick={() => {
+                        setShowDeleteConfirm(false);
+                        setDeleteConfirmed(false);
+                      }}
+                      className="px-4 py-3 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600 text-white rounded-xl transition-all duration-200 text-sm font-semibold shadow-lg hover:scale-105 transform"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={confirmDelete}
+                      disabled={deleting || !deleteConfirmed}
+                      className="px-4 py-3 bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 disabled:from-red-400 disabled:to-rose-400 disabled:cursor-not-allowed text-white rounded-xl transition-all duration-200 text-sm font-semibold shadow-lg hover:scale-105 transform"
+                    >
+                      {deleting ? 'Deleting...' : 'Delete'}
+                    </button>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/packages/web/src/components/PriorityDistributionRadar.tsx b/packages/web/src/components/PriorityDistributionRadar.tsx
index 046faeb8..c71dd107 100644
--- a/packages/web/src/components/PriorityDistributionRadar.tsx
+++ b/packages/web/src/components/PriorityDistributionRadar.tsx
@@ -8,10 +8,7 @@ import { useQuery, gql } from '@apollo/client';
 const GET_PRIORITY_DISTRIBUTION = gql`
   query GetPriorityDistribution($graphId: ID) {
     workItems(where: { graph: { id: $graphId } }) {
-      priorityExec
-      priorityIndiv
-      priorityComm
-      priorityComp
+      priority
     }
   }
 `;
@@ -54,21 +51,15 @@ export function PriorityDistributionRadar({ className = '', showLegend = true }:
     };
 
     queryData.workItems.forEach((item: any) => {
-      // Calculate composite priority (average of all priorities)
-      const compositePriority = (
-        (item.priorityExec || 0) + 
-        (item.priorityIndiv || 0) + 
-        (item.priorityComm || 0) + 
-        (item.priorityComp || 0)
-      ) / 4;
-
-      if (compositePriority >= 0.8) {
+      const priority = item.priority || 0;
+
+      if (priority >= 0.8) {
         priorityCounts.critical++;
-      } else if (compositePriority >= 0.6) {
+      } else if (priority >= 0.6) {
         priorityCounts.high++;
-      } else if (compositePriority >= 0.4) {
+      } else if (priority >= 0.4) {
         priorityCounts.moderate++;
-      } else if (compositePriority >= 0.2) {
+      } else if (priority >= 0.2) {
         priorityCounts.low++;
       } else {
         priorityCounts.minimal++;
diff --git a/packages/web/src/components/RelationshipEditorWindow.tsx b/packages/web/src/components/RelationshipEditorWindow.tsx
new file mode 100644
index 00000000..bea1add4
--- /dev/null
+++ b/packages/web/src/components/RelationshipEditorWindow.tsx
@@ -0,0 +1,412 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Minimize2, Maximize2, Move, Zap } from 'lucide-react';
+import { WorkItemEdge, RelationshipType } from '../types/graph';
+import { getRelationshipConfig, RELATIONSHIP_OPTIONS, getRelationshipIconElement } from '../constants/workItemConstants';
+import { useMutation } from '@apollo/client';
+import { UPDATE_EDGE, CREATE_EDGE, DELETE_EDGE } from '../lib/queries';
+
+interface RelationshipEditorWindowProps {
+  isVisible: boolean;
+  editingEdge: { edge: WorkItemEdge; position: { x: number; y: number } } | null;
+  selectedNodes: Set<string>;
+  workItems: any[];
+  onClose: () => void;
+  onFlipDirection?: () => void;
+  onDeleteEdge?: (edgeId: string) => void;
+  onCreateEdge?: (sourceId: string, targetId: string, type: RelationshipType) => void;
+  showSuccess: (title: string, message: string) => void;
+  showError: (title: string, message: string) => void;
+  refetchEdges?: () => void;
+  onClearSelection?: () => void;
+}
+
+export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> = ({
+  isVisible,
+  editingEdge,
+  selectedNodes,
+  workItems,
+  onClose,
+  onFlipDirection,
+  onDeleteEdge,
+  onCreateEdge,
+  showSuccess,
+  showError,
+  refetchEdges,
+  onClearSelection
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [isFlippingEdge, setIsFlippingEdge] = useState(false);
+  const windowRef = useRef<HTMLDivElement>(null);
+
+  // GraphQL mutations
+  const [updateEdgeMutation] = useMutation(UPDATE_EDGE);
+  const [createEdgeMutation] = useMutation(CREATE_EDGE);
+  const [deleteEdgeMutation] = useMutation(DELETE_EDGE);
+
+  // Calculate content-based height
+  const calculateContentHeight = () => {
+    // Base header height
+    let contentHeight = 50; // Header height
+    
+    if (isExpanded) {
+      contentHeight += 16; // Padding top/bottom (p-4)
+      contentHeight += 24; // Status indicator
+      contentHeight += 16; // Spacing
+      
+      const canEdit = editingEdge || selectedNodes.size === 2;
+      if (canEdit) {
+        contentHeight += 20; // "Relationship Type" label
+        contentHeight += 12; // margin bottom
+        
+        // Grid: 3 columns, calculate rows needed
+        const totalOptions = RELATIONSHIP_OPTIONS.length;
+        const rows = Math.ceil(totalOptions / 3);
+        contentHeight += rows * (80 + 8); // Each button ~80px height + 8px gap
+        contentHeight -= 8; // Remove last gap
+      }
+      
+      // Actions section for editing mode
+      if (editingEdge) {
+        contentHeight += 16; // Padding top for border
+        contentHeight += 40; // Flip button
+        contentHeight += 8;  // Gap
+        contentHeight += 40; // Delete button
+      }
+      
+      // Actions section for create mode
+      if (!editingEdge && canEdit) {
+        contentHeight += 16; // Padding top for border
+        contentHeight += 40; // Clear selection button
+      }
+      
+      // Add some extra padding for safety
+      contentHeight += 16;
+    }
+    
+    return contentHeight;
+  };
+
+  // Initialize position and auto-calculate height based on content
+  useEffect(() => {
+    const sidebarWidth = getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '16rem';
+    const sidebarPixels = sidebarWidth === '4rem' ? 64 : 256;
+    
+    setPosition({ 
+      x: sidebarPixels + 16,
+      y: 180 // Position similar to the old fixed panel
+    });
+    
+    const contentHeight = calculateContentHeight();
+    setSize({
+      width: isExpanded ? 450 : 350,
+      height: contentHeight
+    });
+  }, [isExpanded, isVisible, editingEdge, selectedNodes.size]);
+
+  // Handle dragging
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      const newX = e.clientX - dragStart.x;
+      const newY = e.clientY - dragStart.y;
+      requestAnimationFrame(() => {
+        setPosition({ x: Math.max(0, newX), y: Math.max(0, newY) });
+      });
+    }
+    if (isResizing) {
+      const minWidth = 350;
+      const minHeight = calculateContentHeight(); // Use content-based minimum height
+      const newWidth = Math.max(minWidth, resizeStart.width + (e.clientX - resizeStart.x));
+      const newHeight = Math.max(minHeight, resizeStart.height + (e.clientY - resizeStart.y));
+      requestAnimationFrame(() => {
+        setSize({ width: newWidth, height: newHeight });
+      });
+    }
+  }, [isDragging, isResizing, dragStart, resizeStart]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+    return undefined;
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+  const handleDragStart = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y
+    });
+  };
+
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeStart({
+      x: e.clientX,
+      y: e.clientY,
+      width: size.width,
+      height: size.height
+    });
+  };
+
+  // Get selected node objects
+  const selectedNodeObjects = workItems.filter(item => selectedNodes.has(item.id));
+
+  // Handle relationship type change
+  const handleRelationshipTypeChange = async (newType: RelationshipType) => {
+    if (editingEdge) {
+      try {
+        await updateEdgeMutation({
+          variables: {
+            where: { id: editingEdge.edge.id },
+            update: { type: newType }
+          }
+        });
+        showSuccess('Relationship Updated', 'Edge type changed successfully');
+        refetchEdges?.();
+      } catch (error: any) {
+        showError('Update Failed', error.message || 'Could not update relationship');
+      }
+    } else if (selectedNodeObjects.length === 2) {
+      // Create new edge
+      const [sourceNode, targetNode] = selectedNodeObjects;
+      try {
+        await createEdgeMutation({
+          variables: {
+            input: [{
+              type: newType,
+              source: { connect: { where: { node: { id: sourceNode.id } } } },
+              target: { connect: { where: { node: { id: targetNode.id } } } },
+              weight: 1.0
+            }]
+          }
+        });
+        showSuccess('Relationship Created', 'New relationship added successfully');
+        refetchEdges?.();
+        onCreateEdge?.(sourceNode.id, targetNode.id, newType);
+      } catch (error: any) {
+        showError('Creation Failed', error.message || 'Could not create relationship');
+      }
+    }
+  };
+
+  // Handle edge flip
+  const handleFlipDirection = async () => {
+    if (!editingEdge) return;
+    
+    setIsFlippingEdge(true);
+    try {
+      // Delete current edge
+      await deleteEdgeMutation({
+        variables: { where: { id: editingEdge.edge.id } }
+      });
+      
+      // Create new edge with flipped direction
+      await createEdgeMutation({
+        variables: {
+          input: [{
+            type: editingEdge.edge.type,
+            source: { connect: { where: { node: { id: editingEdge.edge.target } } } },
+            target: { connect: { where: { node: { id: editingEdge.edge.source } } } },
+            weight: 1.0
+          }]
+        }
+      });
+      
+      showSuccess('Direction Flipped', 'Relationship direction updated successfully');
+      refetchEdges?.();
+      onFlipDirection?.();
+    } catch (error: any) {
+      showError('Flip Failed', error.message || 'Could not flip relationship direction');
+    } finally {
+      setIsFlippingEdge(false);
+    }
+  };
+
+  // Handle edge delete
+  const handleDeleteEdge = async () => {
+    if (!editingEdge) return;
+    
+    try {
+      await deleteEdgeMutation({
+        variables: { where: { id: editingEdge.edge.id } }
+      });
+      showSuccess('Relationship Deleted', 'Edge removed successfully');
+      refetchEdges?.();
+      onDeleteEdge?.(editingEdge.edge.id);
+      onClose();
+    } catch (error: any) {
+      showError('Delete Failed', error.message || 'Could not delete relationship');
+    }
+  };
+
+  if (!isVisible) return null;
+
+  const canEdit = editingEdge || selectedNodeObjects.length === 2;
+  const isEditingMode = !!editingEdge;
+
+  return createPortal(
+    <div 
+      ref={windowRef}
+      className="fixed bg-white/5 backdrop-blur-xl border border-white/20 rounded-xl shadow-lg overflow-hidden z-50"
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+        maxHeight: 'calc(100vh - 20px)',
+        pointerEvents: 'all'
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Header */}
+      <div 
+        className="flex items-center justify-between p-3 bg-white/10 border-b border-white/10 cursor-move select-none"
+        onMouseDown={handleDragStart}
+      >
+        <div className="flex items-center space-x-2">
+          <Zap className="h-4 w-4 text-amber-400" />
+          <span className="text-white font-semibold text-sm">
+            {isEditingMode ? 'Edit Relationship' : 'Create Relationship'}
+          </span>
+        </div>
+        <div className="flex items-center space-x-1">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1 rounded text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+          >
+            {isExpanded ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="p-4 space-y-4">
+          {/* Status indicator */}
+          <div className="text-center">
+            {!canEdit && (
+              <div className="text-gray-400 text-sm">
+                Select two nodes or click on an edge to edit relationships
+              </div>
+            )}
+            {canEdit && !isEditingMode && (
+              <div className="text-green-400 text-sm">
+                Ready to create relationship between {selectedNodeObjects.length} selected nodes
+              </div>
+            )}
+            {isEditingMode && (
+              <div className="text-blue-400 text-sm">
+                Editing relationship: {workItems.find(item => item.id === editingEdge?.edge.source)?.title || 'Unknown'} → {workItems.find(item => item.id === editingEdge?.edge.target)?.title || 'Unknown'}
+              </div>
+            )}
+          </div>
+
+          {/* Relationship type grid */}
+          {canEdit && (
+            <div>
+              <div className="text-white text-sm font-medium mb-3">Relationship Type</div>
+              <div className="grid grid-cols-3 gap-2">
+                {RELATIONSHIP_OPTIONS.map((option) => {
+                  const isSelected = isEditingMode ? editingEdge?.edge.type === option.type : false;
+                  return (
+                    <button
+                      key={option.type}
+                      onClick={() => handleRelationshipTypeChange(option.type)}
+                      className={`
+                        group relative p-3 rounded-lg border transition-all duration-200
+                        ${isSelected 
+                          ? 'border-amber-400 bg-amber-400/10 text-amber-400' 
+                          : 'border-white/20 bg-white/5 text-white hover:border-white/40 hover:bg-white/10'
+                        }
+                      `}
+                      title={option.description}
+                    >
+                      <div className="flex flex-col items-center space-y-2">
+                        <div className={`text-lg group-hover:scale-110 transition-transform`}>
+                          {getRelationshipIconElement(option.type, "h-5 w-5")}
+                        </div>
+                        <span className="text-xs font-medium text-center leading-tight">
+                          {option.label}
+                        </span>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Actions */}
+          {isEditingMode && (
+            <div className="pt-2 border-t border-white/10 space-y-2">
+              <button
+                onClick={handleFlipDirection}
+                disabled={isFlippingEdge}
+                className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-2 px-3 rounded-lg flex items-center justify-center space-x-2 font-medium transition-all duration-200 shadow-lg hover:shadow-blue-500/25 disabled:opacity-50"
+              >
+                <Move className="h-4 w-4" />
+                <span>{isFlippingEdge ? 'Flipping...' : 'Flip Direction'}</span>
+              </button>
+              
+              <button
+                onClick={handleDeleteEdge}
+                className="w-full bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white py-2 px-3 rounded-lg flex items-center justify-center space-x-2 font-medium transition-all duration-200 shadow-lg hover:shadow-red-500/25"
+              >
+                <X className="h-4 w-4" />
+                <span>Delete Relationship</span>
+              </button>
+            </div>
+          )}
+
+          {/* Create mode actions */}
+          {!isEditingMode && canEdit && (
+            <div className="pt-2 border-t border-white/10 space-y-2">
+              <button
+                onClick={() => onClearSelection?.()}
+                className="w-full bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white py-2 px-3 rounded-lg flex items-center justify-center space-x-2 font-medium transition-all duration-200 shadow-lg hover:shadow-gray-500/25"
+              >
+                <X className="h-4 w-4" />
+                <span>Clear Selection</span>
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Resize handle */}
+      {isExpanded && (
+        <div
+          className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
+          onMouseDown={handleResizeStart}
+        >
+          <div className="absolute bottom-1 right-1 w-2 h-2 border-r-2 border-b-2 border-white/40"></div>
+        </div>
+      )}
+    </div>,
+    document.body
+  );
+};
\ No newline at end of file
diff --git a/packages/web/src/components/RightSidebar.tsx b/packages/web/src/components/RightSidebar.tsx
index b1f2941f..6ef1f958 100644
--- a/packages/web/src/components/RightSidebar.tsx
+++ b/packages/web/src/components/RightSidebar.tsx
@@ -8,7 +8,8 @@ import {
   PriorityLevel,
   getProjectHealthColor,
   getProjectHealthStatus,
-  PROJECT_HEALTH_COLORS
+  PROJECT_HEALTH_COLORS,
+  getSidebarSectionColor
 } from '../constants/workItemConstants';
 
 interface RightSidebarProps {
@@ -43,11 +44,139 @@ const formatLabel = (label: string) => {
 };
 
 const RightSidebar: React.FC<RightSidebarProps> = ({ currentView, stats }) => {
+  // Helper function to blend colors when there's a tie
+  const blendColors = (colors: Array<{hex: string, weight: number}>): string => {
+    if (colors.length === 0) return '#9ca3af';
+    if (colors.length === 1) return colors[0].hex;
+    
+    let totalWeight = colors.reduce((sum, c) => sum + c.weight, 0);
+    if (totalWeight === 0) return '#9ca3af';
+    
+    let r = 0, g = 0, b = 0;
+    
+    colors.forEach(color => {
+      const hex = color.hex.replace('#', '');
+      const weight = color.weight / totalWeight;
+      r += parseInt(hex.substr(0, 2), 16) * weight;
+      g += parseInt(hex.substr(2, 2), 16) * weight;
+      b += parseInt(hex.substr(4, 2), 16) * weight;
+    });
+    
+    const rHex = Math.round(r).toString(16).padStart(2, '0');
+    const gHex = Math.round(g).toString(16).padStart(2, '0');
+    const bHex = Math.round(b).toString(16).padStart(2, '0');
+    
+    return `#${rHex}${gHex}${bHex}`;
+  };
+
+  // Helper functions for dynamic border colors
+  const getProjectHealthBorderColor = () => {
+    return stats.total > 0 ? getProjectHealthColor(stats.completed / stats.total) : PROJECT_HEALTH_COLORS.noData;
+  };
+
+  const getDominantStatusColor = () => {
+    const statusCounts = [
+      { key: 'BLOCKED', count: stats.blocked, config: WORK_ITEM_STATUSES.BLOCKED },
+      { key: 'IN_PROGRESS', count: stats.inProgress, config: WORK_ITEM_STATUSES.IN_PROGRESS },
+      { key: 'IN_REVIEW', count: stats.inReview, config: WORK_ITEM_STATUSES.IN_REVIEW },
+      { key: 'COMPLETED', count: stats.completed, config: WORK_ITEM_STATUSES.COMPLETED },
+      { key: 'PLANNED', count: stats.planned, config: WORK_ITEM_STATUSES.PLANNED },
+      { key: 'PROPOSED', count: stats.proposed, config: WORK_ITEM_STATUSES.PROPOSED },
+      { key: 'ON_HOLD', count: stats.onHold, config: WORK_ITEM_STATUSES.ON_HOLD },
+      { key: 'NOT_STARTED', count: stats.notStarted, config: WORK_ITEM_STATUSES.NOT_STARTED },
+      { key: 'CANCELLED', count: stats.cancelled, config: WORK_ITEM_STATUSES.CANCELLED }
+    ].filter(status => status.count > 0);
+    
+    if (statusCounts.length === 0) return WORK_ITEM_STATUSES.NOT_STARTED.hexColor;
+    if (statusCounts.length === 1) return statusCounts[0].config.hexColor;
+    
+    const maxCount = Math.max(...statusCounts.map(s => s.count));
+    const topStatuses = statusCounts.filter(s => s.count === maxCount);
+    
+    // If there's a clear winner, return its color
+    if (topStatuses.length === 1) {
+      return topStatuses[0].config.hexColor;
+    }
+    
+    // If there's a tie, blend the colors
+    const colorsToBlend = topStatuses.map(status => ({
+      hex: status.config.hexColor,
+      weight: status.count
+    }));
+    
+    return blendColors(colorsToBlend);
+  };
+
+  const getDominantPriorityColor = () => {
+    const priorityCounts = [
+      { key: 'critical', count: stats.priorityStats.critical, config: WORK_ITEM_PRIORITIES.critical },
+      { key: 'high', count: stats.priorityStats.high, config: WORK_ITEM_PRIORITIES.high },
+      { key: 'moderate', count: stats.priorityStats.moderate, config: WORK_ITEM_PRIORITIES.moderate },
+      { key: 'low', count: stats.priorityStats.low, config: WORK_ITEM_PRIORITIES.low },
+      { key: 'minimal', count: stats.priorityStats.minimal, config: WORK_ITEM_PRIORITIES.minimal }
+    ].filter(priority => priority.count > 0);
+    
+    if (priorityCounts.length === 0) return WORK_ITEM_PRIORITIES.minimal.hexColor;
+    if (priorityCounts.length === 1) return priorityCounts[0].config.hexColor;
+    
+    const maxCount = Math.max(...priorityCounts.map(p => p.count));
+    const topPriorities = priorityCounts.filter(p => p.count === maxCount);
+    
+    // If there's a clear winner, return its color
+    if (topPriorities.length === 1) {
+      return topPriorities[0].config.hexColor;
+    }
+    
+    // If there's a tie, blend the colors
+    const colorsToBlend = topPriorities.map(priority => ({
+      hex: priority.config.hexColor,
+      weight: priority.count
+    }));
+    
+    return blendColors(colorsToBlend);
+  };
+
+  const getDominantNodeTypeColor = () => {
+    const typeCounts = [
+      { key: 'BUG', count: stats.typeStats['BUG'] || 0, config: WORK_ITEM_TYPES.BUG },
+      { key: 'EPIC', count: stats.typeStats['EPIC'] || 0, config: WORK_ITEM_TYPES.EPIC },
+      { key: 'FEATURE', count: stats.typeStats['FEATURE'] || 0, config: WORK_ITEM_TYPES.FEATURE },
+      { key: 'MILESTONE', count: stats.typeStats['MILESTONE'] || 0, config: WORK_ITEM_TYPES.MILESTONE },
+      { key: 'OUTCOME', count: stats.typeStats['OUTCOME'] || 0, config: WORK_ITEM_TYPES.OUTCOME },
+      { key: 'TASK', count: stats.typeStats['TASK'] || 0, config: WORK_ITEM_TYPES.TASK },
+      { key: 'RESEARCH', count: stats.typeStats['RESEARCH'] || 0, config: WORK_ITEM_TYPES.RESEARCH },
+      { key: 'IDEA', count: stats.typeStats['IDEA'] || 0, config: WORK_ITEM_TYPES.IDEA }
+    ].filter(type => type.count > 0);
+    
+    if (typeCounts.length === 0) return WORK_ITEM_TYPES.TASK.hexColor;
+    if (typeCounts.length === 1) return typeCounts[0].config.hexColor;
+    
+    const maxCount = Math.max(...typeCounts.map(t => t.count));
+    const topTypes = typeCounts.filter(t => t.count === maxCount);
+    
+    // If there's a clear winner, return its color
+    if (topTypes.length === 1) {
+      return topTypes[0].config.hexColor;
+    }
+    
+    // If there's a tie, blend the colors
+    const colorsToBlend = topTypes.map(type => ({
+      hex: type.config.hexColor,
+      weight: type.count
+    }));
+    
+    return blendColors(colorsToBlend);
+  };
   return (
-    <div className="w-80 bg-gray-800 border-l border-gray-700 p-6 transition-all duration-300 ease-in-out">
+    <div className="w-80 bg-gray-800/90 backdrop-blur-md border-l border-gray-700/50 p-6 transition-all duration-300 ease-in-out shadow-2xl">
       <div className="space-y-6">
         {/* Project Overview */}
-        <div className="bg-gray-800 rounded-lg p-10 border border-gray-600">
+        <div 
+          className="bg-gray-800/50 rounded-xl p-10 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-800/70 transition-all duration-200 backdrop-blur-sm hover:shadow-lg hover:shadow-white/5"
+          style={{
+            borderLeft: `4px solid ${getProjectHealthBorderColor()}`,
+          }}
+        >
           <div className="flex items-center space-x-3 mb-7">
             {/* Dynamic Health Icon - Energy Efficiency */}
             <div className="relative group cursor-pointer">
@@ -59,7 +188,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({ currentView, stats }) => {
                 }}
               >
                 {stats.total > 0 
-                  ? `Project Health: ${Math.round((stats.completed / stats.total) * 100)}% - ${getProjectHealthStatus(stats.completed / stats.total)}`
+                  ? `Project Health: ${Math.round((stats.completed / stats.total) * 100)}% - ${getProjectHealthStatus(stats.completed / stats.total).replace(/🌟|✨|👍|⚠️|🚨/g, '').trim()}`
                   : 'No data available'
                 }
                 {/* Tooltip arrow */}
@@ -121,10 +250,15 @@ const RightSidebar: React.FC<RightSidebarProps> = ({ currentView, stats }) => {
         </div>
 
         {/* Status Breakdown */}
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-600">
+        <div 
+          className="bg-gray-800/50 rounded-xl p-6 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-800/70 transition-all duration-200 backdrop-blur-sm"
+          style={{
+            borderLeft: `4px solid ${getDominantStatusColor()}`,
+          }}
+        >
           <h3 className="text-xl font-semibold text-white mb-6">Task Status</h3>
           
-          <div className="space-y-6">
+          <div className="grid grid-cols-1 gap-3">
             {Object.entries(WORK_ITEM_STATUSES).map(([statusKey, statusConfig]) => {
               const getCount = (key: string) => {
                 switch(key) {
@@ -144,21 +278,33 @@ const RightSidebar: React.FC<RightSidebarProps> = ({ currentView, stats }) => {
               const IconComponent = statusConfig.icon;
               
               return (
-                <div key={statusKey} className="flex items-center justify-between">
-                  <div className="flex items-center space-x-2">
-                    <div className="flex items-center space-x-2">
-                      {IconComponent && <IconComponent className={`h-6 w-6 ${statusConfig.color}`} />}
-                      <span className="text-gray-300">{statusConfig.label}</span>
+                <div
+                  key={statusKey}
+                  className="bg-gray-700/50 rounded-xl p-4 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-700/70 transition-all duration-200 hover:scale-[1.02] hover:-translate-y-1 hover:shadow-lg cursor-pointer backdrop-blur-sm"
+                  style={{
+                    borderLeft: `4px solid ${statusConfig.hexColor}`,
+                  }}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center space-x-3">
+                      {IconComponent && <IconComponent className={`h-5 w-5 ${statusConfig.color}`} />}
+                      <span className="text-gray-200 font-medium text-sm">{statusConfig.label}</span>
                     </div>
+                    <span className="text-white font-bold text-lg">{count || 0}</span>
                   </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="text-white font-medium">{count || 0}</span>
-                    <div className="w-16 h-2 bg-gray-700 rounded-full">
-                      <div 
-                        className={`h-2 ${statusConfig.color.replace('text-', 'bg-')} rounded-full`}
-                        style={{ width: `${stats.total > 0 ? ((count || 0) / stats.total) * 100 : 0}%` }}
-                      ></div>
-                    </div>
+                  <div className="w-full h-2 bg-gray-800 rounded-full overflow-hidden">
+                    <div 
+                      className="h-2 rounded-full transition-all duration-300"
+                      style={{ 
+                        width: `${stats.total > 0 ? ((count || 0) / stats.total) * 100 : 0}%`,
+                        backgroundColor: statusConfig.hexColor
+                      }}
+                    ></div>
+                  </div>
+                  <div className="mt-2 text-right">
+                    <span className="text-xs text-gray-400">
+                      {stats.total > 0 ? Math.round(((count || 0) / stats.total) * 100) : 0}%
+                    </span>
                   </div>
                 </div>
               );
@@ -167,29 +313,46 @@ const RightSidebar: React.FC<RightSidebarProps> = ({ currentView, stats }) => {
         </div>
 
         {/* Priority Distribution */}
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-600">
+        <div 
+          className="bg-gray-800/50 rounded-xl p-6 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-800/70 transition-all duration-200 backdrop-blur-sm"
+          style={{
+            borderLeft: `4px solid ${getDominantPriorityColor()}`,
+          }}
+        >
           <h3 className="text-xl font-semibold text-white mb-6">Priority Distribution</h3>
-          <div className="space-y-6">
+          <div className="grid grid-cols-1 gap-3">
             {Object.entries(WORK_ITEM_PRIORITIES).map(([priorityKey, priorityConfig]) => {
               const count = stats.priorityStats[priorityKey as keyof typeof stats.priorityStats];
               const IconComponent = priorityConfig.icon;
               
               return (
-                <div key={priorityKey} className="flex items-center justify-between">
-                  <div className="flex items-center space-x-2">
-                    <div className="flex items-center space-x-2">
-                      {IconComponent && <IconComponent className={`h-6 w-6 ${priorityConfig.color}`} />}
-                      <span className="text-gray-300">{priorityConfig.label}</span>
+                <div
+                  key={priorityKey}
+                  className="bg-gray-700/50 rounded-xl p-4 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-700/70 transition-all duration-200 hover:scale-[1.02] hover:-translate-y-1 hover:shadow-lg cursor-pointer backdrop-blur-sm"
+                  style={{
+                    borderLeft: `4px solid ${priorityConfig.hexColor}`,
+                  }}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center space-x-3">
+                      {IconComponent && <IconComponent className={`h-5 w-5 ${priorityConfig.color}`} />}
+                      <span className="text-gray-200 font-medium text-sm">{priorityConfig.label}</span>
                     </div>
+                    <span className="text-white font-bold text-lg">{count || 0}</span>
                   </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="text-white font-medium">{count || 0}</span>
-                    <div className="w-16 h-2 bg-gray-700 rounded-full">
-                      <div 
-                        className={`h-2 ${priorityConfig.color.replace('text-', 'bg-')} rounded-full`}
-                        style={{ width: `${stats.total > 0 ? ((count || 0) / stats.total) * 100 : 0}%` }}
-                      ></div>
-                    </div>
+                  <div className="w-full h-2 bg-gray-800 rounded-full overflow-hidden">
+                    <div 
+                      className="h-2 rounded-full transition-all duration-300"
+                      style={{ 
+                        width: `${stats.total > 0 ? ((count || 0) / stats.total) * 100 : 0}%`,
+                        backgroundColor: priorityConfig.hexColor
+                      }}
+                    ></div>
+                  </div>
+                  <div className="mt-2 text-right">
+                    <span className="text-xs text-gray-400">
+                      {stats.total > 0 ? Math.round(((count || 0) / stats.total) * 100) : 0}%
+                    </span>
                   </div>
                 </div>
               );
@@ -198,29 +361,46 @@ const RightSidebar: React.FC<RightSidebarProps> = ({ currentView, stats }) => {
         </div>
 
         {/* Node Types */}
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-600">
+        <div 
+          className="bg-gray-800/50 rounded-xl p-6 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-800/70 transition-all duration-200 backdrop-blur-sm"
+          style={{
+            borderLeft: `4px solid ${getDominantNodeTypeColor()}`,
+          }}
+        >
           <h3 className="text-xl font-semibold text-white mb-6">Node Types</h3>
-          <div className="space-y-6">
+          <div className="grid grid-cols-1 gap-3">
             {Object.entries(WORK_ITEM_TYPES).map(([typeKey, typeConfig]) => {
               const count = stats.typeStats[typeKey] || 0;
               const IconComponent = typeConfig.icon;
               
               return (
-                <div key={typeKey} className="flex items-center justify-between">
-                  <div className="flex items-center space-x-2">
-                    <div className="flex items-center space-x-2">
-                      {IconComponent && <IconComponent className={`h-6 w-6 ${typeConfig.color}`} />}
-                      <span className="text-gray-300">{typeConfig.label}</span>
+                <div
+                  key={typeKey}
+                  className="bg-gray-700/50 rounded-xl p-4 border border-gray-600/50 hover:border-gray-500/70 hover:bg-gray-700/70 transition-all duration-200 hover:scale-[1.02] hover:-translate-y-1 hover:shadow-lg cursor-pointer backdrop-blur-sm"
+                  style={{
+                    borderLeft: `4px solid ${typeConfig.hexColor}`,
+                  }}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center space-x-3">
+                      {IconComponent && <IconComponent className={`h-5 w-5 ${typeConfig.color}`} />}
+                      <span className="text-gray-200 font-medium text-sm">{typeConfig.label}</span>
                     </div>
+                    <span className="text-white font-bold text-lg">{count}</span>
                   </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="text-white font-medium">{count}</span>
-                    <div className="w-16 h-2 bg-gray-700 rounded-full">
-                      <div 
-                        className={`h-2 ${typeConfig.color.replace('text-', 'bg-')} rounded-full`}
-                        style={{ width: `${stats.total > 0 ? (count / stats.total) * 100 : 0}%` }}
-                      ></div>
-                    </div>
+                  <div className="w-full h-2 bg-gray-800 rounded-full overflow-hidden">
+                    <div 
+                      className="h-2 rounded-full transition-all duration-300"
+                      style={{ 
+                        width: `${stats.total > 0 ? (count / stats.total) * 100 : 0}%`,
+                        backgroundColor: typeConfig.hexColor
+                      }}
+                    ></div>
+                  </div>
+                  <div className="mt-2 text-right">
+                    <span className="text-xs text-gray-400">
+                      {stats.total > 0 ? Math.round((count / stats.total) * 100) : 0}%
+                    </span>
                   </div>
                 </div>
               );
diff --git a/packages/web/src/components/TableView.tsx b/packages/web/src/components/TableView.tsx
index ffbffc30..a06b3542 100644
--- a/packages/web/src/components/TableView.tsx
+++ b/packages/web/src/components/TableView.tsx
@@ -1,8 +1,5 @@
 import React from 'react';
-import { 
-  Edit,
-  Trash2
-} from 'lucide-react';
+import { GitBranch, ArrowRight, ArrowLeft } from 'lucide-react';
 import {
   WorkItemType,
   WorkItemStatus,
@@ -11,7 +8,8 @@ import {
   getTypeIconElement,
   getStatusIconElement,
   getContributorColor,
-  getDueDateColorScheme
+  getDueDateColorScheme,
+  getTypeGradientBackground
 } from '../constants/workItemConstants';
 import { TagDisplay } from './TagDisplay';
 import { AnimatedPriority } from './AnimatedPriority';
@@ -23,10 +21,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -36,14 +31,21 @@ interface WorkItem {
   assignedTo?: { id: string; name: string; username: string; };
   graph?: { id: string; name: string; team?: { id: string; name: string; } };
   contributors?: Array<{ id: string; name: string; type: string; }>;
-  dependencies?: Array<{ id: string; title: string; type: string; }>;
-  dependents?: Array<{ id: string; title: string; type: string; }>;
+  dependencies?: Array<{ id: string; title: string; type: string; status: string; }>;
+  dependents?: Array<{ id: string; title: string; type: string; status: string; }>;
+}
+
+interface Edge {
+  id: string;
+  type: string;
+  source: { id: string; title: string; type: string; };
+  target: { id: string; title: string; type: string; };
 }
 
 interface TableViewProps {
   filteredNodes: WorkItem[];
   handleEditNode: (node: WorkItem) => void;
-  handleDeleteNode: (node: WorkItem) => void;
+  edges: Edge[];
 }
 
 const formatLabel = (label: string) => {
@@ -58,13 +60,36 @@ const getNodeTypeColor = (type: string) => {
   return `${config.color} ${config.bgColor} ${config.borderColor} border`;
 };
 
+const getNodeTypeRowBackground = (type: string) => {
+  return getTypeGradientBackground(type as WorkItemType, 'table');
+};
+
+const getNodeTypeBorderColor = (type: string) => {
+  return getTypeConfig(type as WorkItemType).hexColor;
+};
+
 const getStatusColor = (status: string) => {
   const config = getStatusConfig(status as WorkItemStatus);
   return config.color;
 };
 
 const getNodePriority = (node: WorkItem) => {
-  return node.priorityExec || 0;
+  return node.priority || 0;
+};
+
+const getConnectionDetails = (node: WorkItem, edges: Edge[]) => {
+  const incomingEdges = edges.filter(edge => edge.target.id === node.id);
+  const outgoingEdges = edges.filter(edge => edge.source.id === node.id);
+  const incomingCount = incomingEdges.length;
+  const outgoingCount = outgoingEdges.length;
+  const totalCount = incomingCount + outgoingCount;
+  return { 
+    incomingCount, 
+    outgoingCount, 
+    totalCount,
+    incomingEdges,
+    outgoingEdges
+  };
 };
 
 // Using centralized contributor color function
@@ -84,59 +109,50 @@ const getContributorAvatar = (contributor?: string) => {
   );
 };
 
-const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, handleDeleteNode }) => {
+const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, edges }) => {
   return (
     <div className="p-6">
-      <div className="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden max-w-full">
+      <div className="bg-gray-800/80 backdrop-blur-sm rounded-xl border border-gray-700/50 shadow-2xl overflow-hidden max-w-full">
         <div className="overflow-x-auto max-w-full">
           <table className="w-max min-w-full">
-            <thead className="bg-gray-700 border-b border-gray-700">
+            <thead className="bg-gradient-to-r from-gray-700 to-gray-800 border-b border-gray-600/50">
               <tr>
-                <th className="pr-4 py-12 text-left text-sm font-semibold text-gray-300 tracking-wider" style={{ paddingLeft: '80px' }}>Task</th>
-                <th className="pl-2 pr-3 py-10 text-left text-sm font-semibold text-gray-300 tracking-wider">Type</th>
-                <th className="pl-3 pr-3 py-10 text-left text-sm font-semibold text-gray-300 tracking-wider">Status</th>
-                <th className="pl-3 pr-6 py-10 text-left text-sm font-semibold text-gray-300 tracking-wider">Contributor</th>
-                <th className="pl-6 pr-6 py-10 text-left text-sm font-semibold text-gray-300 tracking-wider">Priority</th>
-                <th className="pl-6 pr-6 py-10 text-left text-sm font-semibold text-gray-300 tracking-wider whitespace-nowrap">Due Date</th>
+                <th className="pr-4 py-12 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase" style={{ paddingLeft: '80px' }}>Task</th>
+                <th className="pl-2 pr-3 py-10 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase">Type</th>
+                <th className="pl-3 pr-3 py-10 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase">Status</th>
+                <th className="pl-3 pr-6 py-10 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase">Contributor</th>
+                <th className="pl-6 pr-6 py-10 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase">Priority</th>
+                <th className="pl-6 pr-6 py-10 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase">Connections</th>
+                <th className="pl-6 pr-6 py-10 text-left text-sm font-semibold text-gray-200 tracking-wider uppercase whitespace-nowrap">Due Date</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-700">
+            <tbody className="divide-y divide-gray-600/30 backdrop-blur-sm">
               {[...filteredNodes]
                 .sort((a, b) => {
                   const dateA = new Date(a.updatedAt || a.createdAt).getTime();
                   const dateB = new Date(b.updatedAt || b.createdAt).getTime();
                   return dateB - dateA; // Most recent first
                 })
-                .map((node) => (
-                <tr key={node.id} className="hover:bg-gray-700/50 transition-colors cursor-pointer group dynamic-table-row">
+                .map((node, index) => {
+                  console.log(`Row ${index}:`, {
+                    id: node.id,
+                    title: node.title,
+                    type: node.type,
+                    visible: 'rendering'
+                  });
+                  return (
+                <tr 
+                  key={node.id} 
+                  onClick={() => handleEditNode(node)}
+                  className={`${getNodeTypeRowBackground(node.type)} hover:scale-[1.01] transition-all duration-200 group dynamic-table-row cursor-pointer hover:shadow-xl hover:shadow-white/10 relative hover:brightness-125`}
+                  style={{
+                    borderLeft: `4px solid ${getNodeTypeBorderColor(node.type)}`,
+                    borderRight: `2px solid ${getNodeTypeBorderColor(node.type)}`
+                  }}
+                >
                   <td className="pl-6 pr-4 py-12 dynamic-table-cell">
                     <div className="space-y-6">
-                      <div className="flex items-start justify-between">
-                        <div className="text-white font-medium text-base flex-1 table-text-content min-w-0">{node.title}</div>
-                        {/* Action buttons - appear on hover */}
-                        <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity ml-3">
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleEditNode(node);
-                            }}
-                            className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400 transition-colors"
-                            title="Edit node"
-                          >
-                            <Edit className="h-4 w-4" />
-                          </button>
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleDeleteNode(node);
-                            }}
-                            className="flex items-center justify-center w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 transition-colors"
-                            title="Delete node"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </button>
-                        </div>
-                      </div>
+                      <div className="text-white font-medium text-base table-text-content">{node.title}</div>
                       {node.description && (
                         <div className="text-gray-400 text-sm table-text-content min-w-0">{node.description}</div>
                       )}
@@ -165,7 +181,7 @@ const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, ha
                       getContributorAvatar(node.assignedTo.name)
                     ) : (
                       <div className="flex items-center space-x-2">
-                        <div className="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
+                        <div className="w-8 h-8 rounded-full bg-gray-600/30 backdrop-blur-sm flex items-center justify-center">
                           <span className="text-gray-400 text-xs">?</span>
                         </div>
                         <span className="text-gray-500 text-sm">Available</span>
@@ -178,7 +194,7 @@ const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, ha
                         value={getNodePriority(node)}
                         className="text-xs font-bold"
                         renderBar={(animatedValue, animatedColor) => (
-                          <div className="w-4 h-16 bg-gray-600 rounded overflow-hidden flex flex-col justify-end relative">
+                          <div className="w-4 h-16 bg-gray-600/30 backdrop-blur-sm rounded overflow-hidden flex flex-col justify-end relative">
                             <div 
                               className="w-full transition-colors duration-300"
                               style={{ 
@@ -191,6 +207,43 @@ const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, ha
                       />
                     </div>
                   </td>
+                  <td className="pl-6 pr-6 py-10 dynamic-table-cell">
+                    {(() => {
+                      const { incomingCount, outgoingCount, totalCount } = getConnectionDetails(node, edges);
+                      
+                      if (totalCount === 0) {
+                        return (
+                          <div className="flex items-center space-x-2 text-gray-500">
+                            <GitBranch className="h-4 w-4" />
+                            <span className="text-sm">None</span>
+                          </div>
+                        );
+                      }
+                      
+                      return (
+                        <div className="flex items-center space-x-3">
+                          <div className="flex items-center space-x-1">
+                            <GitBranch className="h-4 w-4 text-gray-400" />
+                            <span className="text-sm font-medium text-white">{totalCount}</span>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            {incomingCount > 0 && (
+                              <div className="flex items-center space-x-1 px-2 py-1 bg-red-900/20 border border-red-500/30 rounded-md">
+                                <ArrowLeft className="h-3 w-3 text-red-400" />
+                                <span className="text-xs font-medium text-red-300">{incomingCount}</span>
+                              </div>
+                            )}
+                            {outgoingCount > 0 && (
+                              <div className="flex items-center space-x-1 px-2 py-1 bg-purple-900/20 border border-purple-500/30 rounded-md">
+                                <ArrowRight className="h-3 w-3 text-purple-400" />
+                                <span className="text-xs font-medium text-purple-300">{outgoingCount}</span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })()}
+                  </td>
                   <td className="pl-6 pr-6 py-10 dynamic-table-cell">
                     {node.dueDate ? (
                       <div className="space-y-1">
@@ -224,7 +277,7 @@ const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, ha
                       </div>
                     ) : (
                       <div className="space-y-1">
-                        <div className="inline-flex items-center px-3 py-2 bg-gray-100 border border-gray-200 text-gray-600 text-sm font-medium rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+                        <div className="inline-flex items-center px-3 py-2 bg-gray-100/50 border border-gray-200/50 text-gray-600 text-sm font-medium rounded-lg dark:bg-gray-800/30 dark:border-gray-700/30 dark:text-gray-400 backdrop-blur-sm">
                           No due date
                         </div>
                         <div className="text-xs text-gray-500 dark:text-gray-400">
@@ -234,7 +287,8 @@ const TableView: React.FC<TableViewProps> = ({ filteredNodes, handleEditNode, ha
                     )}
                   </td>
                 </tr>
-              ))}
+                  );
+                })}
             </tbody>
           </table>
         </div>
diff --git a/packages/web/src/components/UpdateGraphModal.tsx b/packages/web/src/components/UpdateGraphModal.tsx
index d45b921a..f8391ed7 100644
--- a/packages/web/src/components/UpdateGraphModal.tsx
+++ b/packages/web/src/components/UpdateGraphModal.tsx
@@ -10,7 +10,7 @@ interface UpdateGraphModalProps {
 }
 
 export function UpdateGraphModal({ isOpen, onClose }: UpdateGraphModalProps) {
-  const { currentGraph, updateGraph } = useGraph();
+  const { currentGraph, updateGraph, availableGraphs } = useGraph();
   const { currentTeam } = useAuth();
   const { showSuccess, showError } = useNotifications();
   const [loading, setLoading] = useState(false);
@@ -144,6 +144,17 @@ export function UpdateGraphModal({ isOpen, onClose }: UpdateGraphModalProps) {
     e.preventDefault();
     
     if (!formData.name.trim()) {
+      showError('Validation Error', 'Please enter a graph name');
+      return;
+    }
+
+    // Check for duplicate graph names (excluding current graph)
+    const existingGraph = availableGraphs.find(g => 
+      g.id !== currentGraph.id && 
+      g.name.toLowerCase().trim() === formData.name.toLowerCase().trim()
+    );
+    if (existingGraph) {
+      showError('Duplicate Name', `A graph with the name "${formData.name}" already exists. Please choose a different name.`);
       return;
     }
 
@@ -177,28 +188,48 @@ export function UpdateGraphModal({ isOpen, onClose }: UpdateGraphModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 z-[9999] overflow-y-auto" style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0}}>
+    <div className="fixed inset-0 z-[9999] overflow-y-auto backdrop-blur-sm" style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0}}>
       <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" onClick={onClose} />
+        {/* Enhanced Backdrop with gradient */}
+        <div 
+          className="fixed inset-0 transition-opacity bg-gradient-to-br from-gray-900/90 via-black/80 to-gray-800/90 animate-in fade-in duration-300"
+          onClick={onClose}
+        />
 
-        <div className="inline-block align-bottom bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
-          {/* Header */}
-          <div className="bg-gray-800 px-6 py-4 border-b border-gray-600">
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold text-white">Edit Graph</h3>
-              <button
-                onClick={onClose}
-                className="text-gray-400 hover:text-gray-300 transition-colors"
-              >
-                <X className="h-5 w-5" />
-              </button>
+        {/* Enhanced Modal with better styling */}
+        <div className="inline-block align-bottom bg-gradient-to-br from-gray-800 via-gray-800 to-gray-900 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border border-gray-600/50 animate-in slide-in-from-bottom-4 duration-300 relative">
+          {/* Gradient accent line at top */}
+          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500"></div>
+          
+          {/* Enhanced Header with gradient background */}
+          <div className="flex items-center justify-between px-6 py-5 border-b border-gray-600/50 bg-gradient-to-r from-gray-800/90 to-gray-900/90 backdrop-blur-sm">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
+                <Save className="h-5 w-5 text-white" />
+              </div>
+              <h3 className="text-xl font-bold bg-gradient-to-r from-white via-green-100 to-blue-100 bg-clip-text text-transparent">Edit Graph</h3>
             </div>
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110"
+            >
+              <X className="h-5 w-5" />
+            </button>
           </div>
 
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          {/* Content */}
+          <div className="px-8 pt-0 pb-8 max-h-[70vh] overflow-y-auto relative">
+            {/* Subtle background pattern */}
+            <div className="absolute inset-0 opacity-5">
+              <div className="w-full h-full" style={{
+                backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+                backgroundSize: '20px 20px'
+              }}></div>
+            </div>
+            
+            <form onSubmit={handleSubmit} className="space-y-6 relative z-10">
             {/* Graph Details */}
-            <div className="space-y-4">
+            <div className="space-y-6 mb-8">
               {/* Current Graph Type Display */}
               <div className="bg-gray-700/50 border border-gray-600 rounded-lg p-3 mb-4">
                 <div className="flex items-center space-x-3">
@@ -220,62 +251,72 @@ export function UpdateGraphModal({ isOpen, onClose }: UpdateGraphModalProps) {
               </div>
 
               {/* Graph Name */}
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Graph Name *
+              <div className="group">
+                <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                  <span>Graph Name</span>
+                  <span className="text-red-400">*</span>
+                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                 </label>
-                <input
-                  type="text"
-                  value={formData.name}
-                  onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
-                  className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
-                  placeholder="Enter a descriptive name for your graph"
-                  required
-                />
+                <div className="relative">
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                    className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400 transition-all duration-300 hover:border-gray-500 shadow-lg"
+                    placeholder="Enter a descriptive name for your graph"
+                    required
+                  />
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/5 to-purple-500/5 pointer-events-none group-hover:from-blue-500/10 group-hover:to-purple-500/10 transition-all duration-300"></div>
+                </div>
+                <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                  <span className="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
+                  <span>Choose a clear, descriptive name that team members will recognize</span>
+                </p>
               </div>
 
               {/* Description */}
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Description
+              <div className="group">
+                <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                  <span>Description</span>
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                 </label>
-                <textarea
-                  value={formData.description}
-                  onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-                  className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
-                  placeholder="Describe the purpose and scope of your graph"
-                  rows={3}
-                />
+                <div className="relative">
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                    className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-300 hover:border-gray-500 shadow-lg resize-none"
+                    placeholder="Describe the purpose and scope of your graph"
+                    rows={4}
+                  />
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-green-500/5 to-emerald-500/5 pointer-events-none group-hover:from-green-500/10 group-hover:to-emerald-500/10 transition-all duration-300"></div>
+                </div>
+                <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                  <span className="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
+                  <span>Optional but recommended for team collaboration</span>
+                </p>
               </div>
 
               {/* Tags */}
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Tags / Categories
+              <div className="group">
+                <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                  <span>Tags</span>
+                  <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                 </label>
-                <div className="space-y-2">
-                  <input
-                    type="text"
-                    value={tagInput}
-                    onChange={handleTagInputChange}
-                    onKeyDown={handleTagInput}
-                    className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
-                    placeholder="Type and press comma to add tags (max 5)"
-                    disabled={formData.tags.length >= 5}
-                  />
-                  <p className="text-xs text-gray-500">Type and press comma to add tags (max 5)</p>
-                  
-                  {formData.tags.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {formData.tags.map((tag, index) => {
+                
+                {/* Enhanced Tag Display Area - matching CreateGraphModal */}
+                <div className="relative">
+                  <div className="w-full min-h-[3.5rem] px-4 py-3 bg-gray-800 border border-gray-600 rounded-xl focus-within:ring-2 focus-within:ring-purple-500/50 focus-within:border-purple-400 transition-all duration-300 hover:border-gray-500 shadow-lg">
+                    <div className="flex flex-wrap gap-2 items-center">
+                      {/* Existing Tags */}
+                      {formData.tags && formData.tags.slice(0, 5).map((tag, index) => {
                         const colorIndex = index % colors.length;
                         const color = colors[colorIndex];
                         return (
                           <div
                             key={index}
-                            className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium border-2 bg-gradient-to-r ${color.bg} ${color.text} ${color.border} cursor-pointer hover:scale-105 transition-all duration-200 shadow-sm`}
+                            className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-gradient-to-r ${color.bg} ${color.text} border-2 ${color.border} transition-all duration-200 hover:scale-105 shadow-md animate-in slide-in-from-left-2`}
                             style={{
-                              clipPath: 'polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%)'
+                              animationDelay: `${index * 100}ms`
                             }}
                           >
                             <span className="mr-2">{tag}</span>
@@ -289,83 +330,116 @@ export function UpdateGraphModal({ isOpen, onClose }: UpdateGraphModalProps) {
                           </div>
                         );
                       })}
+                      
+                      {/* Tag Input */}
+                      {formData.tags.length < 5 && (
+                        <input
+                          type="text"
+                          value={tagInput}
+                          onChange={handleTagInputChange}
+                          onKeyDown={handleTagInput}
+                          placeholder={formData.tags.length === 0 ? "Type and press comma to add tags (max 5)" : "Add more tags"}
+                          className="flex-1 min-w-[200px] px-2 py-1 bg-transparent border-0 outline-0 text-white placeholder-gray-400 text-sm"
+                        />
+                      )}
                     </div>
-                  )}
+                  </div>
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-purple-500/5 to-pink-500/5 pointer-events-none group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300"></div>
                 </div>
+                <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                  <span className="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
+                  <span>Type and press comma to add tags (max 5) • Click × to remove</span>
+                </p>
               </div>
 
               {/* Default Role for Team Members */}
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Default Role for Team Members
+              <div className="group">
+                <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                  <span>Default Role for Team Members</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
                 </label>
-                <select
-                  value={formData.defaultRole}
-                  onChange={(e) => setFormData(prev => ({ ...prev, defaultRole: e.target.value }))}
-                  className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-gray-200 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
-                >
-                  <option value="GUEST">Guest - Anonymous demo access (read-only)</option>
-                  <option value="VIEWER">Viewer - Can view graphs and nodes (read-only)</option>
-                  <option value="USER">User - Can create and work on tasks</option>
-                  <option value="ADMIN">Admin - Full system administration access</option>
-                </select>
-                <p className="text-xs text-gray-500 mt-1">Default permission level for new team members joining this graph</p>
+                <div className="relative">
+                  <select
+                    value={formData.defaultRole}
+                    onChange={(e) => setFormData(prev => ({ ...prev, defaultRole: e.target.value }))}
+                    className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-orange-400 transition-all duration-300 hover:border-gray-500 shadow-lg appearance-none"
+                  >
+                    <option value="GUEST" className="bg-gray-800 text-white">Guest - Anonymous demo access (read-only)</option>
+                    <option value="VIEWER" className="bg-gray-800 text-white">Viewer - Can view graphs and nodes (read-only)</option>
+                    <option value="USER" className="bg-gray-800 text-white">User - Can create and work on tasks</option>
+                    <option value="ADMIN" className="bg-gray-800 text-white">Admin - Full system administration access</option>
+                  </select>
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-orange-500/5 to-red-500/5 pointer-events-none group-hover:from-orange-500/10 group-hover:to-red-500/10 transition-all duration-300"></div>
+                </div>
+                <p className="text-xs text-gray-400 mt-2 flex items-center space-x-2">
+                  <span className="w-1.5 h-1.5 bg-orange-400 rounded-full"></span>
+                  <span>Default permission level for new team members joining this graph</span>
+                </p>
               </div>
 
               {/* Additional Settings */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 {/* Privacy Setting */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Privacy
+                <div className="group">
+                  <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                    <span>Privacy</span>
+                    <div className="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></div>
                   </label>
-                  <select
-                    value={formData.isShared ? 'shared' : 'private'}
-                    onChange={(e) => setFormData(prev => ({ ...prev, isShared: e.target.value === 'shared' }))}
-                    className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-500"
-                  >
-                    <option value="private">Private to team</option>
-                    <option value="shared">Shared with others</option>
-                  </select>
+                  <div className="relative">
+                    <select
+                      value={formData.isShared ? 'shared' : 'private'}
+                      onChange={(e) => setFormData(prev => ({ ...prev, isShared: e.target.value === 'shared' }))}
+                      className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-400 transition-all duration-300 hover:border-gray-500 shadow-lg appearance-none"
+                    >
+                      <option value="private" className="bg-gray-800 text-white">Private to team</option>
+                      <option value="shared" className="bg-gray-800 text-white">Shared with others</option>
+                    </select>
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-500/5 to-blue-500/5 pointer-events-none group-hover:from-indigo-500/10 group-hover:to-blue-500/10 transition-all duration-300"></div>
+                  </div>
                 </div>
 
                 {/* Status */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Status
+                <div className="group">
+                  <label className="block text-sm font-semibold text-gray-200 mb-3 flex items-center space-x-2">
+                    <span>Status</span>
+                    <div className="w-2 h-2 bg-teal-500 rounded-full animate-pulse"></div>
                   </label>
-                  <select
-                    value={formData.status}
-                    onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value as 'ACTIVE' | 'ARCHIVED' | 'DRAFT' }))}
-                    className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-500"
-                  >
-                    <option value="DRAFT">Draft</option>
-                    <option value="ACTIVE">Active</option>
-                    <option value="ARCHIVED">Archived</option>
-                  </select>
+                  <div className="relative">
+                    <select
+                      value={formData.status}
+                      onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value as 'ACTIVE' | 'ARCHIVED' | 'DRAFT' }))}
+                      className="w-full px-4 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-400 transition-all duration-300 hover:border-gray-500 shadow-lg appearance-none"
+                    >
+                      <option value="DRAFT" className="bg-gray-800 text-white">Draft</option>
+                      <option value="ACTIVE" className="bg-gray-800 text-white">Active</option>
+                      <option value="ARCHIVED" className="bg-gray-800 text-white">Archived</option>
+                    </select>
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-teal-500/5 to-cyan-500/5 pointer-events-none group-hover:from-teal-500/10 group-hover:to-cyan-500/10 transition-all duration-300"></div>
+                  </div>
                 </div>
               </div>
             </div>
 
             {/* Actions */}
-            <div className="flex justify-end space-x-3 pt-4 border-t border-gray-600">
+            <div className="flex justify-end space-x-4 pt-6 border-t border-gradient-to-r from-gray-600/30 via-gray-500/50 to-gray-600/30 relative z-10">
               <button
                 type="button"
                 onClick={onClose}
-                className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors"
+                className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/80 to-gray-600/80 rounded-xl hover:from-gray-600/80 hover:to-gray-500/80 transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-gray-400/50 hover:text-white font-medium"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 disabled={loading || !formData.name.trim()}
-                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                className="px-8 py-3 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white rounded-xl hover:from-blue-500 hover:via-indigo-500 hover:to-purple-500 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-105 transform border border-blue-400/30 font-semibold flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:hover:scale-100"
               >
-                <Save className="w-4 h-4" />
+                <Save className="w-5 h-5" />
                 <span>{loading ? 'Saving...' : 'Save Changes'}</span>
               </button>
             </div>
           </form>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/web/src/components/UserSelector.tsx b/packages/web/src/components/UserSelector.tsx
index add75d69..ddb670d3 100644
--- a/packages/web/src/components/UserSelector.tsx
+++ b/packages/web/src/components/UserSelector.tsx
@@ -39,10 +39,12 @@ export function UserSelector() {
 
   const getRoleColor = (role: string) => {
     switch (role) {
-      case 'admin': return 'text-purple-600 bg-purple-50';
-      case 'member': return 'text-blue-600 bg-blue-50';
-      case 'viewer': return 'text-gray-600 bg-gray-50';
-      default: return 'text-gray-600 bg-gray-50';
+      case 'admin': return 'text-purple-300 bg-purple-900';
+      case 'ADMIN': return 'text-purple-300 bg-purple-900';
+      case 'member': return 'text-blue-300 bg-blue-900';
+      case 'viewer': return 'text-gray-300 bg-gray-700';
+      case 'VIEWER': return 'text-gray-300 bg-gray-700';
+      default: return 'text-gray-300 bg-gray-700';
     }
   };
 
@@ -75,15 +77,15 @@ export function UserSelector() {
 
       {/* Dropdown menu */}
       {isOpen && (
-        <div className="absolute bottom-full left-0 right-0 mb-2 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-96 overflow-hidden">
+        <div className="absolute bottom-full left-0 right-0 mb-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg z-50 max-h-96 overflow-hidden">
           {/* Tabs */}
-          <div className="flex border-b border-gray-200">
+          <div className="flex border-b border-gray-600">
             <button
               onClick={() => setActiveTab('users')}
               className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
                 activeTab === 'users'
-                  ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
-                  : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
+                  ? 'text-blue-400 border-b-2 border-blue-400 bg-gray-700'
+                  : 'text-gray-300 hover:text-gray-100 hover:bg-gray-700'
               }`}
             >
               <User className="h-4 w-4 inline mr-2" />
@@ -93,8 +95,8 @@ export function UserSelector() {
               onClick={() => setActiveTab('teams')}
               className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
                 activeTab === 'teams'
-                  ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
-                  : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
+                  ? 'text-blue-400 border-b-2 border-blue-400 bg-gray-700'
+                  : 'text-gray-300 hover:text-gray-100 hover:bg-gray-700'
               }`}
             >
               <Users className="h-4 w-4 inline mr-2" />
@@ -105,7 +107,7 @@ export function UserSelector() {
           <div className="max-h-64 overflow-y-auto">
             {activeTab === 'users' && (
               <div className="p-2">
-                <div className="text-xs font-medium text-gray-500 px-2 py-1 uppercase tracking-wide">
+                <div className="text-xs font-medium text-gray-400 px-2 py-1 uppercase tracking-wide">
                   {currentTeam?.name} Members
                 </div>
                 {currentTeamUsers.map((user) => (
@@ -114,8 +116,8 @@ export function UserSelector() {
                     onClick={() => handleUserSelect(user.id)}
                     className={`w-full flex items-center space-x-3 p-2 rounded-lg text-left transition-colors ${
                       user.id === currentUser.id
-                        ? 'bg-blue-50 text-blue-700'
-                        : 'hover:bg-gray-50 text-gray-900'
+                        ? 'bg-blue-900 text-blue-100'
+                        : 'hover:bg-gray-700 text-gray-100'
                     }`}
                   >
                     <div className="flex-shrink-0">
@@ -125,7 +127,7 @@ export function UserSelector() {
                     </div>
                     <div className="flex-1 min-w-0">
                       <div className="text-sm font-medium truncate">{user.name}</div>
-                      <div className="text-xs text-gray-500 truncate">{user.email}</div>
+                      <div className="text-xs text-gray-400 truncate">{user.email}</div>
                     </div>
                     <div className={`text-xs px-2 py-1 rounded-full ${getRoleColor(user.role)}`}>
                       {user.role}
@@ -139,7 +141,7 @@ export function UserSelector() {
                 {/* Other team users */}
                 {availableUsers.filter(user => user.team?.id !== currentTeam?.id).length > 0 && (
                   <>
-                    <div className="text-xs font-medium text-gray-500 px-2 py-1 mt-3 uppercase tracking-wide border-t pt-3">
+                    <div className="text-xs font-medium text-gray-400 px-2 py-1 mt-3 uppercase tracking-wide border-t border-gray-600 pt-3">
                       Other Teams
                     </div>
                     {availableUsers
@@ -150,7 +152,7 @@ export function UserSelector() {
                           <button
                             key={user.id}
                             onClick={() => handleUserSelect(user.id)}
-                            className="w-full flex items-center space-x-3 p-2 rounded-lg text-left hover:bg-gray-50 text-gray-900 transition-colors"
+                            className="w-full flex items-center space-x-3 p-2 rounded-lg text-left hover:bg-gray-700 text-gray-100 transition-colors"
                           >
                             <div className="flex-shrink-0">
                               <div className="w-6 h-6 bg-gradient-to-br from-gray-400 to-gray-600 rounded-full flex items-center justify-center text-white text-xs font-medium">
@@ -159,7 +161,7 @@ export function UserSelector() {
                             </div>
                             <div className="flex-1 min-w-0">
                               <div className="text-sm font-medium truncate">{user.name}</div>
-                              <div className="text-xs text-gray-500 truncate">{userTeam?.name}</div>
+                              <div className="text-xs text-gray-400 truncate">{userTeam?.name}</div>
                             </div>
                             <div className={`text-xs px-2 py-1 rounded-full ${getRoleColor(user.role)}`}>
                               {user.role}
@@ -180,8 +182,8 @@ export function UserSelector() {
                     onClick={() => handleTeamSelect(team.id)}
                     className={`w-full flex items-center space-x-3 p-2 rounded-lg text-left transition-colors ${
                       team.id === currentTeam?.id
-                        ? 'bg-blue-50 text-blue-700'
-                        : 'hover:bg-gray-50 text-gray-900'
+                        ? 'bg-blue-900 text-blue-100'
+                        : 'hover:bg-gray-700 text-gray-100'
                     }`}
                   >
                     <div className="flex-shrink-0">
@@ -191,7 +193,7 @@ export function UserSelector() {
                     </div>
                     <div className="flex-1 min-w-0">
                       <div className="text-sm font-medium truncate">{team.name}</div>
-                      <div className="text-xs text-gray-500 truncate">
+                      <div className="text-xs text-gray-400 truncate">
                         {team.memberCount} members • {team.description}
                       </div>
                     </div>
@@ -205,10 +207,10 @@ export function UserSelector() {
           </div>
 
           {/* Logout button */}
-          <div className="border-t border-gray-200 p-2">
+          <div className="border-t border-gray-600 p-2">
             <button
               onClick={handleLogout}
-              className="w-full flex items-center space-x-3 p-2 rounded-lg text-left hover:bg-red-50 text-red-600 transition-colors"
+              className="w-full flex items-center space-x-3 p-2 rounded-lg text-left hover:bg-red-900 text-red-400 transition-colors"
             >
               <LogOut className="h-4 w-4" />
               <span className="text-sm font-medium">Logout</span>
diff --git a/packages/web/src/components/ViewManager.tsx b/packages/web/src/components/ViewManager.tsx
index 3da89d5c..ca3d9a63 100644
--- a/packages/web/src/components/ViewManager.tsx
+++ b/packages/web/src/components/ViewManager.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
-import { Search, X, ChevronDown } from 'lucide-react';
+import { Search, X, ChevronDown, BarChart3, PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { STATUS_OPTIONS, TYPE_OPTIONS, PRIORITY_OPTIONS } from '../constants/workItemConstants';
 import { useAuth } from '../contexts/AuthContext';
 import { useGraph } from '../contexts/GraphContext';
-import { GET_WORK_ITEMS } from '../lib/queries';
+import { GET_WORK_ITEMS, GET_EDGES } from '../lib/queries';
 import { EditNodeModal } from './EditNodeModal';
 import { DeleteNodeModal } from './DeleteNodeModal';
+import { NodeDetailsModal } from './NodeDetailsModal';
 import Dashboard from './Dashboard';
 import TableView from './TableView';
 import CardView from './CardView';
@@ -23,10 +24,7 @@ interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
+  priority: number;
   dueDate?: string;
   tags?: string[];
   metadata?: string;
@@ -36,8 +34,8 @@ interface WorkItem {
   assignedTo?: { id: string; name: string; username: string; };
   graph?: { id: string; name: string; team?: { id: string; name: string; } };
   contributors?: Array<{ id: string; name: string; type: string; }>;
-  dependencies?: Array<{ id: string; title: string; type: string; }>;
-  dependents?: Array<{ id: string; title: string; type: string; }>;
+  dependencies?: Array<{ id: string; title: string; type: string; status: string; }>;
+  dependents?: Array<{ id: string; title: string; type: string; status: string; }>;
 }
 
 type ViewType = 'dashboard' | 'table' | 'cards' | 'kanban' | 'gantt' | 'calendar' | 'activity';
@@ -51,6 +49,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
   const [selectedNode, setSelectedNode] = useState<WorkItem | null>(null);
   const [showEditModal, setShowEditModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showNodeDetailsModal, setShowNodeDetailsModal] = useState(false);
   const [statusFilter, setStatusFilter] = useState<string>('');
   const [typeFilter, setTypeFilter] = useState<string>('');
   const [priorityFilter, setPriorityFilter] = useState<string>('');
@@ -59,6 +58,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
   const [isPriorityDropdownOpen, setIsPriorityDropdownOpen] = useState(false);
   const [isContributorDropdownOpen, setIsContributorDropdownOpen] = useState(false);
+  const [showProjectHealth, setShowProjectHealth] = useState(false);
 
   // Refs for dropdown management
   const statusDropdownRef = useRef<HTMLDivElement>(null);
@@ -84,6 +84,31 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
 
   const workItems: WorkItem[] = data?.workItems || [];
 
+  // Fetch edges to compute connections manually
+  const { data: edgeData } = useQuery(GET_EDGES, {
+    variables: currentGraph ? {
+      where: {
+        OR: [
+          { source: { graph: { id: currentGraph.id } } },
+          { target: { graph: { id: currentGraph.id } } }
+        ]
+      }
+    } : { where: {} },
+    pollInterval: currentGraph ? 5000 : 0,
+    fetchPolicy: currentGraph ? 'cache-and-network' : 'cache-only'
+  });
+
+  const edges = edgeData?.edges || [];
+  
+  // Convert edges to WorkItemEdge format for NodeDetailsModal
+  const workItemEdges = edges.map((edge: { id: string; source: { id: string }; target: { id: string }; type: string; weight: number }) => ({
+    id: edge.id,
+    source: edge.source.id,
+    target: edge.target.id,
+    type: edge.type,
+    strength: edge.weight
+  }));
+
 
   // Convert centralized options to ViewManager format
   const statusOptions = STATUS_OPTIONS.map(option => ({
@@ -159,7 +184,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
   // Handle node actions
   const handleEditNode = (node: WorkItem) => {
     setSelectedNode(node);
-    setShowEditModal(true);
+    setShowNodeDetailsModal(true);
   };
 
   const handleDeleteNode = (node: WorkItem) => {
@@ -171,6 +196,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
     setSelectedNode(null);
     setShowEditModal(false);
     setShowDeleteModal(false);
+    setShowNodeDetailsModal(false);
   };
 
   // Transform node data for EditNodeModal
@@ -180,9 +206,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
     description: node.description || '',
     type: node.type,
     status: node.status,
-    priorityExec: node.priorityExec,
-    priorityIndiv: node.priorityIndiv,
-    priorityComm: node.priorityComm,
+    priority: node.priority,
     dueDate: node.dueDate,
     tags: node.tags || [],
     metadata: node.metadata || '',
@@ -217,7 +241,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
 
     // Priority filter
     if (priorityFilter && priorityFilter !== '' && priorityFilter !== 'All Priorities') {
-      const priority = (node: WorkItem) => node.priorityComp || node.priorityExec || 0;
+      const priority = (node: WorkItem) => node.priority || 0;
       switch (priorityFilter) {
         case 'Critical':
           filtered = filtered.filter(node => priority(node) >= 0.8);
@@ -268,11 +292,11 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
     }, {} as Record<string, number>);
 
     const priorityStats = {
-      critical: filteredNodes.filter(node => (node.priorityComp || node.priorityExec) >= 0.8).length,
-      high: filteredNodes.filter(node => (node.priorityComp || node.priorityExec) >= 0.6 && (node.priorityComp || node.priorityExec) < 0.8).length,
-      moderate: filteredNodes.filter(node => (node.priorityComp || node.priorityExec) >= 0.4 && (node.priorityComp || node.priorityExec) < 0.6).length,
-      low: filteredNodes.filter(node => (node.priorityComp || node.priorityExec) >= 0.2 && (node.priorityComp || node.priorityExec) < 0.4).length,
-      minimal: filteredNodes.filter(node => (node.priorityComp || node.priorityExec) < 0.2).length
+      critical: filteredNodes.filter(node => node.priority >= 0.8).length,
+      high: filteredNodes.filter(node => node.priority >= 0.6 && node.priority < 0.8).length,
+      moderate: filteredNodes.filter(node => node.priority >= 0.4 && node.priority < 0.6).length,
+      low: filteredNodes.filter(node => node.priority >= 0.2 && node.priority < 0.4).length,
+      minimal: filteredNodes.filter(node => node.priority < 0.2).length
     };
 
     return {
@@ -326,11 +350,11 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
       case 'dashboard':
         return <Dashboard filteredNodes={filteredNodes} stats={stats} />;
       case 'table':
-        return <TableView filteredNodes={filteredNodes} handleEditNode={handleEditNode} handleDeleteNode={handleDeleteNode} />;
+        return <TableView filteredNodes={filteredNodes} handleEditNode={handleEditNode} edges={edges} />;
       case 'cards':
-        return <CardView filteredNodes={filteredNodes} handleEditNode={handleEditNode} handleDeleteNode={handleDeleteNode} />;
+        return <CardView filteredNodes={filteredNodes} handleEditNode={handleEditNode} edges={edges} />;
       case 'kanban':
-        return <KanbanView filteredNodes={filteredNodes} handleEditNode={handleEditNode} handleDeleteNode={handleDeleteNode} />;
+        return <KanbanView filteredNodes={filteredNodes} handleEditNode={handleEditNode} edges={edges} />;
       case 'gantt':
         return <GanttChart filteredNodes={filteredNodes} />;
       case 'calendar':
@@ -346,10 +370,10 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
   const shouldShowFilters = ['table', 'cards', 'kanban'].includes(viewMode);
 
   return (
-    <div className="h-full flex flex-col bg-gray-900">
+    <div className="h-full flex flex-col">
       {/* Search and Filter Bar - Only for table, card, kanban views */}
       {shouldShowFilters && (
-        <div className="bg-gray-800 border-b border-gray-700 p-4">
+        <div className="bg-gray-800/90 backdrop-blur-sm border-b border-gray-700/50 p-4">
           <div className="flex flex-col sm:flex-row gap-4 items-center">
             {/* Search Input */}
             <div className="relative w-full sm:w-80 md:w-96 lg:w-[28rem]">
@@ -677,14 +701,31 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
       )}
 
       {/* Main Content Container */}
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex flex-1 overflow-hidden relative">
         {/* Main Content */}
         <div className="flex-1 overflow-auto">
           {renderView()}
         </div>
 
-        {/* Right Sidebar */}
-        <RightSidebar currentView={viewMode} stats={stats} />
+        {/* Project Health Toggle Button - Floating */}
+        <button
+          onClick={() => setShowProjectHealth(!showProjectHealth)}
+          className="fixed right-4 top-20 z-40 p-3 bg-gray-700/60 hover:bg-gray-700/80 backdrop-blur-sm rounded-lg border border-gray-600/50 hover:border-gray-500/70 transition-all duration-200 group"
+          title={showProjectHealth ? "Hide Project Health" : "Show Project Health"}
+        >
+          {showProjectHealth ? (
+            <PanelRightClose className="h-5 w-5 text-gray-300 group-hover:text-white" />
+          ) : (
+            <BarChart3 className="h-5 w-5 text-gray-300 group-hover:text-white" />
+          )}
+        </button>
+
+        {/* Right Sidebar - Overlay */}
+        {showProjectHealth && (
+          <div className="absolute right-0 top-0 bottom-0 z-30">
+            <RightSidebar currentView={viewMode} stats={stats} />
+          </div>
+        )}
       </div>
 
       {/* Edit Node Modal */}
@@ -706,6 +747,17 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
           nodeType={selectedNode.type}
         />
       )}
+
+      {/* Node Details Modal */}
+      {showNodeDetailsModal && selectedNode && (
+        <NodeDetailsModal
+          isOpen={showNodeDetailsModal}
+          onClose={handleCloseModals}
+          node={selectedNode}
+          edges={workItemEdges}
+          nodes={filteredNodes}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/web/src/constants/workItemConstants.tsx b/packages/web/src/constants/workItemConstants.tsx
index a35ecdcf..915a7e8f 100644
--- a/packages/web/src/constants/workItemConstants.tsx
+++ b/packages/web/src/constants/workItemConstants.tsx
@@ -35,7 +35,8 @@ import {
   Package,
   // Default Icon
   Square,
-  Paperclip
+  Paperclip,
+  Eraser
 } from 'lucide-react';
 
 // ============================
@@ -154,6 +155,16 @@ export interface PriorityOption {
 // ============================
 
 export const WORK_ITEM_TYPES: Record<WorkItemType, TypeOption> = {
+  DEFAULT: {
+    value: 'DEFAULT',
+    label: 'Default',
+    description: 'Generic work item',
+    icon: Eraser,
+    color: 'text-gray-300',
+    bgColor: 'bg-gray-600/20',
+    borderColor: 'border-gray-500/30',
+    hexColor: '#9ca3af'
+  },
   EPIC: {
     value: 'EPIC',
     label: 'Epic',
@@ -222,7 +233,7 @@ export const WORK_ITEM_TYPES: Record<WorkItemType, TypeOption> = {
     color: 'text-yellow-400',
     bgColor: 'bg-yellow-400/10',
     borderColor: 'border-yellow-400/30',
-    hexColor: '#fde047'
+    hexColor: '#facc15'
   },
   RESEARCH: {
     value: 'RESEARCH',
@@ -233,16 +244,6 @@ export const WORK_ITEM_TYPES: Record<WorkItemType, TypeOption> = {
     bgColor: 'bg-teal-400/10',
     borderColor: 'border-teal-400/30',
     hexColor: '#2dd4bf'
-  },
-  DEFAULT: {
-    value: 'DEFAULT',
-    label: 'Default',
-    description: 'Generic work item',
-    icon: Square,
-    color: 'text-gray-400',
-    bgColor: 'bg-gray-400/10',
-    borderColor: 'border-gray-400/30',
-    hexColor: '#9ca3af'
   }
 };
 
@@ -258,9 +259,9 @@ export const WORK_ITEM_STATUSES: Record<WorkItemStatus, StatusOption> = {
     label: 'Not Started',
     description: 'Waiting to begin',
     icon: Hexagon,
-    color: 'text-gray-400',
-    bgColor: 'bg-gray-400/10',
-    borderColor: 'border-gray-400/30',
+    color: 'text-gray-300',
+    bgColor: 'bg-gray-600/20',
+    borderColor: 'border-gray-500/30',
     dotColor: 'bg-gray-400',
     hexColor: '#9ca3af'
   },
@@ -422,7 +423,8 @@ export const WORK_ITEM_PRIORITIES: Record<PriorityLevel, PriorityOption> = {
 
 export const TYPE_OPTIONS: TypeOption[] = [
   { value: 'all', label: 'All Type', icon: null, color: 'text-gray-400', hexColor: '#9ca3af' },
-  ...Object.values(WORK_ITEM_TYPES)
+  WORK_ITEM_TYPES.DEFAULT,
+  ...Object.values(WORK_ITEM_TYPES).filter(type => type.value !== 'DEFAULT')
 ];
 
 export const STATUS_OPTIONS: StatusOption[] = [
@@ -576,10 +578,7 @@ export const DEFAULT_NODE_CONFIG = {
   title: 'New Node', // Default title for new nodes
   type: 'DEFAULT' as WorkItemType, // Default type (generic work item)
   status: 'NOT_STARTED' as WorkItemStatus, // Default status (beginning of workflow)
-  priority: 'minimal' as PriorityLevel, // Default priority level
-  priorityExec: 0.0, // Executive priority score (0.0-1.0)
-  priorityIndiv: 0.0, // Individual priority score (0.0-1.0)
-  priorityComm: 0.0, // Community priority score (0.0-1.0)
+  priority: 0.0, // Priority score (0.0-1.0)
   description: '' // Empty description by default
 };
 
@@ -930,6 +929,215 @@ export const getProjectHealthStatus = (completionRatio: number): string => {
   return 'Critical 🚨';
 };
 
+// ============================
+// CENTRALIZED GRADIENT SYSTEM
+// ============================
+
+// Gradient style types for different views
+export type GradientStyle = 'table' | 'card' | 'kanban' | 'dashboard';
+
+// Central function to get type-based gradient backgrounds
+export const getTypeGradientBackground = (type: WorkItemType, style: GradientStyle): string => {
+  const config = getTypeConfig(type);
+  
+  // Extract base color from hex (remove #)
+  const baseColor = config.hexColor.replace('#', '');
+  
+  // Map hex to Tailwind color names for consistency
+  const colorMap: Record<string, string> = {
+    'e879f9': 'fuchsia-500',  // EPIC
+    'fb923c': 'orange-500',   // MILESTONE  
+    '818cf8': 'indigo-500',   // OUTCOME
+    '38bdf8': 'sky-500',      // FEATURE
+    '4ade80': 'green-500',    // TASK
+    'ef4444': 'red-500',      // BUG
+    'facc15': 'yellow-500',   // IDEA
+    '2dd4bf': 'teal-500',     // RESEARCH
+    '9ca3af': 'gray-500'      // DEFAULT
+  };
+  
+  const tailwindColor = colorMap[baseColor] || 'gray-500';
+  
+  switch (style) {
+    case 'table': {
+      // Use static gradient classes for proper Tailwind compilation and better transparency
+      const gradientMap: Record<string, string> = {
+        'green-500': 'bg-gradient-to-r from-green-500/15 via-green-500/5 to-green-500/15',   // OUTCOME
+        'blue-500': 'bg-gradient-to-r from-blue-500/15 via-blue-500/5 to-blue-500/15',       // TASK
+        'purple-500': 'bg-gradient-to-r from-purple-500/15 via-purple-500/5 to-purple-500/15', // MILESTONE
+        'amber-500': 'bg-gradient-to-r from-amber-500/15 via-amber-500/5 to-amber-500/15',   // DELIVERABLE
+        'rose-500': 'bg-gradient-to-r from-rose-500/15 via-rose-500/5 to-rose-500/15',       // EPIC
+        'indigo-500': 'bg-gradient-to-r from-indigo-500/15 via-indigo-500/5 to-indigo-500/15', // FEATURE
+        'teal-500': 'bg-gradient-to-r from-teal-500/15 via-teal-500/5 to-teal-500/15',       // STORY
+        'orange-500': 'bg-gradient-to-r from-orange-500/15 via-orange-500/5 to-orange-500/15', // BUG
+        'slate-500': 'bg-gradient-to-r from-slate-500/15 via-slate-500/5 to-slate-500/15'    // ISSUE
+      };
+      
+      const hoverMap: Record<string, string> = {
+        'green-500': 'hover:from-green-500/25 hover:via-green-500/15 hover:to-green-500/25',
+        'blue-500': 'hover:from-blue-500/25 hover:via-blue-500/15 hover:to-blue-500/25',
+        'purple-500': 'hover:from-purple-500/25 hover:via-purple-500/15 hover:to-purple-500/25',
+        'amber-500': 'hover:from-amber-500/25 hover:via-amber-500/15 hover:to-amber-500/25',
+        'rose-500': 'hover:from-rose-500/25 hover:via-rose-500/15 hover:to-rose-500/25',
+        'indigo-500': 'hover:from-indigo-500/25 hover:via-indigo-500/15 hover:to-indigo-500/25',
+        'teal-500': 'hover:from-teal-500/25 hover:via-teal-500/15 hover:to-teal-500/25',
+        'orange-500': 'hover:from-orange-500/25 hover:via-orange-500/15 hover:to-orange-500/25',
+        'slate-500': 'hover:from-slate-500/25 hover:via-slate-500/15 hover:to-slate-500/25'
+      };
+      
+      const gradientClass = gradientMap[tailwindColor] || 'bg-gradient-to-r from-gray-500/15 via-gray-500/5 to-gray-500/15';
+      const hoverClass = hoverMap[tailwindColor] || 'hover:from-gray-500/25 hover:via-gray-500/15 hover:to-gray-500/25';
+      
+      return `${gradientClass} ${hoverClass} backdrop-blur-sm`;
+    }
+    
+    case 'card': {
+      // Use static gradient classes for proper Tailwind compilation and transparency
+      const gradientMap: Record<string, string> = {
+        'green-500': 'bg-gradient-to-br from-green-500/20 via-green-500/10 to-green-500/5',   // OUTCOME
+        'blue-500': 'bg-gradient-to-br from-blue-500/20 via-blue-500/10 to-blue-500/5',       // TASK
+        'purple-500': 'bg-gradient-to-br from-purple-500/20 via-purple-500/10 to-purple-500/5', // MILESTONE
+        'amber-500': 'bg-gradient-to-br from-amber-500/20 via-amber-500/10 to-amber-500/5',   // DELIVERABLE
+        'rose-500': 'bg-gradient-to-br from-rose-500/20 via-rose-500/10 to-rose-500/5',       // EPIC
+        'indigo-500': 'bg-gradient-to-br from-indigo-500/20 via-indigo-500/10 to-indigo-500/5', // FEATURE
+        'teal-500': 'bg-gradient-to-br from-teal-500/20 via-teal-500/10 to-teal-500/5',       // STORY
+        'orange-500': 'bg-gradient-to-br from-orange-500/20 via-orange-500/10 to-orange-500/5', // BUG
+        'slate-500': 'bg-gradient-to-br from-slate-500/20 via-slate-500/10 to-slate-500/5'    // ISSUE
+      };
+      
+      const borderColorMap: Record<string, string> = {
+        'green-500': 'border-l-green-400/40',
+        'blue-500': 'border-l-blue-400/40',
+        'purple-500': 'border-l-purple-400/40',
+        'amber-500': 'border-l-amber-400/40',
+        'rose-500': 'border-l-rose-400/40',
+        'indigo-500': 'border-l-indigo-400/40',
+        'teal-500': 'border-l-teal-400/40',
+        'orange-500': 'border-l-orange-400/40',
+        'slate-500': 'border-l-slate-400/40'
+      };
+      
+      const gradientClass = gradientMap[tailwindColor] || 'bg-gradient-to-br from-gray-500/20 via-gray-500/10 to-gray-500/5';
+      const borderClass = borderColorMap[tailwindColor] || 'border-l-gray-400/40';
+      
+      return `${gradientClass} border-l-4 ${borderClass}`;
+    }
+    
+    case 'kanban': {
+      // Use static gradient classes for proper Tailwind compilation and transparency
+      const gradientMap: Record<string, string> = {
+        'green-500': 'bg-gradient-to-br from-green-500/20 via-green-500/10 to-green-500/5',   // OUTCOME
+        'blue-500': 'bg-gradient-to-br from-blue-500/20 via-blue-500/10 to-blue-500/5',       // TASK
+        'purple-500': 'bg-gradient-to-br from-purple-500/20 via-purple-500/10 to-purple-500/5', // MILESTONE
+        'amber-500': 'bg-gradient-to-br from-amber-500/20 via-amber-500/10 to-amber-500/5',   // DELIVERABLE
+        'rose-500': 'bg-gradient-to-br from-rose-500/20 via-rose-500/10 to-rose-500/5',       // EPIC
+        'indigo-500': 'bg-gradient-to-br from-indigo-500/20 via-indigo-500/10 to-indigo-500/5', // FEATURE
+        'teal-500': 'bg-gradient-to-br from-teal-500/20 via-teal-500/10 to-teal-500/5',       // STORY
+        'orange-500': 'bg-gradient-to-br from-orange-500/20 via-orange-500/10 to-orange-500/5', // BUG
+        'slate-500': 'bg-gradient-to-br from-slate-500/20 via-slate-500/10 to-slate-500/5'    // ISSUE
+      };
+      
+      return gradientMap[tailwindColor] || 'bg-gradient-to-br from-gray-500/20 via-gray-500/10 to-gray-500/5';
+    }
+    
+    case 'dashboard':
+      return `bg-gradient-to-br from-${tailwindColor}/10 via-gray-800 to-${tailwindColor}/5 border-l-4 border-l-${tailwindColor.replace('-500', '-400')}/40 hover:from-${tailwindColor}/20 hover:to-${tailwindColor}/20 hover:border-l-${tailwindColor.replace('-500', '-300')}/60`;
+    
+    default:
+      return `bg-gradient-to-br from-${tailwindColor}/10 via-gray-800 to-${tailwindColor}/5`;
+  }
+};
+
+// Central function to get status-based gradient backgrounds (for Dashboard)
+export const getStatusGradientBackground = (status: WorkItemStatus, style: GradientStyle): string => {
+  const config = getStatusConfig(status);
+  
+  // Extract base color from hex (remove #)
+  const baseColor = config.hexColor.replace('#', '');
+  
+  // Map hex to Tailwind color names for consistency
+  const colorMap: Record<string, string> = {
+    '9ca3af': 'gray-500',     // NOT_STARTED
+    '06b6d4': 'cyan-500',     // PROPOSED
+    'a855f7': 'purple-500',   // PLANNED
+    'eab308': 'yellow-500',   // IN_PROGRESS
+    '3b82f6': 'blue-500',     // IN_REVIEW
+    'ef4444': 'red-500',      // BLOCKED
+    'fb923c': 'orange-500',   // ON_HOLD
+    '22c55e': 'green-500',    // COMPLETED
+    'ff1493': 'pink-500'      // CANCELLED
+  };
+  
+  const tailwindColor = colorMap[baseColor] || 'gray-500';
+  
+  // Use static classes to ensure Tailwind generates them
+  const borderColorMap: Record<string, string> = {
+    'gray-500': 'border-l-gray-400/70',
+    'cyan-500': 'border-l-cyan-400/70', 
+    'purple-500': 'border-l-purple-400/70',
+    'yellow-500': 'border-l-yellow-400/70',
+    'blue-500': 'border-l-blue-400/70',
+    'red-500': 'border-l-red-400/70',
+    'orange-500': 'border-l-orange-400/70',
+    'green-500': 'border-l-green-400/70',
+    'pink-500': 'border-l-pink-400/70'
+  };
+
+  const hoverColorMap: Record<string, string> = {
+    'gray-500': 'hover:from-gray-500/40 hover:via-gray-500/30 hover:to-gray-500/35',
+    'cyan-500': 'hover:from-cyan-500/40 hover:via-cyan-500/30 hover:to-cyan-500/35', 
+    'purple-500': 'hover:from-purple-500/40 hover:via-purple-500/30 hover:to-purple-500/35',
+    'yellow-500': 'hover:from-yellow-500/40 hover:via-yellow-500/30 hover:to-yellow-500/35',
+    'blue-500': 'hover:from-blue-500/40 hover:via-blue-500/30 hover:to-blue-500/35',
+    'red-500': 'hover:from-red-500/40 hover:via-red-500/30 hover:to-red-500/35',
+    'orange-500': 'hover:from-orange-500/40 hover:via-orange-500/30 hover:to-orange-500/35',
+    'green-500': 'hover:from-green-500/40 hover:via-green-500/30 hover:to-green-500/35',
+    'pink-500': 'hover:from-pink-500/40 hover:via-pink-500/30 hover:to-pink-500/35'
+  };
+
+  switch (style) {
+    case 'dashboard': {
+      // Use static gradient classes for proper Tailwind compilation
+      const gradientMap: Record<string, string> = {
+        'gray-500': 'bg-gradient-to-br from-gray-500/30 via-gray-500/20 to-gray-500/10',     // NOT_STARTED
+        'cyan-500': 'bg-gradient-to-br from-cyan-500/30 via-cyan-500/20 to-cyan-500/10',     // PROPOSED
+        'purple-500': 'bg-gradient-to-br from-purple-500/30 via-purple-500/20 to-purple-500/10', // PLANNED
+        'yellow-500': 'bg-gradient-to-br from-yellow-500/30 via-yellow-500/20 to-yellow-500/10', // IN_PROGRESS
+        'blue-500': 'bg-gradient-to-br from-blue-500/30 via-blue-500/20 to-blue-500/10',     // IN_REVIEW
+        'red-500': 'bg-gradient-to-br from-red-500/30 via-red-500/20 to-red-500/10',         // BLOCKED
+        'orange-500': 'bg-gradient-to-br from-orange-500/30 via-orange-500/20 to-orange-500/10', // ON_HOLD
+        'green-500': 'bg-gradient-to-br from-green-500/30 via-green-500/20 to-green-500/10', // COMPLETED
+        'pink-500': 'bg-gradient-to-br from-pink-500/30 via-pink-500/20 to-pink-500/10'      // CANCELLED
+      };
+      
+      const gradientClass = gradientMap[tailwindColor] || 'bg-gradient-to-br from-gray-500/30 via-gray-500/20 to-gray-500/10';
+      const borderClass = borderColorMap[tailwindColor] || 'border-l-gray-400/40';
+      const hoverClass = hoverColorMap[tailwindColor] || 'hover:from-gray-500/25 hover:via-gray-500/15 hover:to-gray-500/20';
+      return `${gradientClass} backdrop-blur-sm border-l-4 ${borderClass} ${hoverClass}`;
+    }
+    
+    default:
+      return `bg-gradient-to-br from-${tailwindColor}/10 via-gray-800 to-${tailwindColor}/5`;
+  }
+};
+
+// ============================
+// SIDEBAR SECTION COLORS
+// ============================
+
+// Unique colors for RightSidebar main sections (completely unused elsewhere in project)
+export const SIDEBAR_SECTION_COLORS = {
+  projectOverview: '#8E24AA',   // Material Deep Purple 500 - unique
+  taskStatus: '#00ACC1',        // Material Cyan 600 - unique  
+  priorityDistribution: '#FFA726', // Material Orange 400 - unique
+  nodeTypes: '#D32F2F'          // Material Red 700 - unique
+} as const;
+
+// Get sidebar section border color
+export const getSidebarSectionColor = (section: keyof typeof SIDEBAR_SECTION_COLORS): string => {
+  return SIDEBAR_SECTION_COLORS[section];
+};
+
 // ============================
 // EXPORT DEFAULT COLLECTIONS
 // ============================
diff --git a/packages/web/src/contexts/AuthContext.tsx b/packages/web/src/contexts/AuthContext.tsx
index 4d1f2787..1dd4fe9d 100644
--- a/packages/web/src/contexts/AuthContext.tsx
+++ b/packages/web/src/contexts/AuthContext.tsx
@@ -34,11 +34,14 @@ export function AuthProvider({ children }: AuthProviderProps) {
   const [currentTeam, setCurrentTeam] = useState<Team | null>(null);
   const [isInitializing, setIsInitializing] = useState(true);
   
-  const [getMe] = useLazyQuery(ME_QUERY, {
-    onCompleted: (data) => {
-      if (data.me) {
-        setCurrentUser(data.me);
-        setCurrentTeam(data.me.team);
+  const [getMe, { data: meData, error: meError }] = useLazyQuery(ME_QUERY);
+  
+  // Handle ME query results with useEffect
+  useEffect(() => {
+    if (meData) {
+      if (meData.me) {
+        setCurrentUser(meData.me);
+        setCurrentTeam(meData.me.team);
       } else {
         // ME query returned null, clear stale data
         localStorage.removeItem('authToken');
@@ -47,8 +50,11 @@ export function AuthProvider({ children }: AuthProviderProps) {
         setCurrentTeam(null);
       }
       setIsInitializing(false);
-    },
-    onError: (error) => {
+    }
+  }, [meData]);
+  
+  useEffect(() => {
+    if (meError) {
       // Token is invalid, clear it
       localStorage.removeItem('authToken');
       localStorage.removeItem('currentUser');
@@ -56,7 +62,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
       setCurrentTeam(null);
       setIsInitializing(false);
     }
-  });
+  }, [meError]);
 
   // Load saved user from localStorage and validate token on mount
   useEffect(() => {
diff --git a/packages/web/src/contexts/GraphContext.tsx b/packages/web/src/contexts/GraphContext.tsx
index dcf8dc55..6bd54b4a 100644
--- a/packages/web/src/contexts/GraphContext.tsx
+++ b/packages/web/src/contexts/GraphContext.tsx
@@ -27,9 +27,10 @@ export function GraphProvider({ children }: GraphProviderProps) {
 
 
   // GraphQL operations - Now loads all graphs without team filter
-  const { data: graphsData, loading: isLoading, error: graphsError } = useQuery(GET_GRAPHS, {
+  const { data: graphsData, loading: isLoading, error: graphsError, refetch: refetchGraphs } = useQuery(GET_GRAPHS, {
     skip: false, // Always query graphs
   });
+  
 
   const [createGraphMutation] = useMutation(CREATE_GRAPH);
   const [updateGraphMutation] = useMutation(UPDATE_GRAPH);
@@ -104,22 +105,24 @@ export function GraphProvider({ children }: GraphProviderProps) {
       let graphToSelect = null;
       
       if (storedGraphId) {
-        graphToSelect = parsedGraphs.find((g: Graph) => g.id === storedGraphId);
+        graphToSelect = parsedGraphs.find((g: any) => g.id === storedGraphId);
       }
       
-      // Auto-select first graph if none selected or stored graph not found
-      if (!currentGraph && parsedGraphs.length > 0) {
-        const selectedGraph = graphToSelect || parsedGraphs[0];
-        setCurrentGraph(selectedGraph);
-        // Save to localStorage for persistence
-        localStorage.setItem('currentGraphId', selectedGraph.id);
+      // Auto-select graph: either previously selected or first available
+      if (parsedGraphs.length > 0) {
+        if (!currentGraph || !parsedGraphs.find((g: any) => g.id === currentGraph.id)) {
+          const selectedGraph = graphToSelect || parsedGraphs[0];
+          setCurrentGraph(selectedGraph);
+          // Save to localStorage for persistence
+          localStorage.setItem('currentGraphId', selectedGraph.id);
+        }
       }
-    } else if (!isLoading) {
-      // No graphs available - clear state
+    } else if (!isLoading && !graphsError) {
+      // No graphs available - clear state only if no error
       setAvailableGraphs([]);
       setCurrentGraph(null);
     }
-  }, [graphsData, currentTeam, currentUser, isLoading]);
+  }, [graphsData, currentTeam, currentUser, isLoading, graphsError]);
 
   // Build graph hierarchy
   const graphHierarchy: GraphHierarchy[] = availableGraphs
@@ -182,7 +185,9 @@ export function GraphProvider({ children }: GraphProviderProps) {
       };
 
       const { data } = await createGraphMutation({
-        variables: { input: graphInput }
+        variables: { input: graphInput },
+        refetchQueries: [{ query: GET_GRAPHS }],
+        awaitRefetchQueries: true
       });
 
       if (data?.createGraphs?.graphs?.[0]) {
@@ -193,8 +198,10 @@ export function GraphProvider({ children }: GraphProviderProps) {
           shareSettings: JSON.parse(data.createGraphs.graphs[0].shareSettings || '{}')
         };
         
-        setAvailableGraphs(prev => [...prev, newGraph]);
+        // Manually refetch to ensure UI is in sync
+        await refetchGraphs();
         setCurrentGraph(newGraph);
+        localStorage.setItem('currentGraphId', newGraph.id);
         return newGraph;
       }
       
@@ -216,6 +223,9 @@ export function GraphProvider({ children }: GraphProviderProps) {
       const graphUpdateInput = {
         ...(updates.name && { name: updates.name }),
         ...(updates.description !== undefined && { description: updates.description }),
+        ...(updates.tags !== undefined && { tags: updates.tags }),
+        ...(updates.defaultRole && { defaultRole: updates.defaultRole }),
+        ...(updates.isShared !== undefined && { isShared: updates.isShared }),
         ...(updates.status && { status: updates.status }),
         ...(updates.settings && { settings: JSON.stringify(updates.settings) }),
         ...(updates.permissions && { permissions: JSON.stringify(updates.permissions) }),
@@ -290,15 +300,43 @@ export function GraphProvider({ children }: GraphProviderProps) {
     const originalGraph = availableGraphs.find(g => g.id === graphId);
     if (!originalGraph) throw new Error('Graph not found');
 
-    return createGraph({
-      name,
-      description: `Copy of ${originalGraph.name}`,
-      type: originalGraph.type,
-      parentGraphId: originalGraph.parentGraphId,
-      teamId: originalGraph.teamId,
-      createdBy: currentUser?.id || '',
-      copyFromGraphId: graphId
-    });
+    try {
+      // Step 1: Create the new graph structure
+      const newGraph = await createGraph({
+        name,
+        description: `Copy of ${originalGraph.name}`,
+        type: originalGraph.type,
+        parentGraphId: originalGraph.parentGraphId,
+        teamId: originalGraph.teamId,
+        createdBy: currentUser?.id || '',
+        copyFromGraphId: graphId
+      });
+
+      // Step 2: Copy all nodes from the original graph
+      const { data: originalNodesData } = await apolloClient.query({
+        query: GET_WORK_ITEMS,
+        variables: {
+          where: {
+            graph: {
+              id: graphId
+            }
+          }
+        }
+      });
+
+      const originalNodes = originalNodesData?.workItems || [];
+      
+      // TODO: Implement node copying in the GraphQL schema
+      // This requires CREATE_WORK_ITEM mutation and copying all node properties
+      
+      // Step 3: Copy all edges from the original graph  
+      // TODO: Implement edge copying after nodes are copied
+      
+      return newGraph;
+    } catch (error) {
+      console.error('Error duplicating graph:', error);
+      throw error;
+    }
   };
 
   const moveGraph = async (graphId: string, newParentId?: string): Promise<void> => {
diff --git a/packages/web/src/graphql/graph.ts b/packages/web/src/graphql/graph.ts
index 4f5c396c..edec3682 100644
--- a/packages/web/src/graphql/graph.ts
+++ b/packages/web/src/graphql/graph.ts
@@ -12,6 +12,8 @@ export const GET_GRAPHS = gql`
       parentGraphId
       teamId
       createdBy
+      tags
+      defaultRole
       depth
       path
       isShared
@@ -39,6 +41,8 @@ export const GET_GRAPHS_BY_TEAM = gql`
       parentGraphId
       teamId
       createdBy
+      tags
+      defaultRole
       depth
       path
       isShared
@@ -66,6 +70,8 @@ export const GET_GRAPH = gql`
       parentGraphId
       teamId
       createdBy
+      tags
+      defaultRole
       depth
       path
       isShared
@@ -86,7 +92,7 @@ export const GET_GRAPH = gql`
         positionX
         positionY
         positionZ
-        priorityComp
+        priority
       }
       subgraphs {
         id
@@ -115,6 +121,8 @@ export const CREATE_GRAPH = gql`
         parentGraphId
         teamId
         createdBy
+        tags
+        defaultRole
         depth
         path
         isShared
@@ -144,6 +152,8 @@ export const UPDATE_GRAPH = gql`
         parentGraphId
         teamId
         createdBy
+        tags
+        defaultRole
         depth
         path
         isShared
diff --git a/packages/web/src/hooks/useDialogManager.ts b/packages/web/src/hooks/useDialogManager.ts
new file mode 100644
index 00000000..16fd1cf5
--- /dev/null
+++ b/packages/web/src/hooks/useDialogManager.ts
@@ -0,0 +1,81 @@
+import { useCallback, useRef, useEffect } from 'react';
+
+/**
+ * Dialog Manager Hook
+ * 
+ * Manages the lifecycle of "dialogs" - any pop-up or temporary UI overlay designed for 
+ * selection options or viewing parameters upon click. This includes panels, menus, 
+ * dropdowns, overlays, and any other temporary UI elements.
+ * 
+ * Philosophy: Dialogs should close when users click outside them (on empty graph space)
+ * to make the UI more efficient. Users shouldn't have to hunt for X buttons.
+ */
+
+type DialogCloseCallback = () => void;
+
+class DialogManager {
+  private callbacks = new Set<DialogCloseCallback>();
+
+  register(callback: DialogCloseCallback): () => void {
+    this.callbacks.add(callback);
+    return () => {
+      this.callbacks.delete(callback);
+    };
+  }
+
+  closeAll(): void {
+    this.callbacks.forEach(callback => callback());
+  }
+
+  hasOpenDialogs(): boolean {
+    return this.callbacks.size > 0;
+  }
+}
+
+const globalDialogManager = new DialogManager();
+
+export const useDialogManager = () => {
+  return {
+    closeAllDialogs: () => globalDialogManager.closeAll(),
+    hasOpenDialogs: () => globalDialogManager.hasOpenDialogs(),
+    registerDialog: (closeCallback: DialogCloseCallback) => globalDialogManager.register(closeCallback)
+  };
+};
+
+export const useDialog = (isOpen: boolean, onClose: () => void) => {
+  const unsubscribeRef = useRef<(() => void) | null>(null);
+  const onCloseRef = useRef(onClose);
+  
+  // Keep onClose ref updated
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (isOpen && !unsubscribeRef.current) {
+      unsubscribeRef.current = globalDialogManager.register(() => onCloseRef.current());
+    } else if (!isOpen && unsubscribeRef.current) {
+      unsubscribeRef.current();
+      unsubscribeRef.current = null;
+    }
+
+    return () => {
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+    };
+  }, [isOpen]);
+
+  return { 
+    register: () => {
+      if (isOpen && !unsubscribeRef.current) {
+        unsubscribeRef.current = globalDialogManager.register(() => onCloseRef.current());
+      }
+    },
+    unregister: () => {
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+    }
+  };
+};
\ No newline at end of file
diff --git a/packages/web/src/hooks/useHealthCheck.ts b/packages/web/src/hooks/useHealthCheck.ts
index ef97609d..fdf5e74b 100644
--- a/packages/web/src/hooks/useHealthCheck.ts
+++ b/packages/web/src/hooks/useHealthCheck.ts
@@ -51,25 +51,36 @@ export function useHealthCheck(options: UseHealthCheckOptions = {}) {
   const [error, setError] = useState<string | null>(null);
   const [lastChecked, setLastChecked] = useState<Date | null>(null);
 
-  const API_BASE_URL = import.meta.env.VITE_API_URL || ''; // Use relative URLs to leverage Vite proxy
+  const API_BASE_URL = ''; // Always use relative URLs to leverage Vite proxy in all environments
 
   const checkHealth = useCallback(async () => {
-    const timeoutId = setTimeout(() => {
-      setLoading(false);
-      setError('Health check timed out');
-    }, 10000); // 10 second timeout
+    // Create AbortController for proper timeout handling
+    const controller = new AbortController();
+    let timeoutId: number | null = null;
     
     try {
       setLoading(true);
       setError(null);
 
+      timeoutId = setTimeout(() => {
+        controller.abort();
+        setError('Health check timed out after 10 seconds');
+        setLoading(false);
+      }, 10000) as unknown as number;
+
       // Fetch general health status
       const healthResponse = await fetch(`${API_BASE_URL}/health`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
         },
+        signal: controller.signal
       });
+      
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
 
       if (!healthResponse.ok) {
         throw new Error(`Health check failed: ${healthResponse.statusText}`);
@@ -102,7 +113,6 @@ export function useHealthCheck(options: UseHealthCheckOptions = {}) {
       setLastChecked(new Date());
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Health check failed';
-      console.error('Health check error:', err);
       setError(errorMessage);
       
       // Set fallback status when there's an error
@@ -117,7 +127,9 @@ export function useHealthCheck(options: UseHealthCheckOptions = {}) {
       });
       setMcpStatus({ connected: false, error: errorMessage });
     } finally {
-      clearTimeout(timeoutId);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
       setLoading(false);
     }
   }, [API_BASE_URL]);
diff --git a/packages/web/src/hooks/useHealthStatus.ts b/packages/web/src/hooks/useHealthStatus.ts
new file mode 100644
index 00000000..3c038238
--- /dev/null
+++ b/packages/web/src/hooks/useHealthStatus.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+
+interface HealthStatus {
+  status: string;
+  timestamp: string;
+  services: {
+    graphql: { status: string; port: number };
+    neo4j: { status: string; uri: string; error?: string };
+    mcp: { status: string; port: number; error?: string };
+  };
+}
+
+export function useHealthStatus() {
+  const [health, setHealth] = useState<HealthStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const checkHealth = async () => {
+    try {
+      const response = await fetch('/health'); // Use relative URL to leverage Vite proxy
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      setHealth(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Health check failed');
+      setHealth(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    checkHealth();
+    // Check health every 30 seconds
+    const interval = setInterval(checkHealth, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return { health, loading, error, refetch: checkHealth };
+}
\ No newline at end of file
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 8e026bf8..a8da78d3 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -2,6 +2,46 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Lagoon Animation Parameters - Easy to edit and randomize */
+:root {
+  /* Layer 1 Parameters */
+  --lagoon-1-duration: 45s;
+  --lagoon-1-x-amplitude: 20%;
+  --lagoon-1-y-amplitude: 15%;
+  --lagoon-1-scale-base: 0.9;
+  --lagoon-1-scale-amplitude: 0.3;
+  --lagoon-1-opacity-min: 0.12;
+  --lagoon-1-opacity-max: 0.28;
+  
+  /* Layer 2 Parameters */
+  --lagoon-2-duration: 38s;
+  --lagoon-2-x-amplitude: 25%;
+  --lagoon-2-y-amplitude: 18%;
+  --lagoon-2-scale-base: 1.0;
+  --lagoon-2-scale-amplitude: 0.4;
+  --lagoon-2-opacity-min: 0.11;
+  --lagoon-2-opacity-max: 0.32;
+  
+  /* Layer 3 Parameters */
+  --lagoon-3-duration: 52s;
+  --lagoon-3-x-amplitude: 30%;
+  --lagoon-3-y-amplitude: 20%;
+  --lagoon-3-scale-base: 1.1;
+  --lagoon-3-scale-amplitude: 0.5;
+  --lagoon-3-opacity-min: 0.08;
+  --lagoon-3-opacity-max: 0.35;
+  
+  /* Shimmer Parameters */
+  --lagoon-shimmer-duration: 28s;
+  --lagoon-shimmer-opacity-min: 0.06;
+  --lagoon-shimmer-opacity-max: 0.24;
+  
+  /* Color Parameters */
+  --lagoon-color-1-opacity: 0.16;
+  --lagoon-color-2-opacity: 0.14;
+  --lagoon-color-3-opacity: 0.12;
+}
+
 /* Professional dropdown animation */
 @keyframes fadeInScale {
   from {
@@ -14,6 +54,239 @@
   }
 }
 
+/* Modern slide in scale animation for edge details */
+@keyframes slideInScale {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Tropical lagoon light scattering animation - sinusoidal wave motion for organic flow */
+@keyframes lagoonCaustics1 {
+  0% {
+    transform: translateX(-20%) translateY(-5%) scale(0.8) rotate(0deg);
+    opacity: 0.12;
+  }
+  12.5% {
+    transform: translateX(-14%) translateY(-12%) scale(0.92) rotate(45deg);
+    opacity: 0.18;
+  }
+  25% {
+    transform: translateX(15%) translateY(-10%) scale(1.1) rotate(90deg);
+    opacity: 0.22;
+  }
+  37.5% {
+    transform: translateX(23%) translateY(2%) scale(1.18) rotate(135deg);
+    opacity: 0.25;
+  }
+  50% {
+    transform: translateX(-5%) translateY(0%) scale(0.9) rotate(180deg);
+    opacity: 0.15;
+  }
+  62.5% {
+    transform: translateX(-13%) translateY(-8%) scale(0.82) rotate(225deg);
+    opacity: 0.20;
+  }
+  75% {
+    transform: translateX(25%) translateY(-5%) scale(1.2) rotate(270deg);
+    opacity: 0.28;
+  }
+  87.5% {
+    transform: translateX(18%) translateY(-15%) scale(1.05) rotate(315deg);
+    opacity: 0.16;
+  }
+  100% {
+    transform: translateX(-20%) translateY(-5%) scale(0.8) rotate(360deg);
+    opacity: 0.12;
+  }
+}
+
+@keyframes lagoonCaustics2 {
+  0% {
+    transform: translateX(30%) translateY(20%) scale(1.1) rotate(45deg);
+    opacity: 0.15;
+  }
+  16.7% {
+    transform: translateX(8%) translateY(18%) scale(0.85) rotate(105deg);
+    opacity: 0.28;
+  }
+  33% {
+    transform: translateX(-10%) translateY(5%) scale(0.7) rotate(165deg);
+    opacity: 0.32;
+  }
+  50% {
+    transform: translateX(-2%) translateY(-8%) scale(0.95) rotate(225deg);
+    opacity: 0.20;
+  }
+  66% {
+    transform: translateX(20%) translateY(-15%) scale(1.3) rotate(285deg);
+    opacity: 0.11;
+  }
+  83.3% {
+    transform: translateX(35%) translateY(8%) scale(1.18) rotate(345deg);
+    opacity: 0.18;
+  }
+  100% {
+    transform: translateX(30%) translateY(20%) scale(1.1) rotate(405deg);
+    opacity: 0.15;
+  }
+}
+
+@keyframes lagoonCaustics3 {
+  0% {
+    transform: translateX(-15%) translateY(20%) scale(0.9) rotate(180deg);
+    opacity: 0.18;
+  }
+  40% {
+    transform: translateX(35%) translateY(-10%) scale(1.4) rotate(270deg);
+    opacity: 0.08;
+  }
+  80% {
+    transform: translateX(-25%) translateY(5%) scale(0.6) rotate(360deg);
+    opacity: 0.35;
+  }
+  100% {
+    transform: translateX(-15%) translateY(20%) scale(0.9) rotate(540deg);
+    opacity: 0.18;
+  }
+}
+
+@keyframes lagoonShimmer {
+  0% {
+    background-position: 0% 0%;
+    opacity: 0.06;
+  }
+  25% {
+    background-position: 100% 50%;
+    opacity: 0.18;
+  }
+  50% {
+    background-position: 0% 100%;
+    opacity: 0.10;
+  }
+  75% {
+    background-position: 50% 0%;
+    opacity: 0.24;
+  }
+  100% {
+    background-position: 0% 0%;
+    opacity: 0.06;
+  }
+}
+
+/* Lagoon caustics utility classes */
+.lagoon-caustics {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.caustic-layer {
+  position: absolute;
+  width: 150%;
+  height: 150%;
+  top: -25%;
+  left: -25%;
+  background: radial-gradient(
+    ellipse at 25% 35%,
+    rgba(59, 130, 246, 0.03) 0%,
+    rgba(59, 130, 246, 0.02) 20%,
+    transparent 45%
+  ),
+  radial-gradient(
+    ellipse at 75% 25%,
+    rgba(16, 185, 129, 0.04) 0%,
+    rgba(16, 185, 129, 0.02) 18%,
+    transparent 40%
+  ),
+  radial-gradient(
+    ellipse at 40% 70%,
+    rgba(139, 92, 246, 0.02) 0%,
+    rgba(139, 92, 246, 0.01) 25%,
+    transparent 50%
+  ),
+  radial-gradient(
+    ellipse at 60% 50%,
+    rgba(34, 197, 94, 0.025) 0%,
+    rgba(34, 197, 94, 0.01) 22%,
+    transparent 48%
+  ),
+  radial-gradient(
+    ellipse at 85% 80%,
+    rgba(14, 165, 233, 0.03) 0%,
+    rgba(14, 165, 233, 0.015) 16%,
+    transparent 38%
+  );
+  background-size: 25% 35%, 30% 28%, 22% 40%, 28% 32%, 26% 30%;
+  mix-blend-mode: screen;
+  filter: blur(0.5px);
+  pointer-events: none;
+}
+
+/* Caustic layers with immediate animation start and varied initial positions */
+.caustic-layer-1 { animation: lagoonCaustics1 45s ease-in-out infinite; transform: translateX(-10%) translateY(5%) scale(0.95) rotate(45deg); }
+.caustic-layer-2 { animation: lagoonCaustics2 38s ease-in-out infinite reverse; transform: translateX(15%) translateY(-8%) scale(1.05) rotate(120deg); }
+.caustic-layer-3 { animation: lagoonCaustics3 52s ease-in-out infinite; transform: translateX(-5%) translateY(12%) scale(0.8) rotate(270deg); }
+
+/* Additional caustic layers with immediate start, varied positions and reduced opacity for clean effect */
+.caustic-layer-4 { animation: lagoonCaustics1 62s ease-in-out infinite -15s; opacity: 0.4; transform: translateX(20%) translateY(-15%) scale(1.1) rotate(180deg); }
+.caustic-layer-5 { animation: lagoonCaustics2 33s ease-in-out infinite reverse -8s; opacity: 0.5; transform: translateX(-25%) translateY(10%) scale(0.7) rotate(60deg); }
+.caustic-layer-6 { animation: lagoonCaustics3 71s ease-in-out infinite -22s; opacity: 0.3; transform: translateX(12%) translateY(20%) scale(0.9) rotate(300deg); }
+.caustic-layer-7 { animation: lagoonCaustics1 29s ease-in-out infinite reverse -5s; opacity: 0.6; transform: translateX(-18%) translateY(-5%) scale(1.2) rotate(90deg); }
+.caustic-layer-8 { animation: lagoonCaustics2 58s ease-in-out infinite -30s; opacity: 0.4; transform: translateX(8%) translateY(15%) scale(0.85) rotate(210deg); }
+.caustic-layer-9 { animation: lagoonCaustics3 41s ease-in-out infinite reverse -12s; opacity: 0.5; transform: translateX(-22%) translateY(-10%) scale(1.0) rotate(150deg); }
+.caustic-layer-10 { animation: lagoonCaustics1 76s ease-in-out infinite -18s; opacity: 0.3; transform: translateX(25%) translateY(8%) scale(0.75) rotate(330deg); }
+.caustic-layer-11 { animation: lagoonCaustics2 35s ease-in-out infinite reverse -25s; opacity: 0.6; transform: translateX(-8%) translateY(-18%) scale(1.15) rotate(45deg); }
+.caustic-layer-12 { animation: lagoonCaustics3 49s ease-in-out infinite -7s; opacity: 0.4; transform: translateX(18%) translateY(-12%) scale(0.9) rotate(240deg); }
+.caustic-layer-13 { animation: lagoonCaustics1 67s ease-in-out infinite reverse -35s; opacity: 0.5; transform: translateX(-15%) translateY(25%) scale(0.8) rotate(135deg); }
+.caustic-layer-14 { animation: lagoonCaustics2 31s ease-in-out infinite -14s; opacity: 0.3; transform: translateX(22%) translateY(-8%) scale(1.1) rotate(15deg); }
+.caustic-layer-15 { animation: lagoonCaustics3 84s ease-in-out infinite reverse -40s; opacity: 0.6; transform: translateX(-12%) translateY(18%) scale(0.65) rotate(285deg); }
+.caustic-layer-16 { animation: lagoonCaustics1 43s ease-in-out infinite -28s; opacity: 0.4; transform: translateX(28%) translateY(5%) scale(1.0) rotate(195deg); }
+.caustic-layer-17 { animation: lagoonCaustics2 69s ease-in-out infinite reverse -33s; opacity: 0.5; transform: translateX(-20%) translateY(-22%) scale(0.9) rotate(75deg); }
+.caustic-layer-18 { animation: lagoonCaustics3 37s ease-in-out infinite -10s; opacity: 0.3; transform: translateX(5%) translateY(22%) scale(1.25) rotate(345deg); }
+.caustic-layer-19 { animation: lagoonCaustics1 54s ease-in-out infinite reverse -45s; opacity: 0.6; transform: translateX(-28%) translateY(-2%) scale(0.7) rotate(165deg); }
+.caustic-layer-20 { animation: lagoonCaustics2 78s ease-in-out infinite -20s; opacity: 0.4; transform: translateX(15%) translateY(-25%) scale(1.05) rotate(255deg); }
+
+.lagoon-shimmer {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    75deg,
+    transparent 35%,
+    rgba(59, 130, 246, 0.02) 38%,
+    rgba(16, 185, 129, 0.025) 41%,
+    rgba(59, 130, 246, 0.015) 44%,
+    transparent 47%,
+    transparent 53%,
+    rgba(139, 92, 246, 0.015) 56%,
+    rgba(16, 185, 129, 0.02) 59%,
+    transparent 62%
+  );
+  background-size: 400% 400%;
+  animation: lagoonShimmer 28s linear infinite;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  filter: blur(0.8px);
+}
+
+/* Additional shimmer variations with immediate start at different animation phases */
+.lagoon-shimmer-2 { animation: lagoonShimmer 34s linear infinite -12s; transform: rotate(15deg); opacity: 0.8; }
+.lagoon-shimmer-3 { animation: lagoonShimmer 42s linear infinite -18s; transform: rotate(-22deg); opacity: 0.6; }
+.lagoon-shimmer-4 { animation: lagoonShimmer 31s linear infinite -8s; transform: rotate(8deg); opacity: 0.7; }
+.lagoon-shimmer-5 { animation: lagoonShimmer 39s linear infinite -25s; transform: rotate(-12deg); opacity: 0.5; }
+.lagoon-shimmer-6 { animation: lagoonShimmer 45s linear infinite -15s; transform: rotate(25deg); opacity: 0.9; }
+.lagoon-shimmer-7 { animation: lagoonShimmer 33s linear infinite -20s; transform: rotate(-18deg); opacity: 0.4; }
+.lagoon-shimmer-8 { animation: lagoonShimmer 38s linear infinite -10s; transform: rotate(11deg); opacity: 0.8; }
+.lagoon-shimmer-9 { animation: lagoonShimmer 41s linear infinite -30s; transform: rotate(-28deg); opacity: 0.6; }
+.lagoon-shimmer-10 { animation: lagoonShimmer 36s linear infinite -5s; transform: rotate(19deg); opacity: 0.5; }
+
 @layer base {
   html {
     font-family: 'Inter', system-ui, sans-serif;
@@ -148,20 +421,67 @@ svg .dialog-active-pulse,
   animation: pulse-green 1.0s ease-in-out infinite !important;
 }
 
-/* Type-specific node hover effects - light highlight border only */
-.node-type-epic:hover rect,
-.node-type-milestone:hover rect,
-.node-type-outcome:hover rect,
-.node-type-feature:hover rect,
-.node-type-task:hover rect,
-.node-type-bug:hover rect,
-.node-type-idea:hover rect,
-.node-type-research:hover rect,
-.node-type-default:hover rect {
-  stroke: #ffffff !important;
-  stroke-width: 2 !important;
-  stroke-opacity: 0.7 !important;
-  transform: scale(1.02);
+/* Type-specific node hover effects with matching type colors */
+.node-type-epic:hover .node-bg {
+  stroke: #c084fc !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-milestone:hover .node-bg {
+  stroke: #fb923c !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-outcome:hover .node-bg {
+  stroke: #818cf8 !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-feature:hover .node-bg {
+  stroke: #38bdf8 !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-task:hover .node-bg {
+  stroke: #4ade80 !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-bug:hover .node-bg {
+  stroke: #f87171 !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-idea:hover .node-bg {
+  stroke: #fde047 !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-research:hover .node-bg {
+  stroke: #2dd4bf !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
+  transition: all 0.2s ease-in-out;
+}
+
+.node-type-default:hover .node-bg {
+  stroke: #9ca3af !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 0.8 !important;
   transition: all 0.2s ease-in-out;
 }
 
@@ -324,4 +644,11 @@ input[type="date"]:focus {
 
 .animate-slide-in-right {
   animation: slide-in-right 0.3s ease-out;
+}
+
+/* Allow text selection in interactive elements even when parent has select-none */
+@layer utilities {
+  input, textarea, [contenteditable], .select-text {
+    user-select: text !important;
+  }
 }
\ No newline at end of file
diff --git a/packages/web/src/lib/connectionUtils.ts b/packages/web/src/lib/connectionUtils.ts
index adaf3e25..1f305e8d 100644
--- a/packages/web/src/lib/connectionUtils.ts
+++ b/packages/web/src/lib/connectionUtils.ts
@@ -45,7 +45,7 @@ export interface WorkItem {
   type: string;
   status: string;
   description?: string;
-  priorityComp?: number;
+  priority?: number;
   dependencies?: Array<{ id: string; title: string; }>;
   dependents?: Array<{ id: string; title: string; }>;
 }
diff --git a/packages/web/src/lib/queries.ts b/packages/web/src/lib/queries.ts
index 0d4f9cbc..a045fcbc 100644
--- a/packages/web/src/lib/queries.ts
+++ b/packages/web/src/lib/queries.ts
@@ -14,10 +14,7 @@ export const GET_WORK_ITEMS = gql`
       radius
       theta
       phi
-      priorityExec
-      priorityIndiv
-      priorityComm
-      priorityComp
+      priority
       dueDate
       tags
       metadata
@@ -48,11 +45,13 @@ export const GET_WORK_ITEMS = gql`
         id
         title
         type
+        status
       }
       dependents {
         id
         title
         type
+        status
       }
       createdAt
       updatedAt
@@ -100,10 +99,7 @@ export const GET_WORK_ITEM_BY_ID = gql`
       radius
       theta
       phi
-      priorityExec
-      priorityIndiv
-      priorityComm
-      priorityComp
+      priority
       dueDate
       tags
       metadata
@@ -134,11 +130,13 @@ export const GET_WORK_ITEM_BY_ID = gql`
         id
         title
         type
+        status
       }
       dependents {
         id
         title
         type
+        status
       }
       createdAt
       updatedAt
@@ -161,10 +159,7 @@ export const CREATE_WORK_ITEM = gql`
         radius
         theta
         phi
-        priorityExec
-        priorityIndiv
-        priorityComm
-        priorityComp
+        priority
         dueDate
         tags
         metadata
@@ -203,10 +198,7 @@ export const UPDATE_WORK_ITEM = gql`
         radius
         theta
         phi
-        priorityExec
-        priorityIndiv
-        priorityComm
-        priorityComp
+        priority
         dueDate
         tags
         metadata
@@ -276,10 +268,7 @@ export const SUBSCRIBE_TO_WORK_ITEM_CHANGES = gql`
       radius
       theta
       phi
-      priorityExec
-      priorityIndiv
-      priorityComm
-      priorityComp
+      priority
       dueDate
       assignedTo
       tags
@@ -308,19 +297,17 @@ export const GET_ALL_USERS = gql`
 
 // User Management Mutations
 export const UPDATE_USER_ROLE = gql`
-  mutation UpdateUserRole($userId: ID!, $role: String!) {
-    updateUsers(where: { id: $userId }, update: { role: $role }) {
-      users {
-        id
-        role
-        updatedAt
-      }
+  mutation UpdateUserRole($userId: String!, $role: UserRole!) {
+    updateUserRole(userId: $userId, role: $role) {
+      id
+      role
+      updatedAt
     }
   }
 `;
 
 export const RESET_USER_PASSWORD = gql`
-  mutation ResetUserPassword($userId: ID!) {
+  mutation ResetUserPassword($userId: String!) {
     resetUserPassword(userId: $userId) {
       success
       tempPassword
@@ -330,7 +317,7 @@ export const RESET_USER_PASSWORD = gql`
 `;
 
 export const DELETE_USER = gql`
-  mutation DeleteUser($userId: ID!) {
+  mutation DeleteUser($userId: String!) {
     deleteUser(userId: $userId) {
       success
       message
diff --git a/packages/web/src/pages/Admin.tsx b/packages/web/src/pages/Admin.tsx
index 36ace586..91b4778b 100644
--- a/packages/web/src/pages/Admin.tsx
+++ b/packages/web/src/pages/Admin.tsx
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { Users, Database, Shield, Download, Upload, Settings2 } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Users, Database, Shield, Download, Upload, Settings2, RefreshCw, AlertCircle } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { AdminUserManagement } from '../components/AdminUserManagement';
 import { CustomDropdown } from '../components/CustomDropdown';
+import { APP_VERSION } from '../utils/version';
 
 export function Admin() {
   const { currentUser } = useAuth();
@@ -49,13 +50,18 @@ export function Admin() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-100 flex items-center">
-              <Shield className="h-6 w-6 mr-3 text-yellow-400" />
-              System Administration
-            </h1>
+            <div className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-gray-100 flex items-center">
+                <Shield className="h-6 w-6 mr-3 text-yellow-400" />
+                System Administration
+              </h1>
+              <span className="text-xs bg-gray-800/50 text-gray-400 px-2 py-1 rounded">
+                v{APP_VERSION}
+              </span>
+            </div>
             <p className="text-sm text-gray-400 mt-1">
               Manage users, security, and system settings
             </p>
@@ -255,20 +261,428 @@ function UserManagementSettings() {
   );
 }
 
-// Placeholder components for other tabs
+// Database Management Component with full admin tools
 function DatabaseManagement() {
+  const [debugInfo, setDebugInfo] = useState<string[]>([]);
+
+  // Database utility functions
+  const updateDatabaseStats = async (debug: string[]) => {
+    try {
+      debug.push('📊 Fetching graph count...');
+      const graphResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { graphs { id } }' })
+      });
+      const graphData = await graphResponse.json();
+      const graphCount = graphData.data?.graphs?.length || 0;
+      document.getElementById('graph-count')!.textContent = graphCount.toString();
+      debug.push(`✅ Found ${graphCount} graphs`);
+
+      debug.push('📊 Fetching node count...');
+      const nodeResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { workItems { id } }' })
+      });
+      const nodeData = await nodeResponse.json();
+      const nodeCount = nodeData.data?.workItems?.length || 0;
+      document.getElementById('node-count')!.textContent = nodeCount.toString();
+      debug.push(`✅ Found ${nodeCount} nodes`);
+
+      debug.push('📊 Fetching edge count...');
+      const edgeResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { edges { id } }' })
+      });
+      const edgeData = await edgeResponse.json();
+      const edgeCount = edgeData.data?.edges?.length || 0;
+      document.getElementById('edge-count')!.textContent = edgeCount.toString();
+      debug.push(`✅ Found ${edgeCount} edges`);
+
+    } catch (error) {
+      debug.push(`❌ Failed to update stats: ${error}`);
+      document.getElementById('graph-count')!.textContent = 'Error';
+      document.getElementById('node-count')!.textContent = 'Error';
+      document.getElementById('edge-count')!.textContent = 'Error';
+    }
+  };
+
+  const checkDataIntegrity = async (debug: string[]) => {
+    let issueCount = 0;
+    debug.push('🔍 Checking for data integrity issues...');
+
+    try {
+      // Check for graphs with invalid types
+      const graphResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { graphs { id name } }' })
+      });
+      
+      const graphResult = await graphResponse.json();
+      if (graphResult.errors) {
+        issueCount += graphResult.errors.length;
+        debug.push(`❌ Found ${graphResult.errors.length} GraphQL schema errors`);
+        graphResult.errors.forEach((err: any, i: number) => {
+          debug.push(`  ${i + 1}. ${err.message}`);
+        });
+      }
+
+      // Check for extremely long names (likely test data)
+      if (graphResult.data?.graphs) {
+        const longNameGraphs = graphResult.data.graphs.filter((g: any) => g.name && g.name.length > 100);
+        if (longNameGraphs.length > 0) {
+          issueCount += longNameGraphs.length;
+          debug.push(`⚠️ Found ${longNameGraphs.length} graphs with extremely long names (likely test data)`);
+        }
+
+        // Check for single-character names (likely test data)
+        const shortNameGraphs = graphResult.data.graphs.filter((g: any) => g.name && g.name.length <= 2);
+        if (shortNameGraphs.length > 0) {
+          debug.push(`ℹ️ Found ${shortNameGraphs.length} graphs with very short names (a, x, etc.)`);
+        }
+      }
+
+      document.getElementById('issue-count')!.textContent = issueCount.toString();
+      
+      if (issueCount === 0) {
+        debug.push('✅ No major data integrity issues found');
+        document.getElementById('issue-count')!.textContent = '0';
+      } else {
+        debug.push(`⚠️ Found ${issueCount} data integrity issues`);
+      }
+
+    } catch (error) {
+      debug.push(`❌ Data integrity check failed: ${error}`);
+      document.getElementById('issue-count')!.textContent = 'Error';
+    }
+  };
+
+  const cleanupTestData = async (debug: string[]) => {
+    debug.push('🧹 Starting cleanup of test data...');
+    let cleanedCount = 0;
+
+    try {
+      // Get all graphs to identify test data
+      const graphResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { graphs { id name } }' })
+      });
+      
+      const graphData = await graphResponse.json();
+      
+      if (graphData.data?.graphs) {
+        const testGraphs = graphData.data.graphs.filter((g: any) => {
+          return (
+            g.name === 'a' ||
+            g.name === 'x' ||
+            g.name.length > 100 ||
+            g.name.includes('xxxxxxxxxxxx') ||
+            g.name.startsWith('Test Graph Debug')
+          );
+        });
+
+        debug.push(`🎯 Identified ${testGraphs.length} test graphs for cleanup`);
+
+        for (const graph of testGraphs.slice(0, 50)) { // Limit to 50 at a time to avoid timeout
+          try {
+            const deleteResponse = await fetch('/graphql', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ 
+                query: 'mutation DeleteGraph($id: ID!) { deleteGraphs(where: { id: $id }) { nodesDeleted } }',
+                variables: { id: graph.id }
+              })
+            });
+
+            const deleteResult = await deleteResponse.json();
+            if (!deleteResult.errors) {
+              cleanedCount++;
+              debug.push(`🗑️ Deleted graph: ${graph.name.substring(0, 30)}...`);
+            } else {
+              debug.push(`⚠️ Could not delete graph ${graph.id}: ${deleteResult.errors[0]?.message}`);
+            }
+          } catch (error) {
+            debug.push(`❌ Error deleting graph ${graph.id}: ${error}`);
+          }
+        }
+      }
+
+      debug.push(`✅ Cleanup complete! Removed ${cleanedCount} test graphs`);
+      
+      // Refresh stats after cleanup
+      await updateDatabaseStats(debug);
+      
+    } catch (error) {
+      debug.push(`❌ Cleanup failed: ${error}`);
+    }
+  };
+
+  // Load database stats on component mount
+  useEffect(() => {
+    const loadInitialStats = async () => {
+      const debug: string[] = [];
+      try {
+        await updateDatabaseStats(debug);
+        await checkDataIntegrity(debug);
+        setDebugInfo(debug);
+      } catch (error) {
+        console.error('Failed to load initial database stats:', error);
+      }
+    };
+    
+    loadInitialStats();
+  }, []);
+
   return (
-    <div className="max-w-6xl mx-auto px-6 py-8">
+    <div className="max-w-6xl mx-auto px-6 py-8 space-y-6">
+      {/* Database Administration Header */}
       <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-gray-100 mb-4">Database Configuration</h2>
-        <div className="text-gray-400">
-          <p className="mb-4">Database management features coming soon:</p>
-          <ul className="space-y-2">
-            <li>• Connection string management</li>
-            <li>• Password rotation</li>
-            <li>• Performance monitoring</li>
-            <li>• Backup scheduling</li>
-          </ul>
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-semibold text-gray-100 flex items-center">
+            <Database className="h-6 w-6 mr-3" />
+            Database Administration
+          </h2>
+          <div className="text-sm text-gray-400">
+            GraphQL Query Tools & Data Management
+          </div>
+        </div>
+        
+        {/* Database Statistics */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+          <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Total Graphs</p>
+                <p className="text-2xl font-bold text-blue-300" id="graph-count">Loading...</p>
+              </div>
+              <div className="text-blue-400">
+                <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 01-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12z" clipRule="evenodd" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          
+          <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Total Nodes</p>
+                <p className="text-2xl font-bold text-green-300" id="node-count">Loading...</p>
+              </div>
+              <div className="text-green-400">
+                <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          
+          <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Total Edges</p>
+                <p className="text-2xl font-bold text-purple-300" id="edge-count">Loading...</p>
+              </div>
+              <div className="text-purple-400">
+                <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          
+          <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Data Issues</p>
+                <p className="text-2xl font-bold text-red-300" id="issue-count">Checking...</p>
+              </div>
+              <div className="text-red-400">
+                <AlertCircle className="w-8 h-8" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <button
+            onClick={async () => {
+              const debug = [...debugInfo];
+              try {
+                debug.push('🔄 Refreshing database statistics...');
+                await updateDatabaseStats(debug);
+                setDebugInfo(debug);
+              } catch (error) {
+                debug.push(`❌ Failed to refresh stats: ${error}`);
+                setDebugInfo(debug);
+              }
+            }}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors flex items-center justify-center space-x-2"
+          >
+            <RefreshCw className="h-5 w-5" />
+            <span>Refresh Stats</span>
+          </button>
+          
+          <button
+            onClick={async () => {
+              const debug = [...debugInfo];
+              try {
+                debug.push('🔍 Checking for data integrity issues...');
+                await checkDataIntegrity(debug);
+                setDebugInfo(debug);
+              } catch (error) {
+                debug.push(`❌ Data integrity check failed: ${error}`);
+                setDebugInfo(debug);
+              }
+            }}
+            className="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-3 rounded-lg transition-colors flex items-center justify-center space-x-2"
+          >
+            <AlertCircle className="h-5 w-5" />
+            <span>Check Data Integrity</span>
+          </button>
+          
+          <button
+            onClick={async () => {
+              const debug = [...debugInfo];
+              if (confirm('This will delete duplicate and corrupted test data. Continue?')) {
+                try {
+                  debug.push('🧹 Starting database cleanup...');
+                  await cleanupTestData(debug);
+                  setDebugInfo(debug);
+                } catch (error) {
+                  debug.push(`❌ Cleanup failed: ${error}`);
+                  setDebugInfo(debug);
+                }
+              } else {
+                debug.push('ℹ️ Cleanup cancelled by user');
+                setDebugInfo(debug);
+              }
+            }}
+            className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors flex items-center justify-center space-x-2"
+          >
+            <Database className="h-5 w-5" />
+            <span>Cleanup Test Data</span>
+          </button>
+        </div>
+      </div>
+
+      {/* GraphQL Query Tool */}
+      <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+        <h3 className="text-lg font-medium text-gray-200 mb-4">GraphQL Query Tool</h3>
+        
+        <div className="bg-gray-900 rounded-lg p-4 border border-gray-600 mb-4">
+          <textarea
+            id="graphql-query"
+            placeholder={`Enter GraphQL query or mutation here, e.g.:
+
+query GetGraphs {
+  graphs {
+    id
+    name
+  }
+}
+
+mutation DeleteGraph($id: ID!) {
+  deleteGraphs(where: { id: $id }) {
+    nodesDeleted
+  }
+}`}
+            className="w-full h-40 bg-transparent text-green-300 font-mono text-sm border-none outline-none resize-none"
+            style={{ fontFamily: 'Monaco, Consolas, "Courier New", monospace' }}
+          />
+        </div>
+        
+        <div className="flex space-x-3 mb-4">
+          <button
+            onClick={async () => {
+              const query = (document.getElementById('graphql-query') as HTMLTextAreaElement).value.trim();
+              if (!query) {
+                alert('Please enter a GraphQL query');
+                return;
+              }
+              
+              const debug = [...debugInfo];
+              try {
+                debug.push(`🔍 Executing GraphQL query...`);
+                debug.push(`📝 Query: ${query.substring(0, 100)}${query.length > 100 ? '...' : ''}`);
+                
+                const response = await fetch('/graphql', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ query })
+                });
+                
+                const result = await response.json();
+                
+                if (result.errors) {
+                  debug.push(`❌ GraphQL errors:`);
+                  result.errors.forEach((err: any, i: number) => {
+                    debug.push(`  ${i + 1}. ${err.message}`);
+                  });
+                }
+                
+                if (result.data) {
+                  debug.push(`✅ Query successful!`);
+                  debug.push(`📊 Result: ${JSON.stringify(result.data, null, 2).substring(0, 500)}...`);
+                }
+              } catch (error) {
+                debug.push(`💥 Query execution failed: ${error}`);
+              }
+              setDebugInfo(debug);
+            }}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
+          >
+            Execute Query
+          </button>
+          
+          <button
+            onClick={() => {
+              (document.getElementById('graphql-query') as HTMLTextAreaElement).value = '';
+            }}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors"
+          >
+            Clear
+          </button>
+          
+          <button
+            onClick={() => {
+              (document.getElementById('graphql-query') as HTMLTextAreaElement).value = `query GetDatabaseStats {
+  graphs { id name }
+  workItems { id title type status }
+  edges { id type }
+}`;
+            }}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
+          >
+            Sample Query
+          </button>
+        </div>
+      </div>
+
+      {/* Debug Console */}
+      <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+        <h3 className="text-lg font-medium text-gray-200 mb-4">Debug Console</h3>
+        
+        <div className="bg-gray-900 rounded-lg p-4 font-mono text-sm max-h-80 overflow-y-auto">
+          {debugInfo.length > 0 ? (
+            <div className="space-y-1">
+              {debugInfo.map((line, index) => (
+                <div key={index} className="text-gray-300">
+                  <span className="text-gray-500">{new Date().toISOString().split('T')[1].split('.')[0]}</span>
+                  <span className="ml-2">{line}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-gray-500 italic">
+              Loading database statistics...
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/packages/web/src/pages/Agents.tsx b/packages/web/src/pages/Agents.tsx
index 34534b0a..a3986eaa 100644
--- a/packages/web/src/pages/Agents.tsx
+++ b/packages/web/src/pages/Agents.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '../contexts/AuthContext';
 import { AgentSettingsModal } from '../components/AgentSettingsModal';
 import { McpServerCard } from '../components/McpServerCard';
 import { useMcpServers } from '../hooks/useMcpServers';
+import { APP_VERSION } from '../utils/version';
 
 interface Agent {
   id: string;
@@ -110,10 +111,15 @@ export function Agents() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-100">AI & Agents</h1>
+            <div className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-gray-100">AI & Agents</h1>
+              <span className="text-xs bg-gray-800/50 text-gray-400 px-2 py-1 rounded">
+                v{APP_VERSION}
+              </span>
+            </div>
             <p className="text-sm text-gray-400 mt-1">
               Collaborate with AI agents and configure MCP servers for your work graph
             </p>
@@ -141,7 +147,7 @@ export function Agents() {
       </div>
 
       {/* Tabs */}
-      <div className="bg-gray-900 border-b border-gray-700">
+      <div className="bg-gray-900/20 backdrop-blur-md border-b border-gray-700/30">
         <div className="px-6">
           <nav className="flex space-x-8">
             <button
diff --git a/packages/web/src/pages/Analytics.tsx b/packages/web/src/pages/Analytics.tsx
index 3eb491a5..87019b38 100644
--- a/packages/web/src/pages/Analytics.tsx
+++ b/packages/web/src/pages/Analytics.tsx
@@ -3,6 +3,7 @@ import { TrendingUp, Users, Target, Activity, PieChart } from 'lucide-react';
 import { useGraph } from '../contexts/GraphContext';
 import { useAuth } from '../contexts/AuthContext';
 import { TaskDistributionRadar } from '../components/TaskDistributionRadar';
+import { APP_VERSION } from '../utils/version';
 
 export function Analytics() {
   const { currentGraph } = useGraph();
@@ -48,10 +49,15 @@ export function Analytics() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-100">Analytics</h1>
+            <div className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-gray-100">Analytics</h1>
+              <span className="text-xs bg-gray-800/50 text-gray-400 px-2 py-1 rounded">
+                v{APP_VERSION}
+              </span>
+            </div>
             <p className="text-sm text-gray-400 mt-1">
               Democratic prioritization insights for {currentGraph?.name || 'your graphs'}
             </p>
@@ -73,7 +79,7 @@ export function Analytics() {
       </div>
 
       {/* Tabs */}
-      <div className="bg-gray-900 border-b border-gray-700">
+      <div className="bg-gray-900/20 backdrop-blur-md border-b border-gray-700/30">
         <div className="px-6">
           <nav className="flex space-x-8">
             <button
diff --git a/packages/web/src/pages/Backend.tsx b/packages/web/src/pages/Backend.tsx
index 57b71aee..e00b0d77 100644
--- a/packages/web/src/pages/Backend.tsx
+++ b/packages/web/src/pages/Backend.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Server, Database, Globe, Activity, CheckCircle, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
+import { Server, Database, Globe, Activity, CheckCircle, XCircle, AlertCircle, RefreshCw, Info, Wifi, WifiOff } from 'lucide-react';
+import { APP_VERSION } from '../utils/version';
 
 interface ServiceStatus {
   name: string;
@@ -22,73 +23,198 @@ export function Backend() {
   });
   const [isLoading, setIsLoading] = useState(true);
   const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+  const [debugInfo, setDebugInfo] = useState<string[]>([]);
+  const [healthCheckError, setHealthCheckError] = useState<string | null>(null);
 
-  // Mock health check function - replace with actual API calls
+  // Real health check function using server health endpoint
   const checkServiceHealth = async (): Promise<SystemHealth> => {
     setIsLoading(true);
+    const debug: string[] = [];
+    setHealthCheckError(null);
     
     try {
-      // Simulate API calls to check service health
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      // Step 1: Test the health endpoint
+      const healthUrl = '/health'; // Use relative URL to leverage Vite proxy
+      debug.push(`🔍 Checking health endpoint: ${window.location.origin}${healthUrl}`);
+      debug.push(`🔍 Using fetch with relative URL: "${healthUrl}"`);
       
-      const services: ServiceStatus[] = [
-        {
-          name: 'GraphQL API Server',
-          status: 'healthy',
-          responseTime: 45,
-          lastChecked: new Date(),
-          description: 'Apollo Server with @neo4j/graphql auto-generated resolvers',
-          dependencies: ['Neo4j Database', 'Redis Cache']
-        },
-        {
-          name: 'WebSocket Server',
-          status: 'healthy',
-          responseTime: 12,
-          lastChecked: new Date(),
-          description: 'Real-time subscriptions for graph updates',
-          dependencies: ['GraphQL API Server']
-        },
-        {
-          name: 'Neo4j Database',
-          status: 'healthy',
-          responseTime: 8,
-          lastChecked: new Date(),
-          description: 'Native graph database with Cypher queries and APOC plugins'
-        },
-        {
-          name: 'Redis Cache',
-          status: 'healthy',
-          responseTime: 3,
-          lastChecked: new Date(),
-          description: 'Session storage and caching layer'
-        },
-        {
-          name: 'Graph Engine Core',
-          status: 'healthy',
-          responseTime: 15,
-          lastChecked: new Date(),
-          description: 'Core graph operations and priority calculations'
-        },
-        {
-          name: 'Web Application',
-          status: 'healthy',
-          responseTime: 120,
-          lastChecked: new Date(),
-          description: 'React frontend with D3.js visualization'
+      const startTime = Date.now();
+      const response = await fetch(healthUrl, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
         }
-      ];
+      });
+      const responseTime = Date.now() - startTime;
+      
+      debug.push(`⚡ Health endpoint response: ${response.status} (${responseTime}ms)`);
+      debug.push(`⚡ Response headers: Content-Type: ${response.headers.get('content-type')}`);
+      
+      if (!response.ok) {
+        debug.push(`❌ Response not OK: ${response.status} ${response.statusText}`);
+        throw new Error(`Health endpoint returned ${response.status}: ${response.statusText}`);
+      }
+      
+      const healthData = await response.json();
+      debug.push(`📊 Raw health data: ${JSON.stringify(healthData, null, 2)}`);
+      debug.push(`📊 Health status: ${healthData.status}`);
+      
+      const now = new Date();
+      
+      // Step 2: Build comprehensive service list
+      const services: ServiceStatus[] = [];
+      
+      // GraphQL API Server (main backend)
+      const graphqlStatus = healthData.services?.graphql?.status === 'healthy' ? 'healthy' : 'down';
+      services.push({
+        name: 'GraphQL API Server',
+        status: graphqlStatus,
+        responseTime: responseTime,
+        lastChecked: now,
+        description: graphqlStatus === 'healthy' 
+          ? `Apollo Server running on port ${healthData.services?.graphql?.port || 4127}`
+          : 'GraphQL API Server not responding'
+      });
+      debug.push(`🖥️  GraphQL API: ${graphqlStatus}`);
+
+      // WebSocket Server (same process as GraphQL)
+      services.push({
+        name: 'WebSocket Server',
+        status: graphqlStatus, // Same as GraphQL since they run together
+        responseTime: graphqlStatus === 'healthy' ? responseTime + 2 : undefined,
+        lastChecked: now,
+        description: graphqlStatus === 'healthy' 
+          ? 'Real-time subscriptions for graph updates'
+          : 'WebSocket server unavailable (same process as GraphQL)',
+        dependencies: ['GraphQL API Server']
+      });
 
-      // Determine overall health
-      const hasDown = services.some(s => s.status === 'down');
+      // Neo4j Graph Database
+      const neo4jStatus = healthData.services?.neo4j?.status;
+      let neo4jServiceStatus: 'healthy' | 'degraded' | 'down' = 'down';
+      let neo4jDescription = 'Neo4j connection status unknown';
+      
+      if (neo4jStatus === 'healthy') {
+        neo4jServiceStatus = 'healthy';
+        neo4jDescription = `Connected to ${healthData.services.neo4j.uri}`;
+        debug.push(`🗄️  Neo4j: healthy at ${healthData.services.neo4j.uri}`);
+      } else if (neo4jStatus === 'unhealthy') {
+        neo4jServiceStatus = 'down';
+        const error = healthData.services.neo4j.error || 'Connection failed';
+        neo4jDescription = `Connection failed: ${error.substring(0, 100)}${error.length > 100 ? '...' : ''}`;
+        debug.push(`❌ Neo4j: down - ${error}`);
+      }
+      
+      services.push({
+        name: 'Neo4j Graph Database',
+        status: neo4jServiceStatus,
+        responseTime: neo4jServiceStatus === 'healthy' ? 8 : undefined,
+        lastChecked: now,
+        description: neo4jDescription
+      });
+
+      // SQLite Auth Database (always healthy if server is running)
+      services.push({
+        name: 'SQLite Auth Database',
+        status: 'healthy',
+        responseTime: 2,
+        lastChecked: now,
+        description: 'User authentication and configuration (always available when API is running)'
+      });
+      debug.push(`📁 SQLite: healthy (embedded database)`);
+
+      // MCP Server
+      const mcpStatus = healthData.services?.mcp?.status;
+      let mcpServiceStatus: 'healthy' | 'degraded' | 'down' = 'down';
+      let mcpDescription = 'MCP server status unknown';
+      
+      if (mcpStatus === 'healthy') {
+        mcpServiceStatus = 'healthy';
+        const version = healthData.services.mcp.version || 'unknown';
+        const capabilities = healthData.services.mcp.capabilities || [];
+        mcpDescription = `Running v${version} with ${capabilities.length} capabilities`;
+        debug.push(`🤖 MCP: healthy v${version}`);
+      } else if (mcpStatus === 'unhealthy') {
+        mcpServiceStatus = 'degraded';
+        mcpDescription = 'MCP server responding but degraded';
+        debug.push(`⚠️  MCP: degraded`);
+      } else if (mcpStatus === 'offline') {
+        mcpServiceStatus = 'down';
+        const error = healthData.services?.mcp?.error || 'Not running';
+        mcpDescription = `Claude Code integration offline: ${error}`;
+        debug.push(`❌ MCP: offline - ${error}`);
+      }
+      
+      services.push({
+        name: 'MCP Server (Claude Code)',
+        status: mcpServiceStatus,
+        responseTime: mcpServiceStatus === 'healthy' ? 15 : undefined,
+        lastChecked: now,
+        description: mcpDescription
+      });
+
+      // Step 3: Determine overall health
+      const criticalServices = services.filter(s => 
+        s.name === 'GraphQL API Server' || s.name === 'SQLite Auth Database'
+      );
+      const hasDown = criticalServices.some(s => s.status === 'down');
       const hasDegraded = services.some(s => s.status === 'degraded');
       const overall: 'healthy' | 'degraded' | 'down' = hasDown ? 'down' : hasDegraded ? 'degraded' : 'healthy';
-
+      
+      debug.push(`🏥 Overall system status: ${overall}`);
+      debug.push(`✅ ${services.filter(s => s.status === 'healthy').length}/${services.length} services healthy`);
+      
+      setDebugInfo(debug);
       return { overall, services };
-    } catch (_error) {
-      // Health check failed, return default status
+
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      debug.push(`💥 Health check failed: ${errorMessage}`);
+      debug.push(`💥 Error type: ${typeof error}`);
+      if (error instanceof Error) {
+        debug.push(`💥 Error name: ${error.name}`);
+        debug.push(`💥 Error stack: ${error.stack?.substring(0, 200)}`);
+      }
+      debug.push(`💥 Fetch URL attempted: ${window.location.origin}/health`);
+      setHealthCheckError(errorMessage);
+      setDebugInfo(debug);
+      
+      // Return a more comprehensive error state
       return {
         overall: 'down',
-        services: []
+        services: [
+          {
+            name: 'GraphQL API Server',
+            status: 'down',
+            lastChecked: new Date(),
+            description: `Cannot reach server: ${errorMessage}`
+          },
+          {
+            name: 'WebSocket Server',
+            status: 'down',
+            lastChecked: new Date(),
+            description: 'Unavailable (depends on GraphQL API)'
+          },
+          {
+            name: 'Neo4j Graph Database',
+            status: 'down',
+            lastChecked: new Date(),
+            description: 'Status unknown (server unreachable)'
+          },
+          {
+            name: 'SQLite Auth Database',
+            status: 'down',
+            lastChecked: new Date(),
+            description: 'Status unknown (server unreachable)'
+          },
+          {
+            name: 'MCP Server (Claude Code)',
+            status: 'down',
+            lastChecked: new Date(),
+            description: 'Status unknown (server unreachable)'
+          }
+        ]
       };
     } finally {
       setIsLoading(false);
@@ -96,22 +222,202 @@ export function Backend() {
   };
 
   useEffect(() => {
-    checkServiceHealth().then(setSystemHealth);
+    // Immediate health check on component mount
+    checkServiceHealth().then((result) => {
+      setSystemHealth(result);
+      setLastUpdate(new Date());
+    });
     
-    // Auto-refresh every 30 seconds
+    // Auto-refresh every 15 seconds for more frequent updates
     const interval = setInterval(() => {
-      checkServiceHealth().then(setSystemHealth);
-      setLastUpdate(new Date());
-    }, 30000);
+      checkServiceHealth().then((result) => {
+        setSystemHealth(result);
+        setLastUpdate(new Date());
+      });
+    }, 15000);
 
     return () => clearInterval(interval);
   }, []);
 
+  // Load database stats on component mount
+  useEffect(() => {
+    const loadInitialStats = async () => {
+      const debug: string[] = [];
+      try {
+        await updateDatabaseStats(debug);
+        await checkDataIntegrity(debug);
+        setDebugInfo(debug);
+      } catch (error) {
+        console.error('Failed to load initial database stats:', error);
+      }
+    };
+    
+    loadInitialStats();
+  }, []);
+
   const handleRefresh = () => {
+    setDebugInfo([]);
+    setHealthCheckError(null);
     checkServiceHealth().then(setSystemHealth);
     setLastUpdate(new Date());
   };
 
+  // Database utility functions
+  const updateDatabaseStats = async (debug: string[]) => {
+    try {
+      debug.push('📊 Fetching graph count...');
+      const graphResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { graphs { id } }' })
+      });
+      const graphData = await graphResponse.json();
+      const graphCount = graphData.data?.graphs?.length || 0;
+      document.getElementById('graph-count')!.textContent = graphCount.toString();
+      debug.push(`✅ Found ${graphCount} graphs`);
+
+      debug.push('📊 Fetching node count...');
+      const nodeResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { workItems { id } }' })
+      });
+      const nodeData = await nodeResponse.json();
+      const nodeCount = nodeData.data?.workItems?.length || 0;
+      document.getElementById('node-count')!.textContent = nodeCount.toString();
+      debug.push(`✅ Found ${nodeCount} nodes`);
+
+      debug.push('📊 Fetching edge count...');
+      const edgeResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { edges { id } }' })
+      });
+      const edgeData = await edgeResponse.json();
+      const edgeCount = edgeData.data?.edges?.length || 0;
+      document.getElementById('edge-count')!.textContent = edgeCount.toString();
+      debug.push(`✅ Found ${edgeCount} edges`);
+
+    } catch (error) {
+      debug.push(`❌ Failed to update stats: ${error}`);
+      document.getElementById('graph-count')!.textContent = 'Error';
+      document.getElementById('node-count')!.textContent = 'Error';
+      document.getElementById('edge-count')!.textContent = 'Error';
+    }
+  };
+
+  const checkDataIntegrity = async (debug: string[]) => {
+    let issueCount = 0;
+    debug.push('🔍 Checking for data integrity issues...');
+
+    try {
+      // Check for graphs with invalid types
+      const graphResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { graphs { id name } }' })
+      });
+      
+      const graphResult = await graphResponse.json();
+      if (graphResult.errors) {
+        issueCount += graphResult.errors.length;
+        debug.push(`❌ Found ${graphResult.errors.length} GraphQL schema errors`);
+        graphResult.errors.forEach((err: any, i: number) => {
+          debug.push(`  ${i + 1}. ${err.message}`);
+        });
+      }
+
+      // Check for extremely long names (likely test data)
+      if (graphResult.data?.graphs) {
+        const longNameGraphs = graphResult.data.graphs.filter((g: any) => g.name && g.name.length > 100);
+        if (longNameGraphs.length > 0) {
+          issueCount += longNameGraphs.length;
+          debug.push(`⚠️ Found ${longNameGraphs.length} graphs with extremely long names (likely test data)`);
+        }
+
+        // Check for single-character names (likely test data)
+        const shortNameGraphs = graphResult.data.graphs.filter((g: any) => g.name && g.name.length <= 2);
+        if (shortNameGraphs.length > 0) {
+          debug.push(`ℹ️ Found ${shortNameGraphs.length} graphs with very short names (a, x, etc.)`);
+        }
+      }
+
+      document.getElementById('issue-count')!.textContent = issueCount.toString();
+      
+      if (issueCount === 0) {
+        debug.push('✅ No major data integrity issues found');
+        document.getElementById('issue-count')!.textContent = '0';
+      } else {
+        debug.push(`⚠️ Found ${issueCount} data integrity issues`);
+      }
+
+    } catch (error) {
+      debug.push(`❌ Data integrity check failed: ${error}`);
+      document.getElementById('issue-count')!.textContent = 'Error';
+    }
+  };
+
+  const cleanupTestData = async (debug: string[]) => {
+    debug.push('🧹 Starting cleanup of test data...');
+    let cleanedCount = 0;
+
+    try {
+      // Get all graphs to identify test data
+      const graphResponse = await fetch('/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: 'query { graphs { id name } }' })
+      });
+      
+      const graphData = await graphResponse.json();
+      
+      if (graphData.data?.graphs) {
+        const testGraphs = graphData.data.graphs.filter((g: any) => {
+          return (
+            g.name === 'a' ||
+            g.name === 'x' ||
+            g.name.length > 100 ||
+            g.name.includes('xxxxxxxxxxxx') ||
+            g.name.startsWith('Test Graph Debug')
+          );
+        });
+
+        debug.push(`🎯 Identified ${testGraphs.length} test graphs for cleanup`);
+
+        for (const graph of testGraphs.slice(0, 50)) { // Limit to 50 at a time to avoid timeout
+          try {
+            const deleteResponse = await fetch('/graphql', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ 
+                query: 'mutation DeleteGraph($id: ID!) { deleteGraphs(where: { id: $id }) { nodesDeleted } }',
+                variables: { id: graph.id }
+              })
+            });
+
+            const deleteResult = await deleteResponse.json();
+            if (!deleteResult.errors) {
+              cleanedCount++;
+              debug.push(`🗑️ Deleted graph: ${graph.name.substring(0, 30)}...`);
+            } else {
+              debug.push(`⚠️ Could not delete graph ${graph.id}: ${deleteResult.errors[0]?.message}`);
+            }
+          } catch (error) {
+            debug.push(`❌ Error deleting graph ${graph.id}: ${error}`);
+          }
+        }
+      }
+
+      debug.push(`✅ Cleanup complete! Removed ${cleanedCount} test graphs`);
+      
+      // Refresh stats after cleanup
+      await updateDatabaseStats(debug);
+      
+    } catch (error) {
+      debug.push(`❌ Cleanup failed: ${error}`);
+    }
+  };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'healthy': return 'text-green-600';
@@ -146,10 +452,15 @@ export function Backend() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-100">Backend Status</h1>
+            <div className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-gray-100">Backend Status</h1>
+              <span className="text-xs bg-gray-800/50 text-gray-400 px-2 py-1 rounded">
+                v{APP_VERSION}
+              </span>
+            </div>
             <p className="text-sm text-gray-400 mt-1">
               System architecture and service health monitoring
             </p>
@@ -163,15 +474,38 @@ export function Backend() {
               </div>
             </div>
             
-            <button
-              type="button"
-              className="btn btn-secondary"
-              onClick={handleRefresh}
-              disabled={isLoading}
-            >
-              <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-              Refresh
-            </button>
+            <div className="flex space-x-2">
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={handleRefresh}
+                disabled={isLoading}
+              >
+                <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+                Refresh
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={() => {
+                  const debug: string[] = [];
+                  debug.push('🔄 Force debug refresh initiated by user');
+                  debug.push(`🕐 Time: ${new Date().toISOString()}`);
+                  debug.push(`🌐 Current URL: ${window.location.href}`);
+                  debug.push(`📍 Origin: ${window.location.origin}`);
+                  debug.push(`🔗 Health URL: /health`);
+                  debug.push(`🔗 GraphQL URL: /graphql`);
+                  debug.push(`📶 Navigator online: ${navigator.onLine}`);
+                  debug.push(`🖥️  User agent: ${navigator.userAgent.substring(0, 100)}...`);
+                  setDebugInfo(debug);
+                  handleRefresh();
+                }}
+                disabled={isLoading}
+              >
+                <Activity className="h-4 w-4 mr-2" />
+                Force Debug
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -238,11 +572,14 @@ export function Backend() {
                     <rect x="50" y="420" width="700" height="60" fill="#881337" stroke="#ec4899" strokeWidth="2" rx="8" />
                     <text x="400" y="440" textAnchor="middle" className="fill-pink-200 text-sm font-semibold">Data Layer</text>
                     
-                    <rect x="150" y="450" width="150" height="25" fill="#9d174d" stroke="#ec4899" rx="4" />
-                    <text x="225" y="467" textAnchor="middle" className="fill-pink-200 text-xs">Neo4j</text>
+                    <rect x="100" y="450" width="130" height="25" fill="#9d174d" stroke="#ec4899" rx="4" />
+                    <text x="165" y="467" textAnchor="middle" className="fill-pink-200 text-xs">SQLite Auth</text>
+                    
+                    <rect x="250" y="450" width="130" height="25" fill="#9d174d" stroke="#ec4899" rx="4" />
+                    <text x="315" y="467" textAnchor="middle" className="fill-pink-200 text-xs">Neo4j (Optional)</text>
                     
-                    <rect x="350" y="450" width="150" height="25" fill="#9d174d" stroke="#ec4899" rx="4" />
-                    <text x="425" y="467" textAnchor="middle" className="fill-pink-200 text-xs">Redis Cache</text>
+                    <rect x="400" y="450" width="130" height="25" fill="#9d174d" stroke="#ec4899" rx="4" />
+                    <text x="465" y="467" textAnchor="middle" className="fill-pink-200 text-xs">MCP Server</text>
                   </g>
 
                   {/* Connection Lines */}
@@ -328,18 +665,23 @@ export function Backend() {
               <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-sm text-gray-400">Uptime</p>
-                    <p className="text-2xl font-bold text-gray-100">99.9%</p>
+                    <p className="text-sm text-gray-400">System Status</p>
+                    <p className={`text-2xl font-bold capitalize ${getStatusColor(systemHealth.overall)}`}>
+                      {systemHealth.overall}
+                    </p>
                   </div>
-                  <CheckCircle className="h-8 w-8 text-green-400" />
+                  {getStatusIcon(systemHealth.overall)}
                 </div>
               </div>
               
               <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-sm text-gray-400">Avg Response</p>
-                    <p className="text-2xl font-bold text-gray-100">45ms</p>
+                    <p className="text-sm text-gray-400">API Response</p>
+                    <p className="text-2xl font-bold text-gray-100">
+                      {systemHealth.services.find(s => s.name === 'GraphQL API Server')?.responseTime || '—'}
+                      {systemHealth.services.find(s => s.name === 'GraphQL API Server')?.responseTime ? 'ms' : ''}
+                    </p>
                   </div>
                   <Activity className="h-8 w-8 text-green-400" />
                 </div>
@@ -348,8 +690,11 @@ export function Backend() {
               <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-sm text-gray-400">Active Nodes</p>
-                    <p className="text-2xl font-bold text-gray-100">1,247</p>
+                    <p className="text-sm text-gray-400">Services</p>
+                    <p className="text-2xl font-bold text-gray-100">
+                      {systemHealth.services.filter(s => s.status === 'healthy').length}/
+                      {systemHealth.services.length}
+                    </p>
                   </div>
                   <Server className="h-8 w-8 text-green-400" />
                 </div>
@@ -358,10 +703,379 @@ export function Backend() {
               <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-sm text-gray-400">DB Connections</p>
-                    <p className="text-2xl font-bold text-gray-100">23/100</p>
+                    <p className="text-sm text-gray-400">Graph Database</p>
+                    <p className="text-2xl font-bold text-gray-100">
+                      {systemHealth.services.find(s => s.name === 'Neo4j Graph Database')?.status === 'healthy' ? 'Online' : 'Offline'}
+                    </p>
                   </div>
-                  <Database className="h-8 w-8 text-green-400" />
+                  <Database className={`h-8 w-8 ${
+                    systemHealth.services.find(s => s.name === 'Neo4j Graph Database')?.status === 'healthy' 
+                      ? 'text-green-400' : 'text-red-400'
+                  }`} />
+                </div>
+              </div>
+            </div>
+
+            {/* System Information */}
+            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+              <h2 className="text-lg font-semibold text-gray-100 flex items-center mb-4">
+                <Server className="h-5 w-5 mr-2" />
+                System Information
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Current URL:</span>
+                    <span className="text-gray-200 font-mono">{window.location.href}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Origin:</span>
+                    <span className="text-gray-200 font-mono">{window.location.origin}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Health URL:</span>
+                    <span className="text-gray-200 font-mono">{window.location.origin}/health</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">GraphQL URL:</span>
+                    <span className="text-gray-200 font-mono">{window.location.origin}/graphql</span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">User Agent:</span>
+                    <span className="text-gray-200 font-mono text-xs">{navigator.userAgent.substring(0, 50)}...</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Online:</span>
+                    <span className={`font-semibold ${navigator.onLine ? 'text-green-400' : 'text-red-400'}`}>
+                      {navigator.onLine ? 'Yes' : 'No'}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Last Update:</span>
+                    <span className="text-gray-200">{lastUpdate.toLocaleTimeString()}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Auto-refresh:</span>
+                    <span className="text-green-400">Every 15s</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Network Test */}
+            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+              <h2 className="text-lg font-semibold text-gray-100 flex items-center mb-4">
+                <Globe className="h-5 w-5 mr-2" />
+                Network Test
+              </h2>
+              <button
+                onClick={async () => {
+                  const debug: string[] = [];
+                  try {
+                    debug.push('🧪 Starting manual network test...');
+                    debug.push(`🌐 Testing fetch to: ${window.location.origin}/health`);
+                    
+                    const startTime = Date.now();
+                    const response = await fetch('/health');
+                    const endTime = Date.now();
+                    
+                    debug.push(`⚡ Response time: ${endTime - startTime}ms`);
+                    debug.push(`📡 Status: ${response.status} ${response.statusText}`);
+                    debug.push(`📦 Content-Type: ${response.headers.get('content-type')}`);
+                    
+                    if (response.ok) {
+                      const data = await response.json();
+                      debug.push(`✅ JSON parse successful`);
+                      debug.push(`📊 Health status: ${data.status}`);
+                      debug.push(`🔢 Services count: ${Object.keys(data.services || {}).length}`);
+                    } else {
+                      debug.push(`❌ Response not OK`);
+                    }
+                  } catch (error) {
+                    debug.push(`💥 Network test failed: ${error}`);
+                  }
+                  setDebugInfo(debug);
+                }}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
+              >
+                Run Network Test
+              </button>
+            </div>
+
+            {/* Debug Console */}
+            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold text-gray-100 flex items-center">
+                  <Info className="h-5 w-5 mr-2" />
+                  Debug Console
+                </h2>
+                <div className="flex items-center space-x-2 text-sm">
+                  {healthCheckError && (
+                    <div className="flex items-center space-x-1 text-red-400">
+                      <AlertCircle className="h-4 w-4" />
+                      <span>Error</span>
+                    </div>
+                  )}
+                  <div className="flex items-center space-x-1 text-gray-400">
+                    <Wifi className="h-4 w-4" />
+                    <span>Live Debug</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="bg-gray-900 rounded-lg p-4 font-mono text-sm max-h-64 overflow-y-auto">
+                {debugInfo.length > 0 ? (
+                  <div className="space-y-1">
+                    {debugInfo.map((line, index) => (
+                      <div key={index} className="text-gray-300">
+                        <span className="text-gray-500">{new Date().toISOString().split('T')[1].split('.')[0]}</span>
+                        <span className="ml-2">{line}</span>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-gray-500 italic">
+                    {isLoading ? 'Checking system health...' : 'No debug information available'}
+                  </div>
+                )}
+              </div>
+              
+              {healthCheckError && (
+                <div className="mt-4 p-3 bg-red-900/20 border border-red-500/30 rounded-lg">
+                  <div className="flex items-center space-x-2 text-red-300">
+                    <XCircle className="h-4 w-4" />
+                    <span className="font-medium">Health Check Failed</span>
+                  </div>
+                  <p className="text-sm text-red-200 mt-1 font-mono">{healthCheckError}</p>
+                </div>
+              )}
+            </div>
+
+            {/* Database Administration Section */}
+            <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-lg font-semibold text-gray-100 flex items-center">
+                  <Database className="h-5 w-5 mr-2" />
+                  Database Administration
+                </h2>
+                <div className="text-sm text-gray-400">
+                  GraphQL Query Tools & Data Management
+                </div>
+              </div>
+              
+              {/* Database Statistics */}
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+                <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-400">Total Graphs</p>
+                      <p className="text-xl font-bold text-blue-300" id="graph-count">Loading...</p>
+                    </div>
+                    <div className="text-blue-400">
+                      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 01-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-400">Total Nodes</p>
+                      <p className="text-xl font-bold text-green-300" id="node-count">Loading...</p>
+                    </div>
+                    <div className="text-green-400">
+                      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-400">Total Edges</p>
+                      <p className="text-xl font-bold text-purple-300" id="edge-count">Loading...</p>
+                    </div>
+                    <div className="text-purple-400">
+                      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="bg-gray-700 border border-gray-600 rounded-lg p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-400">Data Issues</p>
+                      <p className="text-xl font-bold text-red-300" id="issue-count">Checking...</p>
+                    </div>
+                    <div className="text-red-400">
+                      <AlertCircle className="w-6 h-6" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Quick Actions */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <button
+                  onClick={async () => {
+                    const debug = [...debugInfo];
+                    try {
+                      debug.push('🔄 Refreshing database statistics...');
+                      await updateDatabaseStats(debug);
+                      setDebugInfo(debug);
+                    } catch (error) {
+                      debug.push(`❌ Failed to refresh stats: ${error}`);
+                      setDebugInfo(debug);
+                    }
+                  }}
+                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center space-x-2"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                  <span>Refresh Stats</span>
+                </button>
+                
+                <button
+                  onClick={async () => {
+                    const debug = [...debugInfo];
+                    try {
+                      debug.push('🔍 Checking for data integrity issues...');
+                      await checkDataIntegrity(debug);
+                      setDebugInfo(debug);
+                    } catch (error) {
+                      debug.push(`❌ Data integrity check failed: ${error}`);
+                      setDebugInfo(debug);
+                    }
+                  }}
+                  className="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center space-x-2"
+                >
+                  <AlertCircle className="h-4 w-4" />
+                  <span>Check Data</span>
+                </button>
+                
+                <button
+                  onClick={async () => {
+                    const debug = [...debugInfo];
+                    if (confirm('This will delete duplicate and corrupted test data. Continue?')) {
+                      try {
+                        debug.push('🧹 Starting database cleanup...');
+                        await cleanupTestData(debug);
+                        setDebugInfo(debug);
+                      } catch (error) {
+                        debug.push(`❌ Cleanup failed: ${error}`);
+                        setDebugInfo(debug);
+                      }
+                    } else {
+                      debug.push('ℹ️ Cleanup cancelled by user');
+                      setDebugInfo(debug);
+                    }
+                  }}
+                  className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center space-x-2"
+                >
+                  <Database className="h-4 w-4" />
+                  <span>Cleanup Data</span>
+                </button>
+              </div>
+
+              {/* GraphQL Query Tool */}
+              <div className="space-y-4">
+                <h3 className="text-md font-medium text-gray-200">GraphQL Query Tool</h3>
+                
+                <div className="bg-gray-900 rounded-lg p-4 border border-gray-600">
+                  <textarea
+                    id="graphql-query"
+                    placeholder={`Enter GraphQL query or mutation here, e.g.:
+
+query GetGraphs {
+  graphs {
+    id
+    name
+    type
+    status
+  }
+}
+
+mutation DeleteGraph($id: ID!) {
+  deleteGraphs(where: { id: $id }) {
+    nodesDeleted
+  }
+}`}
+                    className="w-full h-32 bg-transparent text-green-300 font-mono text-sm border-none outline-none resize-none"
+                    style={{ fontFamily: 'Monaco, Consolas, "Courier New", monospace' }}
+                  />
+                </div>
+                
+                <div className="flex space-x-2">
+                  <button
+                    onClick={async () => {
+                      const query = (document.getElementById('graphql-query') as HTMLTextAreaElement).value.trim();
+                      if (!query) {
+                        alert('Please enter a GraphQL query');
+                        return;
+                      }
+                      
+                      const debug = [...debugInfo];
+                      try {
+                        debug.push(`🔍 Executing GraphQL query...`);
+                        debug.push(`📝 Query: ${query.substring(0, 100)}${query.length > 100 ? '...' : ''}`);
+                        
+                        const response = await fetch('/graphql', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ query })
+                        });
+                        
+                        const result = await response.json();
+                        
+                        if (result.errors) {
+                          debug.push(`❌ GraphQL errors:`);
+                          result.errors.forEach((err: any, i: number) => {
+                            debug.push(`  ${i + 1}. ${err.message}`);
+                          });
+                        }
+                        
+                        if (result.data) {
+                          debug.push(`✅ Query successful!`);
+                          debug.push(`📊 Result: ${JSON.stringify(result.data, null, 2).substring(0, 500)}...`);
+                        }
+                      } catch (error) {
+                        debug.push(`💥 Query execution failed: ${error}`);
+                      }
+                      setDebugInfo(debug);
+                    }}
+                    className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
+                  >
+                    Execute Query
+                  </button>
+                  
+                  <button
+                    onClick={() => {
+                      (document.getElementById('graphql-query') as HTMLTextAreaElement).value = '';
+                    }}
+                    className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors"
+                  >
+                    Clear
+                  </button>
+                  
+                  <button
+                    onClick={() => {
+                      (document.getElementById('graphql-query') as HTMLTextAreaElement).value = `query GetDatabaseStats {
+  graphs { id name type status }
+  workItems { id title type status }
+  edges { id type }
+}`;
+                    }}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
+                  >
+                    Sample Query
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/packages/web/src/pages/GraphManagement.tsx b/packages/web/src/pages/GraphManagement.tsx
index ed6ad956..3590e11b 100644
--- a/packages/web/src/pages/GraphManagement.tsx
+++ b/packages/web/src/pages/GraphManagement.tsx
@@ -297,7 +297,7 @@ export function GraphManagement() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl font-bold text-gray-100">Graph Management</h1>
@@ -325,7 +325,7 @@ export function GraphManagement() {
       </div>
 
       {/* Filters and controls */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-4">
             <div className="flex-1 relative">
diff --git a/packages/web/src/pages/GraphView.tsx b/packages/web/src/pages/GraphView.tsx
index 7fda3348..21aea5d9 100644
--- a/packages/web/src/pages/GraphView.tsx
+++ b/packages/web/src/pages/GraphView.tsx
@@ -9,7 +9,7 @@ export function GraphView() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl font-bold text-gray-100">Graph View</h1>
diff --git a/packages/web/src/pages/Login.tsx b/packages/web/src/pages/Login.tsx
index 79a75ffc..e6464f4a 100644
--- a/packages/web/src/pages/Login.tsx
+++ b/packages/web/src/pages/Login.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
-import { Users, ArrowRight } from 'lucide-react';
+import { Users, ArrowRight, Shield } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { User, Team } from '../types/auth';
+import { LoginSecurityDialog } from '../components/LoginSecurityDialog';
 
 export function Login() {
   const { availableUsers, availableTeams, login } = useAuth();
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const [showSecurityDialog, setShowSecurityDialog] = useState(false);
 
   const handleUserSelect = (user: User) => {
     setSelectedUser(user);
@@ -33,8 +35,26 @@ export function Login() {
   const teamUsers = selectedTeam ? availableUsers.filter(u => u.team?.id === selectedTeam.id) : [];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-      <div className="max-w-4xl w-full">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4 relative overflow-hidden select-none">
+      {/* Tropical lagoon light scattering background animation */}
+      <div className="lagoon-caustics">
+        <div className="caustic-layer caustic-layer-1"></div>
+        <div className="caustic-layer caustic-layer-2"></div>
+        <div className="caustic-layer caustic-layer-3"></div>
+        <div className="caustic-layer caustic-layer-4"></div>
+        <div className="caustic-layer caustic-layer-5"></div>
+        <div className="caustic-layer caustic-layer-6"></div>
+        <div className="caustic-layer caustic-layer-7"></div>
+        <div className="caustic-layer caustic-layer-8"></div>
+        <div className="caustic-layer caustic-layer-9"></div>
+        <div className="caustic-layer caustic-layer-10"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+      </div>
+      <div className="max-w-4xl w-full relative z-10">
         {/* Header */}
         <div className="text-center mb-8">
           <div className="flex items-center justify-center mb-4">
@@ -179,12 +199,22 @@ export function Login() {
           </div>
         </div>
 
-        {/* Demo Notice */}
-        <div className="mt-8 text-center">
+        {/* Security & Demo Notice */}
+        <div className="mt-8 text-center space-y-4">
           <div className="inline-flex items-center px-4 py-2 bg-yellow-900 border border-yellow-700 rounded-lg text-sm text-yellow-300">
             <span className="mr-2">⚡</span>
             Demo Mode: This is a placeholder authentication system for development
           </div>
+          
+          <div className="flex items-center justify-center">
+            <button
+              onClick={() => setShowSecurityDialog(true)}
+              className="inline-flex items-center px-3 py-2 text-sm text-green-400 hover:text-green-300 hover:bg-gray-800 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors"
+            >
+              <Shield className="h-4 w-4 mr-2" />
+              How we protect your login
+            </button>
+          </div>
         </div>
 
         {/* Signup Link */}
@@ -197,6 +227,12 @@ export function Login() {
           </p>
         </div>
       </div>
+
+      {/* Security Dialog */}
+      <LoginSecurityDialog 
+        isOpen={showSecurityDialog} 
+        onClose={() => setShowSecurityDialog(false)} 
+      />
     </div>
   );
 }
\ No newline at end of file
diff --git a/packages/web/src/pages/LoginForm.tsx b/packages/web/src/pages/LoginForm.tsx
index fe175317..c3074653 100644
--- a/packages/web/src/pages/LoginForm.tsx
+++ b/packages/web/src/pages/LoginForm.tsx
@@ -51,6 +51,21 @@ const GUEST_LOGIN_MUTATION = gql`
   }
 `;
 
+const DEVELOPMENT_INFO_QUERY = gql`
+  query DevelopmentInfo {
+    developmentInfo {
+      isDevelopment
+      hasDefaultCredentials
+      defaultAccounts {
+        username
+        password
+        role
+        description
+      }
+    }
+  }
+`;
+
 const GET_SYSTEM_SETTINGS = gql`
   query GetSystemSettings {
     systemSettings {
@@ -75,6 +90,11 @@ export function LoginForm() {
   const { data: systemSettings } = useQuery(GET_SYSTEM_SETTINGS);
   const isGuestEnabled = systemSettings?.systemSettings?.allowAnonymousGuest ?? true;
 
+  // Check for development mode and default credentials
+  const { data: devInfo } = useQuery(DEVELOPMENT_INFO_QUERY);
+  const showDefaultCredentials = devInfo?.developmentInfo?.hasDefaultCredentials ?? false;
+  const defaultAccounts = devInfo?.developmentInfo?.defaultAccounts ?? [];
+
   const [login, { loading }] = useMutation(LOGIN_MUTATION, {
     onCompleted: (data) => {
       setAuthUser(data.login.user, data.login.token);
@@ -143,10 +163,51 @@ export function LoginForm() {
     }
   };
 
+  const fillDefaultCredentials = async (username: string, password: string) => {
+    setFormData({
+      emailOrUsername: username,
+      password: password
+    });
+    setErrors({});
+    
+    // Auto-submit for better UX
+    await login({
+      variables: {
+        input: {
+          emailOrUsername: username,
+          password: password
+        }
+      }
+    });
+  };
+
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-      <div className="max-w-md w-full">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Tropical lagoon light scattering background animation - consistent with main app */}
+      <div className="lagoon-caustics">
+        <div className="caustic-layer caustic-layer-1"></div>
+        <div className="caustic-layer caustic-layer-2"></div>
+        <div className="caustic-layer caustic-layer-3"></div>
+        <div className="caustic-layer caustic-layer-4"></div>
+        <div className="caustic-layer caustic-layer-5"></div>
+        <div className="caustic-layer caustic-layer-6"></div>
+        <div className="caustic-layer caustic-layer-7"></div>
+        <div className="caustic-layer caustic-layer-8"></div>
+        <div className="caustic-layer caustic-layer-9"></div>
+        <div className="caustic-layer caustic-layer-10"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-6"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-7"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-8"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-9"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-10"></div>
+      </div>
+      <div className="max-w-md w-full relative z-10">
         {/* Header */}
         <div className="text-center mb-8">
           <Link to="/" className="flex items-center justify-center mb-4 hover:opacity-80 transition-opacity">
@@ -304,6 +365,45 @@ export function LoginForm() {
           )}
         </form>
 
+        {/* Development Mode - Default Credentials */}
+        {showDefaultCredentials && (
+          <div className="mt-6">
+            <div className="bg-amber-900/20 border border-amber-400/30 rounded-lg p-4 backdrop-blur-sm">
+              <div className="flex items-center mb-3">
+                <div className="w-2 h-2 bg-amber-400 rounded-full animate-pulse mr-2"></div>
+                <h3 className="text-sm font-medium text-amber-300">Development Mode - Default Accounts</h3>
+              </div>
+              <p className="text-xs text-amber-200/80 mb-3">
+                Quick access for testing. Please change these passwords in production!
+              </p>
+              <div className="space-y-2">
+                {defaultAccounts.map((account: any) => (
+                  <button
+                    key={account.username}
+                    onClick={() => fillDefaultCredentials(account.username, account.password)}
+                    className="w-full text-left p-3 bg-amber-800/20 hover:bg-amber-700/30 border border-amber-400/20 hover:border-amber-400/40 rounded transition-all group"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2">
+                          <span className="font-mono text-amber-300 font-medium">{account.username}</span>
+                          <span className="text-xs px-2 py-0.5 bg-amber-400/20 text-amber-300 rounded-full border border-amber-400/30">
+                            {account.role}
+                          </span>
+                        </div>
+                        <p className="text-xs text-amber-200/70 mt-1">{account.description}</p>
+                        <p className="text-xs text-amber-200/50 mt-1">Password: {account.password}</p>
+                      </div>
+                      <div className="text-amber-400 group-hover:text-amber-300 opacity-60 group-hover:opacity-100 transition-all">
+                        <ArrowRight className="h-4 w-4" />
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
 
         {/* Signup Link */}
         <div className="mt-6 text-center">
diff --git a/packages/web/src/pages/NodeList.tsx b/packages/web/src/pages/NodeList.tsx
index 276d9873..d6ecd415 100644
--- a/packages/web/src/pages/NodeList.tsx
+++ b/packages/web/src/pages/NodeList.tsx
@@ -18,7 +18,7 @@ export function NodeList() {
   return (
     <div className="h-screen flex flex-col">
       // Header
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl font-bold text-gray-100">Node List</h1>
@@ -38,7 +38,7 @@ export function NodeList() {
       </div>
 
       // Filters
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center space-x-4">
           <div className="flex-1 relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
diff --git a/packages/web/src/pages/Ontology.tsx b/packages/web/src/pages/Ontology.tsx
index b485f06e..09671785 100644
--- a/packages/web/src/pages/Ontology.tsx
+++ b/packages/web/src/pages/Ontology.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Plus, Search, Edit3, Trash2, Eye, Copy, Brain, Settings, X, Calendar, User, Hash } from 'lucide-react';
 import { useGraph } from '../contexts/GraphContext';
 import { useAuth } from '../contexts/AuthContext';
+import { APP_VERSION } from '../utils/version';
 import { 
   WORK_ITEM_TYPES, 
   getTypeIconElement, 
@@ -63,9 +64,7 @@ export function Ontology() {
       { id: 'description', name: 'description', type: 'text' as const, required: false },
       { id: 'type', name: 'type', type: 'text' as const, required: true },
       { id: 'status', name: 'status', type: 'text' as const, required: true },
-      { id: 'priorityExec', name: 'priorityExec', type: 'number' as const, required: false },
-      { id: 'priorityIndiv', name: 'priorityIndiv', type: 'number' as const, required: false },
-      { id: 'priorityComm', name: 'priorityComm', type: 'number' as const, required: false },
+      { id: 'priority', name: 'priority', type: 'number' as const, required: false },
       { id: 'assignedTo', name: 'assignedTo', type: 'text' as const, required: false },
       { id: 'dueDate', name: 'dueDate', type: 'text' as const, required: false },
       { id: 'tags', name: 'tags', type: 'text' as const, required: false }
@@ -118,10 +117,15 @@ export function Ontology() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-100">Ontology</h1>
+            <div className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-gray-100">Ontology</h1>
+              <span className="text-xs bg-gray-800/50 text-gray-400 px-2 py-1 rounded">
+                v{APP_VERSION}
+              </span>
+            </div>
             <p className="text-sm text-gray-400 mt-1">
               Define node types, relationships, and schemas for {currentGraph?.name || 'your graphs'}
             </p>
@@ -148,7 +152,7 @@ export function Ontology() {
       </div>
 
       {/* Tabs */}
-      <div className="bg-gray-900 border-b border-gray-700">
+      <div className="bg-gray-900/20 backdrop-blur-md border-b border-gray-700/30">
         <div className="px-6">
           <nav className="flex space-x-8">
             <button
diff --git a/packages/web/src/pages/Settings.tsx b/packages/web/src/pages/Settings.tsx
index f45d0a27..4bc39569 100644
--- a/packages/web/src/pages/Settings.tsx
+++ b/packages/web/src/pages/Settings.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Save, RotateCcw, Settings as SettingsIcon } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { CustomDropdown } from '../components/CustomDropdown';
+import { APP_VERSION } from '../utils/version';
 
 export function Settings() {
   const { currentUser } = useAuth();
@@ -31,10 +32,15 @@ export function Settings() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-100">Settings</h1>
+            <div className="flex items-center space-x-3">
+              <h1 className="text-2xl font-bold text-gray-100">Settings</h1>
+              <span className="text-xs bg-gray-800/50 text-gray-400 px-2 py-1 rounded">
+                v{APP_VERSION}
+              </span>
+            </div>
             <p className="text-sm text-gray-400 mt-1">
               Customize your GraphDone experience
             </p>
diff --git a/packages/web/src/pages/Signup.tsx b/packages/web/src/pages/Signup.tsx
index 8261b5ad..facbfda8 100644
--- a/packages/web/src/pages/Signup.tsx
+++ b/packages/web/src/pages/Signup.tsx
@@ -194,8 +194,31 @@ export function Signup() {
   const passwordStrength = getPasswordStrength(formData.password);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-      <div className="max-w-md w-full">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Tropical lagoon light scattering background animation - consistent with main app */}
+      <div className="lagoon-caustics">
+        <div className="caustic-layer caustic-layer-1"></div>
+        <div className="caustic-layer caustic-layer-2"></div>
+        <div className="caustic-layer caustic-layer-3"></div>
+        <div className="caustic-layer caustic-layer-4"></div>
+        <div className="caustic-layer caustic-layer-5"></div>
+        <div className="caustic-layer caustic-layer-6"></div>
+        <div className="caustic-layer caustic-layer-7"></div>
+        <div className="caustic-layer caustic-layer-8"></div>
+        <div className="caustic-layer caustic-layer-9"></div>
+        <div className="caustic-layer caustic-layer-10"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-6"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-7"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-8"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-9"></div>
+        <div className="lagoon-shimmer lagoon-shimmer-10"></div>
+      </div>
+      <div className="max-w-md w-full relative z-10">
         {/* Header */}
         <div className="text-center mb-8">
           <Link to="/" className="flex items-center justify-center mb-4 hover:opacity-80 transition-opacity">
diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index 36a92a93..9289dd34 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -1,22 +1,32 @@
 import { useState } from 'react';
-import { Plus, Share2, Users, Table, Activity, Network, CreditCard, Columns, CalendarDays, GanttChartSquare, LayoutDashboard } from 'lucide-react';
+import { Plus, Share2, Users, Table, Activity, Network, CreditCard, Columns, CalendarDays, GanttChartSquare, LayoutDashboard, Database, AlertTriangle, Map, X, Minimize2, Edit3, Trash2, FolderPlus } from 'lucide-react';
+import { createPortal } from 'react-dom';
 import { useQuery } from '@apollo/client';
 import { SafeGraphVisualization } from '../components/SafeGraphVisualization';
+import { GraphSelector } from '../components/GraphSelector';
 import { CreateNodeModal } from '../components/CreateNodeModal';
 import { CreateGraphModal } from '../components/CreateGraphModal';
 import { GraphSelectionModal } from '../components/GraphSelectionModal';
+import { UpdateGraphModal } from '../components/UpdateGraphModal';
+import { DeleteGraphModal } from '../components/DeleteGraphModal';
 import ViewManager from '../components/ViewManager';
 import { useGraph } from '../contexts/GraphContext';
 import { useAuth } from '../contexts/AuthContext';
 import { GET_WORK_ITEMS, GET_EDGES } from '../lib/queries';
+import { APP_VERSION } from '../utils/version';
+import { useHealthStatus } from '../hooks/useHealthStatus';
 
 export function Workspace() {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showCreateGraphModal, setShowCreateGraphModal] = useState(false);
+  const [showUpdateGraphModal, setShowUpdateGraphModal] = useState(false);
+  const [showDeleteGraphModal, setShowDeleteGraphModal] = useState(false);
   const [showGraphSelectionModal, setShowGraphSelectionModal] = useState(false);
   const [viewMode, setViewMode] = useState<'graph' | 'dashboard' | 'table' | 'cards' | 'kanban' | 'gantt' | 'calendar' | 'activity'>('graph');
+  const [showMiniMap, setShowMiniMap] = useState(true);
   const { currentGraph, availableGraphs } = useGraph();
   const { currentTeam, currentUser } = useAuth();
+  const { health, loading: healthLoading, error: healthError } = useHealthStatus();
 
   // Get real-time counts for header display
   const { data: workItemsData } = useQuery(GET_WORK_ITEMS, {
@@ -52,55 +62,43 @@ export function Workspace() {
   return (
     <div className="h-screen flex flex-col">
       {/* Header with Graph Context */}
-      <div className="bg-gray-800 border-b border-gray-700">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-            {/* Left Section: Graph Info and Navigation */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 lg:gap-8 flex-1">
-              {/* Graph Information */}
-              <div className="flex-shrink-0">
-                <h1 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-emerald-400 via-green-300 to-blue-400 bg-clip-text text-transparent">
-                  {currentGraph?.name || (availableGraphs.length > 0 ? 'Select a Graph' : 'Create a Graph')}
+      <div className="bg-gray-900/30 backdrop-blur-md border-b border-gray-700/30 px-6 py-4">
+        {/* Responsive Layout Container */}
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+          
+          {/* Left Section: Graph Selector */}
+          <div className="flex-1 min-w-0 lg:order-1 max-w-lg">
+            <div className="flex items-center space-x-4 h-full">
+              {/* Title & Version - Compact */}
+              <div className="flex flex-col justify-center">
+                <h1 className="text-sm font-medium text-gray-200 leading-tight">
+                  Graph Viewer
                 </h1>
-                <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-gray-400 mt-1">
+                <div className="flex items-center space-x-2 text-xs text-gray-400 leading-tight">
+                  <span>v{APP_VERSION}</span>
                   {currentTeam && (
                     <>
-                      <span>{currentTeam.name}</span>
-                      <span>•</span>
-                    </>
-                  )}
-                  {currentGraph && (
-                    <>
-                      <span className="whitespace-nowrap">{actualNodeCount} node{actualNodeCount !== 1 ? 's' : ''}</span>
-                      <span>•</span>
-                      <span className="whitespace-nowrap">{actualEdgeCount} connection{actualEdgeCount !== 1 ? 's' : ''}</span>
                       <span>•</span>
-                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border shadow-sm ${
-                        currentGraph.type === 'PROJECT' ? 'bg-blue-500/20 text-blue-300 border-blue-400/30' :
-                        currentGraph.type === 'WORKSPACE' ? 'bg-purple-500/20 text-purple-300 border-purple-400/30' :
-                        currentGraph.type === 'SUBGRAPH' ? 'bg-emerald-500/20 text-emerald-300 border-emerald-400/30' :
-                        currentGraph.type === 'TEMPLATE' ? 'bg-amber-500/20 text-amber-300 border-amber-400/30' :
-                        'bg-slate-500/20 text-slate-300 border-slate-400/30'
-                      }`}>
-                        {currentGraph.type}
-                      </span>
-                      {currentGraph.isShared && (
-                        <>
-                          <span>•</span>
-                          <div className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-300 border border-blue-400/30 shadow-sm">
-                            <Share2 className="h-3 w-3" />
-                            <span className="text-xs font-medium">Shared</span>
-                          </div>
-                        </>
-                      )}
+                      <span>{currentTeam.name}</span>
                     </>
                   )}
                 </div>
               </div>
               
-              {/* All Views Selector - Responsive */}
-              <div className="flex items-center flex-1 ml-8">
-                <div className="flex bg-gray-700/50 backdrop-blur-sm rounded-lg p-2 gap-1 sm:gap-2 lg:gap-4 overflow-x-auto w-full min-w-0">
+              {/* Graph Selector - Full Featured */}
+              <div className="flex-1 min-w-0">
+                <GraphSelector 
+                  onCreateGraph={() => setShowCreateGraphModal(true)}
+                  onEditGraph={(graph) => setShowUpdateGraphModal(true)}
+                  onDeleteGraph={(graph) => setShowDeleteGraphModal(true)}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Center Section: View Mode Buttons (Always Centered) */}
+          <div className="flex justify-center lg:order-2">
+            <div className="flex bg-gray-700/50 backdrop-blur-sm rounded-lg p-2 gap-1 border border-gray-600/50">
               <button
                 onClick={() => setViewMode('graph')}
                 className={`px-3 py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center space-y-2 ${
@@ -213,12 +211,27 @@ export function Workspace() {
                   Activity
                 </div>
               </button>
-                </div>
-              </div>
+            </div>
+          </div>
+
+          {/* Right Section: Status and Actions */}
+          <div className="flex flex-col lg:flex-row lg:items-center gap-3 lg:order-3">
+            {/* Neo4j Status Indicator */}
+            <div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs transition-all cursor-help ${
+              health?.services?.neo4j?.status === 'healthy' 
+                ? 'bg-green-600/20 text-green-300 border border-green-500/30' 
+                : 'bg-red-600/20 text-red-300 border border-red-500/30'
+            }`} title={
+              health?.services?.neo4j?.status === 'healthy' 
+                ? 'Neo4j Graph Database Connected - All graph operations available' 
+                : `Neo4j Graph Database Offline - Limited functionality${health?.services?.neo4j?.error ? `\nError: ${health.services.neo4j.error}` : ''}`
+            }>
+              <Database className="w-4 h-4" />
+              <span className="font-medium">
+                {health?.services?.neo4j?.status === 'healthy' ? 'Neo4j GraphDB' : 'Neo4j GraphDB Offline'}
+              </span>
             </div>
 
-            {/* Right Section: Actions */}
-            <div className="flex items-center gap-3 flex-shrink-0">
             {currentGraph?.isShared && (
               <button
                 type="button"
@@ -228,7 +241,6 @@ export function Workspace() {
                 Collaborators
               </button>
             )}
-            </div>
           </div>
         </div>
       </div>
@@ -236,10 +248,24 @@ export function Workspace() {
       {/* Main Content */}
       <div className="flex-1 relative">
         {!currentGraph ? (
-          <div className="h-full flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
-            <div className="text-center max-w-xl mx-auto px-6">
+          <div className="h-full flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative">
+            {/* Tropical lagoon light scattering background animation - zen mode for welcome page */}
+            <div className="lagoon-caustics absolute inset-0 opacity-30">
+              <div className="caustic-layer caustic-layer-1"></div>
+              <div className="caustic-layer caustic-layer-2"></div>
+              <div className="caustic-layer caustic-layer-3"></div>
+              <div className="caustic-layer caustic-layer-4"></div>
+              <div className="caustic-layer caustic-layer-5"></div>
+              <div className="lagoon-shimmer lagoon-shimmer-1"></div>
+              <div className="lagoon-shimmer lagoon-shimmer-2"></div>
+              <div className="lagoon-shimmer lagoon-shimmer-3"></div>
+              <div className="lagoon-shimmer lagoon-shimmer-4"></div>
+              <div className="lagoon-shimmer lagoon-shimmer-5"></div>
+            </div>
+
+            <div className="text-center max-w-xl mx-auto px-6 relative z-20">
               {/* Compact Icon */}
-              <div className="mx-auto mb-6 w-16 h-16 bg-gradient-to-br from-green-600 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
+              <div className="mx-auto mb-6 w-16 h-16 bg-gradient-to-br from-green-600 to-blue-600 rounded-xl flex items-center justify-center shadow-lg backdrop-blur-sm border border-green-400/20">
                 <Plus className="h-8 w-8 text-white" />
               </div>
 
@@ -265,7 +291,7 @@ export function Workspace() {
                   <>
                     <button
                       onClick={() => setShowGraphSelectionModal(true)}
-                      className="w-full px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+                      className="w-full px-6 py-3 bg-gray-700/80 hover:bg-gray-600/80 backdrop-blur-sm text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 border border-gray-600/30"
                     >
                       <svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
@@ -284,7 +310,7 @@ export function Workspace() {
 
                 <button
                   onClick={() => setShowCreateGraphModal(true)}
-                  className="w-full px-6 py-3 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+                  className="w-full px-6 py-3 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 text-white rounded-lg transition-all duration-200 font-medium flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 backdrop-blur-sm border border-green-400/30"
                 >
                   <Plus className="h-4 w-4 mr-2" />
                   Create New Graph
@@ -320,12 +346,79 @@ export function Workspace() {
             </div>
           </div>
         ) : viewMode === 'graph' ? (
-          <SafeGraphVisualization />
+          <div className="relative h-full">
+            {/* Neo4j Connection Warning */}
+            {health?.services?.neo4j?.status !== 'healthy' && (
+              <div className="absolute top-4 left-4 right-4 z-50">
+                <div className="bg-red-600/90 backdrop-blur-sm border border-red-500 rounded-lg p-4 shadow-lg">
+                  <div className="flex items-start gap-3">
+                    <AlertTriangle className="h-5 w-5 text-red-200 flex-shrink-0 mt-0.5" />
+                    <div>
+                      <h3 className="font-semibold text-red-100 mb-1">Database Connection Lost</h3>
+                      <p className="text-red-200 text-sm mb-2">
+                        Neo4j database is not available. Graph features are limited.
+                      </p>
+                      {health?.services?.neo4j?.error && (
+                        <p className="text-red-300 text-xs font-mono bg-red-800/30 px-2 py-1 rounded">
+                          {health.services.neo4j.error}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <SafeGraphVisualization />
+          </div>
         ) : (
           <ViewManager viewMode={viewMode as 'dashboard' | 'table' | 'cards' | 'kanban' | 'gantt' | 'calendar' | 'activity'} />
         )}
       </div>
 
+      {/* Mini-Map Navigation - Bottom Right Corner */}
+      {viewMode === 'graph' && currentGraph && showMiniMap && createPortal(
+        <div className="fixed bottom-4 right-4 w-64 h-48 bg-gray-800/95 backdrop-blur-sm border border-gray-600 rounded-lg shadow-xl z-50">
+          {/* Mini-Map Header */}
+          <div className="flex items-center justify-between p-3 border-b border-gray-700">
+            <div className="flex items-center gap-2">
+              <Map className="h-4 w-4 text-gray-400" />
+              <span className="text-sm font-medium text-gray-300">Mini-Map</span>
+            </div>
+            <button
+              onClick={() => setShowMiniMap(false)}
+              className="p-1 text-gray-400 hover:text-gray-300 hover:bg-gray-700 rounded transition-colors"
+              title="Hide Mini-Map"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          
+          {/* Mini-Map Content */}
+          <div className="p-3 h-32">
+            <div className="w-full h-full bg-gray-900/50 rounded border border-gray-600 flex items-center justify-center">
+              <div className="text-center text-gray-500">
+                <Map className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <p className="text-xs">Graph Overview</p>
+                <p className="text-xs opacity-75">Coming Soon</p>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Mini-Map Toggle Button - Shows when mini-map is hidden */}
+      {viewMode === 'graph' && currentGraph && !showMiniMap && createPortal(
+        <button
+          onClick={() => setShowMiniMap(true)}
+          className="fixed bottom-4 right-4 bg-gray-800/90 backdrop-blur-sm border border-gray-600 rounded-lg p-3 shadow-xl hover:bg-gray-700/90 transition-all duration-200 z-50"
+          title="Show Mini-Map"
+        >
+          <Map className="h-5 w-5 text-gray-400" />
+        </button>,
+        document.body
+      )}
+
       {/* Create Node Modal */}
       {showCreateModal && (
         <CreateNodeModal
@@ -349,6 +442,22 @@ export function Workspace() {
           onClose={() => setShowGraphSelectionModal(false)}
         />
       )}
+
+      {/* Update Graph Modal */}
+      {showUpdateGraphModal && currentGraph && (
+        <UpdateGraphModal
+          isOpen={showUpdateGraphModal}
+          onClose={() => setShowUpdateGraphModal(false)}
+        />
+      )}
+
+      {/* Delete Graph Modal */}
+      {showDeleteGraphModal && currentGraph && (
+        <DeleteGraphModal
+          isOpen={showDeleteGraphModal}
+          onClose={() => setShowDeleteGraphModal(false)}
+        />
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/packages/web/src/types/graph.ts b/packages/web/src/types/graph.ts
index 449942e4..2e3c002a 100644
--- a/packages/web/src/types/graph.ts
+++ b/packages/web/src/types/graph.ts
@@ -77,10 +77,7 @@ export interface WorkItem {
   description?: string;
   type: string;
   status: string;
-  priorityExec?: number;
-  priorityIndiv?: number;
-  priorityComm?: number;
-  priorityComp?: number;
+  priority?: number;
   dueDate?: string;
   tags?: string[];
   assignedTo?: {
@@ -103,12 +100,6 @@ export interface WorkItem {
   userId?: string;
   dependencies?: WorkItem[];
   dependents?: WorkItem[];
-  priority?: {
-    executive: number;
-    individual: number;
-    community: number;
-    computed: number;
-  };
 }
 
 // Import and re-export RelationshipType from central constants file
diff --git a/packages/web/src/utils/graphDataValidation.ts b/packages/web/src/utils/graphDataValidation.ts
index e87d5e6b..6674b7e8 100644
--- a/packages/web/src/utils/graphDataValidation.ts
+++ b/packages/web/src/utils/graphDataValidation.ts
@@ -211,7 +211,7 @@ function validateNode(node: any, index: number): ValidationError[] {
   // Validate numeric fields
   const numericFields = [
     'positionX', 'positionY', 'positionZ',
-    'priorityExec', 'priorityIndiv', 'priorityComm', 'priorityComp',
+    'priority',
     'x', 'y', 'z'
   ];
   
@@ -230,23 +230,20 @@ function validateNode(node: any, index: number): ValidationError[] {
     }
   });
   
-  // Validate priority values are between 0 and 1
-  const priorityFields = ['priorityExec', 'priorityIndiv', 'priorityComm', 'priorityComp'];
-  priorityFields.forEach(field => {
-    if (node[field] !== undefined && node[field] !== null) {
-      const value = node[field];
-      if (typeof value === 'number' && (value < 0 || value > 1)) {
-        errors.push({
-          type: 'error',
-          category: 'node',
-          itemId: node.id,
-          field,
-          message: `Node ${node.id} has priority value outside valid range [0,1]: ${value}`,
-          suggestion: 'Priority values should be between 0 and 1'
-        });
-      }
+  // Validate priority value is between 0 and 1
+  if (node.priority !== undefined && node.priority !== null) {
+    const value = node.priority;
+    if (typeof value === 'number' && (value < 0 || value > 1)) {
+      errors.push({
+        type: 'error',
+        category: 'node',
+        itemId: node.id,
+        field: 'priority',
+        message: `Node ${node.id} has priority value outside valid range [0,1]: ${value}`,
+        suggestion: 'Priority values should be between 0 and 1'
+      });
     }
-  });
+  }
   
   return errors;
 }
@@ -370,19 +367,13 @@ function sanitizeNode(node: any): any {
   if (sanitized.positionY === undefined) sanitized.positionY = 0;
   if (sanitized.positionZ === undefined) sanitized.positionZ = 0;
   
-  // Initialize priority fields
-  if (sanitized.priorityExec === undefined) sanitized.priorityExec = 0.5;
-  if (sanitized.priorityIndiv === undefined) sanitized.priorityIndiv = 0.5;
-  if (sanitized.priorityComm === undefined) sanitized.priorityComm = 0.5;
-  if (sanitized.priorityComp === undefined) sanitized.priorityComp = 0.5;
-  
-  // Clamp priority values to valid range
-  const priorityFields = ['priorityExec', 'priorityIndiv', 'priorityComm', 'priorityComp'];
-  priorityFields.forEach(field => {
-    if (typeof sanitized[field] === 'number') {
-      sanitized[field] = Math.max(0, Math.min(1, sanitized[field]));
-    }
-  });
+  // Initialize priority field
+  if (sanitized.priority === undefined) sanitized.priority = 0.5;
+  
+  // Clamp priority value to valid range
+  if (typeof sanitized.priority === 'number') {
+    sanitized.priority = Math.max(0, Math.min(1, sanitized.priority));
+  }
   
   // Remove any NaN or Infinity values
   Object.keys(sanitized).forEach(key => {
diff --git a/packages/web/src/utils/version.ts b/packages/web/src/utils/version.ts
new file mode 100644
index 00000000..fc57fd0f
--- /dev/null
+++ b/packages/web/src/utils/version.ts
@@ -0,0 +1 @@
+export const APP_VERSION = '0.3.1-alpha';
\ No newline at end of file
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 963b3284..f15b2dff 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -4,6 +4,31 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  safelist: [
+    // Gradient hover classes for ALL work item types (from central workItemConstants) - 20% opacity
+    // TASK (green-500)
+    'hover:from-green-500/20', 'hover:to-green-500/20',
+    // BUG (red-500)
+    'hover:from-red-500/20', 'hover:to-red-500/20',
+    // FEATURE (sky-500)
+    'hover:from-sky-500/20', 'hover:to-sky-500/20',
+    // EPIC (fuchsia-500)
+    'hover:from-fuchsia-500/20', 'hover:to-fuchsia-500/20',
+    // MILESTONE (orange-500)
+    'hover:from-orange-500/20', 'hover:to-orange-500/20',
+    // OUTCOME (indigo-500)
+    'hover:from-indigo-500/20', 'hover:to-indigo-500/20',
+    // IDEA (yellow-500)
+    'hover:from-yellow-500/20', 'hover:to-yellow-500/20',
+    // RESEARCH (teal-500)
+    'hover:from-teal-500/20', 'hover:to-teal-500/20',
+    // DEFAULT (gray-500)
+    'hover:from-gray-500/20', 'hover:to-gray-500/20',
+    // Border left hover classes for cards/dashboard
+    'hover:border-l-fuchsia-300/60', 'hover:border-l-orange-300/60', 'hover:border-l-indigo-300/60',
+    'hover:border-l-green-300/60', 'hover:border-l-red-300/60', 'hover:border-l-sky-300/60',
+    'hover:border-l-yellow-300/60', 'hover:border-l-teal-300/60', 'hover:border-l-gray-300/60'
+  ],
   theme: {
     extend: {
       fontFamily: {
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index 7bd3ad16..a58df866 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -16,24 +16,37 @@ export default defineConfig({
     port: Number(process.env.PORT) || 3127,
     strictPort: true, // Exit if port is already in use instead of trying next available
     allowedHosts: ['localhost', hostname(), '*.local', '.tailscale'], // Auto-detect hostname + common patterns
+    headers: {
+      'Cache-Control': 'no-cache, no-store, must-revalidate',
+      'Pragma': 'no-cache',
+      'Expires': '0'
+    },
     proxy: {
       '/graphql': {
-        target: 'http://localhost:4127',
+        target: process.env.VITE_PROXY_TARGET || 'http://localhost:4127',
         changeOrigin: true
       },
       '/health': {
-        target: 'http://localhost:4127',
+        target: process.env.VITE_PROXY_TARGET || 'http://localhost:4127',
         changeOrigin: true
       },
       '/mcp': {
-        target: 'http://localhost:4127',
+        target: process.env.VITE_PROXY_TARGET || 'http://localhost:4127',
         changeOrigin: true
       }
     }
   },
   build: {
     outDir: 'dist',
-    sourcemap: true
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        // Force new filenames to break cache
+        entryFileNames: `assets/[name]-${Date.now()}.js`,
+        chunkFileNames: `assets/[name]-${Date.now()}.js`,
+        assetFileNames: `assets/[name]-${Date.now()}.[ext]`
+      }
+    }
   },
   test: {
     globals: true,
diff --git a/start b/start
index b5e9f8d1..e2303215 100755
--- a/start
+++ b/start
@@ -424,9 +424,22 @@ cmd_remove() {
 
 cmd_stop() {
     log_info "🛑 Stopping all services..."
+    
+    # Stop Docker containers
     docker-compose -f deployment/docker-compose.yml down 2>/dev/null || true
     docker-compose -f deployment/docker-compose.dev.yml down 2>/dev/null || true
+    
+    # Stop npm processes
     pkill -f "npm run dev" 2>/dev/null || true
+    pkill -f "vite" 2>/dev/null || true
+    pkill -f "tsx.*watch" 2>/dev/null || true
+    
+    # Clean up any processes on GraphDone ports
+    lsof -ti:3127 | xargs -r kill -9 2>/dev/null || true
+    lsof -ti:4127 | xargs -r kill -9 2>/dev/null || true
+    lsof -ti:7474 | xargs -r kill -9 2>/dev/null || true
+    lsof -ti:7687 | xargs -r kill -9 2>/dev/null || true
+    
     log_success "✅ All services stopped"
 }
 
diff --git a/tools/run.sh b/tools/run.sh
index f028684f..0d26b78d 100755
--- a/tools/run.sh
+++ b/tools/run.sh
@@ -125,22 +125,23 @@ case $MODE in
             fi
         fi
         
+        # Clean up any existing Docker containers first
+        echo "🧹 Cleaning up any existing Docker containers..."
+        ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.yml down 2>/dev/null || true
+        ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.dev.yml down 2>/dev/null || true
+        
         # Check if database is running
-        echo "🔍 Checking Neo4j status..."
-        if ! ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.yml ps neo4j 2>/dev/null | grep -q "Up"; then
-            echo "🗄️  Starting Neo4j database..."
-            ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.yml up -d neo4j redis
-            echo "⏳ Waiting for Neo4j to be ready..."
-            
-            # Wait for Neo4j to be ready
-            until ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.yml exec -T neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null; do
-                echo "⏳ Neo4j not ready yet, waiting..."
-                sleep 3
-            done
-            echo "✅ Neo4j is ready!"
-        else
-            echo "✅ Neo4j is already running"
-        fi
+        echo "🔍 Starting database services..."
+        echo "🗄️  Starting Neo4j and Redis databases..."
+        ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.dev.yml up -d graphdone-neo4j graphdone-redis
+        echo "⏳ Waiting for Neo4j to be ready..."
+        
+        # Wait for Neo4j to be ready
+        until ${DOCKER_SUDO}docker-compose -f deployment/docker-compose.dev.yml exec -T graphdone-neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null; do
+            echo "⏳ Neo4j not ready yet, waiting..."
+            sleep 3
+        done
+        echo "✅ Neo4j is ready!"
         
         # Clean up any hanging processes on our ports
         echo "🧹 Cleaning up any processes on ports 3127 and 4127..."
diff --git a/tools/setup.sh b/tools/setup.sh
index 0c8ad4fa..cb95f361 100755
--- a/tools/setup.sh
+++ b/tools/setup.sh
@@ -211,20 +211,20 @@ fi
 # Start database
 echo "🗄️  Starting Neo4j database..."
 if [ "$DOCKER_SUDO" = "1" ]; then
-    sudo docker-compose -f deployment/docker-compose.yml up -d neo4j redis
+    sudo docker-compose -f deployment/docker-compose.yml up -d graphdone-neo4j graphdone-redis
 else
-    docker-compose -f deployment/docker-compose.yml up -d neo4j redis
+    docker-compose -f deployment/docker-compose.yml up -d graphdone-neo4j graphdone-redis
 fi
 
 # Wait for database to be ready
 echo "⏳ Waiting for Neo4j to be ready..."
 if [ "$DOCKER_SUDO" = "1" ]; then
-    until sudo docker-compose -f deployment/docker-compose.yml exec -T neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null; do
+    until sudo docker-compose -f deployment/docker-compose.yml exec -T graphdone-neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null; do
         echo "⏳ Neo4j not ready yet, waiting..."
         sleep 3
     done
 else
-    until docker-compose -f deployment/docker-compose.yml exec -T neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null; do
+    until docker-compose -f deployment/docker-compose.yml exec -T graphdone-neo4j cypher-shell -u neo4j -p graphdone_password "RETURN 1" 2>/dev/null; do
         echo "⏳ Neo4j not ready yet, waiting..."
         sleep 3
     done