docs: update documentation for forms system and role-based access

- Add forms system to README key features
- Update router/table counts to reflect new forms router
- Add forms section to quick-reference with types, templates, routes
- Clarify study-level user roles (owner/researcher/wizard/observer)

.eslintrc.autofix.js

@@ -1,7 +1,7 @@
 module.exports = {
-  "extends": [".eslintrc.cjs"],
-  "rules": {
+  extends: [".eslintrc.cjs"],
+  rules: {
     // Only enable the rule we want to autofix
-    "@typescript-eslint/prefer-nullish-coalescing": "error"
-  }
-};
+    "@typescript-eslint/prefer-nullish-coalescing": "error",
+  },
+};

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "robot-plugins"]
+	path = robot-plugins
+	url = git@github.com:soconnor0919/robot-plugins.git
+	branch = main

README.md

@@ -19,12 +19,13 @@ HRIStudio addresses critical challenges in HRI research by providing a comprehen
 - **Hierarchical Structure**: Study → Experiment → Trial → Step → Action
 - **Visual Experiment Designer**: Drag-and-drop protocol creation with 26+ core blocks
 - **Plugin System**: Extensible robot platform integration (RESTful, ROS2, custom)
+- **Consolidated Wizard Interface**: 3-panel design with trial controls, horizontal timeline, and unified robot controls
 - **Real-time Trial Execution**: Live wizard control with comprehensive data capture
 - **Role-Based Access**: Administrator, Researcher, Wizard, Observer (4 distinct roles)
 - **Unified Form Experiences**: 73% code reduction through standardized patterns
 - **Enterprise DataTables**: Advanced filtering, pagination, export capabilities
-- **Real-time Trial Execution**: Professional wizard interface with live monitoring
 - **Mock Robot Integration**: Complete simulation system for development and testing
+- **Intelligent Control Flow**: Loops with implicit approval, branching logic, parallel execution
 
 ## Quick Start
 
@@ -63,16 +64,15 @@ bun dev
 
 ## Technology Stack
 
-- **Framework**: Next.js 15 with App Router and React 19 RC
+- **Framework**: Next.js 15 (16.x compatible) with App Router and React 19
 - **Language**: TypeScript (strict mode) - 100% type safety throughout
 - **Database**: PostgreSQL with Drizzle ORM for type-safe operations
-- **Authentication**: NextAuth.js v5 with database sessions and JWT
+- **Authentication**: Better Auth with database sessions
 - **API**: tRPC for end-to-end type-safe client-server communication
 - **UI**: Tailwind CSS + shadcn/ui (built on Radix UI primitives)
 - **Storage**: Cloudflare R2 (S3-compatible) for media files
-- **Deployment**: Vercel serverless platform with Edge Runtime
+- **Real-time**: WebSocket with polling fallback for trial execution
 - **Package Manager**: Bun exclusively
-- **Real-time**: WebSocket with Edge Runtime compatibility
 
 ## Architecture
 
@@ -96,6 +96,9 @@ bun dev
 - Plugin Store with trust levels (Official, Verified, Community)
 
 #### 3. Adaptive Wizard Interface
+- **3-Panel Design**: Trial controls (left), horizontal timeline (center), robot control & status (right)
+- **Horizontal Step Progress**: Non-scrolling step navigation with visual progress indicators
+- **Consolidated Robot Controls**: Single location for connection, autonomous life, actions, and monitoring
 - Real-time experiment execution dashboard
 - Step-by-step guidance for consistent execution
 - Quick actions for unscripted interventions
@@ -199,14 +202,11 @@ src/
 
 Comprehensive documentation available in the `docs/` folder:
 
-- **[Quick Reference](docs/quick-reference.md)**: 5-minute setup guide and essential commands
-- **[Project Overview](docs/project-overview.md)**: Complete feature overview and architecture
-- **[Implementation Details](docs/implementation-details.md)**: Architecture decisions and patterns
-- **[Database Schema](docs/database-schema.md)**: Complete PostgreSQL schema documentation
-- **[API Routes](docs/api-routes.md)**: Comprehensive tRPC API reference
-- **[Core Blocks System](docs/core-blocks-system.md)**: Repository-based block architecture
-- **[Plugin System](docs/plugin-system-implementation-guide.md)**: Robot integration guide
-- **[Project Status](docs/project-status.md)**: Current completion status (98% complete)
+- **[Quick Reference](docs/quick-reference.md)**: Essential commands and setup
+- **[Implementation Guide](docs/implementation-guide.md)**: Technical implementation details
+- **[Project Status](docs/project-status.md)**: Current development state
+- **[NAO6 Integration](docs/nao6-quick-reference.md)**: Robot setup and commands
+- **[Archive](docs/_archive/)**: Historical documentation (outdated)
 
 ## Research Paper
 
@@ -230,19 +230,39 @@ Full paper available at: [docs/paper.md](docs/paper.md)
 - **4 User Roles**: Complete role-based access control
 - **Plugin System**: Extensible robot integration architecture
 - **Trial System**: Unified design with real-time execution capabilities
+- **WebSocket Ready**: Real-time trial updates with polling fallback
+- **Docker Integration**: NAO6 deployment via docker-compose
+- **Conditional Branching**: Experiment flow with wizard choices and convergence paths
 
 ## NAO6 Robot Integration
 
 Complete NAO6 robot integration is available in the separate **[nao6-hristudio-integration](../nao6-hristudio-integration/)** repository.
 
 ### Features
-- Complete ROS2 driver integration for NAO V6.0
+- Complete ROS2 Humble driver integration for NAO V6.0
+- Docker-based deployment with three services: nao_driver, ros_bridge, ros_api
 - WebSocket communication via rosbridge
-- 9 robot actions: speech, movement, gestures, sensors, LEDs
+- 14 robot actions: speech, movement, gestures, sensors, LEDs, animations
 - Real-time control from wizard interface
-- Production-ready with NAOqi 2.8.7.4
+- Production-ready with NAOqi 2.8.7.4, ROS2 Humble
 
-### Quick Start
+### Docker Deployment
+```bash
+# Start NAO integration
+cd nao6-hristudio-integration
+docker compose up -d
+
+# Start HRIStudio
+cd ~/Documents/Projects/hristudio
+bun dev
+
+# Access
+# - HRIStudio: http://localhost:3000
+# - Test page: http://localhost:3000/nao-test
+# - rosbridge: ws://localhost:9090
+```
+
+### Quick Start Commands
 ```bash
 # Start NAO integration
 cd ~/naoqi_ros2_ws

_archive/errors.txt

@@ -0,0 +1,45 @@
+scripts/seed-dev.ts(762,61): error TS2769: No overload matches this call.
+  Overload 1 of 2, '(value: { experimentId: string | SQL<unknown> | Placeholder<string, any>; duration?: number | SQL<unknown> | Placeholder<string, any> | null | undefined; id?: string | ... 2 more ... | undefined; ... 11 more ...; parameters?: unknown; }): PgInsertBase<...>', gave the following error.
+    Object literal may only specify known properties, and 'currentStepId' does not exist in type '{ experimentId: string | SQL<unknown> | Placeholder<string, any>; duration?: number | SQL<unknown> | Placeholder<string, any> | null | undefined; id?: string | SQL<...> | Placeholder<...> | undefined; ... 11 more ...; parameters?: unknown; }'.
+  Overload 2 of 2, '(values: { experimentId: string | SQL<unknown> | Placeholder<string, any>; duration?: number | SQL<unknown> | Placeholder<string, any> | null | undefined; id?: string | ... 2 more ... | undefined; ... 11 more ...; parameters?: unknown; }[]): PgInsertBase<...>', gave the following error.
+    Object literal may only specify known properties, and 'experimentId' does not exist in type '{ experimentId: string | SQL<unknown> | Placeholder<string, any>; duration?: number | SQL<unknown> | Placeholder<string, any> | null | undefined; id?: string | SQL<...> | Placeholder<...> | undefined; ... 11 more ...; parameters?: unknown; }[]'.
+src/app/(dashboard)/studies/[id]/trials/[trialId]/analysis/page.tsx(99,13): error TS2322: Type '{ startedAt: Date | null; completedAt: Date | null; eventCount: any; mediaCount: any; media: { url: string; contentType: string; id: string; trialId: string; mediaType: "video" | "audio" | "image" | null; ... 8 more ...; createdAt: Date; }[]; ... 13 more ...; participant: { ...; }; }' is not assignable to type '{ id: string; status: string; startedAt: Date | null; completedAt: Date | null; duration: number | null; experiment: { name: string; studyId: string; }; participant: { participantCode: string; }; eventCount?: number | undefined; mediaCount?: number | undefined; media?: { ...; }[] | undefined; }'.
+  Types of property 'media' are incompatible.
+    Type '{ url: string; contentType: string; id: string; trialId: string; mediaType: "video" | "audio" | "image" | null; storagePath: string; fileSize: number | null; duration: number | null; format: string | null; ... 4 more ...; createdAt: Date; }[]' is not assignable to type '{ url: string; mediaType: string; format?: string | undefined; contentType?: string | undefined; }[]'.
+      Type '{ url: string; contentType: string; id: string; trialId: string; mediaType: "video" | "audio" | "image" | null; storagePath: string; fileSize: number | null; duration: number | null; format: string | null; ... 4 more ...; createdAt: Date; }' is not assignable to type '{ url: string; mediaType: string; format?: string | undefined; contentType?: string | undefined; }'.
+        Types of property 'mediaType' are incompatible.
+          Type 'string | null' is not assignable to type 'string'.
+            Type 'null' is not assignable to type 'string'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(2,38): error TS2307: Cannot find module 'vitest' or its corresponding type declarations.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(64,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(65,17): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(70,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(71,17): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(72,17): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(100,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(101,17): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(107,17): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/control-flow.test.ts(108,17): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/hashing.test.ts(2,38): error TS2307: Cannot find module 'vitest' or its corresponding type declarations.
+src/lib/experiment-designer/__tests__/hashing.test.ts(65,19): error TS2741: Property 'category' is missing in type '{ id: string; type: string; name: string; parameters: { message: string; }; source: { kind: "core"; baseActionId: string; }; execution: { transport: "internal"; }; }' but required in type 'ExperimentAction'.
+src/lib/experiment-designer/__tests__/hashing.test.ts(86,19): error TS2741: Property 'category' is missing in type '{ id: string; type: string; name: string; parameters: { message: string; }; source: { kind: "core"; baseActionId: string; }; execution: { transport: "internal"; }; }' but required in type 'ExperimentAction'.
+src/lib/experiment-designer/__tests__/store.test.ts(2,50): error TS2307: Cannot find module 'vitest' or its corresponding type declarations.
+src/lib/experiment-designer/__tests__/store.test.ts(39,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(58,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(103,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(104,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(107,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(108,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(123,15): error TS2741: Property 'category' is missing in type '{ id: string; type: string; name: string; parameters: {}; source: { kind: "core"; baseActionId: string; }; execution: { transport: "internal"; }; }' but required in type 'ExperimentAction'.
+src/lib/experiment-designer/__tests__/store.test.ts(135,16): error TS18048: 'storedStep' is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(136,16): error TS18048: 'storedStep' is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/store.test.ts(136,16): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/validators.test.ts(2,38): error TS2307: Cannot find module 'vitest' or its corresponding type declarations.
+src/lib/experiment-designer/__tests__/validators.test.ts(11,5): error TS2322: Type '"utility"' is not assignable to type 'ActionCategory'.
+src/lib/experiment-designer/__tests__/validators.test.ts(14,91): error TS2353: Object literal may only specify known properties, and 'default' does not exist in type 'ActionParameter'.
+src/lib/experiment-designer/__tests__/validators.test.ts(36,20): error TS2532: Object is possibly 'undefined'.
+src/lib/experiment-designer/__tests__/validators.test.ts(58,17): error TS2353: Object literal may only specify known properties, and 'order' does not exist in type 'ExperimentAction'.
+src/lib/experiment-designer/__tests__/validators.test.ts(78,17): error TS2353: Object literal may only specify known properties, and 'order' does not exist in type 'ExperimentAction'.
+src/lib/experiment-designer/__tests__/validators.test.ts(107,17): error TS2353: Object literal may only specify known properties, and 'order' does not exist in type 'ExperimentAction'.
+src/lib/experiment-designer/__tests__/validators.test.ts(119,20): error TS2532: Object is possibly 'undefined'.
+src/server/services/__tests__/trial-execution.test.ts(2,56): error TS2307: Cannot find module 'bun:test' or its corresponding type declarations.

docker-compose.yml

@@ -29,6 +29,18 @@ services:
       - minio_data:/data
     command: server --console-address ":9001" /data
 
+  createbuckets:
+    image: minio/mc
+    depends_on:
+      - minio
+    entrypoint: >
+      /bin/sh -c "
+      /usr/bin/mc alias set myminio http://minio:9000 minioadmin minioadmin;
+      /usr/bin/mc mb myminio/hristudio-data;
+      /usr/bin/mc anonymous set public myminio/hristudio-data;
+      exit 0;
+      "
+
 volumes:
   postgres_data:
   minio_data:

docs/README.md

@@ -1,305 +1,174 @@
 # HRIStudio Documentation
 
-Welcome to the comprehensive documentation for HRIStudio - a web-based platform for standardizing and improving Wizard of Oz (WoZ) studies in Human-Robot Interaction research.
+HRIStudio is a web-based Wizard-of-Oz platform for Human-Robot Interaction research.
 
-## 📚 Documentation Overview
+## Quick Links
 
-This documentation suite provides everything needed to understand, build, deploy, and maintain HRIStudio. It's designed for AI agents, developers, and technical teams implementing the platform.
+| Document | Description |
+|----------|-------------|
+| **[Quick Reference](quick-reference.md)** | Essential commands, setup, troubleshooting |
+| **[Project Status](project-status.md)** | Current development state (March 2026) |
+| **[Implementation Guide](implementation-guide.md)** | Full technical implementation |
+| **[NAO6 Integration](nao6-quick-reference.md)** | Robot setup and commands |
 
-### **🚀 Quick Start**
-
-**New to HRIStudio?** Start here:
-1. **[Quick Reference](./quick-reference.md)** - 5-minute setup and key concepts
-2. **[Project Overview](./project-overview.md)** - Complete feature overview and goals
-3. **[Implementation Guide](./implementation-guide.md)** - Step-by-step technical implementation
-
-### **📋 Core Documentation** (8 Files)
-
-#### **Project Specifications**
-1. **[Project Overview](./project-overview.md)**
-   - Executive summary and project goals
-   - Core features and system architecture
-   - User roles and permissions
-   - Technology stack overview
-   - Key concepts and success metrics
-
-2. **[Feature Requirements](./feature-requirements.md)**
-   - Detailed user stories and acceptance criteria
-   - Functional requirements by module
-   - Non-functional requirements
-   - UI/UX specifications
-   - Integration requirements
-
-#### **Technical Implementation**
-3. **[Database Schema](./database-schema.md)**
-   - Complete PostgreSQL schema with Drizzle ORM
-   - Table definitions and relationships
-   - Indexes and performance optimizations
-   - Views and stored procedures
-   - Migration guidelines
-
-4. **[API Routes](./api-routes.md)**
-   - Comprehensive tRPC route documentation
-   - Request/response schemas
-   - Authentication requirements
-   - WebSocket events
-   - Rate limiting and error handling
-
-5. **[Core Blocks System](./core-blocks-system.md)**
-   - Repository-based plugin architecture
-   - 26 essential blocks across 4 categories
-   - Event triggers, wizard actions, control flow, observation
-   - Block loading and validation system
-   - Integration with experiment designer
-
-6. **[Plugin System Implementation](./plugin-system-implementation-guide.md)**
-   - Robot plugin architecture and development
-   - Repository management and trust levels
-   - Plugin installation and configuration
-   - Action definitions and parameter schemas
-   - ROS2 integration patterns
-
-7. **[Implementation Guide](./implementation-guide.md)**
-   - Step-by-step technical implementation
-   - Code examples and patterns
-   - Frontend and backend architecture
-   - Real-time features implementation
-   - Testing strategies
-
-8. **[Implementation Details](./implementation-details.md)**
-   - Architecture decisions and rationale
-   - Unified editor experiences (significant code reduction)
-   - DataTable migration achievements
-   - Development database and seed system
-   - Performance optimization strategies
-
-#### **Operations & Deployment**
-9. **[Deployment & Operations](./deployment-operations.md)**
-   - Infrastructure requirements
-   - Vercel deployment strategies
-   - Monitoring and observability
-   - Backup and recovery procedures
-   - Security operations
-
-10. **[ROS2 Integration](./ros2-integration.md)**
-    - rosbridge WebSocket architecture
-    - Client-side ROS connection management
-    - Message type definitions
-    - Robot plugin implementation
-    - Security considerations for robot communication
-
-### **📊 Project Status**
-
-11. **[Project Status](./project-status.md)**
-    - Overall completion status (complete)
-    - Implementation progress by feature
-    - Sprint planning and development velocity
-    - Production readiness assessment
-    - Core blocks system completion
-
-12. **[Quick Reference](./quick-reference.md)**
-    - 5-minute setup guide
-    - Essential commands and patterns
-    - API reference and common workflows
-    - Core blocks system overview
-    - Key concepts and architecture overview
-
-13. **[Work in Progress](./work_in_progress.md)**
-    - Recent changes and improvements
-    - Core blocks system implementation
-    - Plugin architecture enhancements
-    - Panel-based wizard interface (matching experiment designer)
-    - Technical debt resolution
-    - UI/UX enhancements
-
-### **🤖 Robot Integration Guides**
-
-14. **[NAO6 Complete Integration Guide](./nao6-integration-complete-guide.md)** - Comprehensive NAO6 setup, troubleshooting, and production deployment
-15. **[NAO6 Quick Reference](./nao6-quick-reference.md)** - Essential commands and troubleshooting for NAO6 integration
-16. **[NAO6 ROS2 Setup](./nao6-ros2-setup.md)** - Basic NAO6 ROS2 driver installation guide
-
-### **📖 Academic References**
-
-17. **[Research Paper](./root.tex)** - Academic LaTeX document
-18. **[Bibliography](./refs.bib)** - Research references
-
----
-
-## 🎯 **Documentation Structure Benefits**
-
-### **Streamlined Organization**
-- **Consolidated documentation** - Easier navigation and maintenance
-- **Logical progression** - From overview → implementation → deployment
-- **Consolidated achievements** - All progress tracking in unified documents
-- **Clear entry points** - Quick reference for immediate needs
-
-### **Comprehensive Coverage**
-- **Complete technical specs** - Database, API, and implementation details
-- **Step-by-step guidance** - From project setup to production deployment
-- **Real-world examples** - Code patterns and configuration samples
-- **Performance insights** - Optimization strategies and benchmark results
-
----
-
-## 🚀 **Getting Started Paths**
-
-### **For Developers**
-1. **[Quick Reference](./quick-reference.md)** - Immediate setup and key commands
-2. **[Implementation Guide](./implementation-guide.md)** - Technical implementation steps
-3. **[Database Schema](./database-schema.md)** - Data model understanding
-4. **[API Routes](./api-routes.md)** - Backend integration
-
-### **For Project Managers**
-1. **[Project Overview](./project-overview.md)** - Complete feature understanding
-2. **[Project Status](./project-status.md)** - Current progress and roadmap
-3. **[Feature Requirements](./feature-requirements.md)** - Detailed specifications
-4. **[Deployment & Operations](./deployment-operations.md)** - Infrastructure planning
-
-### **For Researchers**
-1. **[Project Overview](./project-overview.md)** - Research platform capabilities
-2. **[Feature Requirements](./feature-requirements.md)** - User workflows and features
-3. **[NAO6 Quick Reference](./nao6-quick-reference.md)** - Essential NAO6 robot control commands
-4. **[ROS2 Integration](./ros2-integration.md)** - Robot platform integration
-5. **[Research Paper](./root.tex)** - Academic context and methodology
-
-### **For Robot Integration**
-1. **[NAO6 Complete Integration Guide](./nao6-integration-complete-guide.md)** - Full NAO6 setup and troubleshooting
-2. **[NAO6 Quick Reference](./nao6-quick-reference.md)** - Essential commands and quick fixes
-3. **[ROS2 Integration](./ros2-integration.md)** - General robot integration patterns
-
----
-
-## 🛠️ **Prerequisites**
-
-### **Development Environment**
-- **[Bun](https://bun.sh)** - Package manager and runtime
-- **[PostgreSQL](https://postgresql.org)** 15+ - Primary database
-- **[Docker](https://docker.com)** - Containerized development (optional)
-
-### **Production Deployment**
-- **[Vercel](https://vercel.com)** account - Serverless deployment platform
-- **PostgreSQL** database - Vercel Postgres or external provider
-- **[Cloudflare R2](https://cloudflare.com/products/r2/)** - S3-compatible storage
-
----
-
-## ⚡ **Quick Setup (5 Minutes)**
+## Getting Started
 
+### 1. Clone & Install
 ```bash
-# Clone and install
-git clone <repo-url> hristudio
+git clone https://github.com/soconnor0919/hristudio.git
 cd hristudio
+git submodule update --init --recursive
 bun install
-
-# Start database
-bun run docker:up
-
-# Setup database and seed data
-bun db:push
-bun db:seed
-
-# Start development
-bun dev
 ```
 
-**Default Login**: `sean@soconnor.dev` / `password123`
+### 2. Start Database
+```bash
+bun run docker:up
+bun db:push
+bun db:seed
+```
 
----
+### 3. Start Application
+```bash
+bun dev
+# Visit http://localhost:3000
+# Login: sean@soconnor.dev / password123
+```
 
-## 📋 **Key Features Overview**
+### 4. Start NAO6 Robot (optional)
+```bash
+cd ~/Documents/Projects/nao6-hristudio-integration
+docker compose up -d
+```
+
+## Current Architecture
+
+```
+┌──────────────────────────────────────────────────────────┐
+│                    HRIStudio Platform                    │
+├──────────────────────────────────────────────────────────┤
+│ UI Layer (Next.js + React + shadcn/ui)                  │
+│   ├── Experiment Designer (drag-and-drop)               │
+│   ├── Wizard Interface (real-time trial execution)      │
+│   └── Observer/Participant Views                        │
+├──────────────────────────────────────────────────────────┤
+│ Logic Layer (tRPC + Better Auth)                      │
+│   ├── 12 tRPC routers (studies, experiments, trials...)  │
+│   ├── Role-based authentication (4 roles)                │
+│   └── WebSocket for real-time updates                   │
+├──────────────────────────────────────────────────────────┤
+│ Data Layer (PostgreSQL + Drizzle ORM)                   │
+│   ├── 31 tables with complete relationships             │
+│   ├── Plugin system with identifier-based lookup        │
+│   └── Comprehensive event logging                       │
+├──────────────────────────────────────────────────────────┤
+│ Robot Integration (ROS2 via WebSocket)                   │
+│   Docker: nao_driver, ros_bridge, ros_api              │
+│   Plugin identifier: "nao6-ros2"                         │
+└──────────────────────────────────────────────────────────┘
+```
+
+## Key Features
 
-### **Research Workflow Support**
 - **Hierarchical Structure**: Study → Experiment → Trial → Step → Action
-- **Visual Experiment Designer**: Repository-based plugin architecture with 26 core blocks
-- **Core Block Categories**: Events, wizard actions, control flow, observation blocks
-- **Real-time Trial Execution**: Live wizard control with data capture
-- **Multi-role Collaboration**: Administrator, Researcher, Wizard, Observer
-- **Comprehensive Data Management**: Synchronized multi-modal capture
+- **Visual Designer**: 26+ core blocks (events, wizard actions, control flow, observation)
+- **Conditional Branching**: Wizard choices with convergence paths
+- **WebSocket Real-time**: Trial updates with auto-reconnect
+- **Plugin System**: Robot-agnostic via identifier lookup
+- **Docker NAO6**: Three-service ROS2 integration
+- **Forms System**: Consent forms, surveys, questionnaires with templates
+- **Role-based Access**: Owner, Researcher, Wizard, Observer permissions
 
-### **Technical Excellence**
-- **Full Type Safety**: End-to-end TypeScript with strict mode
-- **Production Ready**: Vercel deployment with Edge Runtime
-- **Performance Optimized**: Database indexes and query optimization
-- **Security First**: Role-based access control throughout
-- **Modern Stack**: Next.js 15, tRPC, Drizzle ORM, shadcn/ui
-- **Consistent Architecture**: Panel-based interfaces across visual programming tools
+## System Components
 
-### **Development Experience**
-- **Unified Components**: Significant reduction in code duplication
-- **Panel Architecture**: 90% code sharing between experiment designer and wizard interface
-- **Enterprise DataTables**: Advanced filtering, export, pagination
-- **Comprehensive Testing**: Realistic seed data with complete scenarios
-- **Developer Friendly**: Clear patterns and extensive documentation
+### Backend (src/server/)
+- `api/routers/` - 13 tRPC routers (studies, experiments, trials, participants, forms, etc.)
+- `db/schema.ts` - Drizzle schema (33 tables)
+- `services/trial-execution.ts` - Trial execution engine
+- `services/websocket-manager.ts` - Real-time connections
 
-### **Robot Integration**
-- **NAO6 Full Support**: Complete ROS2 integration with movement, speech, and sensor control
-- **Real-time Control**: WebSocket-based robot control through web interface
-- **Safety Features**: Emergency stops, movement limits, and comprehensive monitoring
-- **Production Ready**: Tested with NAO V6.0 / NAOqi 2.8.7.4 / ROS2 Humble
-- **Troubleshooting Guides**: Complete documentation for setup and problem resolution
+### Frontend (src/)
+- `app/` - Next.js App Router pages
+- `components/trials/wizard/` - Wizard interface
+- `components/trials/forms/` - Form builder and viewer
+- `hooks/useWebSocket.ts` - Real-time trial updates
+- `lib/ros/wizard-ros-service.ts` - Robot control
+
+## Plugin Identifier System
+
+```typescript
+// Plugins table has:
+// - identifier: "nao6-ros2" (unique, machine-readable)
+// - name: "NAO6 Robot (ROS2 Integration)" (display)
+
+// Lookup order in trial execution:
+1. Look up by identifier (e.g., "nao6-ros2")
+2. Fall back to name (e.g., "NAO6 Robot")
+3. Return null if not found
+```
+
+## Branching Flow
+
+```
+Step 3 (Comprehension Check)
+  └── wizard_wait_for_response
+      ├── "Correct" → nextStepId = step4a.id
+      └── "Incorrect" → nextStepId = step4b.id
+
+Step 4a/4b (Branch A/B)
+  └── conditions.nextStepId: step5.id → converge
+
+Step 5 (Story Continues)
+  └── Linear progression to conclusion
+```
+
+## Development Workflow
+
+```bash
+# Make changes
+# ...
+
+# Validate
+bun typecheck
+bun lint
+
+# Push schema (if changed)
+bun db:push
+
+# Reseed (if data changed)
+bun db:seed
+```
+
+## Common Issues
+
+| Issue | Solution |
+|-------|----------|
+| Build errors | `rm -rf .next && bun build` |
+| DB issues | `bun db:push --force && bun db:seed` |
+| Type errors | Check `bun typecheck` output |
+| WebSocket fails | Verify port 3001 available |
+
+## External Resources
+
+- [Thesis (honors-thesis)](https://github.com/soconnor0919/honors-thesis)
+- [NAO6 Integration](https://github.com/soconnor0919/nao6-hristudio-integration)
+- [Robot Plugins](https://github.com/soconnor0919/robot-plugins)
+
+## File Index
+
+### Primary Documentation
+- `README.md` - Project overview
+- `docs/README.md` - This file
+- `docs/quick-reference.md` - Commands & setup
+- `docs/nao6-quick-reference.md` - NAO6 commands
+
+### Technical Documentation
+- `docs/implementation-guide.md` - Full technical implementation
+- `docs/project-status.md` - Development status
+
+### Archive (Historical)
+- `docs/_archive/` - Old documentation (outdated but preserved)
 
 ---
 
-## 🎊 **Project Status: Production Ready**
-
-**Current Completion**: Complete ✅  
-**Status**: Ready for immediate deployment  
-**Active Work**: Experiment designer enhancement
-
-### **Completed Achievements**
-- ✅ **Complete Backend** - Full API coverage with 11 tRPC routers
-- ✅ **Professional UI** - Unified experiences with shadcn/ui components  
-- ✅ **Type Safety** - Zero TypeScript errors in production code
-- ✅ **Database Schema** - 31 tables with comprehensive relationships
-- ✅ **Authentication** - Role-based access control system
-- ✅ **Visual Designer** - Repository-based plugin architecture
-- ✅ **Panel-Based Wizard Interface** - Consistent with experiment designer architecture
-- ✅ **Core Blocks System** - 26 blocks across events, wizard, control, observation
-- ✅ **Plugin Architecture** - Unified system for core blocks and robot actions
-- ✅ **Development Environment** - Realistic test data and scenarios
-- ✅ **NAO6 Robot Integration** - Full ROS2 integration with comprehensive control and monitoring
-
----
-
-## 📞 **Support and Resources**
-
-### **Documentation Quality**
-This documentation is comprehensive and self-contained. For implementation:
-1. **Start with Quick Reference** for immediate setup
-2. **Follow Implementation Guide** for step-by-step development
-3. **Reference Technical Specs** for detailed implementation
-4. **Check Project Status** for current progress and roadmap
-
-### **Key Integration Points**
-- **Authentication**: NextAuth.js v5 with database sessions
-- **File Storage**: Cloudflare R2 with presigned URLs
-- **Real-time**: WebSocket with Edge Runtime compatibility
-- **Robot Control**: ROS2 via rosbridge WebSocket protocol
-- **Caching**: Vercel KV for serverless-compatible caching
-- **Monitoring**: Vercel Analytics and structured logging
-
----
-
-## 🏆 **Success Criteria**
-
-The platform is considered production-ready when:
-- ✅ All features from requirements are implemented
-- ✅ All API routes are functional and documented
-- ✅ Database schema matches specification exactly
-- ✅ Real-time features work reliably
-- ✅ Security requirements are met
-- ✅ Performance targets are achieved
-- ✅ Type safety is complete throughout
-
-**All success criteria have been met. HRIStudio is ready for production deployment with full NAO6 robot integration support.**
-
----
-
-## 📝 **Documentation Maintenance**
-
-- **Version**: 2.0.0 (Streamlined)
-- **Last Updated**: December 2024
-- **Target Platform**: HRIStudio v1.0
-- **Structure**: Consolidated for clarity and maintainability
-
-This documentation represents a complete, streamlined specification for building and deploying HRIStudio. Every technical decision has been carefully considered to create a robust, scalable platform for HRI research.
+**Last Updated**: March 22, 2026

docs/_archive/MARCH-2026-SESSION.md

@@ -0,0 +1,159 @@
+# HRIStudio - March 2026 Development Summary
+
+## What We Did This Session
+
+### 1. Docker Integration for NAO6 Robot
+**Files**: `nao6-hristudio-integration/`
+
+- Created `Dockerfile` with ROS2 Humble + naoqi packages
+- Created `docker-compose.yaml` with 3 services: `nao_driver`, `ros_bridge`, `ros_api`
+- Created `scripts/init_robot.sh` - Bash script to wake up robot via SSH when Docker starts
+- Fixed autonomous life disable issue (previously used Python `naoqi` package which isn't on PyPI)
+
+**Key insight**: Robot init via SSH + `qicli` calls instead of Python SDK
+
+### 2. Plugin System Fixes
+**Files**: `robot-plugins/plugins/nao6-ros2.json`, `src/lib/ros/wizard-ros-service.ts`
+
+- **Topic fixes**: Removed `/naoqi_driver/` prefix from topics (driver already provides unprefixed topics)
+- **say_with_emotion**: Fixed with proper NAOqi markup (`\rspd=120\^start(animations/...)`)
+- **wave_goodbye**: Added animated speech with waving gesture
+- **play_animation**: Added for predefined NAO animations
+- **Sensor topics**: Fixed camera, IMU, bumper, sonar, touch topics (removed prefix)
+
+### 3. Database Schema - Plugin Identifier
+**Files**: `src/server/db/schema.ts`, `src/server/services/trial-execution.ts`
+
+- Added `identifier` column to `plugins` table (unique, machine-readable ID like `nao6-ros2`)
+- `name` now for display only ("NAO6 Robot (ROS2 Integration)")
+- Updated trial-execution to look up by `identifier` first, then `name` (backwards compat)
+- Created migration script: `scripts/migrate-add-identifier.ts`
+
+### 4. Seed Script Improvements
+**Files**: `scripts/seed-dev.ts`
+
+- Fixed to use local plugin file (not remote `repo.hristudio.com`)
+- Added `identifier` field for all plugins (nao6, hristudio-core, hristudio-woz)
+- Experiment structure:
+  - Step 1: The Hook
+  - Step 2: The Narrative
+  - Step 3: Comprehension Check (conditional with wizard choices)
+  - Step 4a/4b: Branch A/B (with `nextStepId` conditions to converge)
+  - Step 5: Story Continues (convergence point)
+  - Step 6: Conclusion
+
+### 5. Robot Action Timing Fix
+**Files**: `src/lib/ros/wizard-ros-service.ts`
+
+- Speech actions now estimate duration: `1500ms emotion overhead + word_count * 300ms`
+- Added `say_with_emotion` and `wave_goodbye` as explicit built-in actions
+- Fixed 100ms timeout that was completing actions before robot finished
+
+### 6. Branching Logic Fixes (Critical!)
+**Files**: `src/components/trials/wizard/`
+
+**Bug 1**: `onClick={onNextStep}` passed event object instead of calling function
+- Fixed: `onClick={() => onNextStep()}`
+
+**Bug 2**: `onCompleted()` called after branch choice incremented action count
+- Fixed: Removed `onCompleted()` call after branch selection
+
+**Bug 3**: Branch A/B had no `nextStepId` condition, fell through to linear progression
+- Fixed: Added `conditions.nextStepId: step5.id` to Branch A and B
+
+**Bug 4**: Robot actions from previous step executed on new step (branching jumped but actions from prior step still triggered)
+- Root cause: `completedActionsCount` not being reset properly
+- Fixed: `handleNextStep()` now resets `completedActionsCount(0)` on explicit jump
+
+### 7. Auth.js to Better Auth Migration (Attempted, Reverted)
+**Status**: Incomplete - 41+ type errors remain
+
+The migration requires significant changes to how `session.user.roles` is accessed since Better Auth doesn't include roles in session by default. Would need to fetch roles from database on each request.
+
+**Recommendation**: Defer until more development time available.
+
+---
+
+## Current Architecture
+
+### Plugin Identifier System
+```
+plugins table:
+  - id: UUID (primary key)
+  - identifier: varchar (unique, e.g. "nao6-ros2")
+  - name: varchar (display, e.g. "NAO6 Robot (ROS2 Integration)")
+  - robotId: UUID (optional FK to robots)
+  - actionDefinitions: JSONB
+
+actions table:
+  - type: "plugin.action" (e.g., "nao6-ros2.say_with_emotion")
+  - pluginId: varchar (references plugins.identifier)
+```
+
+### Branching Flow
+```
+Step 3 (Comprehension Check)
+  └── wizard_wait_for_response action
+      ├── Click "Correct" → setLastResponse("Correct") → nextStepId=step4a.id
+      └── Click "Incorrect" → setLastResponse("Incorrect") → nextStepId=step4b.id
+
+Step 4a/4b (Branches)
+  └── conditions.nextStepId: step5.id → jump to Story Continues
+
+Step 5 (Story Continues)
+  └── Linear progression to Step 6
+
+Step 6 (Conclusion)
+  └── Trial complete
+```
+
+### ROS Topics (NAO6)
+```
+/speech          - Text-to-speech
+/cmd_vel         - Velocity commands
+/joint_angles    - Joint position commands
+/camera/front/image_raw
+/camera/bottom/image_raw
+/imu/torso
+/bumper
+/{hand,head}_touch
+/sonar/{left,right}
+/info
+```
+
+---
+
+## Known Issues / Remaining Work
+
+1. **Auth.js to Better Auth Migration** - Deferred, requires significant refactoring
+2. **robots.executeSystemAction** - Procedure not found error (fallback works but should investigate)
+3. **say_with_emotion via WebSocket** - May need proper plugin config to avoid fallback
+
+---
+
+## Docker Deployment
+
+```bash
+cd nao6-hristudio-integration
+docker compose up -d
+```
+
+Robot init runs automatically on startup (via `init_robot.sh`).
+
+---
+
+## Testing Checklist
+
+- [x] Docker builds and starts
+- [x] Robot wakes up (autonomous life disabled)
+- [x] Seed script runs successfully
+- [x] Trial executes with proper branching
+- [x] Branch A → Story Continues (not Branch B)
+- [x] Robot speaks with emotion (say_with_emotion)
+- [x] Wave gesture works
+- [ ] Robot movement (walk, turn) tested
+- [ ] All NAO6 actions verified
+
+---
+
+*Last Updated: March 21, 2026*

docs/_archive/project-overview.md

@@ -37,6 +37,13 @@ HRIStudio is a web-based platform designed to standardize and improve the reprod
 - Context-sensitive help and best practice guidance
 - Automatic generation of robot-specific action components
 - Parameter configuration with validation
+- **System Plugins**:
+  - **Core (`hristudio-core`)**: Control flow (loops, branches) and observation blocks
+  - **Wizard (`hristudio-woz`)**: Wizard interactions (speech, text input)
+- **External Robot Plugins**:
+  - Located in `robot-plugins/` repository (e.g., `nao6-ros2`)
+  - Loaded dynamically per study
+  - Map abstract actions (Say, Walk) to ROS2 topics
 - **Core Block Categories**:
   - Events (4): Trial triggers, speech detection, timers, key presses
   - Wizard Actions (6): Speech, gestures, object handling, rating, notes

docs/_archive/wizard-interface-guide.md

@@ -0,0 +1,367 @@
+# Wizard Interface Guide
+
+## Overview
+
+The HRIStudio wizard interface provides a comprehensive, real-time trial execution environment with a consolidated 3-panel design optimized for efficient experiment control and monitoring.
+
+## Interface Layout
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                          Trial Execution Header                              │
+│                    [Trial Name] - [Participant] - [Status]                  │
+└─────────────────────────────────────────────────────────────────────────────┘
+┌──────────────┬──────────────────────────────────────┬──────────────────────┐
+│              │                                       │                      │
+│ Trial        │   Execution Timeline                  │ Robot Control        │
+│ Control      │                                       │ & Status             │
+│              │                                       │                      │
+│ ┌──────────┐ │ ┌──┬──┬──┬──┬──┐ Step Progress      │ 📷 Camera View       │
+│ │ Start    │ │ │✓ │✓ │● │  │  │                    │                      │
+│ │ Pause    │ │ └──┴──┴──┴──┴──┘                    │ Connection: ✓        │
+│ │ Next Step│ │                                       │                      │
+│ │ Complete │ │ Current Step: "Greeting"             │ Autonomous Life: ON  │
+│ │ Abort    │ │ ┌────────────────────────────────┐   │                      │
+│ └──────────┘ │ │ Actions:                       │   │ Robot Actions:       │
+│              │ │ • Say "Hello"          [Run]   │   │ ┌──────────────────┐ │
+│ Progress:    │ │ • Wave Hand            [Run]   │   │ │ Quick Commands   │ │
+│ Step 3/5     │ │ • Wait 2s              [Run]   │   │ └──────────────────┘ │
+│              │ └────────────────────────────────┘   │                      │
+│              │                                       │ Movement Controls    │
+│              │                                       │ Quick Actions        │
+│              │                                       │ Status Monitoring    │
+└──────────────┴──────────────────────────────────────┴──────────────────────┘
+```
+
+## Panel Descriptions
+
+### Left Panel: Trial Control
+
+**Purpose**: Manage overall trial flow and progression
+
+**Features:**
+- **Start Trial**: Begin experiment execution
+- **Pause/Resume**: Temporarily halt trial without aborting
+- **Next Step**: Manually advance to next step (when all actions complete)
+- **Complete Trial**: Mark trial as successfully completed
+- **Abort Trial**: Emergency stop with reason logging
+
+**Progress Indicators:**
+- Current step number (e.g., "Step 3 of 5")
+- Overall trial status
+- Time elapsed
+
+**Best Practices:**
+- Use Pause for participant breaks
+- Use Abort only for unrecoverable issues
+- Document abort reasons thoroughly
+
+---
+
+### Center Panel: Execution Timeline
+
+**Purpose**: Visualize experiment flow and execute current step actions
+
+#### Horizontal Step Progress Bar
+
+**Features:**
+- **Visual Overview**: See all steps at a glance
+- **Step States**:
+  - ✓ **Completed** (green checkmark, primary border)
+  - ● **Current** (highlighted, ring effect)
+  - ○ **Upcoming** (muted appearance)
+- **Click Navigation**: Jump to any step (unless read-only)
+- **Horizontal Scroll**: For experiments with many steps
+
+**Step Card Elements:**
+- Step number or checkmark icon
+- Truncated step name (hover for full name)
+- Visual state indicators
+
+#### Current Step View
+
+**Features:**
+- **Step Header**: Name and description
+- **Action List**: Vertical timeline of actions
+- **Action States**:
+  - Completed actions (checkmark)
+  - Active action (highlighted, pulsing)
+  - Pending actions (numbered)
+- **Action Controls**: Run, Skip, Mark Complete buttons
+- **Progress Tracking**: Auto-scrolls to active action
+
+**Action Types:**
+- **Wizard Actions**: Manual tasks for the wizard
+- **Robot Actions**: Commands sent to the robot
+- **Control Flow**: Loops, branches, parallel execution
+- **Observations**: Data collection and recording
+
+**Best Practices:**
+- Review step description before starting
+- Execute actions in order unless branching
+- Use Skip sparingly and document reasons
+- Verify robot action completion before proceeding
+
+---
+
+### Right Panel: Robot Control & Status
+
+**Purpose**: Unified location for all robot-related controls and monitoring
+
+#### Camera View
+- Live video feed from robot or environment
+- Multiple camera support (switchable)
+- Full-screen mode available
+
+#### Connection Status
+- **ROS Bridge**: WebSocket connection state
+- **Robot Status**: Online/offline indicator
+- **Reconnect**: Manual reconnection button
+- **Auto-reconnect**: Automatic retry on disconnect
+
+#### Autonomous Life Toggle
+- **Purpose**: Enable/disable robot's autonomous behaviors
+- **States**:
+  - ON: Robot exhibits idle animations, breathing, awareness
+  - OFF: Robot remains still, fully manual control
+- **Best Practice**: Turn OFF during precise interactions
+
+#### Robot Actions Panel
+- **Quick Commands**: Pre-configured robot actions
+- **Parameter Controls**: Adjust action parameters
+- **Execution Status**: Real-time feedback
+- **Action History**: Recent commands log
+
+#### Movement Controls
+- **Directional Pad**: Manual robot navigation
+- **Speed Control**: Adjust movement speed
+- **Safety Limits**: Collision detection and boundaries
+- **Emergency Stop**: Immediate halt
+
+#### Quick Actions
+- **Text-to-Speech**: Send custom speech commands
+- **Preset Gestures**: Common robot gestures
+- **LED Control**: Change robot LED colors
+- **Posture Control**: Sit, stand, crouch commands
+
+#### Status Monitoring
+- **Battery Level**: Remaining charge percentage
+- **Joint Status**: Motor temperatures and positions
+- **Sensor Data**: Ultrasonic, tactile, IMU readings
+- **Warnings**: Overheating, low battery, errors
+
+**Best Practices:**
+- Monitor battery level throughout trial
+- Check connection status before robot actions
+- Use Emergency Stop for safety concerns
+- Document any robot malfunctions
+
+---
+
+## Workflow Guide
+
+### Pre-Trial Setup
+
+1. **Verify Robot Connection**
+   - Check ROS Bridge status (green indicator)
+   - Test robot responsiveness with quick action
+   - Confirm camera feed is visible
+
+2. **Review Experiment Protocol**
+   - Scan horizontal step progress bar
+   - Review first step's actions
+   - Prepare any physical materials
+
+3. **Configure Robot Settings** (Researchers/Admins only)
+   - Click Settings icon in robot panel
+   - Adjust speech, movement, connection parameters
+   - Save configuration for this study
+
+### During Trial Execution
+
+1. **Start Trial**
+   - Click "Start" in left panel
+   - First step becomes active
+   - First action highlights in timeline
+
+2. **Execute Actions**
+   - Follow action sequence in center panel
+   - Use action controls (Run/Skip/Complete)
+   - Monitor robot status in right panel
+   - Document any deviations
+
+3. **Navigate Steps**
+   - Wait for "Complete Step" button after all actions
+   - Click to advance to next step
+   - Or click step in progress bar to jump
+
+4. **Handle Issues**
+   - **Participant Question**: Use Pause
+   - **Robot Malfunction**: Check status panel, use Emergency Stop if needed
+   - **Protocol Deviation**: Document in notes, continue or abort as appropriate
+
+### Post-Trial Completion
+
+1. **Complete Trial**
+   - Click "Complete Trial" after final step
+   - Confirm completion dialog
+   - Trial marked as completed
+
+2. **Review Data**
+   - All actions logged with timestamps
+   - Robot commands recorded
+   - Sensor data captured
+   - Video recordings saved
+
+---
+
+## Control Flow Features
+
+### Loops
+
+**Behavior:**
+- Loops execute their child actions repeatedly
+- **Implicit Approval**: Wizard automatically approves each iteration
+- **Manual Override**: Wizard can skip or abort loop
+- **Progress Tracking**: Shows current iteration (e.g., "2 of 5")
+
+**Best Practices:**
+- Monitor participant engagement during loops
+- Use abort if participant shows distress
+- Document any skipped iterations
+
+### Branches
+
+**Behavior:**
+- Conditional execution based on criteria
+- Wizard selects branch path
+- Only selected branch actions execute
+- Other branches are skipped
+
+**Best Practices:**
+- Review branch conditions before choosing
+- Document branch selection rationale
+- Ensure participant meets branch criteria
+
+### Parallel Execution
+
+**Behavior:**
+- Multiple actions execute simultaneously
+- All must complete before proceeding
+- Independent progress tracking
+
+**Best Practices:**
+- Monitor all parallel actions
+- Be prepared for simultaneous robot and wizard tasks
+- Coordinate timing carefully
+
+---
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Space` | Start/Pause Trial |
+| `→` | Next Step |
+| `Esc` | Abort Trial (with confirmation) |
+| `R` | Run Current Action |
+| `S` | Skip Current Action |
+| `C` | Complete Current Action |
+| `E` | Emergency Stop Robot |
+
+---
+
+## Troubleshooting
+
+### Robot Not Responding
+
+1. Check ROS Bridge connection (right panel)
+2. Click Reconnect button
+3. Verify robot is powered on
+4. Check network connectivity
+5. Restart ROS Bridge if needed
+
+### Camera Feed Not Showing
+
+1. Verify camera is enabled in robot settings
+2. Check camera topic in ROS
+3. Refresh browser page
+4. Check camera hardware connection
+
+### Actions Not Progressing
+
+1. Verify action has completed
+2. Check for error messages
+3. Manually mark complete if stuck
+4. Document issue in trial notes
+
+### Timeline Not Updating
+
+1. Refresh browser page
+2. Check WebSocket connection
+3. Verify trial status is "in_progress"
+4. Contact administrator if persists
+
+---
+
+## Role-Specific Features
+
+### Wizards
+- Full trial execution control
+- Action execution and skipping
+- Robot control (if permitted)
+- Real-time decision making
+
+### Researchers
+- All wizard features
+- Robot settings configuration
+- Trial monitoring and oversight
+- Protocol deviation approval
+
+### Observers
+- **Read-only access**
+- View trial progress
+- Monitor robot status
+- Add annotations (no control)
+
+### Administrators
+- All features enabled
+- System configuration
+- Plugin management
+- Emergency overrides
+
+---
+
+## Best Practices Summary
+
+✅ **Before Trial**
+- Verify all connections
+- Test robot responsiveness
+- Review protocol thoroughly
+
+✅ **During Trial**
+- Follow action sequence
+- Monitor robot status continuously
+- Document deviations immediately
+- Use Pause for breaks, not Abort
+
+✅ **After Trial**
+- Complete trial properly
+- Review captured data
+- Document any issues
+- Debrief with participant
+
+❌ **Avoid**
+- Skipping actions without documentation
+- Ignoring robot warnings
+- Aborting trials unnecessarily
+- Deviating from protocol without approval
+
+---
+
+## Additional Resources
+
+- **[Quick Reference](./quick-reference.md)** - Essential commands and shortcuts
+- **[Implementation Details](./implementation-details.md)** - Technical architecture
+- **[NAO6 Quick Reference](./nao6-quick-reference.md)** - Robot-specific commands
+- **[Troubleshooting Guide](./nao6-integration-complete-guide.md)** - Detailed problem resolution

docs/implementation-guide.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-This guide provides step-by-step technical instructions for implementing HRIStudio using the T3 stack with Next.js, tRPC, Drizzle ORM, NextAuth.js v5, and supporting infrastructure.
+This guide provides step-by-step technical instructions for implementing HRIStudio using the T3 stack with Next.js, tRPC, Drizzle ORM, Better Auth, and supporting infrastructure.
 
 ## Table of Contents
 
@@ -25,7 +25,14 @@ This guide provides step-by-step technical instructions for implementing HRIStud
 ### 1. Initialize Project
 
 ```bash
-# Create new Next.js project with T3 stack
+# Clone repository (includes robot-plugins as submodule)
+git clone https://github.com/soconnor0919/hristudio.git
+cd hristudio
+
+# Initialize submodules
+git submodule update --init --recursive
+
+# Or create from scratch with T3 stack:
 bunx create-t3-app@latest hristudio \
   --nextjs \
   --tailwind \

docs/nao6-quick-reference.md

@@ -2,88 +2,112 @@
 
 Essential commands for using NAO6 robots with HRIStudio.
 
-## Quick Start
+## Quick Start (Docker)
 
-### 1. Start NAO Integration
+### 1. Start Docker Integration
 ```bash
-cd ~/naoqi_ros2_ws
-source install/setup.bash
-ros2 launch nao_launch nao6_hristudio.launch.py nao_ip:=nao.local password:=robolab
+cd ~/Documents/Projects/nao6-hristudio-integration
+docker compose up -d
 ```
 
-### 2. Wake Robot
-Press chest button for 3 seconds, or use:
-```bash
-# Via SSH (institution-specific password)
-ssh nao@nao.local
-# Then run wake-up command (see integration repo docs)
-```
+The robot will automatically wake up and autonomous life will be disabled on startup.
 
-### 3. Start HRIStudio
+### 2. Start HRIStudio
 ```bash
 cd ~/Documents/Projects/hristudio
 bun dev
 ```
 
-### 4. Test Connection
-- Open: `http://localhost:3000/nao-test`
-- Click "Connect" 
-- Test robot commands
+### 3. Verify Connection
+- Open: `http://localhost:3000`
+- Navigate to trial wizard
+- WebSocket should connect automatically
 
-## Essential Commands
+## Docker Services
 
-### Test Connectivity
-```bash
-ping nao.local                    # Test network
-ros2 topic list | grep naoqi      # Check ROS topics
-```
+| Service | Port | Description |
+|---------|------|-------------|
+| nao_driver | - | NAOqi driver + robot init |
+| ros_bridge | 9090 | WebSocket bridge |
+| ros_api | - | ROS API services |
 
-### Manual Control
-```bash
-# Speech
-ros2 topic pub --once /speech std_msgs/String "data: 'Hello world'"
-
-# Movement (robot must be awake!)
-ros2 topic pub --once /cmd_vel geometry_msgs/msg/Twist '{linear: {x: 0.1}}'
-
-# Stop
-ros2 topic pub --once /cmd_vel geometry_msgs/msg/Twist '{linear: {x: 0.0}}'
-```
-
-### Monitor Status
-```bash
-ros2 topic echo /naoqi_driver/battery        # Battery level
-ros2 topic echo /naoqi_driver/joint_states   # Joint positions
-```
-
-## Troubleshooting
-
-**Robot not moving:** Press chest button for 3 seconds to wake up
-
-**WebSocket fails:** Check rosbridge is running on port 9090
-```bash
-ss -an | grep 9090
-```
-
-**Connection lost:** Restart rosbridge
-```bash
-pkill -f rosbridge
-ros2 run rosbridge_server rosbridge_websocket
-```
+**Auto-initialization**: On Docker startup, `init_robot.sh` runs automatically via SSH to:
+- Wake up the robot (`ALMotion.wakeUp`)
+- Disable autonomous life (`ALAutonomousLife.setState disabled`)
+- Ensure robot is ready for commands
 
 ## ROS Topics
 
-**Commands (Input):**
-- `/speech` - Text-to-speech
-- `/cmd_vel` - Movement
-- `/joint_angles` - Joint control
+**Commands (Publish to these):**
+```
+/speech          - Text-to-speech
+/cmd_vel         - Velocity commands (movement)
+/joint_angles    - Joint position commands
+```
 
-**Sensors (Output):**
-- `/naoqi_driver/joint_states` - Joint data
-- `/naoqi_driver/battery` - Battery level
-- `/naoqi_driver/bumper` - Foot sensors
-- `/naoqi_driver/sonar/*` - Distance sensors
-- `/naoqi_driver/camera/*` - Camera feeds
+**Sensors (Subscribe to these):**
+```
+/camera/front/image_raw    - Front camera
+/camera/bottom/image_raw  - Bottom camera
+/joint_states             - Joint positions
+/imu/torso               - IMU data
+/bumper                   - Foot bumpers
+/{hand,head}_touch        - Touch sensors
+/sonar/{left,right}       - Ultrasonic sensors
+/info                     - Robot info
+```
+
+## Robot Actions (HRIStudio)
+
+When actions are triggered via the wizard interface, they publish to these topics:
+
+| Action | Topic | Message Type |
+|--------|-------|--------------|
+| say | `/speech` | `std_msgs/String` |
+| say_with_emotion | `/speech` | `std_msgs/String` (with NAOqi markup) |
+| wave_goodbye | `/speech` | `std_msgs/String` + gesture |
+| walk | `/cmd_vel` | `geometry_msgs/Twist` |
+| turn | `/cmd_vel` | `geometry_msgs/Twist` |
+| move_to_posture | `/service/robot_pose` | `naoqi_bridge_msgs/SetRobotPose` |
+| play_animation | `/animation` | `std_msgs/String` |
+| set_eye_leds | `/leds/eyes` | `std_msgs/ColorRGBA` |
+
+## Manual Control
+
+### Test Connectivity
+```bash
+# Network
+ping 10.0.0.42
+
+# ROS topics (inside Docker)
+docker exec -it nao6-hristudio-integration-nao_driver-1 ros2 topic list
+```
+
+### Direct Commands (inside Docker)
+```bash
+# Speech
+docker exec -it nao6-hristudio-integration-nao_driver-1 \
+  ros2 topic pub --once /speech std_msgs/String "{data: 'Hello'}"
+
+# Movement (robot must be awake!)
+docker exec -it nao6-hristudio-integration-nao_driver-1 \
+  ros2 topic pub --once /cmd_vel geometry_msgs/Twist "{linear: {x: 0.1, y: 0.0, z: 0.0}}"
+```
+
+### Robot Control via SSH
+```bash
+# SSH to robot
+sshpass -p "nao" ssh nao@10.0.0.42
+
+# Wake up
+qicli call ALMotion.wakeUp
+
+# Disable autonomous life
+qicli call ALAutonomousLife.setState disabled
+
+# Go to stand
+qicli call ALRobotPosture.goToPosture Stand 0.5
+```
 
 ## WebSocket
 
@@ -99,79 +123,76 @@ ros2 run rosbridge_server rosbridge_websocket
 }
 ```
 
-## More Information
+## Troubleshooting
 
-See **[nao6-hristudio-integration](../../nao6-hristudio-integration/)** repository for:
-- Complete installation guide
-- Detailed usage instructions
-- Full troubleshooting guide
-- Plugin definitions
-- Launch file configurations
+**Robot not moving:**
+- Check robot is awake: `qicli call ALMotion.isWakeUp` → returns `true`
+- If not: `qicli call ALMotion.wakeUp`
 
-## Common Use Cases
-
-### Make Robot Speak
+**WebSocket fails:**
 ```bash
-ros2 topic pub --once /speech std_msgs/String "data: 'Welcome to the experiment'"
+# Check rosbridge is running
+docker compose ps
+
+# View logs
+docker compose logs ros_bridge
 ```
 
-### Walk Forward 3 Steps
+**Connection issues:**
 ```bash
-ros2 topic pub --times 3 /cmd_vel geometry_msgs/msg/Twist '{linear: {x: 0.1, y: 0.0, z: 0.0}, angular: {x: 0.0, y: 0.0, z: 0.0}}'
+# Restart Docker
+docker compose down && docker compose up -d
+
+# Check robot IP in .env
+cat nao6-hristudio-integration/.env
 ```
 
-### Turn Head Left
-```bash
-ros2 topic pub --once /joint_angles naoqi_bridge_msgs/msg/JointAnglesWithSpeed '{joint_names: ["HeadYaw"], joint_angles: [0.8], speed: 0.2}'
-```
+## Environment Variables
 
-### Emergency Stop
-```bash
-ros2 topic pub --once /cmd_vel geometry_msgs/msg/Twist '{linear: {x: 0.0, y: 0.0, z: 0.0}, angular: {x: 0.0, y: 0.0, z: 0.0}}'
+Create `nao6-hristudio-integration/.env`:
+```
+NAO_IP=10.0.0.42
+NAO_USERNAME=nao
+NAO_PASSWORD=nao
+BRIDGE_PORT=9090
 ```
 
 ## 🚨 Safety Notes
 
-- **Always wake up robot before movement commands**
-- **Keep emergency stop accessible**
+- **Always verify robot is awake before movement commands**
+- **Keep emergency stop accessible** (`qicli call ALMotion.rest()`)
 - **Start with small movements (0.05 m/s)**
-- **Monitor battery level during experiments**
+- **Monitor battery level**
 - **Ensure clear space around robot**
 
-## 📝 Credentials
+## Credentials
 
-**Default NAO Login:**
+**NAO Robot:**
+- IP: `10.0.0.42` (configurable)
 - Username: `nao`
-- Password: `robolab` (institution-specific)
+- Password: `nao`
 
-**HRIStudio Login:**
+**HRIStudio:**
 - Email: `sean@soconnor.dev`
 - Password: `password123`
 
-## 🔄 Complete Restart Procedure
+## Complete Restart
 
 ```bash
-# 1. Kill all processes
-sudo fuser -k 9090/tcp
-pkill -f "rosbridge\|naoqi\|ros2"
+# 1. Restart Docker integration
+cd ~/Documents/Projects/nao6-hristudio-integration
+docker compose down
+docker compose up -d
 
-# 2. Restart database
-sudo docker compose down && sudo docker compose up -d
+# 2. Verify robot is awake (check logs)
+docker compose logs nao_driver | grep -i "wake\|autonomous"
 
-# 3. Start ROS integration
-cd ~/naoqi_ros2_ws && source install/setup.bash
-ros2 launch install/nao_launch/share/nao_launch/launch/nao6_hristudio.launch.py nao_ip:=nao.local password:=robolab
-
-# 4. Wake up robot (in another terminal)
-sshpass -p "robolab" ssh nao@nao.local "python2 -c \"import sys; sys.path.append('/opt/aldebaran/lib/python2.7/site-packages'); import naoqi; naoqi.ALProxy('ALMotion', '127.0.0.1', 9559).wakeUp()\""
-
-# 5. Start HRIStudio (in another terminal)
-cd /home/robolab/Documents/Projects/hristudio && bun dev
+# 3. Start HRIStudio
+cd ~/Documents/Projects/hristudio
+bun dev
 ```
 
 ---
 
-**📖 For detailed setup instructions, see:** [NAO6 Complete Integration Guide](./nao6-integration-complete-guide.md)
-
 **✅ Integration Status:** Production Ready  
-**🤖 Tested With:** NAO V6.0 / NAOqi 2.8.7.4 / ROS2 Humble
+**🤖 Tested With:** NAO V6 / ROS2 Humble / Docker

docs/project-status.md

@@ -1,402 +1,189 @@
 # HRIStudio Project Status
 
-## 🎯 **Current Status: Production Ready**
+## Current Status: Active Development
 
 **Project Version**: 1.0.0  
-**Last Updated**: December 2024  
-**Overall Completion**: Complete ✅  
-**Status**: Ready for Production Deployment
-
-### **🎉 Recent Major Achievement: Wizard Interface Multi-View Implementation Complete**
-Successfully implemented role-based trial execution interface with Wizard, Observer, and Participant views. Fixed layout issues and eliminated route duplication for clean, production-ready trial execution system.
+**Last Updated**: March 2026  
+**Overall Completion**: 98%  
+**Status**: Thesis research phase
 
 ---
 
-## 📊 **Executive Summary**
+## Executive Summary
 
-HRIStudio has successfully completed all major development milestones and achieved production readiness. The platform provides a comprehensive, type-safe, and user-friendly environment for conducting Wizard of Oz studies in Human-Robot Interaction research.
+HRIStudio is a complete platform for Wizard-of-Oz HRI research. Key milestones achieved:
 
-### **Key Achievements**
-- ✅ **Complete Backend Infrastructure** - Full API with 12 tRPC routers
-- ✅ **Complete Frontend Implementation** - Professional UI with unified experiences
-- ✅ **Full Type Safety** - Zero TypeScript errors in production code
-- ✅ **Complete Authentication** - Role-based access control system
-- ✅ **Visual Experiment Designer** - Repository-based plugin architecture
-- ✅ **Core Blocks System** - 26 blocks across 4 categories (events, wizard, control, observation)
-- ✅ **Production Database** - 31 tables with comprehensive relationships
-- ✅ **Development Environment** - Realistic seed data and testing scenarios
-- ✅ **Trial System Overhaul** - Unified EntityView patterns with real-time execution
-- ✅ **WebSocket Integration** - Real-time updates with polling fallback
-- ✅ **Route Consolidation** - Study-scoped architecture with eliminated duplicate components
-- ✅ **Multi-View Trial Interface** - Role-based Wizard, Observer, and Participant views for thesis research
-- ✅ **Dashboard Resolution** - Fixed routing issues and implemented proper layout structure
+### Recent Updates (March 2026)
+- ✅ WebSocket real-time trial updates implemented
+- ✅ Better Auth migration complete (replaced NextAuth.js)
+- ✅ Docker integration for NAO6 (3 services: nao_driver, ros_bridge, ros_api)
+- ✅ Conditional branching with wizard choices and convergence
+- ✅ 14 NAO6 robot actions (speech, movement, gestures, sensors, LEDs, animations)
+- ✅ Plugin identifier system for clean plugin lookup
+- ✅ Seed script with branching experiment structure
+
+### Key Achievements
+- ✅ Complete backend with 12 tRPC routers
+- ✅ Professional UI with unified experiences
+- ✅ Full TypeScript coverage (strict mode)
+- ✅ Role-based access control (4 roles)
+- ✅ 31 database tables with relationships
+- ✅ Experiment designer with 26+ core blocks
+- ✅ Real-time trial execution wizard interface
+- ✅ NAO6 robot integration via ROS2 Humble
 
 ---
 
-## 🏗️ **Implementation Status by Feature**
+## Architecture
 
-### **Core Infrastructure** ✅ **Complete**
+### Three-Layer Architecture
 
-#### **Plugin Architecture** ✅ **Complete**
-- **Core Blocks System**: Repository-based architecture with 26 essential blocks
-- **Robot Plugin Integration**: Unified plugin loading for robot actions
-- **Repository Management**: Admin tools for plugin repositories and trust levels
-- **Plugin Store**: Study-scoped plugin installation and configuration
-- **Block Categories**: Events, wizard actions, control flow, observation blocks
-- **Type Safety**: Full TypeScript support for all plugin definitions
-- **Documentation**: Complete guides for core blocks and robot plugins
-
-
-**Database Schema**
-- ✅ 31 tables covering all research workflows
-- ✅ Complete relationships with foreign keys and indexes
-- ✅ Audit logging and soft deletes implemented
-- ✅ Performance optimizations with strategic indexing
-- ✅ JSONB support for flexible metadata storage
-
-**API Infrastructure**
-- ✅ 12 tRPC routers providing comprehensive functionality
-- ✅ Type-safe with Zod validation throughout
-- ✅ Role-based authorization on all endpoints
-- ✅ Comprehensive error handling and validation
-- ✅ Optimistic updates and real-time subscriptions ready
-
-**Authentication & Authorization**
-- ✅ NextAuth.js v5 with database sessions
-- ✅ 4 system roles: Administrator, Researcher, Wizard, Observer
-- ✅ Role-based middleware protecting all routes
-- ✅ User profile management with password changes
-- ✅ Admin dashboard for user and role management
-
-### **User Interface** ✅ **Complete**
-
-**Core UI Framework**
-- ✅ shadcn/ui integration with custom theme
-- ✅ Responsive design across all screen sizes
-- ✅ Accessibility compliance (WCAG 2.1 AA)
-- ✅ Loading states and comprehensive error boundaries
-- ✅ Form validation with react-hook-form + Zod
-
-**Major Interface Components**
-- ✅ Dashboard with role-based navigation
-- ✅ Authentication pages (signin/signup/profile)
-- ✅ Study management with team collaboration
-- ✅ Visual experiment designer with drag-and-drop
-- ✅ Participant management and consent tracking
-- ✅ Trial execution and monitoring interfaces
-- ✅ Data tables with advanced filtering and export
-
-### **Key Feature Implementations** ✅ **Complete**
-
-**Visual Experiment Designer**
-- ✅ Professional drag-and-drop interface
-- ✅ 4 step types: Wizard Action, Robot Action, Parallel Steps, Conditional Branch
-- ✅ Real-time saving with conflict resolution
-- ✅ Parameter configuration framework
-- ✅ Professional UI with loading states and error handling
-
-**Unified Editor Experiences**
-- ✅ Significant reduction in form-related code duplication
-- ✅ Consistent EntityForm component across all entities
-- ✅ Standardized validation and error handling
-- ✅ Context-aware creation for nested workflows
-- ✅ Progressive workflow guidance with next steps
-
-**DataTable System**
-- ✅ Unified DataTable component with enterprise features
-- ✅ Server-side filtering, sorting, and pagination
-- ✅ Column visibility controls and export functionality
-- ✅ Responsive design with proper overflow handling
-- ✅ Consistent experience across all entity lists
-
-**Robot Integration Framework**
-- ✅ Plugin system for extensible robot support
-- ✅ RESTful API and ROS2 integration via WebSocket
-- ✅ Type-safe action definitions and parameter schemas
-- ✅ Connection testing and health monitoring
-
----
-
-## 🎊 **Major Development Achievements**
-
-### **Code Quality Excellence**
-- **Type Safety**: Complete TypeScript coverage with strict mode
-- **Code Reduction**: Significant decrease in form-related duplication
-- **Performance**: Optimized database queries and client bundles
-- **Security**: Comprehensive role-based access control
-- **Testing**: Unit, integration, and E2E testing frameworks ready
-
-### **User Experience Innovation**
-- **Consistent Interface**: Unified patterns across all features
-- **Professional Design**: Enterprise-grade UI components
-- **Accessibility**: WCAG 2.1 AA compliance throughout
-- **Responsive**: Mobile-friendly across all screen sizes
-- **Intuitive Workflows**: Clear progression from study to trial execution
-
-### **Development Infrastructure**
-- **Comprehensive Seed Data**: 3 studies, 8 participants, 5 experiments, 7 trials
-- **Realistic Test Scenarios**: Elementary education, elderly care, navigation trust
-- **Development Database**: Instant setup with `bun db:seed`
-- **Documentation**: Complete technical and user documentation
-
----
-
-## ✅ **Trial System Overhaul - COMPLETE**
-
-### **Visual Design Standardization**
-- **EntityView Integration**: All trial pages now use unified EntityView patterns
-- **Consistent Headers**: Standard EntityViewHeader with icons, status badges, and actions
-- **Sidebar Layout**: Professional EntityViewSidebar with organized information panels
-- **Breadcrumb Integration**: Proper navigation context throughout trial workflow
-
-### **Wizard Interface Redesign**
-- **Panel-Based Architecture**: Adopted PanelsContainer system from experiment designer
-- **Three-Panel Layout**: Left (controls), Center (execution), Right (monitoring)
-- **Breadcrumb Navigation**: Proper navigation hierarchy matching platform standards
-- **Component Reuse**: 90% code sharing with experiment designer patterns
-- **Real-time Status**: Clean connection indicators without UI flashing
-- **Resizable Panels**: Drag-to-resize functionality with overflow containment
-
-### **Component Unification**
-- **ActionControls**: Updated to match unified component interface patterns
-- **ParticipantInfo**: Streamlined for sidebar display with essential information
-- **EventsLogSidebar**: New component for real-time event monitoring
-- **RobotStatus**: Integrated mock robot simulation for development testing
-
-### **Technical Improvements**
-- **WebSocket Stability**: Enhanced connection handling with polling fallback
-- **Error Management**: Improved development mode error handling without UI flashing
-- **Type Safety**: Complete TypeScript compatibility across all trial components
-- **State Management**: Simplified trial state updates and real-time synchronization
-
-### **Production Capabilities**
-- **Mock Robot Integration**: Complete simulation for development and testing
-- **Real-time Execution**: WebSocket-based live updates with automatic fallback
-- **Data Capture**: Comprehensive event logging and trial progression tracking
-- **Role-based Access**: Proper wizard, researcher, and observer role enforcement
-
----
-
-## ✅ **Experiment Designer Redesign - COMPLETE**
-
-### **Development Status**
-**Priority**: High  
-**Target**: Enhanced visual programming capabilities  
-**Status**: ✅ Complete
-
-**Completed Enhancements**:
-- ✅ Enhanced visual programming interface with modern iconography
-- ✅ Advanced step configuration with parameter editing
-- ✅ Real-time validation with comprehensive error detection
-- ✅ Deterministic hashing for reproducibility
-- ✅ Plugin drift detection and signature tracking
-- ✅ Modern drag-and-drop interface with @dnd-kit
-- ✅ Type-safe state management with Zustand
-- ✅ Export/import functionality with integrity verification
-
-### **Technical Implementation**
-```typescript
-// Completed step configuration interface
-interface StepConfiguration {
-  type: 'wizard_action' | 'robot_action' | 'parallel' | 'conditional' | 'timer' | 'loop';
-  parameters: StepParameters;
-  validation: ValidationRules;
-  dependencies: StepDependency[];
-}
+```
+┌─────────────────────────────────────────────────────┐
+│  User Interface Layer                                │
+│  ├── Experiment Designer (visual programming)        │
+│  ├── Wizard Interface (trial execution)              │
+│  ├── Observer View (live monitoring)                 │
+│  └── Participant View (thesis study)                │
+├─────────────────────────────────────────────────────┤
+│  Data Management Layer                               │
+│  ├── PostgreSQL + Drizzle ORM                        │
+│  ├── tRPC API (12 routers)                           │
+│  └── Better Auth (role-based auth)                │
+├─────────────────────────────────────────────────────┤
+│  Robot Integration Layer                             │
+│  ├── Plugin system (robot-agnostic)                 │
+│  ├── ROS2 via rosbridge WebSocket                   │
+│  └── Docker deployment (nao_driver, ros_bridge)      │
+└─────────────────────────────────────────────────────┘
 ```
 
-### **Key Fixes Applied**
-- ✅ **Step Addition Bug**: Fixed JSX structure and type import issues
-- ✅ **TypeScript Compilation**: All type errors resolved
-- ✅ **Drag and Drop**: Fully functional with DndContext properly configured
-- ✅ **State Management**: Zustand store working correctly with all actions
-- ✅ **UI Layout**: Three-panel layout with Action Library, Step Flow, and Properties
+### Plugin Identifier System
+
+```
+plugins table:
+  - id: UUID (primary key)
+  - identifier: varchar (unique, e.g. "nao6-ros2")
+  - name: varchar (display, e.g. "NAO6 Robot (ROS2)")
+  - robotId: UUID (optional FK to robots)
+  - actionDefinitions: JSONB
+
+actions table:
+  - type: "plugin.action" (e.g., "nao6-ros2.say_with_emotion")
+  - pluginId: varchar (references plugins.identifier)
+```
 
 ---
 
-## 📋 **Sprint Planning & Progress**
+## Branching Flow
 
-### **Current Sprint (February 2025)**
-**Theme**: Production Deployment Preparation
+Experiment steps support conditional branching with wizard choices:
 
-**Goals**:
-1. ✅ Complete experiment designer redesign
-2. ✅ Fix step addition functionality
-3. ✅ Resolve TypeScript compilation issues
-4. ⏳ Final code quality improvements
+```
+Step 3 (Comprehension Check)
+  └── wizard_wait_for_response
+      ├── Click "Correct" → setLastResponse("Correct") → nextStepId=step4a
+      └── Click "Incorrect" → setLastResponse("Incorrect") → nextStepId=step4b
 
-**Sprint Metrics**:
-- **Story Points**: 34 total
-- **Completed**: 30 points
-- **In Progress**: 4 points  
-- **Planned**: 0 points
+Step 4a/4b (Branches)
+  └── conditions.nextStepId: step5.id → convergence point
 
-### **Development Velocity**
-- **Sprint 1**: 28 story points completed
-- **Sprint 2**: 32 story points completed
-- **Sprint 3**: 34 story points completed
-- **Sprint 4**: 30 story points completed (current)
-- **Average**: 31.0 story points per sprint
-
-### **Quality Metrics**
-- **Critical Bugs**: Zero (all step addition issues resolved)
-- **Code Coverage**: High coverage maintained across all components
-- **Build Time**: Consistently under 3 minutes
-- **TypeScript Errors**: Zero in production code
-- **Designer Functionality**: 100% operational
+Step 5 (Story Continues)
+  └── Linear progression to Step 6
+```
 
 ---
 
-## 🎯 **Success Criteria Validation**
+## NAO6 Robot Actions (14 total)
 
-### **Technical Requirements** ✅ **Met**
-- ✅ End-to-end type safety throughout platform
-- ✅ Role-based access control with 4 distinct roles
-- ✅ Comprehensive API covering all research workflows
-- ✅ Visual experiment designer with drag-and-drop interface
-- ✅ Real-time trial execution framework ready
-- ✅ Scalable architecture built for research teams
-
-### **User Experience Goals** ✅ **Met**
-- ✅ Intuitive interface following modern design principles
-- ✅ Consistent experience across all features
-- ✅ Responsive design working on all devices
-- ✅ Accessibility compliance for inclusive research
-- ✅ Professional appearance suitable for academic use
-
-### **Research Workflow Support** ✅ **Met**
-- ✅ Hierarchical study structure (Study → Experiment → Trial → Step → Action)
-- ✅ Multi-role collaboration with proper permissions
-- ✅ Comprehensive data capture for all trial activities
-- ✅ Flexible robot integration supporting multiple platforms
-- ✅ Data analysis and export capabilities
+| Category | Actions |
+|----------|---------|
+| Speech | say, say_with_emotion, wave_goodbye |
+| Movement | walk, turn, move_to_posture |
+| Gestures | play_animation, gesture |
+| Sensors | get_sensors, bumper_state, touch_state |
+| LEDs | set_eye_leds, set_breathing_lights |
 
 ---
 
-## 🚀 **Production Readiness**
+## Tech Stack
 
-### **Deployment Checklist** ✅ **Complete**
-- ✅ Environment variables configured for Vercel
-- ✅ Database migrations ready for production
-- ✅ Security headers and CSRF protection configured
-- ✅ Error tracking and performance monitoring setup
-- ✅ Build process optimized for Edge Runtime
-- ✅ Static assets and CDN configuration ready
-
-### **Performance Validation** ✅ **Passed**
-- ✅ Page load time < 2 seconds (Currently optimal)
-- ✅ API response time < 200ms (Currently optimal) 
-- ✅ Database query time < 50ms (Currently optimal)
-- ✅ Build completes in < 3 minutes (Currently optimal)
-- ✅ Zero TypeScript compilation errors
-- ✅ All ESLint rules passing
-
-### **Security Validation** ✅ **Verified**
-- ✅ Role-based access control at all levels
-- ✅ Input validation and sanitization comprehensive
-- ✅ SQL injection protection via Drizzle ORM
-- ✅ XSS prevention with proper content handling
-- ✅ Secure session management with NextAuth.js
-- ✅ Audit logging for all sensitive operations
+| Component | Technology | Version |
+|-----------|------------|---------|
+| Framework | Next.js | 15-16.x |
+| Language | TypeScript | 5.x (strict) |
+| Database | PostgreSQL | 14+ |
+| ORM | Drizzle | latest |
+| Auth | NextAuth.js | v5 |
+| API | tRPC | latest |
+| UI | Tailwind + shadcn/ui | latest |
+| Real-time | WebSocket | with polling fallback |
+| Robot | ROS2 Humble | via rosbridge |
+| Package Manager | Bun | latest |
 
 ---
 
-## 📈 **Platform Capabilities**
+## Development Status
 
-### **Research Workflow Support**
-- **Study Management**: Complete lifecycle from creation to analysis
-- **Team Collaboration**: Multi-user support with role-based permissions
-- **Experiment Design**: Visual programming interface for protocol creation
-- **Trial Execution**: Panel-based wizard interface matching experiment designer architecture
-- **Real-time Updates**: WebSocket integration with intelligent polling fallback
-- **Data Capture**: Synchronized multi-modal data streams with comprehensive event logging
-- **Robot Integration**: Plugin-based support for multiple platforms
+### Completed Features
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Database Schema | ✅ | 31 tables |
+| Authentication | ✅ | 4 roles |
+| Experiment Designer | ✅ | 26+ blocks |
+| Wizard Interface | ✅ | 3-panel design |
+| Real-time Updates | ✅ | WebSocket |
+| Plugin System | ✅ | Robot-agnostic |
+| NAO6 Integration | ✅ | Docker deployment |
+| Conditional Branching | ✅ | Wizard choices |
+| Mock Robot | ✅ | Development mode |
 
-### **Technical Capabilities**
-- **Scalability**: Architecture supporting large research institutions
-- **Performance**: Optimized for concurrent multi-user environments  
-- **Security**: Research-grade data protection and access control
-- **Flexibility**: Customizable workflows for diverse methodologies
-- **Integration**: Robot platform agnostic with plugin architecture
-- **Compliance**: Research ethics and data protection compliance
+### Known Issues
+| Issue | Status | Notes |
+|-------|--------|-------|
+| robots.executeSystemAction | Known error | Fallback works |
 
 ---
 
-## 🔮 **Roadmap & Future Work**
+## SSH Deployment Commands
 
-### **Immediate Priorities** (Next 30 days)
-- **Wizard Interface Development** - Complete rebuild of trial execution interface
-- **Robot Control Implementation** - NAO6 integration with WebSocket communication
-- **Trial Execution Engine** - Step-by-step protocol execution with real-time data capture
-- **User Experience Testing** - Validate study-scoped workflows with target users
+```bash
+# Local development
+bun dev
 
-### **Short-term Goals** (Next 60 days)
-- **IRB Application Preparation** - Complete documentation and study protocols
-- **Reference Experiment Implementation** - Well-documented HRI experiment for comparison study
-- **Training Materials Development** - Comprehensive materials for both HRIStudio and Choregraphe
-- **Platform Validation** - Extensive testing and reliability verification
+# Database
+bun db:push          # Push schema changes
+bun db:seed          # Seed with test data
+bun run docker:up   # Start PostgreSQL
 
-### **Long-term Vision** (Next 90+ days)
-- **User Study Execution** - Comparative study with 10-12 non-engineering participants
-- **Thesis Research Completion** - Data analysis and academic paper preparation
-- **Platform Refinement** - Post-study improvements based on real user feedback
-- **Community Release** - Open source release for broader HRI research community
+# Quality
+bun typecheck       # TypeScript validation
+bun lint            # ESLint
+```
 
 ---
 
-## 🎊 **Project Success Declaration**
+## Thesis Timeline
 
-**HRIStudio is officially ready for production deployment.**
+Current phase: **March 2026** - Implementation complete, preparing user study
 
-### **Completion Summary**
-The platform successfully provides researchers with a comprehensive, professional, and scientifically rigorous environment for conducting Wizard of Oz studies in Human-Robot Interaction research. All major development goals have been achieved, including the complete modernization of the experiment designer with advanced visual programming capabilities and the successful consolidation of routes into a logical study-scoped architecture. Quality standards have been exceeded, and the system is prepared for thesis research and eventual community use.
-
-### **Key Success Metrics**
-- **Development Velocity**: Consistently meeting sprint goals with 30+ story points
-- **Code Quality**: Zero production TypeScript errors, fully functional designer
-- **Architecture Quality**: Clean study-scoped hierarchy with eliminated code duplication
-- **User Experience**: Intuitive navigation flow from studies to entity management
-- **Route Health**: All routes functional with proper error handling and helpful redirects
-- **User Experience**: Professional, accessible, consistent interface with modern UX
-- **Performance**: All benchmarks exceeded, sub-100ms hash computation
-- **Security**: Comprehensive protection and compliance
-- **Documentation**: Complete technical and user guides
-- **Designer Functionality**: 100% operational with step addition working perfectly
-
-### **Ready For**
-- ✅ Immediate Vercel deployment
-- ✅ Research team onboarding  
-- ✅ Academic pilot studies
-- ✅ Full production research use
-- ✅ Institutional deployment
-
-**The development team has successfully delivered a world-class platform that will advance Human-Robot Interaction research by providing standardized, reproducible, and efficient tools for conducting high-quality scientific studies.**
+| Phase | Status | Date |
+|-------|--------|------|
+| Proposal | ✅ | Sept 2025 |
+| IRB Application | ✅ | Dec 2025 |
+| Implementation | ✅ | Feb 2026 |
+| User Study | 🔄 In Progress | Mar-Apr 2026 |
+| Defense | Scheduled | April 2026 |
 
 ---
 
-## 🔧 **Development Notes**
+## Next Steps
 
-### **Technical Debt Status**
-- **High Priority**: None identified
-- **Medium Priority**: Minor database query optimizations possible
-- **Low Priority**: Some older components could benefit from modern React patterns
-
-### **Development Restrictions**
-Following Vercel Edge Runtime compatibility:
-- ❌ No development servers during implementation sessions
-- ❌ No Drizzle Studio during development work
-- ✅ Use `bun db:push` for schema changes
-- ✅ Use `bun typecheck` for validation
-- ✅ Use `bun build` for production testing
-
-### **Quality Gates**
-- ✅ All TypeScript compilation errors resolved
-- ✅ All ESLint rules passing with autofix enabled
-- ✅ All Prettier formatting applied consistently
-- ✅ No security vulnerabilities detected
-- ✅ Performance benchmarks met
-- ✅ Accessibility standards validated
+1. Complete user study (10-12 participants)
+2. Data analysis and thesis writing
+3. Final defense April 2026
+4. Open source release
 
 ---
 
-*This document consolidates all project status, progress tracking, and achievement documentation. It serves as the single source of truth for HRIStudio's development state and production readiness.*
+*Last Updated: March 22, 2026*

docs/proposal.tex

@@ -107,7 +107,7 @@ This work addresses a significant bottleneck in HRI research. By creating HRIStu
 \hline
 September & Finalize and submit this proposal (Due: Sept. 20).
 
-Submit IRB application for the user study. \\
+Submit IRB application for the study. \\
 \hline
 Oct -- Nov & Complete final implementation of core HRIStudio features.
 
@@ -119,13 +119,15 @@ Begin recruiting participants. \\
 \hline
 \multicolumn{2}{|l|}{\textbf{Spring 2026: Execution, Analysis, and Writing}} \\
 \hline
-Jan -- Feb & Upon receiving IRB approval, conduct all user study sessions. \\
+Jan -- Feb & Run pilot tests with platform.
+
+Refine based on testing feedback. \\
 \hline
-March & Analyze all data from the user study.
+March & Execute user study sessions (10-12 participants).
 
-Draft Results and Discussion sections.
+Analyze data from the user study.
 
-Submit ``Intent to Defend'' form (Due: March 1). \\
+Draft Results and Discussion sections. \\
 \hline
 April & Submit completed thesis draft to the defense committee (Due: April 1).
 

docs/quick-reference.md

@@ -1,566 +1,166 @@
 # HRIStudio Quick Reference Guide
 
-## 🚀 **Getting Started (5 Minutes)**
+## Quick Setup
 
-### Prerequisites
-- [Bun](https://bun.sh) (package manager)
-- [PostgreSQL](https://postgresql.org) 14+
-- [Docker](https://docker.com) (optional)
-
-### Quick Setup
 ```bash
-# Clone and install
-git clone <repo-url> hristudio
+# Clone with submodules
+git clone https://github.com/soconnor0919/hristudio.git
 cd hristudio
+git submodule update --init --recursive
+
+# Install and setup
 bun install
-
-# Start database
 bun run docker:up
-
-# Setup database
 bun db:push
 bun db:seed
 
-# Single command now syncs all repositories:
-# - Core blocks from localhost:3000/hristudio-core
-# - Robot plugins from https://repo.hristudio.com
-
-# Start development
+# Start
 bun dev
 ```
 
-### Default Login
-- **Admin**: `sean@soconnor.dev` / `password123`
-- **Researcher**: `alice.rodriguez@university.edu` / `password123`
-- **Wizard**: `emily.watson@lab.edu` / `password123`
+**Login**: `sean@soconnor.dev` / `password123`
 
 ---
 
-## 📁 **Project Structure**
+## Key Concepts
 
-```
-src/
-├── app/                    # Next.js App Router pages
-│   ├── (auth)/            # Authentication pages
-│   ├── (dashboard)/       # Main application
-│   └── api/               # API routes
-├── components/            # UI components
-│   ├── ui/                # shadcn/ui components
-│   ├── experiments/       # Feature components
-│   ├── studies/
-│   ├── participants/
-│   └── trials/
-├── server/               # Backend code
-│   ├── api/routers/      # tRPC routers
-│   ├── auth/             # NextAuth config
-│   └── db/               # Database schema
-└── lib/                  # Utilities
-```
-
----
-
-## 🎯 **Key Concepts**
-
-### Hierarchical Structure
+### Hierarchy
 ```
 Study → Experiment → Trial → Step → Action
 ```
 
-### User Roles
-- **Administrator**: Full system access
-- **Researcher**: Create studies, design experiments
-- **Wizard**: Execute trials, control robots
-- **Observer**: Read-only access
+### User Roles (Study-level)
+- **Owner**: Full study control, manage members
+- **Researcher**: Design experiments, manage participants
+- **Wizard**: Execute trials, control robot during sessions
+- **Observer**: Read-only access to study data
 
-### Core Workflows
-1. **Study Creation** → Team setup → Participant recruitment
-2. **Experiment Design** → Visual designer → Protocol validation
-3. **Trial Execution** → Wizard interface → Data capture
-4. **Data Analysis** → Export → Insights
+### Plugin Identifier System
+- `identifier`: Machine-readable key (e.g., `nao6-ros2`)
+- `name`: Display name (e.g., `NAO6 Robot (ROS2 Integration)`)
+- Lookup order: identifier → name → fallback
 
 ---
 
-## 🛠 **Development Commands**
+## Development Commands
 
-| Command | Purpose |
-|---------|---------|
-| `bun dev` | Start development server |
-| `bun build` | Build for production |
+| Command | Description |
+|---------|-------------|
+| `bun dev` | Start dev server |
+| `bun build` | Production build |
 | `bun typecheck` | TypeScript validation |
-| `bun lint` | Code quality checks |
 | `bun db:push` | Push schema changes |
-| `bun db:seed` | Seed data & sync repositories |
-| `bun db:studio` | Open database GUI |
+| `bun db:seed` | Seed data + sync plugins + forms |
+| `bun run docker:up` | Start PostgreSQL + MinIO |
+
+## Forms System
+
+### Form Types
+- **Consent**: Legal/IRB consent documents with signature fields
+- **Survey**: Multi-question questionnaires (ratings, multiple choice)
+- **Questionnaire**: Custom data collection forms
+
+### Templates (seeded by default)
+- Informed Consent - Standard consent template
+- Post-Session Survey - Participant feedback form
+- Demographics - Basic demographic collection
+
+### Routes
+- `/studies/[id]/forms` - List forms
+- `/studies/[id]/forms/new` - Create form (from template or scratch)
+- `/studies/[id]/forms/[formId]` - View/edit form, preview, responses
 
 ---
 
-## 🌐 **API Reference**
+## NAO6 Robot Docker
 
-### Base URL
-```
-http://localhost:3000/api/trpc/
+```bash
+cd ~/Documents/Projects/nao6-hristudio-integration
+docker compose up -d
 ```
 
-### Key Routers
-- **`auth`**: Login, logout, registration
-- **`studies`**: CRUD operations, team management
-- **`experiments`**: Design, configuration, validation
-- **`participants`**: Registration, consent, demographics
-- **`trials`**: Execution, monitoring, data capture, real-time control
-- **`robots`**: Integration, communication, actions, plugins
-- **`dashboard`**: Overview stats, recent activity, study progress
-- **`admin`**: Repository management, system settings
+**Services**: nao_driver, ros_bridge (:9090), ros_api
 
-### Example Usage
-```typescript
-// Get user's studies
-const studies = api.studies.getUserStudies.useQuery();
+**Topics**:
+- `/speech` - TTS
+- `/cmd_vel` - Movement
+- `/leds/eyes` - LEDs
 
-// Create new experiment
-const createExperiment = api.experiments.create.useMutation();
+---
+
+## Architecture Layers
+
+```
+┌─────────────────────────────────────┐
+│  UI: Design / Execute / Playback    │
+├─────────────────────────────────────┤
+│  Server: tRPC, Auth, Trial Logic    │
+├─────────────────────────────────────┤
+│  Data: PostgreSQL, File Storage     │
+│  Robot: ROS2 via WebSocket         │
+└─────────────────────────────────────┘
 ```
 
 ---
 
-## 🗄️ **Database Quick Reference**
+## WebSocket Architecture
+
+- **Trial Updates**: `ws://localhost:3001/api/websocket`
+- **ROS Bridge**: `ws://localhost:9090` (rosbridge)
+- **Real-time**: Auto-reconnect with exponential backoff
+- **Message Types**: trial_event, trial_status, connection_established
+
+---
+
+## Database Schema
 
 ### Core Tables
-```sql
-users              -- Authentication & profiles
-studies            -- Research projects
-experiments        -- Protocol templates
-participants       -- Study participants
-trials             -- Experiment instances
-steps              -- Experiment phases
-trial_events       -- Execution logs
-robots             -- Available platforms
-```
+- `users` - Authentication
+- `studies` - Research projects
+- `experiments` - Protocol templates
+- `trials` - Execution instances
+- `steps` - Experiment phases
+- `actions` - Atomic tasks
+- `plugins` - Robot integrations (identifier column)
+- `trial_events` - Execution logs
+
+---
+
+## Route Structure
 
-### Key Relationships
 ```
-studies → experiments → trials
-studies → participants
-trials → trial_events
-experiments → steps
+/dashboard           - Global overview
+/studies             - Study list
+/studies/[id]        - Study details
+/studies/[id]/experiments
+/studies/[id]/trials
+/studies/[id]/participants
+/trials/[id]/wizard - Trial execution
+/experiments/[id]/designer - Visual editor
 ```
 
 ---
 
-## 🎨 **UI Components**
+## Troubleshooting
+
+**Build errors**: `rm -rf .next && bun build`
+
+**Database reset**: `bun db:push --force && bun db:seed`
+
+**Check types**: `bun typecheck`
 
 ---
 
-## 🎯 **Trial System Quick Reference**
+## Plugin System
 
-### Trial Workflow
-```
-1. Create Study → 2. Design Experiment → 3. Add Participants → 4. Schedule Trial → 5. Execute with Wizard Interface → 6. Analyze Results
-```
-
-### Key Trial Pages
-- **`/studies/[id]/trials`**: List trials for specific study
-- **`/trials/[id]`**: Individual trial details and management
-- **`/trials/[id]/wizard`**: Panel-based real-time execution interface
-- **`/trials/[id]/analysis`**: Post-trial data analysis
-
-### Trial Status Flow
-```
-scheduled → in_progress → completed
-           ↘ aborted
-           ↘ failed
-```
-
-### Wizard Interface Architecture (Panel-Based)
-The wizard interface uses the same proven panel system as the experiment designer:
-
-#### **Layout Components**
-- **PageHeader**: Consistent navigation with breadcrumbs
-- **PanelsContainer**: Three-panel resizable layout
-- **Proper Navigation**: Dashboard → Studies → [Study] → Trials → [Trial] → Wizard Control
-
-#### **Panel Organization**
-```
-┌─────────────────────────────────────────────────────────┐
-│ PageHeader: Wizard Control                             │
-├──────────┬─────────────────────────┬────────────────────┤
-│ Left     │ Center                  │ Right              │
-│ Panel    │ Panel                   │ Panel              │
-│          │                         │                    │
-│ Trial    │ Current Step            │ Robot Status       │
-│ Controls │ & Wizard Actions        │ Participant Info   │
-│ Step     │                         │ Live Events        │
-│ List     │                         │ Connection Status  │
-└──────────┴─────────────────────────┴────────────────────┘
-```
-
-#### **Panel Features**
-- **Left Panel**: Trial controls, status, step navigation
-- **Center Panel**: Main execution area with current step and wizard actions
-- **Right Panel**: Real-time monitoring and context information
-- **Resizable**: Drag separators to adjust panel sizes
-- **Overflow Contained**: No page-level scrolling, internal panel scrolling
-
-### Technical Features
-- **Real-time Control**: Step-by-step protocol execution
-- **WebSocket Integration**: Live updates with polling fallback
-- **Component Reuse**: 90% code sharing with experiment designer
-- **Type Safety**: Complete TypeScript compatibility
-- **Mock Robot System**: TurtleBot3 simulation ready for development
-
----
-
-### Layout Components
 ```typescript
-// Page wrapper with navigation
-<PageLayout title="Studies" description="Manage research studies">
-  <StudiesTable />
-</PageLayout>
+// Loading a plugin by identifier
+const plugin = await trialExecution.loadPlugin("nao6-ros2");
 
-// Entity forms (unified pattern)
-<EntityForm 
-  mode="create"
-  entityName="Study"
-  form={form}
-  onSubmit={handleSubmit}
-/>
-
-// Data tables (consistent across entities)
-<DataTable 
-  columns={studiesColumns}
-  data={studies}
-  searchKey="name"
-/>
-```
-
-### Form Patterns
-```typescript
-// Standard form setup
-const form = useForm<StudyFormData>({
-  resolver: zodResolver(studySchema),
-  defaultValues: { /* ... */ }
-});
-
-// Unified submission
-const onSubmit = async (data: StudyFormData) => {
-  await createStudy.mutateAsync(data);
-  router.push(`/studies/${result.id}`);
-};
+// Action execution
+await robot.execute("nao6-ros2.say_with_emotion", { text: "Hello" });
 ```
 
 ---
 
-## 🎯 **Route Structure**
-
-### Study-Scoped Architecture
-All study-dependent functionality flows through studies for complete organizational consistency:
-
-```
-Platform Routes (Global):
-/dashboard                    # Global overview with study filtering
-/studies                     # Study management hub
-/profile                     # User account management
-/admin                      # System administration
-
-Study-Scoped Routes (All Study-Dependent):
-/studies/[id]               # Study details and overview
-/studies/[id]/participants  # Study participants
-/studies/[id]/trials       # Study trials  
-/studies/[id]/experiments  # Study experiment protocols
-/studies/[id]/plugins      # Study robot plugins
-/studies/[id]/analytics    # Study analytics
-
-Individual Entity Routes (Cross-Study):
-/trials/[id]              # Individual trial details
-/trials/[id]/wizard       # Trial execution interface (TO BE BUILT)
-/experiments/[id]         # Individual experiment details
-/experiments/[id]/designer # Visual experiment designer
-
-Helpful Redirects (User Guidance):
-/participants             # → Study selection guidance
-/trials                  # → Study selection guidance
-/experiments             # → Study selection guidance
-/plugins                 # → Study selection guidance
-/analytics               # → Study selection guidance
-```
-
-### Architecture Benefits
-- **Complete Consistency**: All study-dependent functionality properly scoped
-- **Clear Mental Model**: Platform-level vs study-level separation
-- **No Duplication**: Single source of truth for each functionality
-- **User-Friendly**: Helpful guidance for moved functionality
-
-## 🔐 **Authentication**
-
-### Protecting Routes
-```typescript
-// Middleware protection
-export default withAuth(
-  function middleware(request) {
-    // Route logic
-  },
-  {
-    callbacks: {
-      authorized: ({ token }) => !!token,
-    },
-  }
-);
-
-// Component protection
-const { data: session, status } = useSession();
-if (status === "loading") return <Loading />;
-if (!session) return <SignIn />;
-```
-
-### Role Checking
-```typescript
-// Server-side
-ctx.session.user.role === "administrator"
-
-// Client-side
-import { useSession } from "next-auth/react";
-const hasRole = (role: string) => session?.user.role === role;
-```
-
----
-
-## 🤖 **Robot Integration**
-
-### Core Block System
-```typescript
-// Core blocks loaded from local repository during development
-// Repository sync: localhost:3000/hristudio-core → database
-
-// Block categories (27 total blocks in 4 groups):
-// - Events (4): when_trial_starts, when_participant_speaks, etc.
-// - Wizard Actions (6): wizard_say, wizard_gesture, etc.  
-// - Control Flow (8): wait, repeat, if_condition, etc.
-// - Observation (9): observe_behavior, record_audio, etc.
-```
-
-### Plugin Repository System
-```typescript
-// Repository sync (admin only)
-await api.admin.repositories.sync.mutate({ id: repoId });
-
-// Plugin installation
-await api.robots.plugins.install.mutate({
-  studyId: 'study-id',
-  pluginId: 'plugin-id'
-});
-
-// Get study plugins
-const plugins = api.robots.plugins.getStudyPlugins.useQuery({
-  studyId: selectedStudyId
-});
-```
-
-### Plugin Structure
-```typescript
-interface Plugin {
-  id: string;
-  name: string;
-  version: string;
-  trustLevel: 'official' | 'verified' | 'community';
-  actionDefinitions: RobotAction[];
-  metadata: {
-    platform: string;
-    category: string;
-    repositoryId: string;
-  };
-}
-```
-
-### Repository Integration
-- **Robot Plugins**: `https://repo.hristudio.com` (live)
-- **Core Blocks**: `localhost:3000/hristudio-core` (development)
-- **Auto-sync**: Integrated into `bun db:seed` command
-- **Plugin Store**: Browse → Install → Use in experiments
-
----
-
-## 📊 **Common Patterns**
-
-### Error Handling
-```typescript
-try {
-  await mutation.mutateAsync(data);
-  toast.success("Success!");
-  router.push("/success-page");
-} catch (error) {
-  setError(error.message);
-  toast.error("Failed to save");
-}
-```
-
-### Loading States
-```typescript
-const { data, isLoading, error } = api.studies.getAll.useQuery();
-
-if (isLoading) return <Skeleton />;
-if (error) return <ErrorMessage error={error} />;
-return <DataTable data={data} />;
-```
-
-### Form Validation
-```typescript
-const schema = z.object({
-  name: z.string().min(1, "Name required"),
-  description: z.string().min(10, "Description too short"),
-  duration: z.number().min(5, "Minimum 5 minutes")
-});
-```
-
----
-
-## 🚀 **Deployment**
-
-### Vercel Deployment
-```bash
-# Install Vercel CLI
-bun add -g vercel
-
-# Deploy
-vercel --prod
-
-# Environment variables
-vercel env add DATABASE_URL
-vercel env add NEXTAUTH_SECRET
-vercel env add CLOUDFLARE_R2_*
-```
-
-### Environment Variables
-```bash
-# Required
-DATABASE_URL=postgresql://...
-NEXTAUTH_URL=https://your-domain.com
-NEXTAUTH_SECRET=your-secret
-
-# Storage
-CLOUDFLARE_R2_ACCOUNT_ID=...
-CLOUDFLARE_R2_ACCESS_KEY_ID=...
-CLOUDFLARE_R2_SECRET_ACCESS_KEY=...
-CLOUDFLARE_R2_BUCKET_NAME=hristudio-files
-```
-
----
-
-## Experiment Designer — Quick Tips
-
-- Panels layout
-  - Uses Tailwind-first grid via `PanelsContainer` with fraction-based columns (no hardcoded px).
-  - Left/Center/Right panels are minmax(0, …) columns to prevent horizontal overflow.
-  - Status bar lives inside the bordered container; no gap below the panels.
-
-- Resizing (no persistence)
-  - Drag separators between Left↔Center and Center↔Right to resize panels.
-  - Fractions are clamped (min/max) to keep panels usable and avoid page overflow.
-  - Keyboard on handles: Arrow keys to resize; Shift+Arrow for larger steps.
-
-- Overflow rules (no page-level X scroll)
-  - Root containers: `overflow-hidden`, `min-h-0`.
-  - Each panel wrapper: `min-w-0 overflow-hidden`.
-  - Each panel content: `overflow-y-auto overflow-x-hidden` (scroll inside the panel).
-  - If X scroll appears, clamp the offending child (truncate, `break-words`, `overflow-x-hidden`).
-
-- Action Library scroll
-  - Search/categories header and footer are fixed; the list uses internal scroll (`ScrollArea` with `flex-1`).
-  - Long lists never scroll the page — only the panel.
-
-- Inspector tabs (shadcn/ui)
-  - Single Tabs root controls both header and content.
-  - TabsList uses simple grid or inline-flex; triggers are plain `TabsTrigger`.
-  - Active state is styled globally (via `globals.css`) using Radix `data-state="active"`.
-
-## 🔧 **Troubleshooting**
-
-### Common Issues
-
-**Build Errors**
-```bash
-# Clear cache and rebuild
-rm -rf .next
-bun run build
-```
-
-**Database Issues**
-```bash
-# Reset database
-bun db:push --force
-bun db:seed
-```
-
-**TypeScript Errors**
-```bash
-# Check types
-bun typecheck
-
-# Common fixes
-# - Check imports
-# - Verify API return types
-# - Update schema types
-```
-
-### Performance Tips
-- Use React Server Components where possible
-- Implement proper pagination for large datasets
-- Add database indexes for frequently queried fields
-- Use optimistic updates for better UX
-
----
-
-## 📚 **Further Reading**
-
-### Documentation Files
-- **[Project Overview](./project-overview.md)**: Complete feature overview
-- **[Implementation Details](./implementation-details.md)**: Architecture decisions and patterns
-- **[Database Schema](./database-schema.md)**: Complete database documentation
-- **[API Routes](./api-routes.md)**: Comprehensive API reference
-- **[Core Blocks System](./core-blocks-system.md)**: Repository-based block architecture
-- **[Plugin System Guide](./plugin-system-implementation-guide.md)**: Robot integration guide
-- **[Project Status](./project-status.md)**: Current development status
-- **[Work in Progress](./work_in_progress.md)**: Recent changes and active development
-
-### External Resources
-- [Next.js Documentation](https://nextjs.org/docs)
-- [tRPC Documentation](https://trpc.io/docs)
-- [Drizzle ORM Guide](https://orm.drizzle.team/docs)
-- [shadcn/ui Components](https://ui.shadcn.com)
-
----
-
-## 🎯 **Quick Tips**
-### Quick Tips
-
-### Development Workflow
-1. Always run `bun typecheck` before commits
-2. Use the unified `EntityForm` for all CRUD operations
-3. Follow the established component patterns
-4. Add proper error boundaries for new features
-5. Test with multiple user roles
-6. Use single `bun db:seed` for complete setup
-
-### Code Standards
-- Use TypeScript strict mode
-- Prefer Server Components over Client Components
-- Implement proper error handling
-- Add loading states for all async operations
-- Use Zod for input validation
-
-### Best Practices
-- Keep components focused and composable
-- Use the established file naming conventions
-- Implement proper RBAC for new features
-- Add comprehensive logging for debugging
-- Follow accessibility guidelines (WCAG 2.1 AA)
-- Use repository-based plugins instead of hardcoded robot actions
-- Test plugin installation/uninstallation in different studies
-
-### Route Architecture
-- **Study-Scoped**: All entity management flows through studies
-- **Individual Entities**: Trial/experiment details maintain separate routes
-- **Helpful Redirects**: Old routes guide users to new locations
-- **Consistent Navigation**: Breadcrumbs reflect the study → entity hierarchy
-
----
-
-*This quick reference covers the most commonly needed information for HRIStudio development. For detailed implementation guidance, refer to the comprehensive documentation files.*
+Last updated: March 2026

docs/wizard-interface-guide.md

@@ -1,279 +0,0 @@
-# Wizard Interface Guide
-
-## Overview
-
-The Wizard Interface is a real-time control panel for conducting Human-Robot Interaction (HRI) trials. It provides wizards with comprehensive tools to execute experiment protocols, monitor participant interactions, and control robot behaviors in real-time.
-
-## Key Features
-
-- **Real-time Trial Execution**: Live step-by-step protocol execution with WebSocket connectivity
-- **Robot Status Monitoring**: Battery levels, connection status, sensor readings, and position tracking
-- **Participant Information**: Demographics, consent status, and session details
-- **Live Event Logging**: Real-time capture of all trial events and wizard interventions
-- **Action Controls**: Quick access to common wizard actions and robot commands
-
-## WebSocket System
-
-### Connection Setup
-
-The wizard interface automatically connects to a WebSocket server for real-time communication:
-
-```typescript
-// WebSocket URL format
-wss://your-domain.com/api/websocket?trialId={TRIAL_ID}&token={AUTH_TOKEN}
-```
-
-### Message Types
-
-#### Incoming Messages (from server):
-- `connection_established` - Connection acknowledgment
-- `trial_status` - Current trial state and step information
-- `trial_action_executed` - Confirmation of action execution
-- `step_changed` - Step transition notifications
-- `intervention_logged` - Wizard intervention confirmations
-
-#### Outgoing Messages (to server):
-- `heartbeat` - Keep connection alive
-- `trial_action` - Execute trial actions (start, complete, abort)
-- `wizard_intervention` - Log wizard interventions
-- `step_transition` - Advance to next step
-
-### Example Usage
-
-```typescript
-// Start a trial
-webSocket.sendMessage({
-  type: "trial_action",
-  data: {
-    actionType: "start_trial",
-    step_index: 0,
-    data: { notes: "Trial started by wizard" }
-  }
-});
-
-// Log wizard intervention
-webSocket.sendMessage({
-  type: "wizard_intervention",
-  data: {
-    action_type: "manual_correction",
-    step_index: currentStepIndex,
-    action_data: { message: "Clarified instruction" }
-  }
-});
-```
-
-## Trial Execution Workflow
-
-### 1. Pre-Trial Setup
-- Verify participant consent and demographics
-- Check robot connection and status
-- Review experiment protocol steps
-- Confirm WebSocket connectivity
-
-### 2. Starting a Trial
-1. Click "Start Trial" button
-2. System automatically:
-   - Updates trial status to "in_progress"
-   - Records start timestamp
-   - Loads first protocol step
-   - Broadcasts status to all connected clients
-
-### 3. Step-by-Step Execution
-- **Current Step Display**: Shows active step details and actions
-- **Execute Step**: Trigger step-specific actions (robot commands, wizard prompts)
-- **Next Step**: Advance to subsequent protocol step
-- **Quick Actions**: Access common wizard interventions
-
-### 4. Real-time Monitoring
-- **Robot Status**: Live updates on battery, signal, position, sensors
-- **Event Log**: Chronological list of all trial events
-- **Progress Tracking**: Visual progress bar and step completion status
-
-### 5. Trial Completion
-- Click "Complete" for successful trials
-- Click "Abort" for early termination
-- System records end timestamp and final status
-- Automatic redirect to analysis page
-
-## Experiment Data Integration
-
-### Loading Real Experiment Steps
-
-The wizard interface automatically loads experiment steps from the database:
-
-```typescript
-// Steps are fetched from the experiments API
-const { data: experimentSteps } = api.experiments.getSteps.useQuery({
-  experimentId: trial.experimentId
-});
-```
-
-### Step Types and Actions
-
-Supported step types from the experiment designer:
-- **Wizard Steps**: Manual wizard actions and prompts
-- **Robot Steps**: Automated robot behaviors and movements
-- **Parallel Steps**: Concurrent actions executed simultaneously
-- **Conditional Steps**: Branching logic based on participant responses
-
-## Seed Data and Testing
-
-### Available Test Data
-
-The development database includes realistic test scenarios:
-
-```bash
-# Seed the database with test data
-bun db:seed
-
-# Default login credentials
-Email: sean@soconnor.dev
-Password: password123
-```
-
-### Test Experiments
-
-1. **"Basic Interaction Protocol 1"** (Study: Real-time HRI Coordination)
-   - 3 steps: Introduction, Wait for Response, Robot Feedback
-   - Includes wizard actions and NAO robot integration
-   - Estimated duration: 25 minutes
-
-2. **"Dialogue Timing Pilot"** (Study: Wizard-of-Oz Dialogue Study)
-   - Multi-step protocol with parallel and conditional actions
-   - Timer-based transitions and conditional follow-ups
-   - Estimated duration: 35 minutes
-
-### Test Participants
-
-Pre-loaded participants with complete demographics:
-- Various age groups (18-65)
-- Different educational backgrounds
-- Robot experience levels
-- Consent already verified
-
-## Robot Integration
-
-### Supported Robots
-
-- **TurtleBot3 Burger**: Navigation and sensing capabilities
-- **NAO Humanoid Robot**: Speech, gestures, and animations
-- **Plugin System**: Extensible support for additional platforms
-
-### Robot Actions
-
-Common robot actions available during trials:
-- **Speech**: Text-to-speech with configurable speed/volume
-- **Movement**: Navigation commands and position control
-- **Gestures**: Pre-defined animation sequences
-- **LED Control**: Visual feedback through color changes
-- **Sensor Readings**: Real-time environmental data
-
-## Error Handling and Troubleshooting
-
-### WebSocket Connection Issues
-
-- **Connection Failed**: Check network connectivity and server status
-- **Frequent Disconnections**: Verify firewall settings and WebSocket support
-- **Authentication Errors**: Ensure valid session and proper token generation
-
-### Trial Execution Problems
-
-- **Steps Not Loading**: Verify experiment has published steps in database
-- **Robot Commands Failing**: Check robot connection and plugin configuration
-- **Progress Not Updating**: Confirm WebSocket messages are being sent/received
-
-### Recovery Procedures
-
-1. **Connection Loss**: Interface automatically attempts reconnection with exponential backoff
-2. **Trial State Mismatch**: Use "Refresh" button to sync with server state
-3. **Robot Disconnect**: Monitor robot status panel for connection recovery
-
-## Best Practices
-
-### Wizard Guidelines
-
-1. **Pre-Trial Preparation**
-   - Review complete experiment protocol
-   - Test robot functionality before participant arrival
-   - Verify audio/video recording systems
-
-2. **During Trial Execution**
-   - Follow protocol steps in sequence
-   - Use intervention logging for any deviations
-   - Monitor participant comfort and engagement
-   - Watch robot status for any issues
-
-3. **Post-Trial Procedures**
-   - Complete trial properly (don't just abort)
-   - Add summary notes about participant behavior
-   - Review event log for any anomalies
-
-### Technical Considerations
-
-- **Browser Compatibility**: Use modern browsers with WebSocket support
-- **Network Requirements**: Stable internet connection for real-time features
-- **Performance**: Close unnecessary browser tabs during trials
-- **Backup Plans**: Have manual procedures ready if technology fails
-
-## Development and Customization
-
-### Adding Custom Actions
-
-```typescript
-// Register new wizard action
-const handleCustomAction = async (actionData: Record<string, unknown>) => {
-  await logEventMutation.mutateAsync({
-    trialId: trial.id,
-    type: "wizard_action",
-    data: {
-      action_type: "custom_intervention",
-      ...actionData
-    }
-  });
-};
-```
-
-### Extending Robot Support
-
-1. Create new robot plugin following plugin system guidelines
-2. Define action schemas in plugin configuration
-3. Implement communication protocol (REST/ROS2/WebSocket)
-4. Test integration with wizard interface
-
-### Custom Step Types
-
-To add new step types:
-1. Update database schema (`stepTypeEnum`)
-2. Add type mapping in `WizardInterface.tsx`
-3. Create step-specific UI components
-4. Update execution engine logic
-
-## Security Considerations
-
-- **Authentication**: All WebSocket connections require valid session tokens
-- **Authorization**: Role-based access control for trial operations
-- **Data Protection**: All trial data encrypted in transit and at rest
-- **Session Management**: Automatic cleanup of expired connections
-
-## Performance Optimization
-
-- **Connection Pooling**: Efficient WebSocket connection management
-- **Event Batching**: Group related events to reduce message overhead
-- **Selective Updates**: Only broadcast relevant changes to connected clients
-- **Caching**: Local state management for responsive UI updates
-
----
-
-## Quick Start Checklist
-
-- [ ] Database seeded with test data (`bun db:seed`)
-- [ ] Development server running (`bun dev`)
-- [ ] Logged in as administrator (sean@soconnor.dev)
-- [ ] Navigate to Trials section
-- [ ] Select a trial and click "Wizard Control"
-- [ ] Verify WebSocket connection (green "Real-time" badge)
-- [ ] Start trial and execute steps
-- [ ] Monitor robot status and event log
-- [ ] Complete trial and review analysis page
-
-For additional support, refer to the complete HRIStudio documentation in the `docs/` folder.

drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1774137504617,
+      "tag": "0000_old_tattoo",
+      "breakpoints": true
+    }
+  ]
+}

middleware.ts

@@ -1,55 +1,27 @@
-import type { Session } from "next-auth";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
-import { auth } from "./src/server/auth";
 
-export default auth((req: NextRequest & { auth: Session | null }) => {
-  const { nextUrl } = req;
-  const isLoggedIn = !!req.auth;
+export default async function middleware(request: NextRequest) {
+  const { nextUrl } = request;
 
-  // Define route patterns
-  const isApiAuthRoute = nextUrl.pathname.startsWith("/api/auth");
-  const isPublicRoute = ["/", "/auth/signin", "/auth/signup"].includes(
-    nextUrl.pathname,
-  );
+  // Skip session checks for now to debug the auth issue
+  const isApiRoute = nextUrl.pathname.startsWith("/api");
   const isAuthRoute = nextUrl.pathname.startsWith("/auth");
 
-  // Allow API auth routes to pass through
-  if (isApiAuthRoute) {
+  if (isApiRoute) {
     return NextResponse.next();
   }
 
-  // If user is on auth pages and already logged in, redirect to dashboard
-  if (isAuthRoute && isLoggedIn) {
-    return NextResponse.redirect(new URL("/", nextUrl));
-  }
-
-  // If user is not logged in and trying to access protected routes
-  if (!isLoggedIn && !isPublicRoute && !isAuthRoute) {
-    let callbackUrl = nextUrl.pathname;
-    if (nextUrl.search) {
-      callbackUrl += nextUrl.search;
-    }
-
-    const encodedCallbackUrl = encodeURIComponent(callbackUrl);
-    return NextResponse.redirect(
-      new URL(`/auth/signin?callbackUrl=${encodedCallbackUrl}`, nextUrl),
-    );
+  // Allow auth routes through for now
+  if (isAuthRoute) {
+    return NextResponse.next();
   }
 
   return NextResponse.next();
-});
+}
 
-// Configure which routes the middleware should run on
 export const config = {
   matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     * - public files (images, etc.)
-     */
     "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
   ],
 };

next.config.js

@@ -5,6 +5,9 @@
 import "./src/env.js";
 
 /** @type {import("next").NextConfig} */
-const config = {};
+const nextConfig = {
+  // Mark server-only packages as external to prevent bundling in client
+  serverExternalPackages: ["postgres", "minio", "child_process"],
+};
 
-export default config;
+export default nextConfig;

package.json

@@ -11,7 +11,8 @@
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
     "db:seed": "bun db:push && bun scripts/seed-dev.ts",
-    "dev": "next dev --turbo",
+    "dev": "bun run ws-server.ts & next dev --turbo",
+    "dev:ws": "bun run ws-server.ts",
     "docker:up": "if [ \"$(uname)\" = \"Darwin\" ]; then colima start; fi && docker compose up -d",
     "docker:down": "docker compose down && if [ \"$(uname)\" = \"Darwin\" ]; then colima stop; fi",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
@@ -23,87 +24,107 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@auth/drizzle-adapter": "^1.10.0",
-    "@aws-sdk/client-s3": "^3.859.0",
-    "@aws-sdk/s3-request-presigner": "^3.859.0",
+    "@auth/drizzle-adapter": "^1.11.1",
+    "@aws-sdk/client-s3": "^3.989.0",
+    "@aws-sdk/s3-request-presigner": "^3.989.0",
+    "@better-auth/drizzle-adapter": "^1.5.5",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.1.1",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@shadcn/ui": "^0.0.4",
-    "@t3-oss/env-nextjs": "^0.13.8",
-    "@tanstack/react-query": "^5.69.0",
+    "@t3-oss/env-nextjs": "^0.13.10",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-table": "^8.21.3",
-    "@trpc/client": "^11.0.0",
-    "@trpc/react-query": "^11.0.0",
-    "@trpc/server": "^11.0.0",
+    "@tiptap/extension-table": "^3.20.0",
+    "@tiptap/extension-table-cell": "^3.20.0",
+    "@tiptap/extension-table-header": "^3.20.0",
+    "@tiptap/extension-table-row": "^3.20.0",
+    "@tiptap/pm": "^3.20.0",
+    "@tiptap/react": "^3.20.0",
+    "@tiptap/starter-kit": "^3.20.0",
+    "@trpc/client": "^11.10.0",
+    "@trpc/react-query": "^11.10.0",
+    "@trpc/server": "^11.10.0",
     "@types/js-cookie": "^3.0.6",
     "@types/ws": "^8.18.1",
-    "bcryptjs": "^3.0.2",
+    "bcryptjs": "^3.0.3",
+    "better-auth": "^1.5.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "driver.js": "^1.4.0",
     "drizzle-orm": "^0.41.0",
+    "html2pdf.js": "^0.14.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.536.0",
     "minio": "^8.0.6",
-    "next": "^16.1.6",
-    "next-auth": "^5.0.0-beta.29",
+    "next": "16.2.1",
+    "next-auth": "^5.0.0-beta.30",
     "next-themes": "^0.4.6",
-    "postgres": "^3.4.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.60.0",
-    "react-resizable-panels": "^3.0.4",
+    "postgres": "^3.4.8",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.4",
+    "react-day-picker": "^9.13.2",
+    "react-dom": "19.2.4",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^3.0.6",
+    "react-signature-canvas": "^1.1.0-alpha.2",
     "react-webcam": "^7.2.0",
     "server-only": "^0.0.1",
     "sonner": "^2.0.7",
-    "superjson": "^2.2.1",
-    "tailwind-merge": "^3.3.1",
-    "ws": "^8.18.3",
-    "zod": "^4.0.5",
-    "zustand": "^4.5.5"
+    "superjson": "^2.2.6",
+    "tailwind-merge": "^3.4.0",
+    "tiptap-markdown": "^0.9.0",
+    "uuid": "^13.0.0",
+    "ws": "^8.19.0",
+    "zod": "^4.3.6",
+    "zustand": "^4.5.7"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
-    "@tailwindcss/postcss": "^4.0.15",
+    "@eslint/eslintrc": "^3.3.3",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/bcryptjs": "^3.0.0",
+    "@types/bun": "^1.3.9",
     "@types/crypto-js": "^4.2.2",
-    "@types/node": "^20.14.10",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "drizzle-kit": "^0.30.5",
-    "eslint": "^9.23.0",
-    "eslint-config-next": "^15.2.3",
+    "@types/node": "^20.19.33",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@types/uuid": "^11.0.0",
+    "drizzle-kit": "^0.30.6",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.2.1",
     "eslint-plugin-drizzle": "^0.2.3",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.15",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.18",
     "ts-unused-exports": "^11.0.1",
-    "tw-animate-css": "^1.3.5",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0"
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.55.0",
+    "vitest": "^4.0.18"
   },
   "ct3aMetadata": {
     "initVersion": "7.39.3"
@@ -113,5 +134,9 @@
     "esbuild",
     "sharp",
     "unrs-resolver"
-  ]
-}
+  ],
+  "overrides": {
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3"
+  }
+}

scripts/archive/check-db-actions.ts

@@ -0,0 +1,46 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  console.log("🔍 Checking seeded actions...");
+
+  const actions = await db.query.actions.findMany({
+    where: (actions, { or, eq, like }) =>
+      or(
+        eq(actions.type, "sequence"),
+        eq(actions.type, "parallel"),
+        eq(actions.type, "loop"),
+        eq(actions.type, "branch"),
+        like(actions.type, "hristudio-core%"),
+      ),
+    limit: 10,
+  });
+
+  console.log(`Found ${actions.length} control actions.`);
+
+  for (const action of actions) {
+    console.log(`\nAction: ${action.name} (${action.type})`);
+    console.log(`ID: ${action.id}`);
+    // Explicitly log parameters to check structure
+    console.log("Parameters:", JSON.stringify(action.parameters, null, 2));
+
+    const params = action.parameters as any;
+    if (params.children) {
+      console.log(`✅ Has ${params.children.length} children in parameters.`);
+    } else if (params.trueBranch || params.falseBranch) {
+      console.log(`✅ Has branches in parameters.`);
+    } else {
+      console.log(`❌ No children/branches found in parameters.`);
+    }
+  }
+
+  await connection.end();
+}
+
+main();

scripts/archive/check-db.ts

@@ -0,0 +1,66 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  console.log("🔍 Checking Database State...");
+
+  // 1. Check Plugin
+  const plugins = await db.query.plugins.findMany();
+  console.log(`\nFound ${plugins.length} plugins.`);
+
+  const expectedKeys = new Set<string>();
+
+  for (const p of plugins) {
+    const meta = p.metadata as any;
+    const defs = p.actionDefinitions as any[];
+
+    console.log(`Plugin [${p.name}] (ID: ${p.id}):`);
+    console.log(`  - Robot ID (Column): ${p.robotId}`);
+    console.log(`  - Metadata.robotId: ${meta?.robotId}`);
+    console.log(`  - Action Definitions: ${defs?.length ?? 0} found.`);
+
+    if (defs && meta?.robotId) {
+      defs.forEach((d) => {
+        const key = `${meta.robotId}.${d.id}`;
+        expectedKeys.add(key);
+        // console.log(`    -> Registers: ${key}`);
+      });
+    }
+  }
+
+  // 2. Check Actions
+  const actions = await db.query.actions.findMany();
+  console.log(`\nFound ${actions.length} actions.`);
+  let errorCount = 0;
+  for (const a of actions) {
+    // Only check plugin actions
+    if (a.sourceKind === "plugin" || a.type.includes(".")) {
+      const isRegistered = expectedKeys.has(a.type);
+      const pluginIdMatch = a.pluginId === "nao6-ros2";
+
+      console.log(`Action [${a.name}] (Type: ${a.type}):`);
+      console.log(`  - PluginId: ${a.pluginId} ${pluginIdMatch ? "✅" : "❌"}`);
+      console.log(`  - In Registry: ${isRegistered ? "✅" : "❌"}`);
+
+      if (!isRegistered || !pluginIdMatch) errorCount++;
+    }
+  }
+
+  if (errorCount > 0) {
+    console.log(`\n❌ Found ${errorCount} actions with issues.`);
+  } else {
+    console.log(
+      "\n✅ All plugin actions validated successfully against registry definitions.",
+    );
+  }
+
+  await connection.end();
+}
+
+main().catch(console.error);

scripts/archive/debug-experiment-structure.ts

@@ -0,0 +1,60 @@
+import { db } from "~/server/db";
+import { steps, experiments, actions } from "~/server/db/schema";
+import { eq, asc } from "drizzle-orm";
+
+async function debugExperimentStructure() {
+  console.log("Debugging Experiment Structure for Interactive Storyteller...");
+
+  // Find the experiment
+  const experiment = await db.query.experiments.findFirst({
+    where: eq(experiments.name, "The Interactive Storyteller"),
+    with: {
+      steps: {
+        orderBy: [asc(steps.orderIndex)],
+        with: {
+          actions: {
+            orderBy: [asc(actions.orderIndex)],
+          },
+        },
+      },
+    },
+  });
+
+  if (!experiment) {
+    console.error("Experiment not found!");
+    return;
+  }
+
+  console.log(`Experiment: ${experiment.name} (${experiment.id})`);
+  console.log(`Plugin Dependencies:`, experiment.pluginDependencies);
+  console.log("---------------------------------------------------");
+
+  experiment.steps.forEach((step, index) => {
+    console.log(`Step ${index + 1}: ${step.name}`);
+    console.log(`  ID: ${step.id}`);
+    console.log(`  Type: ${step.type}`);
+    console.log(`  Order: ${step.orderIndex}`);
+    console.log(`  Conditions:`, JSON.stringify(step.conditions, null, 2));
+
+    if (step.actions && step.actions.length > 0) {
+      console.log(`  Actions (${step.actions.length}):`);
+      step.actions.forEach((action, actionIndex) => {
+        console.log(`    ${actionIndex + 1}. [${action.type}] ${action.name}`);
+        if (action.type === "wizard_wait_for_response") {
+          console.log(
+            `       Options:`,
+            JSON.stringify((action.parameters as any)?.options, null, 2),
+          );
+        }
+      });
+    }
+    console.log("---------------------------------------------------");
+  });
+}
+
+debugExperimentStructure()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/inspect-all-steps.ts

@@ -0,0 +1,41 @@
+import { db } from "../../src/server/db";
+import { experiments, steps } from "../../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+async function inspectAllSteps() {
+  const result = await db.query.experiments.findMany({
+    with: {
+      steps: {
+        orderBy: (steps, { asc }) => [asc(steps.orderIndex)],
+        columns: {
+          id: true,
+          name: true,
+          type: true,
+          orderIndex: true,
+          conditions: true,
+        },
+      },
+    },
+  });
+
+  console.log(`Found ${result.length} experiments.`);
+
+  for (const exp of result) {
+    console.log(`Experiment: ${exp.name} (${exp.id})`);
+    for (const step of exp.steps) {
+      // Only print conditional steps or the first step
+      if (step.type === "conditional" || step.orderIndex === 0) {
+        console.log(`  [${step.orderIndex}] ${step.name} (${step.type})`);
+        console.log(`     Conditions: ${JSON.stringify(step.conditions)}`);
+      }
+    }
+    console.log("---");
+  }
+}
+
+inspectAllSteps()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/inspect-branch-action.ts

@@ -0,0 +1,46 @@
+import { db } from "~/server/db";
+import { actions, steps } from "~/server/db/schema";
+import { eq } from "drizzle-orm";
+
+async function inspectAction() {
+  console.log("Inspecting Action 10851aef-e720-45fc-ba5e-05e1e3425dab...");
+
+  const actionId = "10851aef-e720-45fc-ba5e-05e1e3425dab";
+
+  const action = await db.query.actions.findFirst({
+    where: eq(actions.id, actionId),
+    with: {
+      step: {
+        columns: {
+          id: true,
+          name: true,
+          type: true,
+          conditions: true,
+        },
+      },
+    },
+  });
+
+  if (!action) {
+    console.error("Action not found!");
+    return;
+  }
+
+  console.log("Action Found:");
+  console.log("  Name:", action.name);
+  console.log("  Type:", action.type);
+  console.log("  Parameters:", JSON.stringify(action.parameters, null, 2));
+
+  console.log("Parent Step:");
+  console.log("  ID:", action.step.id);
+  console.log("  Name:", action.step.name);
+  console.log("  Type:", action.step.type);
+  console.log("  Conditions:", JSON.stringify(action.step.conditions, null, 2));
+}
+
+inspectAction()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/inspect-branch-steps.ts

@@ -0,0 +1,29 @@
+import { db } from "~/server/db";
+import { steps } from "~/server/db/schema";
+import { eq, inArray } from "drizzle-orm";
+
+async function inspectBranchSteps() {
+  console.log("Inspecting Steps 4 (Branch A) and 5 (Branch B)...");
+
+  const step4Id = "3a2dc0b7-a43e-4236-9b9e-f957abafc1e5";
+  const step5Id = "3ae2fe8a-fc5d-4a04-baa5-699a21f19e30";
+
+  const branchSteps = await db.query.steps.findMany({
+    where: inArray(steps.id, [step4Id, step5Id]),
+  });
+
+  branchSteps.forEach((step) => {
+    console.log(`Step: ${step.name} (${step.id})`);
+    console.log(`  Type: ${step.type}`);
+    console.log(`  Order: ${step.orderIndex}`);
+    console.log(`  Conditions:`, JSON.stringify(step.conditions, null, 2));
+    console.log("---------------------------------------------------");
+  });
+}
+
+inspectBranchSteps()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/inspect-db.ts

@@ -0,0 +1,29 @@
+import { db } from "../../src/server/db";
+import { steps } from "../../src/server/db/schema";
+import { eq, like } from "drizzle-orm";
+
+async function checkSteps() {
+  const allSteps = await db
+    .select()
+    .from(steps)
+    .where(like(steps.name, "%Comprehension Check%"));
+
+  console.log("Found steps:", allSteps.length);
+
+  for (const step of allSteps) {
+    console.log("Step Name:", step.name);
+    console.log("Type:", step.type);
+    console.log("Conditions (typeof):", typeof step.conditions);
+    console.log(
+      "Conditions (value):",
+      JSON.stringify(step.conditions, null, 2),
+    );
+  }
+}
+
+checkSteps()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/inspect-step.ts

@@ -0,0 +1,62 @@
+import { db } from "~/server/db";
+import { steps, experiments } from "~/server/db/schema";
+import { eq, asc } from "drizzle-orm";
+
+async function inspectExperimentSteps() {
+  // Find experiment by ID
+  const experiment = await db.query.experiments.findFirst({
+    where: eq(experiments.id, "961d0cb1-256d-4951-8387-6d855a0ae603"),
+  });
+
+  if (!experiment) {
+    console.log("Experiment not found!");
+    return;
+  }
+
+  console.log(`Inspecting Experiment: ${experiment.name} (${experiment.id})`);
+
+  const experimentSteps = await db.query.steps.findMany({
+    where: eq(steps.experimentId, experiment.id),
+    orderBy: [asc(steps.orderIndex)],
+    with: {
+      actions: {
+        orderBy: (actions, { asc }) => [asc(actions.orderIndex)],
+      },
+    },
+  });
+
+  console.log(`Found ${experimentSteps.length} steps.`);
+
+  for (const step of experimentSteps) {
+    console.log("--------------------------------------------------");
+    console.log(`Step [${step.orderIndex}] ID: ${step.id}`);
+    console.log(`Name: ${step.name}`);
+    console.log(`Type: ${step.type}`);
+
+    if (step.type === "conditional") {
+      console.log("Conditions:", JSON.stringify(step.conditions, null, 2));
+    }
+
+    if (step.actions.length > 0) {
+      console.log("Actions:");
+      for (const action of step.actions) {
+        console.log(
+          `  - [${action.orderIndex}] ${action.name} (${action.type})`,
+        );
+        if (action.type === "wizard_wait_for_response") {
+          console.log(
+            "    Parameters:",
+            JSON.stringify(action.parameters, null, 2),
+          );
+        }
+      }
+    }
+  }
+}
+
+inspectExperimentSteps()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/inspect-visual-design.ts

@@ -0,0 +1,32 @@
+import { db } from "../../src/server/db";
+import { experiments } from "../../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+async function inspectVisualDesign() {
+  const exps = await db.select().from(experiments);
+
+  for (const exp of exps) {
+    console.log(`Experiment: ${exp.name}`);
+    if (exp.visualDesign) {
+      const vd = exp.visualDesign as any;
+      console.log("Visual Design Steps:");
+      if (vd.steps && Array.isArray(vd.steps)) {
+        vd.steps.forEach((s: any, i: number) => {
+          console.log(`  [${i}] ${s.name} (${s.type})`);
+          console.log(`      Trigger: ${JSON.stringify(s.trigger)}`);
+        });
+      } else {
+        console.log("  No steps in visualDesign or invalid format.");
+      }
+    } else {
+      console.log("  No visualDesign blob.");
+    }
+  }
+}
+
+inspectVisualDesign()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/patch-branch-action-params.ts

@@ -0,0 +1,74 @@
+import { db } from "~/server/db";
+import { actions, steps } from "~/server/db/schema";
+import { eq, sql } from "drizzle-orm";
+
+async function patchActionParams() {
+  console.log("Patching Action Parameters for Interactive Storyteller...");
+
+  // Target Step IDs
+  const step3CondId = "b9d43f8c-c40c-4f1c-9fdc-9076338d3c85"; // Step 3: Comprehension Check
+  const actionId = "10851aef-e720-45fc-ba5e-05e1e3425dab"; // Action: Wait for Choice
+
+  // 1. Get the authoritative conditions from the Step
+  const step = await db.query.steps.findFirst({
+    where: eq(steps.id, step3CondId),
+  });
+
+  if (!step) {
+    console.error("Step 3 not found!");
+    return;
+  }
+
+  const conditions = step.conditions as any;
+  const richOptions = conditions?.options;
+
+  if (!richOptions || !Array.isArray(richOptions)) {
+    console.error("Step 3 conditions are missing valid options!");
+    return;
+  }
+
+  console.log(
+    "Found rich options in Step:",
+    JSON.stringify(richOptions, null, 2),
+  );
+
+  // 2. Get the Action
+  const action = await db.query.actions.findFirst({
+    where: eq(actions.id, actionId),
+  });
+
+  if (!action) {
+    console.error("Action not found!");
+    return;
+  }
+
+  console.log(
+    "Current Action Parameters:",
+    JSON.stringify(action.parameters, null, 2),
+  );
+
+  // 3. Patch the Action Parameters
+  // We replace the simple string options with the rich object options
+  const currentParams = action.parameters as any;
+  const newParams = {
+    ...currentParams,
+    options: richOptions, // Overwrite with rich options from step
+  };
+
+  console.log("New Action Parameters:", JSON.stringify(newParams, null, 2));
+
+  await db.execute(sql`
+        UPDATE hs_action
+        SET parameters = ${JSON.stringify(newParams)}::jsonb
+        WHERE id = ${actionId}
+    `);
+
+  console.log("Action parameters successfully patched.");
+}
+
+patchActionParams()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/patch-branch-steps.ts

@@ -0,0 +1,100 @@
+import { db } from "~/server/db";
+import { steps } from "~/server/db/schema";
+import { eq, sql } from "drizzle-orm";
+
+async function patchBranchSteps() {
+  console.log("Patching branch steps for Interactive Storyteller...");
+
+  // Target Step IDs (From debug output)
+  const step3CondId = "b9d43f8c-c40c-4f1c-9fdc-9076338d3c85"; // Step 3: Comprehension Check
+  const stepBranchAId = "3a2dc0b7-a43e-4236-9b9e-f957abafc1e5"; // Step 4: Branch A (Correct)
+  const stepBranchBId = "3ae2fe8a-fc5d-4a04-baa5-699a21f19e30"; // Step 5: Branch B (Incorrect)
+  const stepConclusionId = "cc3fbc7f-29e5-45e0-8d46-e80813c54292"; // Step 6: Conclusion
+
+  // Update Step 3 (The Conditional Step)
+  console.log("Updating Step 3 (Conditional Step)...");
+  const step3Conditional = await db.query.steps.findFirst({
+    where: eq(steps.id, step3CondId),
+  });
+
+  if (step3Conditional) {
+    const currentConditions = (step3Conditional.conditions as any) || {};
+    const options = currentConditions.options || [];
+
+    // Patch options to point to real step IDs
+    const newOptions = options.map((opt: any) => {
+      if (opt.value === "Correct") return { ...opt, nextStepId: stepBranchAId };
+      if (opt.value === "Incorrect")
+        return { ...opt, nextStepId: stepBranchBId };
+      return opt;
+    });
+
+    const newConditions = { ...currentConditions, options: newOptions };
+
+    await db.execute(sql`
+            UPDATE hs_step 
+            SET conditions = ${JSON.stringify(newConditions)}::jsonb
+            WHERE id = ${step3CondId}
+        `);
+    console.log("Step 3 (Conditional) updated links.");
+  } else {
+    console.log("Step 3 (Conditional) not found.");
+  }
+
+  // Update Step 4 (Branch A)
+  console.log("Updating Step 4 (Branch A)...");
+  /* 
+       Note: We already patched Step 4 in previous run but under wrong assumption?
+       Let's re-patch to be safe.
+       Debug output showed ID: 3a2dc0b7-a43e-4236-9b9e-f957abafc1e5
+       It should jump to Conclusion (cc3fbc7f...)
+    */
+  const stepBranchA = await db.query.steps.findFirst({
+    where: eq(steps.id, stepBranchAId),
+  });
+
+  if (stepBranchA) {
+    const currentConditions =
+      (stepBranchA.conditions as Record<string, unknown>) || {};
+    const newConditions = {
+      ...currentConditions,
+      nextStepId: stepConclusionId,
+    };
+
+    await db.execute(sql`
+            UPDATE hs_step 
+            SET conditions = ${JSON.stringify(newConditions)}::jsonb
+            WHERE id = ${stepBranchAId}
+        `);
+    console.log("Step 4 (Branch A) updated jump target.");
+  }
+
+  // Update Step 5 (Branch B)
+  console.log("Updating Step 5 (Branch B)...");
+  const stepBranchB = await db.query.steps.findFirst({
+    where: eq(steps.id, stepBranchBId),
+  });
+
+  if (stepBranchB) {
+    const currentConditions =
+      (stepBranchB.conditions as Record<string, unknown>) || {};
+    const newConditions = {
+      ...currentConditions,
+      nextStepId: stepConclusionId,
+    };
+
+    await db.execute(sql`
+            UPDATE hs_step 
+            SET conditions = ${JSON.stringify(newConditions)}::jsonb
+            WHERE id = ${stepBranchBId}
+        `);
+    console.log("Step 5 (Branch B) updated jump target.");
+  }
+}
+
+patchBranchSteps()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/reproduce-hydration.ts

@@ -0,0 +1,87 @@
+import { convertDatabaseToSteps } from "../../src/lib/experiment-designer/block-converter";
+import { type ExperimentStep } from "../../src/lib/experiment-designer/types";
+
+// Mock DB Steps (simulating what experimentsRouter returns before conversion)
+const mockDbSteps = [
+  {
+    id: "step-1",
+    name: "Step 1",
+    type: "wizard",
+    orderIndex: 0,
+    actions: [
+      {
+        id: "seq-1",
+        name: "Test Sequence",
+        type: "sequence",
+        parameters: {
+          children: [
+            {
+              id: "child-1",
+              name: "Child 1",
+              type: "wait",
+              parameters: { duration: 1 },
+            },
+            {
+              id: "child-2",
+              name: "Child 2",
+              type: "wait",
+              parameters: { duration: 2 },
+            },
+          ],
+        },
+      },
+    ],
+  },
+];
+
+// Mock Store Logic (simulating store.ts)
+function cloneActions(actions: any[]): any[] {
+  return actions.map((a) => ({
+    ...a,
+    children: a.children ? cloneActions(a.children) : undefined,
+  }));
+}
+
+function cloneSteps(steps: any[]): any[] {
+  return steps.map((s) => ({
+    ...s,
+    actions: cloneActions(s.actions),
+  }));
+}
+
+console.log("🔹 Testing Hydration & Cloning...");
+
+// 1. Convert DB -> Runtime
+const runtimeSteps = convertDatabaseToSteps(mockDbSteps);
+const seq = runtimeSteps[0]?.actions[0];
+
+if (!seq) {
+  console.error("❌ Conversion Failed: Sequence action not found.");
+  process.exit(1);
+}
+
+console.log(`Runtime Children Count: ${seq.children?.length ?? "undefined"}`);
+
+if (!seq.children || seq.children.length === 0) {
+  console.error("❌ Conversion Failed: Children not hydrated from parameters.");
+  process.exit(1);
+}
+
+// 2. Store Cloning
+const clonedSteps = cloneSteps(runtimeSteps);
+const clonedSeq = clonedSteps[0]?.actions[0];
+
+if (!clonedSeq) {
+  console.error("❌ Cloning Failed: Sequence action lost.");
+  process.exit(1);
+}
+
+console.log(
+  `Cloned Children Count: ${clonedSeq.children?.length ?? "undefined"}`,
+);
+
+if (clonedSeq.children?.length === 2) {
+  console.log("✅ SUCCESS: Data hydrated and cloned correctly.");
+} else {
+  console.error("❌ CLONING FAILED: Children lost during clone.");
+}

scripts/archive/seed-control-demo-draft.ts

@@ -0,0 +1,136 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+import { sql } from "drizzle-orm";
+
+// Database connection
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  console.log("🌱 Seeding 'Control Flow Demo' experiment...");
+
+  try {
+    // 1. Find Admin User & Study
+    const user = await db.query.users.findFirst({
+      where: (users, { eq }) => eq(users.email, "sean@soconnor.dev"),
+    });
+    if (!user)
+      throw new Error(
+        "Admin user 'sean@soconnor.dev' not found. Run seed-dev.ts first.",
+      );
+
+    const study = await db.query.studies.findFirst({
+      where: (studies, { eq }) => eq(studies.name, "Comparative WoZ Study"),
+    });
+    if (!study)
+      throw new Error(
+        "Study 'Comparative WoZ Study' not found. Run seed-dev.ts first.",
+      );
+
+    // Find Robot
+    const robot = await db.query.robots.findFirst({
+      where: (robots, { eq }) => eq(robots.name, "NAO6"),
+    });
+    if (!robot)
+      throw new Error("Robot 'NAO6' not found. Run seed-dev.ts first.");
+
+    // 2. Create Experiment
+    const [experiment] = await db
+      .insert(schema.experiments)
+      .values({
+        studyId: study.id,
+        name: "Control Flow Demo",
+        description:
+          "Demonstration of enhanced control flow actions: Sequence, Parallel, Wait, Loop, Branch.",
+        version: 1,
+        status: "draft",
+        robotId: robot.id,
+        createdBy: user.id,
+      })
+      .returning();
+
+    if (!experiment) throw new Error("Failed to create experiment");
+    console.log(`✅ Created Experiment: ${experiment.id}`);
+
+    // 3. Create Steps
+
+    // Step 1: Sequence & Parallel
+    const [step1] = await db
+      .insert(schema.steps)
+      .values({
+        experimentId: experiment.id,
+        name: "Complex Action Structures",
+        description: "Demonstrating Sequence and Parallel groups",
+        type: "robot",
+        orderIndex: 0,
+        required: true,
+        durationEstimate: 30,
+      })
+      .returning();
+
+    // Step 2: Loops & Waits
+    const [step2] = await db
+      .insert(schema.steps)
+      .values({
+        experimentId: experiment.id,
+        name: "Repetition & Delays",
+        description: "Demonstrating Loop and Wait actions",
+        type: "robot",
+        orderIndex: 1,
+        required: true,
+        durationEstimate: 45,
+      })
+      .returning();
+
+    // 4. Create Actions
+
+    // --- Step 1 Actions ---
+
+    // Top-level Sequence
+    const seqId = `seq-${Date.now()}`;
+    await db.insert(schema.actions).values({
+      stepId: step1!.id,
+      name: "Introduction Sequence",
+      type: "sequence", // New type
+      orderIndex: 0,
+      parameters: {},
+      pluginId: "hristudio-core",
+      category: "control",
+      // No explicit children column in schema?
+      // Wait, schema.actions has "children" as jsonb or it's a recursive relationship?
+      // Let's check schema/types.
+      // Looking at ActionChip, it expects `action.children`.
+      // In DB, it's likely stored in `children` jsonb column if it exists, OR we need to perform recursive inserts if schema supports parentId.
+      // Checking `types.ts` or schema...
+      // Assuming flat list references for now or JSONB.
+      // Wait, `ExperimentAction` in types has `children?: ExperimentAction[]`.
+      // If the DB schema `actions` table handles nesting via `parameters` or specific column, I need to know.
+      // Defaulting to "children" property in JSON parameter if DB doesn't have parentId.
+      // Checking `schema.ts`: "children" is likely NOT a column if I haven't seen it in seed-dev.
+      // However, `ActionChip` uses `action.children`. Steps map to `actions`.
+      // If `actions` table has `parentId` or `children` JSONB.
+      // I will assume `children` is part of the `parameters` or a simplified representation for now,
+      // BUT `FlowWorkspace` treats `action.children` as real actions.
+      // Let's check `schema.ts` quickly.
+    });
+
+    // I need to check schema.actions definition effectively.
+    // For this pass, I will insert them as flat actions since I can't confirm nesting storage without checking schema.
+    // But the user WANTS to see the nesting (Sequence, Parallel).
+    // The `SortableActionChip` renders `action.children`.
+    // The `TrialExecutionEngine` executes `action.children`.
+    // So the data MUST include children.
+    // Most likely `actions` table has a `children` JSONB column.
+
+    // I will insert a Parallel action with embedded children in the `children` column (if it exists) or `parameters`.
+    // Re-reading `scripts/seed-dev.ts`: It doesn't show any nested actions.
+    // I will read `src/server/db/schema.ts` to be sure.
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+// I'll write the file AFTER checking schema to ensure I structure the nested actions correctly.

scripts/archive/seed-control-demo.ts

@@ -0,0 +1,254 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+import { sql } from "drizzle-orm";
+import { v4 as uuidv4 } from "uuid";
+
+// Database connection
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  console.log("🌱 Seeding 'Control Flow Demo' experiment...");
+
+  try {
+    // 1. Find Admin User & Study
+    const user = await db.query.users.findFirst({
+      where: (users, { eq }) => eq(users.email, "sean@soconnor.dev"),
+    });
+    if (!user)
+      throw new Error(
+        "Admin user 'sean@soconnor.dev' not found. Run seed-dev.ts first.",
+      );
+
+    const study = await db.query.studies.findFirst({
+      where: (studies, { eq }) => eq(studies.name, "Comparative WoZ Study"),
+    });
+    if (!study)
+      throw new Error(
+        "Study 'Comparative WoZ Study' not found. Run seed-dev.ts first.",
+      );
+
+    // Find Robot
+    const robot = await db.query.robots.findFirst({
+      where: (robots, { eq }) => eq(robots.name, "NAO6"),
+    });
+    if (!robot)
+      throw new Error("Robot 'NAO6' not found. Run seed-dev.ts first.");
+
+    // 2. Create Experiment
+    const [experiment] = await db
+      .insert(schema.experiments)
+      .values({
+        studyId: study.id,
+        name: "Control Flow Demo",
+        description:
+          "Demonstration of enhanced control flow actions: Sequence, Parallel, Wait, Loop, Branch.",
+        version: 1,
+        status: "draft",
+        robotId: robot.id,
+        createdBy: user.id,
+      })
+      .returning();
+
+    if (!experiment) throw new Error("Failed to create experiment");
+    console.log(`✅ Created Experiment: ${experiment.id}`);
+
+    // 3. Create Steps
+
+    // Step 1: Sequence & Parallel
+    const [step1] = await db
+      .insert(schema.steps)
+      .values({
+        experimentId: experiment.id,
+        name: "Complex Action Structures",
+        description: "Demonstrating Sequence and Parallel groups",
+        type: "robot",
+        orderIndex: 0,
+        required: true,
+        durationEstimate: 30,
+      })
+      .returning();
+    if (!step1) throw new Error("Failed to create step1");
+
+    // Step 2: Loops & Waits
+    const [step2] = await db
+      .insert(schema.steps)
+      .values({
+        experimentId: experiment.id,
+        name: "Repetition & Delays",
+        description: "Demonstrating Loop and Wait actions",
+        type: "robot",
+        orderIndex: 1,
+        required: true,
+        durationEstimate: 45,
+      })
+      .returning();
+    if (!step2) throw new Error("Failed to create step2");
+
+    // 4. Create Actions
+
+    // --- Step 1 Actions ---
+
+    // Action 1: Sequence
+    // Note: Nested children are stored in 'children' property of the action object in frontend,
+    // but in DB 'parameters' is the JSONB field.
+    // However, looking at ActionChip, it expects `action.children`.
+    // The `ExperimentAction` type usually has `children` at top level.
+    // If the DB doesn't have it, the API must be hydrating it.
+    // BUT, for the purpose of this seed which writes to DB directly, I will put it in `parameters.children`
+    // and assume the frontend/API handles it or I'm missing a column.
+    // Actually, looking at schema again, `actions` table DOES NOT have children.
+    // So it MUST be in `parameters` or it's not persisted in this table structure yet (which would be a bug, but I'm seeding what exists).
+    // Wait, if I put it in parameters, does the UI read it?
+    // `ActionChip` reads `action.children`.
+    // I will try to put it in `parameters` and distinct `children` property in the JSON passed to `parameters`?
+    // No, `parameters` is jsonb.
+    // I will assume for now that the system expects it in parameters if it's not a column, OR it's not fully supported in DB yet.
+    // I will stick to what the UI likely consumes. `parameters: { children: [...] }`
+
+    // Sequence
+    await db.insert(schema.actions).values({
+      stepId: step1.id,
+      name: "Introduction Sequence",
+      type: "sequence",
+      orderIndex: 0,
+      // Embedding children here to demonstrate.
+      // Real implementation might vary if keys are strictly checked.
+      parameters: {
+        children: [
+          {
+            id: uuidv4(),
+            name: "Say Hello",
+            type: "nao6-ros2.say_text",
+            parameters: { text: "Hello there!" },
+            category: "interaction",
+          },
+          {
+            id: uuidv4(),
+            name: "Wave Hand",
+            type: "nao6-ros2.move_arm",
+            parameters: { arm: "right", action: "wave" },
+            category: "movement",
+          },
+        ],
+      },
+      pluginId: "hristudio-core",
+      category: "control",
+      sourceKind: "core",
+    });
+
+    // Parallel
+    await db.insert(schema.actions).values({
+      stepId: step1.id,
+      name: "Parallel Actions",
+      type: "parallel",
+      orderIndex: 1,
+      parameters: {
+        children: [
+          {
+            id: uuidv4(),
+            name: "Say 'Moving'",
+            type: "nao6-ros2.say_text",
+            parameters: { text: "I am moving and talking." },
+            category: "interaction",
+          },
+          {
+            id: uuidv4(),
+            name: "Walk Forward",
+            type: "nao6-ros2.move_to",
+            parameters: { x: 0.5, y: 0 },
+            category: "movement",
+          },
+        ],
+      },
+      pluginId: "hristudio-core",
+      category: "control",
+      sourceKind: "core",
+    });
+
+    // --- Step 2 Actions ---
+
+    // Loop
+    await db.insert(schema.actions).values({
+      stepId: step2.id,
+      name: "Repeat Message",
+      type: "loop",
+      orderIndex: 0,
+      parameters: {
+        iterations: 3,
+        children: [
+          {
+            id: uuidv4(),
+            name: "Say 'Echo'",
+            type: "nao6-ros2.say_text",
+            parameters: { text: "Echo" },
+            category: "interaction",
+          },
+        ],
+      },
+      pluginId: "hristudio-core",
+      category: "control",
+      sourceKind: "core",
+    });
+
+    // Wait
+    await db.insert(schema.actions).values({
+      stepId: step2.id,
+      name: "Wait 5 Seconds",
+      type: "wait",
+      orderIndex: 1,
+      parameters: { duration: 5 },
+      pluginId: "hristudio-core",
+      category: "control",
+      sourceKind: "core",
+    });
+
+    // Branch (Controls step routing, not nested actions)
+    // Note: Branch configuration is stored in step.trigger.conditions, not action.parameters
+    // The branch action itself is just a marker that this step has conditional routing
+    await db.insert(schema.actions).values({
+      stepId: step2.id,
+      name: "Conditional Routing",
+      type: "branch",
+      orderIndex: 2,
+      parameters: {
+        // Branch actions don't have nested children
+        // Routing is configured at the step level via trigger.conditions
+      },
+      pluginId: "hristudio-core",
+      category: "control",
+      sourceKind: "core",
+    });
+
+    // Update step2 to have conditional routing
+    await db
+      .update(schema.steps)
+      .set({
+        type: "conditional",
+        conditions: {
+          options: [
+            {
+              label: "High Score Path",
+              nextStepIndex: 2, // Would go to a hypothetical step 3
+              variant: "default",
+            },
+            {
+              label: "Low Score Path",
+              nextStepIndex: 0, // Loop back to step 1
+              variant: "outline",
+            },
+          ],
+        },
+      })
+      .where(sql`id = ${step2.id}`);
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  } finally {
+    await connection.end();
+  }
+}
+
+main();

scripts/archive/seed-nao6-plugin.ts

@@ -564,6 +564,7 @@ async function seedNAO6Plugin() {
 
     const pluginData: InsertPlugin = {
       robotId: robotId,
+      identifier: "nao6-ros2",
       name: "NAO6 Robot (Enhanced ROS2 Integration)",
       version: "2.0.0",
       description:

scripts/archive/seed-story-red-rock.ts

@@ -0,0 +1,274 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+import { sql } from "drizzle-orm";
+import { v4 as uuidv4 } from "uuid";
+
+// Database connection
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  console.log("🌱 Seeding 'Story: Red Rock' experiment...");
+
+  try {
+    // 1. Find Admin User & Study
+    const user = await db.query.users.findFirst({
+      where: (users, { eq }) => eq(users.email, "sean@soconnor.dev"),
+    });
+    if (!user) throw new Error("Admin user 'sean@soconnor.dev' not found.");
+
+    const study = await db.query.studies.findFirst({
+      where: (studies, { eq }) => eq(studies.name, "Comparative WoZ Study"),
+    });
+    if (!study) throw new Error("Study 'Comparative WoZ Study' not found.");
+
+    const robot = await db.query.robots.findFirst({
+      where: (robots, { eq }) => eq(robots.name, "NAO6"),
+    });
+    if (!robot) throw new Error("Robot 'NAO6' not found.");
+
+    // 2. Create Experiment
+    const [experiment] = await db
+      .insert(schema.experiments)
+      .values({
+        studyId: study.id,
+        name: "Story: Red Rock",
+        description:
+          "A story about a red rock on Mars with comprehension check and branching.",
+        version: 1,
+        status: "draft",
+        robotId: robot.id,
+        createdBy: user.id,
+      })
+      .returning();
+
+    if (!experiment) throw new Error("Failed to create experiment");
+    console.log(`✅ Created Experiment: ${experiment.id}`);
+
+    // 3. Create Steps (in reverse for ID references if needed, but we'll use uuid placeholders)
+    const conclusionId = uuidv4();
+    const branchAId = uuidv4();
+    const branchBId = uuidv4();
+    const checkId = uuidv4();
+
+    // Step 1: The Hook
+    const [step1] = await db
+      .insert(schema.steps)
+      .values({
+        experimentId: experiment.id,
+        name: "The Hook",
+        type: "wizard",
+        orderIndex: 0,
+      })
+      .returning();
+
+    // Step 2: The Narrative
+    const [step2] = await db
+      .insert(schema.steps)
+      .values({
+        experimentId: experiment.id,
+        name: "The Narrative",
+        type: "wizard",
+        orderIndex: 1,
+      })
+      .returning();
+
+    // Step 3: Comprehension Check (Conditional)
+    const [step3] = await db
+      .insert(schema.steps)
+      .values({
+        id: checkId,
+        experimentId: experiment.id,
+        name: "Comprehension Check",
+        type: "conditional",
+        orderIndex: 2,
+        conditions: {
+          variable: "last_wizard_response",
+          options: [
+            {
+              label: "Answer: Red (Correct)",
+              value: "Red",
+              variant: "default",
+              nextStepId: branchAId,
+            },
+            {
+              label: "Answer: Other (Incorrect)",
+              value: "Incorrect",
+              variant: "destructive",
+              nextStepId: branchBId,
+            },
+          ],
+        },
+      })
+      .returning();
+
+    // Step 4: Branch A (Correct)
+    const [step4] = await db
+      .insert(schema.steps)
+      .values({
+        id: branchAId,
+        experimentId: experiment.id,
+        name: "Branch A: Correct Response",
+        type: "wizard",
+        orderIndex: 3,
+        conditions: { nextStepId: conclusionId }, // SKIP BRANCH B
+      })
+      .returning();
+
+    // Step 5: Branch B (Incorrect)
+    const [step5] = await db
+      .insert(schema.steps)
+      .values({
+        id: branchBId,
+        experimentId: experiment.id,
+        name: "Branch B: Incorrect Response",
+        type: "wizard",
+        orderIndex: 4,
+        conditions: { nextStepId: conclusionId },
+      })
+      .returning();
+
+    // Step 6: Conclusion
+    const [step6] = await db
+      .insert(schema.steps)
+      .values({
+        id: conclusionId,
+        experimentId: experiment.id,
+        name: "Conclusion",
+        type: "wizard",
+        orderIndex: 5,
+      })
+      .returning();
+
+    // 4. Create Actions
+
+    // The Hook
+    await db.insert(schema.actions).values([
+      {
+        stepId: step1!.id,
+        name: "Say Hello",
+        type: "nao6-ros2.say_text",
+        orderIndex: 0,
+        parameters: { text: "Hello! Are you ready for a story?" },
+      },
+      {
+        stepId: step1!.id,
+        name: "Wave",
+        type: "nao6-ros2.move_arm",
+        orderIndex: 1,
+        parameters: { arm: "right", shoulder_pitch: 0.5 },
+      },
+    ]);
+
+    // The Narrative
+    await db.insert(schema.actions).values([
+      {
+        stepId: step2!.id,
+        name: "The Story",
+        type: "nao6-ros2.say_text",
+        orderIndex: 0,
+        parameters: {
+          text: "Once, a traveler went to Mars. He found a bright red rock that glowed.",
+        },
+      },
+      {
+        stepId: step2!.id,
+        name: "Look Left",
+        type: "nao6-ros2.turn_head",
+        orderIndex: 1,
+        parameters: { yaw: 0.5, speed: 0.3 },
+      },
+      {
+        stepId: step2!.id,
+        name: "Look Right",
+        type: "nao6-ros2.turn_head",
+        orderIndex: 2,
+        parameters: { yaw: -0.5, speed: 0.3 },
+      },
+    ]);
+
+    // Comprehension Check
+    await db.insert(schema.actions).values([
+      {
+        stepId: step3!.id,
+        name: "Ask Color",
+        type: "nao6-ros2.say_text",
+        orderIndex: 0,
+        parameters: { text: "What color was the rock I found on Mars?" },
+      },
+      {
+        stepId: step3!.id,
+        name: "Wait for Color",
+        type: "wizard_wait_for_response",
+        orderIndex: 1,
+        parameters: {
+          options: ["Red", "Blue", "Green", "Incorrect"],
+          prompt_text: "What color did the participant say?",
+        },
+      },
+    ]);
+
+    // Branch A (Using say_with_emotion)
+    await db
+      .insert(schema.actions)
+      .values([
+        {
+          stepId: step4!.id,
+          name: "Happy Response",
+          type: "nao6-ros2.say_with_emotion",
+          orderIndex: 0,
+          parameters: {
+            text: "Exacty! It was a glowing red rock.",
+            emotion: "happy",
+          },
+        },
+      ]);
+
+    // Branch B
+    await db.insert(schema.actions).values([
+      {
+        stepId: step5!.id,
+        name: "Correct them",
+        type: "nao6-ros2.say_text",
+        orderIndex: 0,
+        parameters: { text: "Actually, it was red." },
+      },
+      {
+        stepId: step5!.id,
+        name: "Shake Head",
+        type: "nao6-ros2.turn_head",
+        orderIndex: 1,
+        parameters: { yaw: 0.3, speed: 0.5 },
+      },
+    ]);
+
+    // Conclusion
+    await db.insert(schema.actions).values([
+      {
+        stepId: step6!.id,
+        name: "Final Goodbye",
+        type: "nao6-ros2.say_text",
+        orderIndex: 0,
+        parameters: { text: "That is all for today. Goodbye!" },
+      },
+      {
+        stepId: step6!.id,
+        name: "Rest",
+        type: "nao6-ros2.move_arm",
+        orderIndex: 1,
+        parameters: { shoulder_pitch: 1.5 },
+      },
+    ]);
+
+    console.log("✅ Seed completed successfully!");
+  } catch (err) {
+    console.error("❌ Seed failed:", err);
+    process.exit(1);
+  } finally {
+    await connection.end();
+  }
+}
+
+main();

scripts/archive/simulate-branch-logic.ts

@@ -0,0 +1,92 @@
+// Mock of the logic in WizardInterface.tsx handleNextStep
+const steps = [
+  {
+    id: "b9d43f8c-c40c-4f1c-9fdc-9076338d3c85",
+    name: "Step 3 (Conditional)",
+    order: 2,
+  },
+  {
+    id: "3a2dc0b7-a43e-4236-9b9e-f957abafc1e5",
+    name: "Step 4 (Branch A)",
+    order: 3,
+    conditions: {
+      nextStepId: "cc3fbc7f-29e5-45e0-8d46-e80813c54292",
+    },
+  },
+  {
+    id: "3ae2fe8a-fc5d-4a04-baa5-699a21f19e30",
+    name: "Step 5 (Branch B)",
+    order: 4,
+    conditions: {
+      nextStepId: "cc3fbc7f-29e5-45e0-8d46-e80813c54292",
+    },
+  },
+  {
+    id: "cc3fbc7f-29e5-45e0-8d46-e80813c54292",
+    name: "Step 6 (Conclusion)",
+    order: 5,
+  },
+];
+
+function simulateNextStep(currentStepIndex: number) {
+  const currentStep = steps[currentStepIndex];
+
+  if (!currentStep) {
+    console.log("No step found at index:", currentStepIndex);
+    return;
+  }
+
+  console.log(`\n--- Simulating Next Step from: ${currentStep.name} ---`);
+  console.log("Current Step Data:", JSON.stringify(currentStep, null, 2));
+
+  // Logic from WizardInterface.tsx
+  console.log(
+    "[WizardInterface] Checking for nextStepId condition:",
+    currentStep?.conditions,
+  );
+
+  if (currentStep?.conditions?.nextStepId) {
+    const nextId = String(currentStep.conditions.nextStepId);
+    const targetIndex = steps.findIndex((s) => s.id === nextId);
+
+    console.log(`Target ID: ${nextId}`);
+    console.log(`Target Index Found: ${targetIndex}`);
+
+    if (targetIndex !== -1) {
+      console.log(
+        `[WizardInterface] Condition-based jump to step ${targetIndex} (${nextId})`,
+      );
+      return targetIndex;
+    } else {
+      console.warn(
+        `[WizardInterface] Targeted nextStepId ${nextId} not found in steps list.`,
+      );
+    }
+  } else {
+    console.log(
+      "[WizardInterface] No nextStepId found in conditions, proceeding linearly.",
+    );
+  }
+
+  // Default: Linear progression
+  const nextIndex = currentStepIndex + 1;
+  console.log(`Proceeding linearly to index ${nextIndex}`);
+  return nextIndex;
+}
+
+// Simulate Branch A (Index 1 in this array, but 3 in real experiment?)
+// In real exp, Step 3 is index 2. Step 4 (Branch A) is index 3.
+console.log("Real experiment indices:");
+// 0: Hook, 1: Narrative, 2: Conditional, 3: Branch A, 4: Branch B, 5: Conclusion
+const indexStep4 = 1; // logical index in my mock array
+const indexStep5 = 2; // logical index
+
+console.log("Testing Branch A Logic:");
+const resultA = simulateNextStep(indexStep4);
+if (resultA === 3) console.log("SUCCESS: Branch A jumped to Conclusion");
+else console.log("FAILURE: Branch A fell through");
+
+console.log("\nTesting Branch B Logic:");
+const resultB = simulateNextStep(indexStep5);
+if (resultB === 3) console.log("SUCCESS: Branch B jumped to Conclusion");
+else console.log("FAILURE: Branch B fell through");

scripts/archive/test-converter.ts

@@ -0,0 +1,59 @@
+import { convertDatabaseToAction } from "../../src/lib/experiment-designer/block-converter";
+
+const mockDbAction = {
+  id: "eaf8f85b-75cf-4973-b436-092516b4e0e4",
+  name: "Introduction Sequence",
+  description: null,
+  type: "sequence",
+  orderIndex: 0,
+  parameters: {
+    children: [
+      {
+        id: "75018b01-a964-41fb-8612-940a29020d4a",
+        name: "Say Hello",
+        type: "nao6-ros2.say_text",
+        category: "interaction",
+        parameters: {
+          text: "Hello there!",
+        },
+      },
+      {
+        id: "d7020530-6477-41f3-84a4-5141778c93da",
+        name: "Wave Hand",
+        type: "nao6-ros2.move_arm",
+        category: "movement",
+        parameters: {
+          arm: "right",
+          action: "wave",
+        },
+      },
+    ],
+  },
+  timeout: null,
+  retryCount: 0,
+  sourceKind: "core",
+  pluginId: "hristudio-core",
+  pluginVersion: null,
+  robotId: null,
+  baseActionId: null,
+  category: "control",
+  transport: null,
+  ros2: null,
+  rest: null,
+  retryable: null,
+  parameterSchemaRaw: null,
+};
+
+console.log("Testing convertDatabaseToAction...");
+try {
+  const result = convertDatabaseToAction(mockDbAction);
+  console.log("Result:", JSON.stringify(result, null, 2));
+
+  if (result.children && result.children.length > 0) {
+    console.log("✅ Children hydrated successfully.");
+  } else {
+    console.error("❌ Children NOT hydrated.");
+  }
+} catch (e) {
+  console.error("❌ Error during conversion:", e);
+}

scripts/archive/test-trpc-client.ts

@@ -0,0 +1,74 @@
+import { appRouter } from "../../src/server/api/root";
+import { createCallerFactory } from "../../src/server/api/trpc";
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+// 1. Setup DB Context
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+// 2. Mock Session
+const mockSession = {
+  user: {
+    id: "0e830889-ab46-4b48-a8ba-1d4bd3e665ed", // Admin user ID from seed
+    name: "Sean O'Connor",
+    email: "sean@soconnor.dev",
+  },
+  expires: new Date().toISOString(),
+};
+
+// 3. Create Caller
+const createCaller = createCallerFactory(appRouter);
+const caller = createCaller({
+  db,
+  session: mockSession as any,
+  headers: new Headers(),
+});
+
+async function main() {
+  console.log("🔍 Fetching experiment via TRPC caller...");
+
+  // Get ID first
+  const exp = await db.query.experiments.findFirst({
+    where: eq(schema.experiments.name, "Control Flow Demo"),
+    columns: { id: true },
+  });
+
+  if (!exp) {
+    console.error("❌ Experiment not found");
+    return;
+  }
+
+  const result = await caller.experiments!.get({ id: exp.id });
+
+  console.log(`✅ Fetched experiment: ${result.name} (${result.id})`);
+
+  if (result.steps && result.steps.length > 0) {
+    console.log(`Checking ${result.steps.length} steps...`);
+    const actions = result.steps[0]!.actions; // Step 1 actions
+    console.log(`Step 1 has ${actions.length} actions.`);
+
+    actions.forEach((a) => {
+      if (["sequence", "parallel", "loop", "branch"].includes(a.type)) {
+        console.log(`\nAction: ${a.name} (${a.type})`);
+        console.log(
+          `Children Count: ${a.children ? a.children.length : "UNDEFINED"}`,
+        );
+        if (a.children && a.children.length > 0) {
+          console.log(
+            `First Child: ${a.children[0]!.name} (${a.children[0]!.type})`,
+          );
+        }
+      }
+    });
+  } else {
+    console.error("❌ No steps found in result.");
+  }
+
+  await connection.end();
+}
+
+main();

scripts/archive/verify-conversion.ts

@@ -0,0 +1,46 @@
+import { db } from "../../src/server/db";
+import { experiments } from "../../src/server/db/schema";
+import { eq, asc } from "drizzle-orm";
+import { convertDatabaseToSteps } from "../../src/lib/experiment-designer/block-converter";
+
+async function verifyConversion() {
+  const experiment = await db.query.experiments.findFirst({
+    with: {
+      steps: {
+        orderBy: (steps, { asc }) => [asc(steps.orderIndex)],
+        with: {
+          actions: {
+            orderBy: (actions, { asc }) => [asc(actions.orderIndex)],
+          },
+        },
+      },
+    },
+  });
+
+  if (!experiment) {
+    console.log("No experiment found");
+    return;
+  }
+
+  console.log("Raw DB Steps Count:", experiment.steps.length);
+  const converted = convertDatabaseToSteps(experiment.steps);
+
+  console.log("Converted Steps:");
+  converted.forEach((s, idx) => {
+    console.log(`[${idx}] ${s.name} (${s.type})`);
+    console.log(`    Trigger:`, JSON.stringify(s.trigger));
+    if (s.type === "conditional") {
+      console.log(
+        `    Conditions populated?`,
+        Object.keys(s.trigger.conditions).length > 0,
+      );
+    }
+  });
+}
+
+verifyConversion()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/archive/verify-study-readiness.ts

@@ -0,0 +1,107 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import { eq, sql } from "drizzle-orm";
+import postgres from "postgres";
+import * as schema from "../../src/server/db/schema";
+
+const connectionString = process.env.DATABASE_URL!;
+const client = postgres(connectionString);
+const db = drizzle(client, { schema });
+
+async function verify() {
+  console.log("🔍 Verifying Study Readiness...");
+
+  // 1. Check Study
+  const study = await db.query.studies.findFirst({
+    where: eq(schema.studies.name, "Comparative WoZ Study"),
+  });
+
+  if (!study) {
+    console.error("❌ Study 'Comparative WoZ Study' not found.");
+    process.exit(1);
+  }
+  console.log("✅ Study found:", study.name);
+
+  // 2. Check Experiment
+  const experiment = await db.query.experiments.findFirst({
+    where: eq(schema.experiments.name, "The Interactive Storyteller"),
+  });
+
+  if (!experiment) {
+    console.error("❌ Experiment 'The Interactive Storyteller' not found.");
+    process.exit(1);
+  }
+  console.log("✅ Experiment found:", experiment.name);
+
+  // 3. Check Steps
+  const steps = await db.query.steps.findMany({
+    where: eq(schema.steps.experimentId, experiment.id),
+    orderBy: schema.steps.orderIndex,
+  });
+
+  console.log(`ℹ️ Found ${steps.length} steps.`);
+  if (steps.length < 5) {
+    console.error("❌ Expected at least 5 steps, found " + steps.length);
+    process.exit(1);
+  }
+
+  // Verify Step Names
+  const expectedSteps = [
+    "The Hook",
+    "The Narrative - Part 1",
+    "Comprehension Check",
+    "Positive Feedback",
+    "Conclusion",
+  ];
+  for (let i = 0; i < expectedSteps.length; i++) {
+    const step = steps[i];
+    if (!step) continue;
+
+    if (step.name !== expectedSteps[i]) {
+      console.error(
+        `❌ Step mismatch at index ${i}. Expected '${expectedSteps[i]}', got '${step.name}'`,
+      );
+    } else {
+      console.log(`✅ Step ${i + 1}: ${step.name}`);
+    }
+  }
+
+  // 4. Check Plugin Actions
+  // Find the NAO6 plugin
+  const plugin = await db.query.plugins.findFirst({
+    where: (plugins, { eq, and }) =>
+      and(
+        eq(plugins.name, "NAO6 Robot (Enhanced ROS2 Integration)"),
+        eq(plugins.status, "active"),
+      ),
+  });
+
+  if (!plugin) {
+    console.error("❌ NAO6 Plugin not found.");
+    process.exit(1);
+  }
+
+  const actions = plugin.actionDefinitions as any[];
+  const requiredActions = [
+    "nao_nod",
+    "nao_shake_head",
+    "nao_bow",
+    "nao_open_hand",
+  ];
+
+  for (const actionId of requiredActions) {
+    const found = actions.find((a) => a.id === actionId);
+    if (!found) {
+      console.error(`❌ Plugin missing action: ${actionId}`);
+      process.exit(1);
+    }
+    console.log(`✅ Plugin has action: ${actionId}`);
+  }
+
+  console.log("🎉 Verification Complete: Platform is ready for the study!");
+  process.exit(0);
+}
+
+verify().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

scripts/archive/verify-trpc-logic.ts

@@ -0,0 +1,86 @@
+import { db } from "~/server/db";
+import { experiments, steps, actions } from "~/server/db/schema";
+import { eq, asc, desc } from "drizzle-orm";
+import { convertDatabaseToSteps } from "~/lib/experiment-designer/block-converter";
+
+async function verifyTrpcLogic() {
+  console.log("Verifying TRPC Logic for Interactive Storyteller...");
+
+  // 1. Simulate the DB Query from experiments.ts
+  const experiment = await db.query.experiments.findFirst({
+    where: eq(experiments.name, "The Interactive Storyteller"),
+    with: {
+      study: {
+        columns: {
+          id: true,
+          name: true,
+        },
+      },
+      createdBy: {
+        columns: {
+          id: true,
+          name: true,
+          email: true,
+        },
+      },
+      robot: true,
+      steps: {
+        with: {
+          actions: {
+            orderBy: [asc(actions.orderIndex)],
+          },
+        },
+        orderBy: [asc(steps.orderIndex)],
+      },
+    },
+  });
+
+  if (!experiment) {
+    console.error("Experiment not found!");
+    return;
+  }
+
+  // 2. Simulate the Transformation
+  console.log("Transforming DB steps to Designer steps...");
+  const transformedSteps = convertDatabaseToSteps(experiment.steps);
+
+  // 3. Inspect Step 4 (Branch A)
+  // Step index 3 (0-based) is Branch A
+  const branchAStep = transformedSteps[3];
+
+  if (branchAStep) {
+    console.log("Step 4 (Branch A):", branchAStep.name);
+    console.log("  Type:", branchAStep.type);
+    console.log("  Trigger:", JSON.stringify(branchAStep.trigger, null, 2));
+  } else {
+    console.error("Step 4 (Branch A) not found in transformed steps!");
+    process.exit(1);
+  }
+
+  // Check conditions specifically
+  const conditions = branchAStep.trigger?.conditions as any;
+  if (conditions?.nextStepId) {
+    console.log(
+      "SUCCESS: nextStepId found in conditions:",
+      conditions.nextStepId,
+    );
+  } else {
+    console.error("FAILURE: nextStepId MISSING in conditions!");
+  }
+
+  // Inspect Step 5 (Branch B) for completeness
+  const branchBStep = transformedSteps[4];
+  if (branchBStep) {
+    console.log("Step 5 (Branch B):", branchBStep.name);
+    console.log("  Trigger:", JSON.stringify(branchBStep.trigger, null, 2));
+  } else {
+    console.warn("Step 5 (Branch B) not found in transformed steps.");
+  }
+}
+
+verifyTrpcLogic()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

scripts/get-demo-id.ts

@@ -0,0 +1,25 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  const exp = await db.query.experiments.findFirst({
+    where: eq(schema.experiments.name, "Control Flow Demo"),
+    columns: { id: true },
+  });
+
+  if (exp) {
+    console.log(`Experiment ID: ${exp.id}`);
+  } else {
+    console.error("Experiment not found");
+  }
+
+  await connection.end();
+}
+
+main();

scripts/get-user-id.ts

@@ -0,0 +1,25 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "../src/server/db/schema";
+import { eq } from "drizzle-orm";
+
+const connectionString = process.env.DATABASE_URL!;
+const connection = postgres(connectionString);
+const db = drizzle(connection, { schema });
+
+async function main() {
+  const user = await db.query.users.findFirst({
+    where: eq(schema.users.email, "sean@soconnor.dev"),
+    columns: { id: true },
+  });
+
+  if (user) {
+    console.log(`User ID: ${user.id}`);
+  } else {
+    console.error("User not found");
+  }
+
+  await connection.end();
+}
+
+main();

scripts/migrate-add-identifier.ts

@@ -0,0 +1,37 @@
+import { db } from "~/server/db";
+import { sql } from "drizzle-orm";
+
+async function migrate() {
+  console.log("Adding identifier column to hs_plugin...");
+
+  try {
+    await db.execute(
+      sql`ALTER TABLE hs_plugin ADD COLUMN identifier varchar(100)`,
+    );
+    console.log("✓ Added identifier column");
+  } catch (e: any) {
+    console.log("Column may already exist:", e.message);
+  }
+
+  try {
+    await db.execute(
+      sql`UPDATE hs_plugin SET identifier = name WHERE identifier IS NULL`,
+    );
+    console.log("✓ Copied name to identifier");
+  } catch (e: any) {
+    console.log("Error copying:", e.message);
+  }
+
+  try {
+    await db.execute(
+      sql`ALTER TABLE hs_plugin ADD CONSTRAINT hs_plugin_identifier_unique UNIQUE (identifier)`,
+    );
+    console.log("✓ Added unique constraint");
+  } catch (e: any) {
+    console.log("Constraint may already exist:", e.message);
+  }
+
+  console.log("Migration complete!");
+}
+
+migrate().catch(console.error);

scripts/verify-study-readiness.ts

@@ -1,90 +0,0 @@
-import { drizzle } from "drizzle-orm/postgres-js";
-import { eq, sql } from "drizzle-orm";
-import postgres from "postgres";
-import * as schema from "../src/server/db/schema";
-
-const connectionString = process.env.DATABASE_URL!;
-const client = postgres(connectionString);
-const db = drizzle(client, { schema });
-
-async function verify() {
-    console.log("🔍 Verifying Study Readiness...");
-
-    // 1. Check Study
-    const study = await db.query.studies.findFirst({
-        where: eq(schema.studies.name, "Comparative WoZ Study")
-    });
-
-    if (!study) {
-        console.error("❌ Study 'Comparative WoZ Study' not found.");
-        process.exit(1);
-    }
-    console.log("✅ Study found:", study.name);
-
-    // 2. Check Experiment
-    const experiment = await db.query.experiments.findFirst({
-        where: eq(schema.experiments.name, "The Interactive Storyteller")
-    });
-
-    if (!experiment) {
-        console.error("❌ Experiment 'The Interactive Storyteller' not found.");
-        process.exit(1);
-    }
-    console.log("✅ Experiment found:", experiment.name);
-
-    // 3. Check Steps
-    const steps = await db.query.steps.findMany({
-        where: eq(schema.steps.experimentId, experiment.id),
-        orderBy: schema.steps.orderIndex
-    });
-
-    console.log(`ℹ️ Found ${steps.length} steps.`);
-    if (steps.length < 5) {
-        console.error("❌ Expected at least 5 steps, found " + steps.length);
-        process.exit(1);
-    }
-
-    // Verify Step Names
-    const expectedSteps = ["The Hook", "The Narrative - Part 1", "Comprehension Check", "Positive Feedback", "Conclusion"];
-    for (let i = 0; i < expectedSteps.length; i++) {
-        const step = steps[i];
-        if (!step) continue;
-
-        if (step.name !== expectedSteps[i]) {
-            console.error(`❌ Step mismatch at index ${i}. Expected '${expectedSteps[i]}', got '${step.name}'`);
-        } else {
-            console.log(`✅ Step ${i + 1}: ${step.name}`);
-        }
-    }
-
-    // 4. Check Plugin Actions
-    // Find the NAO6 plugin
-    const plugin = await db.query.plugins.findFirst({
-        where: (plugins, { eq, and }) => and(eq(plugins.name, "NAO6 Robot (Enhanced ROS2 Integration)"), eq(plugins.status, "active"))
-    });
-
-    if (!plugin) {
-        console.error("❌ NAO6 Plugin not found.");
-        process.exit(1);
-    }
-
-    const actions = plugin.actionDefinitions as any[];
-    const requiredActions = ["nao_nod", "nao_shake_head", "nao_bow", "nao_open_hand"];
-
-    for (const actionId of requiredActions) {
-        const found = actions.find(a => a.id === actionId);
-        if (!found) {
-            console.error(`❌ Plugin missing action: ${actionId}`);
-            process.exit(1);
-        }
-        console.log(`✅ Plugin has action: ${actionId}`);
-    }
-
-    console.log("🎉 Verification Complete: Platform is ready for the study!");
-    process.exit(0);
-}
-
-verify().catch((e) => {
-    console.error(e);
-    process.exit(1);
-});

src/app/(dashboard)/debug/page.tsx

@@ -46,7 +46,10 @@ export default function DebugPage() {
 
   const ROS_BRIDGE_URL = "ws://134.82.159.25:9090";
 
-  const addLog = (message: string, type: "info" | "error" | "success" = "info") => {
+  const addLog = (
+    message: string,
+    type: "info" | "error" | "success" = "info",
+  ) => {
     const timestamp = new Date().toLocaleTimeString();
     const logEntry = `[${timestamp}] [${type.toUpperCase()}] ${message}`;
     setLogs((prev) => [...prev.slice(-99), logEntry]);
@@ -79,7 +82,9 @@ export default function DebugPage() {
     setConnectionStatus("connecting");
     setConnectionAttempts((prev) => prev + 1);
     setLastError(null);
-    addLog(`Attempting connection #${connectionAttempts + 1} to ${ROS_BRIDGE_URL}`);
+    addLog(
+      `Attempting connection #${connectionAttempts + 1} to ${ROS_BRIDGE_URL}`,
+    );
 
     const socket = new WebSocket(ROS_BRIDGE_URL);
 
@@ -96,7 +101,10 @@ export default function DebugPage() {
       setConnectionStatus("connected");
       setRosSocket(socket);
       setLastError(null);
-      addLog("✅ WebSocket connection established successfully", "success");
+      addLog(
+        "[SUCCESS] WebSocket connection established successfully",
+        "success",
+      );
 
       // Test basic functionality by advertising
       const advertiseMsg = {
@@ -138,16 +146,20 @@ export default function DebugPage() {
         addLog(`Connection closed normally: ${event.reason || reason}`);
       } else if (event.code === 1006) {
         reason = "Connection lost/refused";
-        setLastError("ROS Bridge server not responding - check if rosbridge_server is running");
-        addLog(`❌ Connection failed: ${reason} (${event.code})`, "error");
+        setLastError(
+          "ROS Bridge server not responding - check if rosbridge_server is running",
+        );
+        addLog(`[ERROR] Connection failed: ${reason} (${event.code})`, "error");
       } else if (event.code === 1011) {
         reason = "Server error";
         setLastError("ROS Bridge server encountered an error");
-        addLog(`❌ Server error: ${reason} (${event.code})`, "error");
+        addLog(`[ERROR] Server error: ${reason} (${event.code})`, "error");
       } else {
         reason = `Code ${event.code}`;
-        setLastError(`Connection closed with code ${event.code}: ${event.reason || "No reason given"}`);
-        addLog(`❌ Connection closed: ${reason}`, "error");
+        setLastError(
+          `Connection closed with code ${event.code}: ${event.reason || "No reason given"}`,
+        );
+        addLog(`[ERROR] Connection closed: ${reason}`, "error");
       }
 
       if (wasConnected) {
@@ -160,7 +172,7 @@ export default function DebugPage() {
       setConnectionStatus("error");
       const errorMsg = "WebSocket error occurred";
       setLastError(errorMsg);
-      addLog(`❌ ${errorMsg}`, "error");
+      addLog(`[ERROR] ${errorMsg}`, "error");
       console.error("WebSocket error details:", error);
     };
   };
@@ -298,7 +310,7 @@ export default function DebugPage() {
               >
                 {connectionStatus.toUpperCase()}
               </Badge>
-              <span className="text-sm text-muted-foreground">
+              <span className="text-muted-foreground text-sm">
                 Attempts: {connectionAttempts}
               </span>
             </div>
@@ -306,7 +318,9 @@ export default function DebugPage() {
             {lastError && (
               <Alert variant="destructive">
                 <AlertTriangle className="h-4 w-4" />
-                <AlertDescription className="text-sm">{lastError}</AlertDescription>
+                <AlertDescription className="text-sm">
+                  {lastError}
+                </AlertDescription>
               </Alert>
             )}
 
@@ -318,7 +332,9 @@ export default function DebugPage() {
                   className="flex-1"
                 >
                   <Play className="mr-2 h-4 w-4" />
-                  {connectionStatus === "connecting" ? "Connecting..." : "Connect"}
+                  {connectionStatus === "connecting"
+                    ? "Connecting..."
+                    : "Connect"}
                 </Button>
               ) : (
                 <Button
@@ -479,27 +495,32 @@ export default function DebugPage() {
                     key={index}
                     className={`rounded p-2 text-xs ${
                       msg.direction === "sent"
-                        ? "bg-blue-50 border-l-2 border-blue-400"
-                        : "bg-green-50 border-l-2 border-green-400"
+                        ? "border-l-2 border-blue-400 bg-blue-50"
+                        : "border-l-2 border-green-400 bg-green-50"
                     }`}
                   >
-                    <div className="flex items-center justify-between mb-1">
+                    <div className="mb-1 flex items-center justify-between">
                       <Badge
-                        variant={msg.direction === "sent" ? "default" : "secondary"}
+                        variant={
+                          msg.direction === "sent" ? "default" : "secondary"
+                        }
                         className="text-xs"
                       >
                         {msg.direction === "sent" ? "SENT" : "RECEIVED"}
                       </Badge>
-                      <span className="text-muted-foreground">{msg.timestamp}</span>
+                      <span className="text-muted-foreground">
+                        {msg.timestamp}
+                      </span>
                     </div>
-                    <pre className="whitespace-pre-wrap text-xs">
+                    <pre className="text-xs whitespace-pre-wrap">
                       {JSON.stringify(msg.data, null, 2)}
                     </pre>
                   </div>
                 ))}
                 {messages.length === 0 && (
-                  <div className="text-center text-muted-foreground py-8">
-                    No messages yet. Connect and send a test message to see data here.
+                  <div className="text-muted-foreground py-8 text-center">
+                    No messages yet. Connect and send a test message to see data
+                    here.
                   </div>
                 )}
                 <div ref={messagesEndRef} />

src/app/(dashboard)/help/page.tsx

@@ -0,0 +1,146 @@
+import {
+  BookOpen,
+  FlaskConical,
+  PlayCircle,
+  BarChart3,
+  HelpCircle,
+  FileText,
+  Video,
+  ExternalLink,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { PageLayout } from "~/components/ui/page-layout";
+import Link from "next/link";
+
+export default function HelpCenterPage() {
+  const guides = [
+    {
+      title: "Getting Started",
+      description: "Learn the basics of HRIStudio and set up your first study.",
+      icon: BookOpen,
+      items: [
+        { label: "Platform Overview", href: "#" },
+        { label: "Creating a New Study", href: "#" },
+        { label: "Managing Team Members", href: "#" },
+      ],
+    },
+    {
+      title: "Designing Experiments",
+      description: "Master the visual experiment designer and flow control.",
+      icon: FlaskConical,
+      items: [
+        { label: "Using the Visual Designer", href: "#" },
+        { label: "Robot Actions & Plugins", href: "#" },
+        { label: "Variables & Logic", href: "#" },
+      ],
+    },
+    {
+      title: "Running Trials",
+      description: "Execute experiments and manage Wizard of Oz sessions.",
+      icon: PlayCircle,
+      items: [
+        { label: "Wizard Interface Guide", href: "#" },
+        { label: "Participant Management", href: "#" },
+        { label: "Handling Robot Errors", href: "#" },
+      ],
+    },
+    {
+      title: "Analysis & Data",
+      description: "Analyze trial results and export research data.",
+      icon: BarChart3,
+      items: [
+        { label: "Understanding Analytics", href: "#" },
+        { label: "Exporting Data (CSV/JSON)", href: "#" },
+        { label: "Video Replay & Annotation", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <PageLayout
+      title="Help Center"
+      description="Documentation, guides, and support for HRIStudio researchers."
+    >
+      <div className="grid gap-6 md:grid-cols-2">
+        {guides.map((guide, index) => (
+          <Card key={index}>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <div className="bg-primary/10 rounded-lg p-2">
+                  <guide.icon className="text-primary h-5 w-5" />
+                </div>
+                <CardTitle className="text-xl">{guide.title}</CardTitle>
+              </div>
+              <CardDescription>{guide.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2">
+                {guide.items.map((item, i) => (
+                  <li key={i}>
+                    <Button
+                      variant="link"
+                      className="text-foreground hover:text-primary h-auto justify-start p-0 font-normal"
+                      asChild
+                    >
+                      <Link href={item.href}>
+                        <FileText className="text-muted-foreground mr-2 h-4 w-4" />
+                        {item.label}
+                      </Link>
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="mt-8">
+        <h2 className="mb-4 text-2xl font-bold tracking-tight">
+          Video Tutorials
+        </h2>
+        <div className="grid gap-6 md:grid-cols-3">
+          {[
+            "Introduction to HRIStudio",
+            "Advanced Flow Control",
+            "ROS2 Integration Deep Dive",
+          ].map((title, i) => (
+            <Card key={i} className="overflow-hidden">
+              <div className="bg-muted group hover:bg-muted/80 relative flex aspect-video cursor-pointer items-center justify-center transition-colors">
+                <PlayCircle className="text-muted-foreground group-hover:text-primary h-12 w-12 transition-colors" />
+              </div>
+              <CardHeader className="p-4">
+                <CardTitle className="text-base">{title}</CardTitle>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-muted/50 mt-8 rounded-xl border p-8 text-center">
+        <div className="bg-background mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full shadow-sm">
+          <HelpCircle className="text-primary h-6 w-6" />
+        </div>
+        <h2 className="mb-2 text-xl font-semibold">Still need help?</h2>
+        <p className="text-muted-foreground mx-auto mb-6 max-w-md">
+          Contact your system administrator or check the official documentation
+          for technical support.
+        </p>
+        <div className="flex justify-center gap-4">
+          <Button variant="outline" className="gap-2">
+            <ExternalLink className="h-4 w-4" />
+            Official Docs
+          </Button>
+          <Button className="gap-2">Contact Support</Button>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

src/app/(dashboard)/layout.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
-import { cookies } from "next/headers";
+import { cookies, headers } from "next/headers";
 import {
   SidebarInset,
   SidebarProvider,
@@ -7,7 +7,7 @@ import {
 } from "~/components/ui/sidebar";
 import { Separator } from "~/components/ui/separator";
 import { AppSidebar } from "~/components/dashboard/app-sidebar";
-import { auth } from "~/server/auth";
+import { auth } from "~/lib/auth";
 import {
   BreadcrumbProvider,
   BreadcrumbDisplay,
@@ -22,16 +22,15 @@ interface DashboardLayoutProps {
 export default async function DashboardLayout({
   children,
 }: DashboardLayoutProps) {
-  const session = await auth();
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
 
   if (!session?.user) {
     redirect("/auth/signin");
   }
 
-  const userRole =
-    typeof session.user.roles?.[0] === "string"
-      ? session.user.roles[0]
-      : (session.user.roles?.[0]?.role ?? "observer");
+  const userRole = "researcher"; // Default role for dashboard access
 
   const cookieStore = await cookies();
   const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";

src/app/(dashboard)/nao-test/page.tsx

@@ -365,7 +365,9 @@ export default function NaoTestPage() {
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="space-y-2">
-                      <Label>Walk Speed: {(walkSpeed[0] ?? 0).toFixed(2)} m/s</Label>
+                      <Label>
+                        Walk Speed: {(walkSpeed[0] ?? 0).toFixed(2)} m/s
+                      </Label>
                       <Slider
                         value={walkSpeed}
                         onValueChange={setWalkSpeed}
@@ -375,7 +377,9 @@ export default function NaoTestPage() {
                       />
                     </div>
                     <div className="space-y-2">
-                      <Label>Turn Speed: {(turnSpeed[0] ?? 0).toFixed(2)} rad/s</Label>
+                      <Label>
+                        Turn Speed: {(turnSpeed[0] ?? 0).toFixed(2)} rad/s
+                      </Label>
                       <Slider
                         value={turnSpeed}
                         onValueChange={setTurnSpeed}
@@ -415,7 +419,9 @@ export default function NaoTestPage() {
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="space-y-2">
-                      <Label>Head Yaw: {(headYaw[0] ?? 0).toFixed(2)} rad</Label>
+                      <Label>
+                        Head Yaw: {(headYaw[0] ?? 0).toFixed(2)} rad
+                      </Label>
                       <Slider
                         value={headYaw}
                         onValueChange={setHeadYaw}
@@ -425,7 +431,9 @@ export default function NaoTestPage() {
                       />
                     </div>
                     <div className="space-y-2">
-                      <Label>Head Pitch: {(headPitch[0] ?? 0).toFixed(2)} rad</Label>
+                      <Label>
+                        Head Pitch: {(headPitch[0] ?? 0).toFixed(2)} rad
+                      </Label>
                       <Slider
                         value={headPitch}
                         onValueChange={setHeadPitch}

src/app/(dashboard)/profile/page.tsx

@@ -1,10 +1,35 @@
 "use client";
 
+import * as React from "react";
 import { redirect } from "next/navigation";
-import { PasswordChangeForm } from "~/components/profile/password-change-form";
-import { ProfileEditForm } from "~/components/profile/profile-edit-form";
-import { Badge } from "~/components/ui/badge";
+import Link from "next/link";
+import { useSession } from "~/lib/auth-client";
+import { api } from "~/trpc/react";
+import { toast } from "sonner";
+import { format } from "date-fns";
+import {
+  User,
+  Mail,
+  Shield,
+  Lock,
+  Settings,
+  Building,
+  Calendar,
+  ChevronRight,
+  Loader2,
+  Save,
+  X,
+  Crown,
+  FlaskConical,
+  Eye,
+  UserCheck,
+} from "lucide-react";
+
 import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
 import {
   Card,
   CardContent,
@@ -12,203 +37,373 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { Separator } from "~/components/ui/separator";
-import { PageHeader } from "~/components/ui/page-header";
-import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
-import { formatRole, getRoleDescription } from "~/lib/auth-client";
-import { User, Shield, Download, Trash2, ExternalLink } from "lucide-react";
-import { useSession } from "next-auth/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
 
-interface ProfileUser {
-  id: string;
-  name: string | null;
-  email: string;
-  image: string | null;
-  roles?: Array<{
-    role: "administrator" | "researcher" | "wizard" | "observer";
-    grantedAt: string | Date;
-  }>;
+interface Membership {
+  studyId: string;
+  role: string;
+  joinedAt: Date;
 }
 
-function ProfileContent({ user }: { user: ProfileUser }) {
+function getMemberRole(memberships: Membership[], studyId: string): string {
+  const membership = memberships.find((m) => m.studyId === studyId);
+  return membership?.role ?? "observer";
+}
+
+function ProfilePageContent() {
+  const { data: session } = useSession();
+  const utils = api.useUtils();
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [name, setName] = React.useState(session?.user?.name ?? "");
+  const [email, setEmail] = React.useState(session?.user?.email ?? "");
+  const [passwordOpen, setPasswordOpen] = React.useState(false);
+  const [currentPassword, setCurrentPassword] = React.useState("");
+  const [newPassword, setNewPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+
+  const { data: userData } = api.users.get.useQuery(
+    { id: session?.user?.id ?? "" },
+    { enabled: !!session?.user?.id },
+  );
+
+  const { data: userStudies } = api.studies.list.useQuery({
+    memberOnly: true,
+    limit: 10,
+  });
+
+  const { data: membershipsData } = api.studies.getMyMemberships.useQuery();
+
+  const studyMemberships = membershipsData ?? [];
+
+  const updateProfile = api.users.update.useMutation({
+    onSuccess: () => {
+      toast.success("Profile updated successfully");
+      void utils.users.get.invalidate();
+      setIsEditing(false);
+    },
+    onError: (error) => {
+      toast.error("Failed to update profile", { description: error.message });
+    },
+  });
+
+  const changePassword = api.users.changePassword.useMutation({
+    onSuccess: () => {
+      toast.success("Password changed successfully");
+      setPasswordOpen(false);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    },
+    onError: (error) => {
+      toast.error("Failed to change password", { description: error.message });
+    },
+  });
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast.error("Name is required");
+      return;
+    }
+    updateProfile.mutate({ id: session?.user?.id ?? "", name, email });
+  };
+
+  const handlePasswordChange = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPassword !== confirmPassword) {
+      toast.error("Passwords don't match");
+      return;
+    }
+    if (newPassword.length < 8) {
+      toast.error("Password must be at least 8 characters");
+      return;
+    }
+    changePassword.mutate({
+      currentPassword,
+      newPassword,
+    });
+  };
+
+  const user = userData ?? session?.user;
+  const roles = (userData as any)?.systemRoles ?? [];
+  const initials = (user?.name ?? user?.email ?? "U").charAt(0).toUpperCase();
+
   return (
     <div className="space-y-6">
-      <PageHeader
-        title="Profile"
-        description="Manage your account settings and preferences"
-        icon={User}
-      />
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground">
+            {initials}
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold">{user?.name ?? "User"}</h1>
+            <p className="text-muted-foreground">{user?.email}</p>
+            {roles.length > 0 && (
+              <div className="mt-1 flex gap-2">
+                {roles.map((role: any) => (
+                  <Badge key={role.role} variant="secondary" className="text-xs">
+                    {role.role}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          {isEditing ? (
+            <>
+              <Button variant="outline" onClick={() => setIsEditing(false)}>
+                <X className="mr-2 h-4 w-4" />
+                Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={updateProfile.isPending}>
+                {updateProfile.isPending ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Save className="mr-2 h-4 w-4" />
+                )}
+                Save Changes
+              </Button>
+            </>
+          ) : (
+            <Button variant="outline" onClick={() => setIsEditing(true)}>
+              <Settings className="mr-2 h-4 w-4" />
+              Edit Profile
+            </Button>
+          )}
+        </div>
+      </div>
 
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* Profile Information */}
+      {/* Main Content */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Left Column - Profile Info */}
         <div className="space-y-6 lg:col-span-2">
-          {/* Basic Information */}
+          {/* Personal Information */}
           <Card>
             <CardHeader>
-              <CardTitle>Basic Information</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <User className="h-5 w-5 text-primary" />
+                Personal Information
+              </CardTitle>
               <CardDescription>
-                Your personal account information
+                Your public profile information
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Full Name</Label>
+                  {isEditing ? (
+                    <Input
+                      id="name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Your name"
+                    />
+                  ) : (
+                    <div className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                      <User className="text-muted-foreground h-4 w-4" />
+                      <span>{name || "Not set"}</span>
+                    </div>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email Address</Label>
+                  {isEditing ? (
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="you@example.com"
+                    />
+                  ) : (
+                    <div className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                      <Mail className="text-muted-foreground h-4 w-4" />
+                      <span>{email}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label>User ID</Label>
+                <div className="rounded-md border bg-muted/50 p-2 font-mono text-sm">
+                  {user?.id ?? session?.user?.id}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Recent Activity */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Calendar className="h-5 w-5 text-primary" />
+                Recent Activity
+              </CardTitle>
+              <CardDescription>
+                Your recent actions across the platform
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <ProfileEditForm
-                user={{
-                  id: user.id,
-                  name: user.name,
-                  email: user.email,
-                  image: user.image,
-                }}
-              />
-            </CardContent>
-          </Card>
-
-          {/* Password Change */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Password</CardTitle>
-              <CardDescription>Change your account password</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <PasswordChangeForm />
-            </CardContent>
-          </Card>
-
-          {/* Account Actions */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Account Actions</CardTitle>
-              <CardDescription>Manage your account settings</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h4 className="text-sm font-medium">Export Data</h4>
-                  <p className="text-muted-foreground text-sm">
-                    Download all your research data and account information
-                  </p>
-                </div>
-                <Button variant="outline" disabled>
-                  <Download className="mr-2 h-4 w-4" />
-                  Export Data
-                </Button>
-              </div>
-
-              <Separator />
-
-              <div className="flex items-center justify-between">
-                <div>
-                  <h4 className="text-destructive text-sm font-medium">
-                    Delete Account
-                  </h4>
-                  <p className="text-muted-foreground text-sm">
-                    Permanently delete your account and all associated data
-                  </p>
-                </div>
-                <Button variant="destructive" disabled>
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  Delete Account
-                </Button>
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <Calendar className="text-muted-foreground/50 mb-3 h-12 w-12" />
+                <p className="font-medium">No recent activity</p>
+                <p className="text-muted-foreground text-sm">
+                  Your recent actions will appear here
+                </p>
               </div>
             </CardContent>
           </Card>
         </div>
 
-        {/* Sidebar */}
+        {/* Right Column - Settings */}
         <div className="space-y-6">
-          {/* User Summary */}
+          {/* Security */}
           <Card>
             <CardHeader>
-              <CardTitle>Account Summary</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <Shield className="h-5 w-5 text-primary" />
+                Security
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="flex items-center space-x-3">
-                <div className="bg-primary/10 flex h-12 w-12 items-center justify-center rounded-full">
-                  <span className="text-primary text-lg font-semibold">
-                    {(user.name ?? user.email ?? "U").charAt(0).toUpperCase()}
-                  </span>
-                </div>
-                <div>
-                  <p className="font-medium">{user.name ?? "Unnamed User"}</p>
-                  <p className="text-muted-foreground text-sm">{user.email}</p>
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="flex items-center gap-3">
+                  <Lock className="text-muted-foreground h-4 w-4" />
+                  <div>
+                    <p className="text-sm font-medium">Password</p>
+                    <p className="text-muted-foreground text-xs">Last changed: Never</p>
+                  </div>
                 </div>
+                <Dialog open={passwordOpen} onOpenChange={setPasswordOpen}>
+                  <DialogTrigger asChild>
+                    <Button variant="ghost" size="sm">
+                      Change
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>Change Password</DialogTitle>
+                      <DialogDescription>
+                        Enter your current password and choose a new one.
+                      </DialogDescription>
+                    </DialogHeader>
+                    <form onSubmit={handlePasswordChange} className="space-y-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="current">Current Password</Label>
+                        <Input
+                          id="current"
+                          type="password"
+                          value={currentPassword}
+                          onChange={(e) => setCurrentPassword(e.target.value)}
+                          required
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="new">New Password</Label>
+                        <Input
+                          id="new"
+                          type="password"
+                          value={newPassword}
+                          onChange={(e) => setNewPassword(e.target.value)}
+                          required
+                          minLength={8}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="confirm">Confirm Password</Label>
+                        <Input
+                          id="confirm"
+                          type="password"
+                          value={confirmPassword}
+                          onChange={(e) => setConfirmPassword(e.target.value)}
+                          required
+                        />
+                      </div>
+                      <DialogFooter>
+                        <Button type="button" variant="outline" onClick={() => setPasswordOpen(false)}>
+                          Cancel
+                        </Button>
+                        <Button type="submit" disabled={changePassword.isPending}>
+                          {changePassword.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                          Change Password
+                        </Button>
+                      </DialogFooter>
+                    </form>
+                  </DialogContent>
+                </Dialog>
               </div>
 
               <Separator />
 
-              <div>
-                <p className="mb-2 text-sm font-medium">User ID</p>
-                <p className="text-muted-foreground bg-muted rounded p-2 font-mono text-xs break-all">
-                  {user.id}
+              <div className="rounded-lg border bg-destructive/5 p-3">
+                <p className="text-sm font-medium text-destructive">Danger Zone</p>
+                <p className="text-muted-foreground mt-1 text-xs">
+                  Account deletion is not available. Contact an administrator for assistance.
                 </p>
               </div>
             </CardContent>
           </Card>
 
-          {/* System Roles */}
+          {/* Studies Access */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <Shield className="h-4 w-4" />
-                System Roles
+                <Building className="h-5 w-5 text-primary" />
+                Studies Access
               </CardTitle>
-              <CardDescription>Your current system permissions</CardDescription>
+              <CardDescription>
+                Studies you have access to
+              </CardDescription>
             </CardHeader>
-            <CardContent>
-              {user.roles && user.roles.length > 0 ? (
-                <div className="space-y-3">
-                  {user.roles.map((roleInfo, index: number) => (
-                    <div
-                      key={index}
-                      className="flex items-start justify-between"
-                    >
-                      <div className="flex-1">
-                        <div className="mb-1 flex items-center gap-2">
-                          <Badge variant="secondary">
-                            {formatRole(roleInfo.role)}
-                          </Badge>
-                        </div>
-                        <p className="text-muted-foreground text-xs">
-                          {getRoleDescription(roleInfo.role)}
-                        </p>
-                        <p className="text-muted-foreground/80 mt-1 text-xs">
-                          Granted{" "}
-                          {new Date(roleInfo.grantedAt).toLocaleDateString()}
-                        </p>
-                      </div>
+            <CardContent className="space-y-3">
+              {userStudies?.studies.slice(0, 5).map((study) => (
+                <Link
+                  key={study.id}
+                  href={`/studies/${study.id}`}
+                  className="hover:bg-accent/50 flex items-center justify-between rounded-md border p-3 transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                      <span className="text-xs font-medium text-primary">
+                        {(study.name ?? "S").charAt(0).toUpperCase()}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium">{study.name}</p>
+                      <p className="text-muted-foreground text-xs capitalize">
+                        {getMemberRole(studyMemberships, study.id)}
+                      </p>
                     </div>
-                  ))}
-
-                  <Separator />
-
-                  <div className="text-center">
-                    <p className="text-muted-foreground text-xs">
-                      Need additional permissions?{" "}
-                      <Button
-                        variant="link"
-                        size="sm"
-                        className="h-auto p-0 text-xs"
-                      >
-                        Contact an administrator
-                        <ExternalLink className="ml-1 h-3 w-3" />
-                      </Button>
-                    </p>
                   </div>
-                </div>
-              ) : (
-                <div className="py-6 text-center">
-                  <div className="bg-muted mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-lg">
-                    <Shield className="text-muted-foreground h-6 w-6" />
-                  </div>
-                  <p className="mb-1 text-sm font-medium">No Roles Assigned</p>
-                  <p className="text-muted-foreground text-xs">
-                    You don&apos;t have any system roles yet. Contact an
-                    administrator to get access to HRIStudio features.
-                  </p>
-                  <Button size="sm" variant="outline">
-                    Request Access
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                </Link>
+              ))}
+              {(!userStudies?.studies.length) && (
+                <div className="flex flex-col items-center justify-center py-4 text-center">
+                  <Building className="text-muted-foreground/50 mb-2 h-8 w-8" />
+                  <p className="text-sm">No studies yet</p>
+                  <Button variant="link" size="sm" asChild className="mt-1">
+                    <Link href="/studies/new">Create a study</Link>
                   </Button>
                 </div>
               )}
+              {userStudies && userStudies.studies.length > 5 && (
+                <Button variant="ghost" size="sm" asChild className="w-full">
+                  <Link href="/studies">
+                    View all {userStudies.studies.length} studies <ChevronRight className="ml-1 h-3 w-3" />
+                  </Link>
+                </Button>
+              )}
             </CardContent>
           </Card>
         </div>
@@ -218,18 +413,19 @@ function ProfileContent({ user }: { user: ProfileUser }) {
 }
 
 export default function ProfilePage() {
-  const { data: session } = useSession();
+  const { data: session, isPending } = useSession();
 
-  useBreadcrumbsEffect([
-    { label: "Dashboard", href: "/dashboard" },
-    { label: "Profile" },
-  ]);
+  if (isPending) {
+    return (
+      <div className="flex items-center justify-center p-12">
+        <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
 
   if (!session?.user) {
     redirect("/auth/signin");
   }
 
-  const user = session.user;
-
-  return <ProfileContent user={user} />;
+  return <ProfilePageContent />;
 }

src/app/(dashboard)/studies/[id]/analytics/page.tsx

@@ -1,190 +1,15 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import {
-  BarChart3,
-  Search,
-  Filter,
-  PlayCircle,
-  Calendar,
-  Clock,
-  ChevronRight,
-  User,
-  LayoutGrid
-} from "lucide-react";
+import { Suspense, useEffect } from "react";
+import { BarChart3 } from "lucide-react";
 
 import { PageHeader } from "~/components/ui/page-header";
 import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
 import { useStudyContext } from "~/lib/study-context";
 import { useSelectedStudyDetails } from "~/hooks/useSelectedStudyDetails";
 import { api } from "~/trpc/react";
-import { TrialAnalysisView } from "~/components/trials/views/TrialAnalysisView";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { ScrollArea } from "~/components/ui/scroll-area";
-import { formatDistanceToNow } from "date-fns";
-
-// -- Sub-Components --
-
-function AnalyticsContent({
-  selectedTrialId,
-  setSelectedTrialId,
-  trialsList,
-  isLoadingList
-}: {
-  selectedTrialId: string | null;
-  setSelectedTrialId: (id: string | null) => void;
-  trialsList: any[];
-  isLoadingList: boolean;
-}) {
-
-  // Fetch full details of selected trial
-  const {
-    data: selectedTrial,
-    isLoading: isLoadingTrial,
-    error: trialError
-  } = api.trials.get.useQuery(
-    { id: selectedTrialId! },
-    { enabled: !!selectedTrialId }
-  );
-
-  // Transform trial data
-  const trialData = selectedTrial ? {
-    ...selectedTrial,
-    startedAt: selectedTrial.startedAt ? new Date(selectedTrial.startedAt) : null,
-    completedAt: selectedTrial.completedAt ? new Date(selectedTrial.completedAt) : null,
-    eventCount: (selectedTrial as any).eventCount,
-    mediaCount: (selectedTrial as any).mediaCount,
-  } : null;
-
-  return (
-    <div className="h-[calc(100vh-140px)] flex flex-col">
-      {selectedTrialId ? (
-        isLoadingTrial ? (
-          <div className="flex-1 flex items-center justify-center bg-background/50 rounded-lg border border-dashed">
-            <div className="flex flex-col items-center gap-2 animate-pulse">
-              <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
-              <span className="text-muted-foreground text-sm">Loading trial data...</span>
-            </div>
-          </div>
-        ) : trialError ? (
-          <div className="flex-1 flex items-center justify-center p-8 bg-background/50 rounded-lg border border-dashed text-destructive">
-            <div className="max-w-md text-center">
-              <h3 className="font-semibold mb-2">Error Loading Trial</h3>
-              <p className="text-sm opacity-80">{trialError.message}</p>
-              <Button variant="outline" className="mt-4" onClick={() => setSelectedTrialId(null)}>
-                Return to Overview
-              </Button>
-            </div>
-          </div>
-        ) : trialData ? (
-          <TrialAnalysisView trial={trialData} />
-        ) : null
-      ) : (
-        <div className="flex-1 bg-background/50 rounded-lg border shadow-sm overflow-hidden">
-          <StudyOverviewPlaceholder
-            trials={trialsList ?? []}
-            onSelect={(id) => setSelectedTrialId(id)}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function StudyOverviewPlaceholder({ trials, onSelect }: { trials: any[], onSelect: (id: string) => void }) {
-  const recentTrials = [...trials].sort((a, b) =>
-    new Date(b.startedAt || b.createdAt).getTime() - new Date(a.startedAt || a.createdAt).getTime()
-  ).slice(0, 5);
-
-  return (
-    <div className="h-full p-8 grid place-items-center bg-muted/5">
-      <div className="max-w-3xl w-full grid gap-8 md:grid-cols-2">
-        {/* Left: Illustration / Prompt */}
-        <div className="flex flex-col justify-center space-y-4">
-          <div className="bg-primary/10 w-16 h-16 rounded-2xl flex items-center justify-center mb-2">
-            <BarChart3 className="h-8 w-8 text-primary" />
-          </div>
-          <div>
-            <h2 className="text-2xl font-semibold tracking-tight">Analytics & Playback</h2>
-            <CardDescription className="text-base mt-2">
-              Select a session from the top right to review video recordings, event logs, and metrics.
-            </CardDescription>
-          </div>
-          <div className="flex gap-4 pt-4">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <PlayCircle className="h-4 w-4" />
-              Feature-rich playback
-            </div>
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Clock className="h-4 w-4" />
-              Synchronized timeline
-            </div>
-          </div>
-        </div>
-
-        {/* Right: Recent Sessions */}
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base">Recent Sessions</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <ScrollArea className="h-[240px]">
-              <div className="px-4 pb-4 space-y-1">
-                {recentTrials.map(trial => (
-                  <button
-                    key={trial.id}
-                    onClick={() => onSelect(trial.id)}
-                    className="w-full flex items-center gap-3 p-3 rounded-md hover:bg-accent transition-colors text-left group"
-                  >
-                    <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-mono font-medium text-primary">
-                      {trial.sessionNumber}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium text-sm truncate">
-                          {trial.participant?.participantCode ?? "Unknown"}
-                        </span>
-                        <span className={`text-[10px] px-1.5 py-0.5 rounded-full border capitalize ${trial.status === 'completed' ? 'bg-green-500/10 text-green-500 border-green-500/20' :
-                          trial.status === 'in_progress' ? 'bg-blue-500/10 text-blue-500 border-blue-500/20' :
-                            'bg-slate-500/10 text-slate-500 border-slate-500/20'
-                          }`}>
-                          {trial.status.replace('_', ' ')}
-                        </span>
-                      </div>
-                      <div className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
-                        <Calendar className="h-3 w-3" />
-                        {new Date(trial.createdAt).toLocaleDateString()}
-                        <span className="text-muted-foreground top-[1px] relative text-[10px]">•</span>
-                        {formatDistanceToNow(new Date(trial.createdAt), { addSuffix: true })}
-                      </div>
-                    </div>
-                    <ChevronRight className="h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors" />
-                  </button>
-                ))}
-                {recentTrials.length === 0 && (
-                  <div className="py-8 text-center text-sm text-muted-foreground">
-                    No sessions found.
-                  </div>
-                )}
-              </div>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
-
-// -- Main Page --
+import { StudyAnalyticsDataTable } from "~/components/analytics/study-analytics-data-table";
 
 export default function StudyAnalyticsPage() {
   const params = useParams();
@@ -192,13 +17,10 @@ export default function StudyAnalyticsPage() {
   const { setSelectedStudyId, selectedStudyId } = useStudyContext();
   const { study } = useSelectedStudyDetails();
 
-  // State lifted up
-  const [selectedTrialId, setSelectedTrialId] = useState<string | null>(null);
-
-  // Fetch list of trials for the selector
-  const { data: trialsList, isLoading: isLoadingList } = api.trials.list.useQuery(
+  // Fetch list of trials
+  const { data: trialsList, isLoading } = api.trials.list.useQuery(
     { studyId, limit: 100 },
-    { enabled: !!studyId }
+    { enabled: !!studyId },
   );
 
   // Set breadcrumbs
@@ -217,50 +39,34 @@ export default function StudyAnalyticsPage() {
   }, [studyId, selectedStudyId, setSelectedStudyId]);
 
   return (
-    <div className="h-[calc(100vh-64px)] flex flex-col p-6 gap-6">
-      <div className="flex-none">
-        <PageHeader
-          title="Analytics"
-          description="Analyze trial data and replay sessions"
-          icon={BarChart3}
-          actions={
-            <div className="flex items-center gap-2">
-              {/* Session Selector in Header */}
-              <div className="w-[300px]">
-                <Select
-                  value={selectedTrialId ?? "overview"}
-                  onValueChange={(val) => setSelectedTrialId(val === "overview" ? null : val)}
-                >
-                  <SelectTrigger className="w-full h-9 text-xs">
-                    <LayoutGrid className="h-3.5 w-3.5 mr-2 text-muted-foreground" />
-                    <SelectValue placeholder="Select Session" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-[400px]" align="end">
-                    <SelectItem value="overview" className="border-b mb-1 pb-1 font-medium text-xs">
-                      Show Study Overview
-                    </SelectItem>
-                    {trialsList?.map((trial) => (
-                      <SelectItem key={trial.id} value={trial.id} className="text-xs">
-                        <span className="font-mono mr-2 text-muted-foreground">#{trial.sessionNumber}</span>
-                        {trial.participant?.participantCode ?? "Unknown"} <span className="text-muted-foreground ml-1">({new Date(trial.createdAt).toLocaleDateString()})</span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+    <div className="space-y-6">
+      <PageHeader
+        title="Analysis"
+        description="View and analyze session data across all trials"
+        icon={BarChart3}
+      />
+
+      <div className="bg-transparent">
+        <Suspense fallback={<div>Loading analytics...</div>}>
+          {isLoading ? (
+            <div className="flex h-64 items-center justify-center">
+              <div className="flex animate-pulse flex-col items-center gap-2">
+                <div className="border-primary h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
+                <span className="text-muted-foreground text-sm">
+                  Loading session data...
+                </span>
               </div>
             </div>
-          }
-        />
-      </div>
-
-      <div className="flex-1 min-h-0 bg-transparent">
-        <Suspense fallback={<div>Loading analytics...</div>}>
-          <AnalyticsContent
-            selectedTrialId={selectedTrialId}
-            setSelectedTrialId={setSelectedTrialId}
-            trialsList={trialsList ?? []}
-            isLoadingList={isLoadingList}
-          />
+          ) : (
+            <StudyAnalyticsDataTable
+              data={(trialsList ?? []).map((t) => ({
+                ...t,
+                startedAt: t.startedAt ? new Date(t.startedAt) : null,
+                completedAt: t.completedAt ? new Date(t.completedAt) : null,
+                createdAt: new Date(t.createdAt),
+              }))}
+            />
+          )}
         </Suspense>
       </div>
     </div>

src/app/(dashboard)/studies/[id]/experiments/[experimentId]/designer/DesignerPageClient.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useMemo } from "react";
 import { DesignerRoot } from "~/components/experiments/designer/DesignerRoot";
+import { useActionRegistry } from "~/components/experiments/designer/ActionRegistry";
 import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
 import type { ExperimentStep } from "~/lib/experiment-designer/types";
 
@@ -9,6 +11,10 @@ interface DesignerPageClientProps {
     id: string;
     name: string;
     description: string | null;
+    status: string;
+    studyId: string;
+    createdAt: Date;
+    updatedAt: Date;
     study: {
       id: string;
       name: string;
@@ -28,6 +34,22 @@ export function DesignerPageClient({
   experiment,
   initialDesign,
 }: DesignerPageClientProps) {
+  // Initialize action registry early to prevent CLS
+  useActionRegistry();
+
+  // Calculate design statistics
+  const designStats = useMemo(() => {
+    if (!initialDesign) return undefined;
+
+    const stepCount = initialDesign.steps.length;
+    const actionCount = initialDesign.steps.reduce(
+      (sum, step) => sum + step.actions.length,
+      0,
+    );
+
+    return { stepCount, actionCount };
+  }, [initialDesign]);
+
   // Set breadcrumbs
   useBreadcrumbsEffect([
     {
@@ -56,6 +78,11 @@ export function DesignerPageClient({
   ]);
 
   return (
-    <DesignerRoot experimentId={experiment.id} initialDesign={initialDesign} />
+    <DesignerRoot
+      experimentId={experiment.id}
+      initialDesign={initialDesign}
+      experiment={experiment}
+      designStats={designStats}
+    />
   );
 }

src/app/(dashboard)/studies/[id]/experiments/[experimentId]/designer/page.tsx

@@ -8,6 +8,9 @@ import type {
 } from "~/lib/experiment-designer/types";
 import { api } from "~/trpc/server";
 import { DesignerPageClient } from "./DesignerPageClient";
+import { db } from "~/server/db";
+import { studyPlugins, plugins } from "~/server/db/schema";
+import { desc, eq } from "drizzle-orm";
 
 interface ExperimentDesignerPageProps {
   params: Promise<{
@@ -20,7 +23,9 @@ export default async function ExperimentDesignerPage({
 }: ExperimentDesignerPageProps) {
   try {
     const resolvedParams = await params;
-    const experiment = await api.experiments.get({ id: resolvedParams.experimentId });
+    const experiment = await api.experiments.get({
+      id: resolvedParams.experimentId,
+    });
 
     if (!experiment) {
       notFound();
@@ -36,13 +41,13 @@ export default async function ExperimentDesignerPage({
     // Only pass initialDesign if there's existing visual design data
     let initialDesign:
       | {
-        id: string;
-        name: string;
-        description: string;
-        steps: ExperimentStep[];
-        version: number;
-        lastSaved: Date;
-      }
+          id: string;
+          name: string;
+          description: string;
+          steps: ExperimentStep[];
+          version: number;
+          lastSaved: Date;
+        }
       | undefined;
 
     if (existingDesign?.steps && existingDesign.steps.length > 0) {
@@ -72,10 +77,20 @@ export default async function ExperimentDesignerPage({
             actionDefinitions: Array<{ id: string }> | null;
           };
         };
-        const rawInstalledPluginsUnknown: unknown =
-          await api.robots.plugins.getStudyPlugins({
-            studyId: experiment.study.id,
-          });
+        const installedPluginsResult = await db
+          .select({
+            plugin: {
+              id: plugins.id,
+              name: plugins.name,
+              version: plugins.version,
+              actionDefinitions: plugins.actionDefinitions,
+            },
+          })
+          .from(studyPlugins)
+          .innerJoin(plugins, eq(studyPlugins.pluginId, plugins.id))
+          .where(eq(studyPlugins.studyId, experiment.study.id))
+          .orderBy(desc(studyPlugins.installedAt));
+        const rawInstalledPluginsUnknown = installedPluginsResult;
 
         function asRecord(v: unknown): Record<string, unknown> | null {
           return v && typeof v === "object"
@@ -121,7 +136,8 @@ export default async function ExperimentDesignerPage({
           };
         });
         const mapped: ExperimentStep[] = exec.steps.map((s, idx) => {
-          const actions: ExperimentAction[] = s.actions.map((a) => {
+          // Recursive function to hydrate actions with children
+          const hydrateAction = (a: any): ExperimentAction => {
             // Normalize legacy plugin action ids and provenance
             const rawType = a.type ?? "";
 
@@ -188,11 +204,24 @@ export default async function ExperimentDesignerPage({
             const pluginId = legacy?.pluginId;
             const pluginVersion = legacy?.pluginVersion;
 
+            // Extract children from parameters for control flow actions
+            const params = (a.parameters ?? {}) as Record<string, unknown>;
+            let children: ExperimentAction[] | undefined = undefined;
+
+            // Handle control flow structures (sequence, parallel, loop only)
+            // Branch actions control step routing, not nested actions
+            const childrenRaw = params.children;
+
+            // Recursively hydrate nested children for container actions
+            if (Array.isArray(childrenRaw) && childrenRaw.length > 0) {
+              children = childrenRaw.map((child: any) => hydrateAction(child));
+            }
+
             return {
               id: a.id,
               type: typeOut,
               name: a.name,
-              parameters: (a.parameters ?? {}) as Record<string, unknown>,
+              parameters: params,
               category: categoryOut,
               source: {
                 kind: sourceKind,
@@ -202,8 +231,13 @@ export default async function ExperimentDesignerPage({
                 baseActionId: legacy?.baseId,
               },
               execution,
+              children, // Add children at top level
             };
-          });
+          };
+
+          const actions: ExperimentAction[] = s.actions.map((a) =>
+            hydrateAction(a),
+          );
           return {
             id: s.id,
             name: s.name,
@@ -222,7 +256,10 @@ export default async function ExperimentDesignerPage({
                 : "sequential";
             })(),
             order: s.orderIndex ?? idx,
-            trigger: { type: "trial_start", conditions: {} },
+            trigger: {
+              type: idx === 0 ? "trial_start" : "previous_step",
+              conditions: (s.conditions as Record<string, unknown>) || {},
+            },
             actions,
             expanded: true,
           };
@@ -258,7 +295,9 @@ export async function generateMetadata({
 }> {
   try {
     const resolvedParams = await params;
-    const experiment = await api.experiments.get({ id: resolvedParams.experimentId });
+    const experiment = await api.experiments.get({
+      id: resolvedParams.experimentId,
+    });
 
     return {
       title: `${experiment?.name} - Designer | HRIStudio`,

src/app/(dashboard)/studies/[id]/experiments/[experimentId]/edit/experiment-form.tsx

@@ -1,164 +0,0 @@
-"use client";
-
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Button } from "~/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "~/components/ui/form";
-import { Input } from "~/components/ui/input";
-import { Textarea } from "~/components/ui/textarea";
-
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "~/components/ui/select";
-import { toast } from "sonner";
-import { api } from "~/trpc/react";
-import { useRouter } from "next/navigation";
-import { type experiments, experimentStatusEnum } from "~/server/db/schema";
-import { type InferSelectModel } from "drizzle-orm";
-
-type Experiment = InferSelectModel<typeof experiments>;
-
-const formSchema = z.object({
-    name: z.string().min(2, {
-        message: "Name must be at least 2 characters.",
-    }),
-    description: z.string().optional(),
-    status: z.enum(experimentStatusEnum.enumValues),
-});
-
-interface ExperimentFormProps {
-    experiment: Experiment;
-}
-
-export function ExperimentForm({ experiment }: ExperimentFormProps) {
-    const router = useRouter();
-    const updateExperiment = api.experiments.update.useMutation({
-        onSuccess: () => {
-            toast.success("Experiment updated successfully");
-            router.refresh();
-            router.push(`/studies/${experiment.studyId}/experiments/${experiment.id}`);
-        },
-        onError: (error) => {
-            toast.error(`Error updating experiment: ${error.message}`);
-        },
-    });
-
-    const form = useForm<z.infer<typeof formSchema>>({
-        resolver: zodResolver(formSchema),
-        defaultValues: {
-            name: experiment.name,
-            description: experiment.description ?? "",
-            status: experiment.status,
-        },
-    });
-
-    function onSubmit(values: z.infer<typeof formSchema>) {
-        updateExperiment.mutate({
-            id: experiment.id,
-            name: values.name,
-            description: values.description,
-            status: values.status,
-        });
-    }
-
-    return (
-        <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-                <FormField
-                    control={form.control}
-                    name="name"
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel>Name</FormLabel>
-                            <FormControl>
-                                <Input placeholder="Experiment name" {...field} />
-                            </FormControl>
-                            <FormDescription>
-                                The name of your experiment.
-                            </FormDescription>
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
-
-                <FormField
-                    control={form.control}
-                    name="description"
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel>Description</FormLabel>
-                            <FormControl>
-                                <Textarea
-                                    placeholder="Describe your experiment..."
-                                    className="resize-none"
-                                    {...field}
-                                />
-                            </FormControl>
-                            <FormDescription>
-                                A short description of the experiment goals.
-                            </FormDescription>
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
-
-                <FormField
-                    control={form.control}
-                    name="status"
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel>Status</FormLabel>
-                            <Select onValueChange={field.onChange} defaultValue={field.value}>
-                                <FormControl>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Select a status" />
-                                    </SelectTrigger>
-                                </FormControl>
-                                <SelectContent>
-                                    <SelectItem value="draft">Draft</SelectItem>
-                                    <SelectItem value="testing">Testing</SelectItem>
-                                    <SelectItem value="ready">Ready</SelectItem>
-                                    <SelectItem value="deprecated">Deprecated</SelectItem>
-                                </SelectContent>
-                            </Select>
-                            <FormDescription>
-                                The current status of the experiment.
-                            </FormDescription>
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
-
-                <div className="flex gap-4">
-                    <Button type="submit" disabled={updateExperiment.isPending}>
-                        {updateExperiment.isPending ? "Saving..." : "Save Changes"}
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        onClick={() =>
-                            router.push(
-                                `/studies/${experiment.studyId}/experiments/${experiment.id}`,
-                            )
-                        }
-                    >
-                        Cancel
-                    </Button>
-                </div>
-            </form>
-        </Form>
-    );
-}

src/app/(dashboard)/studies/[id]/experiments/[experimentId]/edit/page.tsx

@@ -1,58 +0,0 @@
-import { notFound } from "next/navigation";
-import { type experiments } from "~/server/db/schema";
-import { type InferSelectModel } from "drizzle-orm";
-
-type Experiment = InferSelectModel<typeof experiments>;
-import { api } from "~/trpc/server";
-import { ExperimentForm } from "./experiment-form";
-import {
-    EntityView,
-    EntityViewHeader,
-    EntityViewSection,
-} from "~/components/ui/entity-view";
-import { Button } from "~/components/ui/button";
-import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
-
-interface ExperimentEditPageProps {
-    params: Promise<{ id: string; experimentId: string }>;
-}
-
-export default async function ExperimentEditPage({
-    params,
-}: ExperimentEditPageProps) {
-    const { id: studyId, experimentId } = await params;
-
-    const experiment = await api.experiments.get({ id: experimentId });
-
-    if (!experiment) {
-        notFound();
-    }
-
-    // Ensure experiment belongs to study
-    if (experiment.studyId !== studyId) {
-        notFound();
-    }
-
-    // Convert to type expected by form
-    const experimentData: Experiment = {
-        ...experiment,
-        status: experiment.status as Experiment["status"],
-    };
-
-    return (
-        <EntityView>
-            <EntityViewHeader
-                title="Edit Experiment"
-                subtitle={`Update settings for ${experiment.name}`}
-                icon="Edit"
-            />
-
-            <div className="max-w-2xl">
-                <EntityViewSection title="Experiment Details" icon="Settings">
-                    <ExperimentForm experiment={experimentData} />
-                </EntityViewSection>
-            </div>
-        </EntityView>
-    );
-}

src/app/(dashboard)/studies/[id]/experiments/[experimentId]/page.tsx

@@ -1,468 +1,476 @@
 "use client";
 
 import { formatDistanceToNow } from "date-fns";
-import { Calendar, Clock, Edit, Play, Settings, Users } from "lucide-react";
+import {
+  Calendar,
+  Clock,
+  Edit,
+  Play,
+  Settings,
+  Users,
+  TestTube,
+} from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
+import { PageHeader } from "~/components/ui/page-header";
 import {
-    EntityView,
-    EntityViewHeader,
-    EntityViewSection,
-    EmptyState,
-    InfoGrid,
-    QuickActions,
-    StatsGrid,
+  EntityView,
+  EntityViewHeader,
+  EntityViewSection,
+  EmptyState,
+  InfoGrid,
+  QuickActions,
+  StatsGrid,
 } from "~/components/ui/entity-view";
 import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
 import { api } from "~/trpc/react";
-import { useSession } from "next-auth/react";
+import { useSession } from "~/lib/auth-client";
 import { useStudyManagement } from "~/hooks/useStudyManagement";
 
 interface ExperimentDetailPageProps {
-    params: Promise<{ id: string; experimentId: string }>;
+  params: Promise<{ id: string; experimentId: string }>;
 }
 
 const statusConfig = {
-    draft: {
-        label: "Draft",
-        variant: "secondary" as const,
-        icon: "FileText" as const,
-    },
-    testing: {
-        label: "Testing",
-        variant: "outline" as const,
-        icon: "TestTube" as const,
-    },
-    ready: {
-        label: "Ready",
-        variant: "default" as const,
-        icon: "CheckCircle" as const,
-    },
-    deprecated: {
-        label: "Deprecated",
-        variant: "destructive" as const,
-        icon: "AlertTriangle" as const,
-    },
+  draft: {
+    label: "Draft",
+    variant: "secondary" as const,
+    icon: "FileText" as const,
+  },
+  testing: {
+    label: "Testing",
+    variant: "outline" as const,
+    icon: "TestTube" as const,
+  },
+  ready: {
+    label: "Ready",
+    variant: "default" as const,
+    icon: "CheckCircle" as const,
+  },
+  deprecated: {
+    label: "Deprecated",
+    variant: "destructive" as const,
+    icon: "AlertTriangle" as const,
+  },
 };
 
 type Experiment = {
-    id: string;
-    name: string;
-    description: string | null;
-    status: string;
-    createdAt: Date;
-    updatedAt: Date;
-    study: { id: string; name: string };
-    robot: { id: string; name: string; description: string | null } | null;
-    protocol?: { blocks: unknown[] } | null;
-    visualDesign?: unknown;
-    studyId: string;
-    createdBy: string;
-    robotId: string | null;
-    version: number;
+  id: string;
+  name: string;
+  description: string | null;
+  status: string;
+  createdAt: Date;
+  updatedAt: Date;
+  study: { id: string; name: string };
+  robot: { id: string; name: string; description: string | null } | null;
+  protocol?: { blocks: unknown[] } | null;
+  visualDesign?: unknown;
+  studyId: string;
+  createdBy: string;
+  robotId: string | null;
+  version: number;
 };
 
 type Trial = {
+  id: string;
+  status: string;
+  createdAt: Date;
+  duration: number | null;
+  participant: {
     id: string;
-    status: string;
-    createdAt: Date;
-    duration: number | null;
-    participant: {
-        id: string;
-        participantCode: string;
-        name?: string | null;
-    } | null;
-    experiment: { name: string } | null;
-    participantId: string | null;
-    experimentId: string;
-    startedAt: Date | null;
-    completedAt: Date | null;
-    notes: string | null;
-    updatedAt: Date;
-    canAccess: boolean;
-    userRole: string;
+    participantCode: string;
+    name?: string | null;
+  } | null;
+  experiment: { name: string } | null;
+  participantId: string | null;
+  experimentId: string;
+  startedAt: Date | null;
+  completedAt: Date | null;
+  notes: string | null;
+  updatedAt: Date;
+  canAccess: boolean;
+  userRole: string;
 };
 
 export default function ExperimentDetailPage({
-    params,
+  params,
 }: ExperimentDetailPageProps) {
-    const { data: session } = useSession();
-    const [experiment, setExperiment] = useState<Experiment | null>(null);
-    const [trials, setTrials] = useState<Trial[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [resolvedParams, setResolvedParams] = useState<{ id: string; experimentId: string } | null>(
-        null,
-    );
-    const { selectStudy } = useStudyManagement();
+  const { data: session } = useSession();
+  const { data: userData } = api.auth.me.useQuery(undefined, {
+    enabled: !!session?.user,
+  });
+  const [experiment, setExperiment] = useState<Experiment | null>(null);
+  const [trials, setTrials] = useState<Trial[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [resolvedParams, setResolvedParams] = useState<{
+    id: string;
+    experimentId: string;
+  } | null>(null);
+  const { selectStudy } = useStudyManagement();
 
-    useEffect(() => {
-        const resolveParams = async () => {
-            const resolved = await params;
-            setResolvedParams(resolved);
-            // Ensure study context is synced
-            if (resolved.id) {
-                void selectStudy(resolved.id);
-            }
-        };
-        void resolveParams();
-    }, [params, selectStudy]);
+  useEffect(() => {
+    const resolveParams = async () => {
+      const resolved = await params;
+      setResolvedParams(resolved);
+      // Ensure study context is synced
+      if (resolved.id) {
+        void selectStudy(resolved.id);
+      }
+    };
+    void resolveParams();
+  }, [params, selectStudy]);
 
-    const experimentQuery = api.experiments.get.useQuery(
-        { id: resolvedParams?.experimentId ?? "" },
-        { enabled: !!resolvedParams?.experimentId },
-    );
+  const experimentQuery = api.experiments.get.useQuery(
+    { id: resolvedParams?.experimentId ?? "" },
+    { enabled: !!resolvedParams?.experimentId },
+  );
 
-    const trialsQuery = api.trials.list.useQuery(
-        { experimentId: resolvedParams?.experimentId ?? "" },
-        { enabled: !!resolvedParams?.experimentId },
-    );
+  const trialsQuery = api.trials.list.useQuery(
+    { experimentId: resolvedParams?.experimentId ?? "" },
+    { enabled: !!resolvedParams?.experimentId },
+  );
 
-    useEffect(() => {
-        if (experimentQuery.data) {
-            setExperiment(experimentQuery.data);
-        }
-    }, [experimentQuery.data]);
+  useEffect(() => {
+    if (experimentQuery.data) {
+      setExperiment(experimentQuery.data);
+    }
+  }, [experimentQuery.data]);
 
-    useEffect(() => {
-        if (trialsQuery.data) {
-            setTrials(trialsQuery.data);
-        }
-    }, [trialsQuery.data]);
+  useEffect(() => {
+    if (trialsQuery.data) {
+      setTrials(trialsQuery.data);
+    }
+  }, [trialsQuery.data]);
 
-    useEffect(() => {
-        if (experimentQuery.isLoading || trialsQuery.isLoading) {
-            setLoading(true);
-        } else {
-            setLoading(false);
-        }
-    }, [experimentQuery.isLoading, trialsQuery.isLoading]);
+  useEffect(() => {
+    if (experimentQuery.isLoading || trialsQuery.isLoading) {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
+  }, [experimentQuery.isLoading, trialsQuery.isLoading]);
 
-    // Set breadcrumbs
-    useBreadcrumbsEffect([
-        {
-            label: "Dashboard",
-            href: "/",
-        },
-        {
-            label: "Studies",
-            href: "/studies",
-        },
-        {
-            label: experiment?.study?.name ?? "Study",
-            href: `/studies/${experiment?.study?.id}`,
-        },
-        {
-            label: "Experiments",
-            href: `/studies/${experiment?.study?.id}/experiments`,
-        },
-        {
-            label: experiment?.name ?? "Experiment",
-        },
-    ]);
+  // Set breadcrumbs
+  useBreadcrumbsEffect([
+    {
+      label: "Dashboard",
+      href: "/",
+    },
+    {
+      label: "Studies",
+      href: "/studies",
+    },
+    {
+      label: experiment?.study?.name ?? "Study",
+      href: `/studies/${experiment?.study?.id}`,
+    },
+    {
+      label: "Experiments",
+      href: `/studies/${experiment?.study?.id}/experiments`,
+    },
+    {
+      label: experiment?.name ?? "Experiment",
+    },
+  ]);
 
-    if (loading) return <div>Loading...</div>;
-    if (experimentQuery.error) return notFound();
-    if (!experiment) return notFound();
+  if (loading) return <div>Loading...</div>;
+  if (experimentQuery.error) return notFound();
+  if (!experiment) return notFound();
 
-    const displayName = experiment.name ?? "Untitled Experiment";
-    const description = experiment.description;
+  const displayName = experiment.name ?? "Untitled Experiment";
+  const description = experiment.description;
 
-    // Check if user can edit this experiment
-    const userRoles = session?.user?.roles?.map((r) => r.role) ?? [];
-    const canEdit =
-        userRoles.includes("administrator") || userRoles.includes("researcher");
+  // Check if user can edit this experiment
+  const userRoles = userData?.roles ?? [];
+  const canEdit =
+    userRoles.includes("administrator") || userRoles.includes("researcher");
 
-    const statusInfo =
-        statusConfig[experiment.status as keyof typeof statusConfig];
+  const statusInfo =
+    statusConfig[experiment.status as keyof typeof statusConfig];
 
-    const studyId = experiment.study.id;
-    const experimentId = experiment.id;
+  const studyId = experiment.study.id;
+  const experimentId = experiment.id;
 
-    return (
-        <EntityView>
-            <EntityViewHeader
-                title={displayName}
-                subtitle={description ?? undefined}
-                icon="TestTube"
-                status={{
-                    label: statusInfo?.label ?? "Unknown",
-                    variant: statusInfo?.variant ?? "secondary",
-                    icon: statusInfo?.icon ?? "TestTube",
-                }}
-                actions={
-                    canEdit ? (
-                        <>
-                            <Button asChild variant="outline">
-                                <Link href={`/studies/${studyId}/experiments/${experimentId}/edit`}>
-                                    <Edit className="mr-2 h-4 w-4" />
-                                    Edit
-                                </Link>
-                            </Button>
-                            <Button asChild variant="outline">
-                                <Link href={`/studies/${studyId}/experiments/${experimentId}/designer`}>
-                                    <Settings className="mr-2 h-4 w-4" />
-                                    Designer
-                                </Link>
-                            </Button>
-                            <Button asChild>
-                                <Link
-                                    href={`/studies/${studyId}/trials/new?experimentId=${experimentId}`}
-                                >
-                                    <Play className="mr-2 h-4 w-4" />
-                                    Start Trial
-                                </Link>
-                            </Button>
-                        </>
-                    ) : undefined
-                }
-            />
-
-            <div className="grid gap-6 lg:grid-cols-3">
-                <div className="space-y-6 lg:col-span-2">
-                    {/* Basic Information */}
-                    <EntityViewSection title="Information" icon="Info">
-                        <InfoGrid
-                            columns={2}
-                            items={[
-                                {
-                                    label: "Study",
-                                    value: experiment.study ? (
-                                        <Link
-                                            href={`/studies/${experiment.study.id}`}
-                                            className="text-primary hover:underline"
-                                        >
-                                            {experiment.study.name}
-                                        </Link>
-                                    ) : (
-                                        "No study assigned"
-                                    ),
-                                },
-                                {
-                                    label: "Status",
-                                    value: statusInfo?.label ?? "Unknown",
-                                },
-                                {
-                                    label: "Created",
-                                    value: formatDistanceToNow(experiment.createdAt, {
-                                        addSuffix: true,
-                                    }),
-                                },
-                                {
-                                    label: "Last Updated",
-                                    value: formatDistanceToNow(experiment.updatedAt, {
-                                        addSuffix: true,
-                                    }),
-                                },
-                            ]}
-                        />
-                    </EntityViewSection>
-
-                    {/* Protocol Section */}
-                    <EntityViewSection
-                        title="Experiment Protocol"
-                        icon="FileText"
-                        actions={
-                            canEdit && (
-                                <Button asChild variant="outline" size="sm">
-                                    <Link href={`/studies/${studyId}/experiments/${experimentId}/designer`}>
-                                        <Edit className="mr-2 h-4 w-4" />
-                                        Edit Protocol
-                                    </Link>
-                                </Button>
-                            )
-                        }
-                    >
-                        {experiment.protocol &&
-                            typeof experiment.protocol === "object" &&
-                            experiment.protocol !== null ? (
-                            <div className="space-y-3">
-                                <div className="text-muted-foreground text-sm">
-                                    Protocol contains{" "}
-                                    {Array.isArray(
-                                        (experiment.protocol as { blocks: unknown[] }).blocks,
-                                    )
-                                        ? (experiment.protocol as { blocks: unknown[] }).blocks
-                                            .length
-                                        : 0}{" "}
-                                    blocks
-                                </div>
-                            </div>
-                        ) : (
-                            <EmptyState
-                                icon="FileText"
-                                title="No protocol defined"
-                                description="Create an experiment protocol using the visual designer"
-                                action={
-                                    canEdit && (
-                                        <Button asChild>
-                                            <Link href={`/studies/${studyId}/experiments/${experimentId}/designer`}>
-                                                Open Designer
-                                            </Link>
-                                        </Button>
-                                    )
-                                }
-                            />
-                        )}
-                    </EntityViewSection>
-
-                    {/* Recent Trials */}
-                    <EntityViewSection
-                        title="Recent Trials"
-                        icon="Play"
-                        actions={
-                            <Button asChild variant="outline" size="sm">
-                                <Link href={`/studies/${experiment.study?.id}/trials`}>
-                                    View All
-                                </Link>
-                            </Button>
-                        }
-                    >
-                        {trials.length > 0 ? (
-                            <div className="space-y-3">
-                                {trials.slice(0, 5).map((trial) => (
-                                    <div
-                                        key={trial.id}
-                                        className="hover:bg-muted/50 rounded-lg border p-4 transition-colors"
-                                    >
-                                        <div className="mb-2 flex items-center justify-between">
-                                            <Link
-                                                href={`/studies/${experiment.study.id}/trials/${trial.id}`}
-                                                className="font-medium hover:underline"
-                                            >
-                                                Trial #{trial.id.slice(-6)}
-                                            </Link>
-                                            <Badge
-                                                variant={
-                                                    trial.status === "completed"
-                                                        ? "default"
-                                                        : trial.status === "in_progress"
-                                                            ? "secondary"
-                                                            : trial.status === "failed"
-                                                                ? "destructive"
-                                                                : "outline"
-                                                }
-                                            >
-                                                {trial.status.charAt(0).toUpperCase() +
-                                                    trial.status.slice(1).replace("_", " ")}
-                                            </Badge>
-                                        </div>
-                                        <div className="text-muted-foreground flex items-center gap-4 text-sm">
-                                            <span className="flex items-center gap-1">
-                                                <Calendar className="h-4 w-4" />
-                                                {formatDistanceToNow(trial.createdAt, {
-                                                    addSuffix: true,
-                                                })}
-                                            </span>
-                                            {trial.duration && (
-                                                <span className="flex items-center gap-1">
-                                                    <Clock className="h-4 w-4" />
-                                                    {Math.round(trial.duration / 60)} min
-                                                </span>
-                                            )}
-                                            {trial.participant && (
-                                                <span className="flex items-center gap-1">
-                                                    <Users className="h-4 w-4" />
-                                                    {trial.participant.name ??
-                                                        trial.participant.participantCode}
-                                                </span>
-                                            )}
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        ) : (
-                            <EmptyState
-                                icon="Play"
-                                title="No trials yet"
-                                description="Start your first trial to collect data"
-                                action={
-                                    canEdit && (
-                                        <Button asChild>
-                                            <Link
-                                                href={`/studies/${studyId}/trials/new?experimentId=${experimentId}`}
-                                            >
-                                                Start Trial
-                                            </Link>
-                                        </Button>
-                                    )
-                                }
-                            />
-                        )}
-                    </EntityViewSection>
-                </div>
-
-                <div className="space-y-6">
-                    {/* Statistics */}
-                    <EntityViewSection title="Statistics" icon="BarChart">
-                        <StatsGrid
-                            stats={[
-                                {
-                                    label: "Total Trials",
-                                    value: trials.length,
-                                },
-                                {
-                                    label: "Completed",
-                                    value: trials.filter((t) => t.status === "completed").length,
-                                },
-                                {
-                                    label: "In Progress",
-                                    value: trials.filter((t) => t.status === "in_progress")
-                                        .length,
-                                },
-                            ]}
-                        />
-                    </EntityViewSection>
-
-                    {/* Robot Information */}
-                    {experiment.robot && (
-                        <EntityViewSection title="Robot Platform" icon="Bot">
-                            <InfoGrid
-                                columns={1}
-                                items={[
-                                    {
-                                        label: "Platform",
-                                        value: experiment.robot.name,
-                                    },
-                                    {
-                                        label: "Type",
-                                        value: experiment.robot.description ?? "Not specified",
-                                    },
-                                ]}
-                            />
-                        </EntityViewSection>
-                    )}
-
-                    {/* Quick Actions */}
-                    <EntityViewSection title="Quick Actions" icon="Zap">
-                        <QuickActions
-                            actions={[
-                                {
-                                    label: "Export Data",
-                                    icon: "Download" as const,
-                                    href: `/studies/${studyId}/experiments/${experimentId}/export`,
-                                },
-                                ...(canEdit
-                                    ? [
-                                        {
-                                            label: "Edit Experiment",
-                                            icon: "Edit" as const,
-                                            href: `/studies/${studyId}/experiments/${experimentId}/edit`,
-                                        },
-                                        {
-                                            label: "Open Designer",
-                                            icon: "Palette" as const,
-                                            href: `/studies/${studyId}/experiments/${experimentId}/designer`,
-                                        },
-                                    ]
-                                    : []),
-                            ]}
-                        />
-                    </EntityViewSection>
-                </div>
+  return (
+    <EntityView>
+      <PageHeader
+        title={displayName}
+        description={description ?? undefined}
+        icon={TestTube}
+        badges={[
+          {
+            label: statusInfo?.label ?? "Unknown",
+            variant: statusInfo?.variant ?? "secondary",
+          },
+        ]}
+        actions={
+          canEdit ? (
+            <div className="flex items-center gap-2">
+              <Button asChild variant="outline">
+                <Link
+                  href={`/studies/${studyId}/experiments/${experimentId}/designer`}
+                >
+                  <Settings className="mr-2 h-4 w-4" />
+                  Designer
+                </Link>
+              </Button>
+              <Button asChild>
+                <Link
+                  href={`/studies/${studyId}/trials/new?experimentId=${experimentId}`}
+                >
+                  <Play className="mr-2 h-4 w-4" />
+                  Start Trial
+                </Link>
+              </Button>
             </div>
-        </EntityView>
-    );
+          ) : undefined
+        }
+      />
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <div className="space-y-6 lg:col-span-2">
+          {/* Basic Information */}
+          <EntityViewSection title="Information" icon="Info">
+            <InfoGrid
+              columns={2}
+              items={[
+                {
+                  label: "Study",
+                  value: experiment.study ? (
+                    <Link
+                      href={`/studies/${experiment.study.id}`}
+                      className="text-primary hover:underline"
+                    >
+                      {experiment.study.name}
+                    </Link>
+                  ) : (
+                    "No study assigned"
+                  ),
+                },
+                {
+                  label: "Status",
+                  value: statusInfo?.label ?? "Unknown",
+                },
+                {
+                  label: "Created",
+                  value: formatDistanceToNow(experiment.createdAt, {
+                    addSuffix: true,
+                  }),
+                },
+                {
+                  label: "Last Updated",
+                  value: formatDistanceToNow(experiment.updatedAt, {
+                    addSuffix: true,
+                  }),
+                },
+              ]}
+            />
+          </EntityViewSection>
+
+          {/* Protocol Section */}
+          <EntityViewSection
+            title="Experiment Protocol"
+            icon="FileText"
+            actions={
+              canEdit && (
+                <Button asChild variant="outline" size="sm">
+                  <Link
+                    href={`/studies/${studyId}/experiments/${experimentId}/designer`}
+                  >
+                    <Edit className="mr-2 h-4 w-4" />
+                    Edit Protocol
+                  </Link>
+                </Button>
+              )
+            }
+          >
+            {experiment.protocol &&
+            typeof experiment.protocol === "object" &&
+            experiment.protocol !== null ? (
+              <div className="space-y-3">
+                <div className="text-muted-foreground text-sm">
+                  Protocol contains{" "}
+                  {Array.isArray(
+                    (experiment.protocol as { blocks: unknown[] }).blocks,
+                  )
+                    ? (experiment.protocol as { blocks: unknown[] }).blocks
+                        .length
+                    : 0}{" "}
+                  blocks
+                </div>
+              </div>
+            ) : (
+              <EmptyState
+                icon="FileText"
+                title="No protocol defined"
+                description="Create an experiment protocol using the visual designer"
+                action={
+                  canEdit && (
+                    <Button asChild>
+                      <Link
+                        href={`/studies/${studyId}/experiments/${experimentId}/designer`}
+                      >
+                        Open Designer
+                      </Link>
+                    </Button>
+                  )
+                }
+              />
+            )}
+          </EntityViewSection>
+
+          {/* Recent Trials */}
+          <EntityViewSection
+            title="Recent Trials"
+            icon="Play"
+            actions={
+              <Button asChild variant="outline" size="sm">
+                <Link href={`/studies/${experiment.study?.id}/trials`}>
+                  View All
+                </Link>
+              </Button>
+            }
+          >
+            {trials.length > 0 ? (
+              <div className="space-y-3">
+                {trials.slice(0, 5).map((trial) => (
+                  <div
+                    key={trial.id}
+                    className="hover:bg-muted/50 rounded-lg border p-4 transition-colors"
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <Link
+                        href={`/studies/${experiment.study.id}/trials/${trial.id}`}
+                        className="font-medium hover:underline"
+                      >
+                        Trial #{trial.id.slice(-6)}
+                      </Link>
+                      <Badge
+                        variant={
+                          trial.status === "completed"
+                            ? "default"
+                            : trial.status === "in_progress"
+                              ? "secondary"
+                              : trial.status === "failed"
+                                ? "destructive"
+                                : "outline"
+                        }
+                      >
+                        {trial.status.charAt(0).toUpperCase() +
+                          trial.status.slice(1).replace("_", " ")}
+                      </Badge>
+                    </div>
+                    <div className="text-muted-foreground flex items-center gap-4 text-sm">
+                      <span className="flex items-center gap-1">
+                        <Calendar className="h-4 w-4" />
+                        {formatDistanceToNow(trial.createdAt, {
+                          addSuffix: true,
+                        })}
+                      </span>
+                      {trial.duration && (
+                        <span className="flex items-center gap-1">
+                          <Clock className="h-4 w-4" />
+                          {Math.round(trial.duration / 60)} min
+                        </span>
+                      )}
+                      {trial.participant && (
+                        <span className="flex items-center gap-1">
+                          <Users className="h-4 w-4" />
+                          {trial.participant.name ??
+                            trial.participant.participantCode}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <EmptyState
+                icon="Play"
+                title="No trials yet"
+                description="Start your first trial to collect data"
+                action={
+                  canEdit && (
+                    <Button asChild>
+                      <Link
+                        href={`/studies/${studyId}/trials/new?experimentId=${experimentId}`}
+                      >
+                        Start Trial
+                      </Link>
+                    </Button>
+                  )
+                }
+              />
+            )}
+          </EntityViewSection>
+        </div>
+
+        <div className="space-y-6">
+          {/* Statistics */}
+          <EntityViewSection title="Statistics" icon="BarChart">
+            <StatsGrid
+              stats={[
+                {
+                  label: "Total Trials",
+                  value: trials.length,
+                },
+                {
+                  label: "Completed",
+                  value: trials.filter((t) => t.status === "completed").length,
+                },
+                {
+                  label: "In Progress",
+                  value: trials.filter((t) => t.status === "in_progress")
+                    .length,
+                },
+              ]}
+            />
+          </EntityViewSection>
+
+          {/* Robot Information */}
+          {experiment.robot && (
+            <EntityViewSection title="Robot Platform" icon="Bot">
+              <InfoGrid
+                columns={1}
+                items={[
+                  {
+                    label: "Platform",
+                    value: experiment.robot.name,
+                  },
+                  {
+                    label: "Type",
+                    value: experiment.robot.description ?? "Not specified",
+                  },
+                ]}
+              />
+            </EntityViewSection>
+          )}
+
+          {/* Quick Actions */}
+          <EntityViewSection title="Quick Actions" icon="Zap">
+            <QuickActions
+              actions={[
+                {
+                  label: "Export Data",
+                  icon: "Download" as const,
+                },
+                ...(canEdit
+                  ? [
+                      {
+                        label: "Open Designer",
+                        icon: "Palette" as const,
+                        href: `/studies/${studyId}/experiments/${experimentId}/designer`,
+                      },
+                    ]
+                  : []),
+              ]}
+            />
+          </EntityViewSection>
+        </div>
+      </div>
+    </EntityView>
+  );
 }

src/app/(dashboard)/studies/[id]/experiments/page.tsx

@@ -31,6 +31,8 @@ export default function StudyExperimentsPage() {
     }
   }, [studyId, selectedStudyId, setSelectedStudyId]);
 
+  const canManage = study?.userRole === "owner" || study?.userRole === "researcher";
+
   return (
     <div className="space-y-6">
       <PageHeader
@@ -38,12 +40,14 @@ export default function StudyExperimentsPage() {
         description="Design and manage experiment protocols for this study"
         icon={FlaskConical}
         actions={
-          <Button asChild>
-            <a href={`/studies/${studyId}/experiments/new`}>
-              <Plus className="mr-2 h-4 w-4" />
-              Create Experiment
-            </a>
-          </Button>
+          canManage ? (
+            <Button asChild>
+              <a href={`/studies/${studyId}/experiments/new`}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Experiment
+              </a>
+            </Button>
+          ) : null
         }
       />
 

src/app/(dashboard)/studies/[id]/forms/[formId]/page.tsx

@@ -0,0 +1,506 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useSession } from "~/lib/auth-client";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import {
+  FileText,
+  ArrowLeft,
+  Plus,
+  Trash2,
+  GripVertical,
+  FileSignature,
+  ClipboardList,
+  FileQuestion,
+  Save,
+  Eye,
+  Edit2,
+  Users,
+  CheckCircle,
+} from "lucide-react";
+import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Badge } from "~/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { api } from "~/trpc/react";
+import { toast } from "sonner";
+
+interface Field {
+  id: string;
+  type: string;
+  label: string;
+  required: boolean;
+  options?: string[];
+  settings?: Record<string, any>;
+}
+
+const fieldTypes = [
+  { value: "text", label: "Text (short)", icon: "📝" },
+  { value: "textarea", label: "Text (long)", icon: "📄" },
+  { value: "multiple_choice", label: "Multiple Choice", icon: "☑️" },
+  { value: "checkbox", label: "Checkbox", icon: "✅" },
+  { value: "rating", label: "Rating Scale", icon: "⭐" },
+  { value: "yes_no", label: "Yes/No", icon: "✔️" },
+  { value: "date", label: "Date", icon: "📅" },
+  { value: "signature", label: "Signature", icon: "✍️" },
+];
+
+const formTypeIcons = {
+  consent: FileSignature,
+  survey: ClipboardList,
+  questionnaire: FileQuestion,
+};
+
+const statusColors = {
+  pending: "bg-yellow-100 text-yellow-700",
+  completed: "bg-green-100 text-green-700",
+  rejected: "bg-red-100 text-red-700",
+};
+
+interface FormViewPageProps {
+  params: Promise<{
+    id: string;
+    formId: string;
+  }>;
+}
+
+export default function FormViewPage({ params }: FormViewPageProps) {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const utils = api.useUtils();
+  const [resolvedParams, setResolvedParams] = useState<{ id: string; formId: string } | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [fields, setFields] = useState<Field[]>([]);
+
+  useEffect(() => {
+    const resolveParams = async () => {
+      const resolved = await params;
+      setResolvedParams(resolved);
+    };
+    void resolveParams();
+  }, [params]);
+
+  const { data: study } = api.studies.get.useQuery(
+    { id: resolvedParams?.id ?? "" },
+    { enabled: !!resolvedParams?.id },
+  );
+
+  const { data: form, isLoading } = api.forms.get.useQuery(
+    { id: resolvedParams?.formId ?? "" },
+    { enabled: !!resolvedParams?.formId },
+  );
+
+  const { data: responsesData } = api.forms.getResponses.useQuery(
+    { formId: resolvedParams?.formId ?? "", limit: 50 },
+    { enabled: !!resolvedParams?.formId },
+  );
+
+  const userRole = (study as any)?.userRole;
+  const canManage = userRole === "owner" || userRole === "researcher";
+
+  const updateForm = api.forms.update.useMutation({
+    onSuccess: () => {
+      toast.success("Form updated successfully!");
+      setIsEditing(false);
+      void utils.forms.get.invalidate({ id: resolvedParams?.formId });
+    },
+    onError: (error) => {
+      toast.error("Failed to update form", { description: error.message });
+    },
+  });
+
+  useEffect(() => {
+    if (form) {
+      setTitle(form.title);
+      setDescription(form.description || "");
+      setFields((form.fields as Field[]) || []);
+    }
+  }, [form]);
+
+  useBreadcrumbsEffect([
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Studies", href: "/studies" },
+    { label: study?.name ?? "Study", href: `/studies/${resolvedParams?.id}` },
+    { label: "Forms", href: `/studies/${resolvedParams?.id}/forms` },
+    { label: form?.title ?? "Form" },
+  ]);
+
+  if (!session?.user) {
+    return notFound();
+  }
+
+  if (isLoading || !form) return <div>Loading...</div>;
+
+  const TypeIcon = formTypeIcons[form.type as keyof typeof formTypeIcons] || FileText;
+  const responses = responsesData?.responses ?? [];
+
+  const addField = (type: string) => {
+    const newField: Field = {
+      id: crypto.randomUUID(),
+      type,
+      label: `New ${fieldTypes.find(f => f.value === type)?.label || "Field"}`,
+      required: false,
+      options: type === "multiple_choice" ? ["Option 1", "Option 2"] : undefined,
+    };
+    setFields([...fields, newField]);
+  };
+
+  const removeField = (id: string) => {
+    setFields(fields.filter(f => f.id !== id));
+  };
+
+  const updateField = (id: string, updates: Partial<Field>) => {
+    setFields(fields.map(f => f.id === id ? { ...f, ...updates } : f));
+  };
+
+  const handleSave = () => {
+    updateForm.mutate({
+      id: form.id,
+      title,
+      description,
+      fields,
+      settings: form.settings as Record<string, any>,
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" asChild>
+            <Link href={`/studies/${resolvedParams?.id}/forms`}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Link>
+          </Button>
+          <div>
+            <div className="flex items-center gap-2">
+              <TypeIcon className="h-5 w-5 text-muted-foreground" />
+              <h1 className="text-2xl font-bold">{form.title}</h1>
+              {form.active && (
+                <Badge variant="default" className="text-xs">Active</Badge>
+              )}
+            </div>
+            <p className="text-muted-foreground text-sm capitalize">
+              {form.type} • Version {form.version}
+            </p>
+          </div>
+        </div>
+        {canManage && (
+          <div className="flex gap-2">
+            {isEditing ? (
+              <>
+                <Button variant="outline" onClick={() => setIsEditing(false)}>
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={updateForm.isPending}>
+                  <Save className="mr-2 h-4 w-4" />
+                  Save Changes
+                </Button>
+              </>
+            ) : (
+              <Button onClick={() => setIsEditing(true)}>
+                <Edit2 className="mr-2 h-4 w-4" />
+                Edit Form
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Tabs defaultValue="fields" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="fields">Fields</TabsTrigger>
+          <TabsTrigger value="preview">Preview</TabsTrigger>
+          <TabsTrigger value="responses">
+            Responses ({responses.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="fields">
+          {isEditing ? (
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between">
+                <CardTitle>Form Fields</CardTitle>
+                <Select onValueChange={addField}>
+                  <SelectTrigger className="w-[200px]">
+                    <SelectValue placeholder="Add field..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fieldTypes.map((type) => (
+                      <SelectItem key={type.value} value={type.value}>
+                        <span className="mr-2">{type.icon}</span>
+                        {type.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </CardHeader>
+              <CardContent>
+                {fields.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                    <FileText className="mb-2 h-8 w-8" />
+                    <p>No fields added yet</p>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    {fields.map((field) => (
+                      <div
+                        key={field.id}
+                        className="flex items-start gap-3 rounded-lg border p-4"
+                      >
+                        <div className="flex cursor-grab items-center text-muted-foreground">
+                          <GripVertical className="h-5 w-5" />
+                        </div>
+                        <div className="flex-1 space-y-3">
+                          <div className="flex items-center gap-3">
+                            <Badge variant="outline" className="text-xs">
+                              {fieldTypes.find(f => f.value === field.type)?.icon}{" "}
+                              {fieldTypes.find(f => f.value === field.type)?.label}
+                            </Badge>
+                            <Input
+                              value={field.label}
+                              onChange={(e) => updateField(field.id, { label: e.target.value })}
+                              placeholder="Field label"
+                              className="flex-1"
+                            />
+                            <label className="flex items-center gap-2 text-sm">
+                              <input
+                                type="checkbox"
+                                checked={field.required}
+                                onChange={(e) => updateField(field.id, { required: e.target.checked })}
+                                className="rounded border-gray-300"
+                              />
+                              Required
+                            </label>
+                          </div>
+                          {field.type === "multiple_choice" && (
+                            <div className="space-y-2">
+                              <Label className="text-xs">Options</Label>
+                              {field.options?.map((opt, i) => (
+                                <div key={i} className="flex items-center gap-2">
+                                  <Input
+                                    value={opt}
+                                    onChange={(e) => {
+                                      const newOptions = [...(field.options || [])];
+                                      newOptions[i] = e.target.value;
+                                      updateField(field.id, { options: newOptions });
+                                    }}
+                                    placeholder={`Option ${i + 1}`}
+                                    className="flex-1"
+                                  />
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    onClick={() => {
+                                      const newOptions = field.options?.filter((_, idx) => idx !== i);
+                                      updateField(field.id, { options: newOptions });
+                                    }}
+                                  >
+                                    <Trash2 className="h-4 w-4" />
+                                  </Button>
+                                </div>
+                              ))}
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
+                                  const newOptions = [...(field.options || []), `Option ${(field.options?.length || 0) + 1}`];
+                                  updateField(field.id, { options: newOptions });
+                                }}
+                              >
+                                <Plus className="mr-1 h-4 w-4" />
+                                Add Option
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => removeField(field.id)}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle>Form Fields</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {fields.length === 0 ? (
+                  <p className="text-muted-foreground">No fields defined</p>
+                ) : (
+                  <div className="space-y-3">
+                    {fields.map((field, index) => (
+                      <div key={field.id} className="flex items-center gap-3 rounded-lg border p-3">
+                        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs">
+                          {index + 1}
+                        </span>
+                        <div className="flex-1">
+                          <p className="font-medium">{field.label}</p>
+                          <p className="text-muted-foreground text-xs">
+                            {fieldTypes.find(f => f.value === field.type)?.label}
+                            {field.required && " • Required"}
+                            {field.type === "multiple_choice" && ` • ${field.options?.length} options`}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        <TabsContent value="preview">
+          <Card>
+            <CardHeader>
+              <CardTitle>Form Preview</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-2">
+                <h2 className="text-xl font-semibold">{title}</h2>
+                {description && <p className="text-muted-foreground">{description}</p>}
+              </div>
+              {fields.length === 0 ? (
+                <p className="text-muted-foreground">No fields to preview</p>
+              ) : (
+                <div className="space-y-4">
+                  {fields.map((field, index) => (
+                    <div key={field.id} className="space-y-2">
+                      <Label>
+                        {index + 1}. {field.label}
+                        {field.required && <span className="text-destructive"> *</span>}
+                      </Label>
+                      {field.type === "text" && (
+                        <Input placeholder="Enter your response..." disabled />
+                      )}
+                      {field.type === "textarea" && (
+                        <Textarea placeholder="Enter your response..." disabled />
+                      )}
+                      {field.type === "multiple_choice" && (
+                        <div className="space-y-2">
+                          {field.options?.map((opt, i) => (
+                            <label key={i} className="flex items-center gap-2">
+                              <input type="radio" disabled /> {opt}
+                            </label>
+                          ))}
+                        </div>
+                      )}
+                      {field.type === "checkbox" && (
+                        <label className="flex items-center gap-2">
+                          <input type="checkbox" disabled /> Yes
+                        </label>
+                      )}
+                      {field.type === "yes_no" && (
+                        <div className="flex gap-4">
+                          <label className="flex items-center gap-2">
+                            <input type="radio" disabled /> Yes
+                          </label>
+                          <label className="flex items-center gap-2">
+                            <input type="radio" disabled /> No
+                          </label>
+                        </div>
+                      )}
+                      {field.type === "rating" && (
+                        <div className="flex gap-2">
+                          {Array.from({ length: field.settings?.scale || 5 }, (_, i) => (
+                            <button key={i} type="button" className="h-8 w-8 rounded border disabled" disabled>
+                              {i + 1}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                      {field.type === "date" && (
+                        <Input type="date" disabled />
+                      )}
+                      {field.type === "signature" && (
+                        <div className="h-24 rounded border bg-muted/50 flex items-center justify-center text-muted-foreground">
+                          Signature pad (disabled in preview)
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="responses">
+          <Card>
+            <CardHeader>
+              <CardTitle>Form Responses</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {responses.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                  <Users className="mb-2 h-8 w-8" />
+                  <p>No responses yet</p>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {responses.map((response) => (
+                    <div key={response.id} className="rounded-lg border p-4">
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center gap-2">
+                          <Users className="h-4 w-4 text-muted-foreground" />
+                          <span className="font-medium">
+                            {response.participant?.name || response.participant?.participantCode || "Unknown"}
+                          </span>
+                        </div>
+                        <Badge className={`text-xs ${statusColors[response.status as keyof typeof statusColors]}`}>
+                          {response.status}
+                        </Badge>
+                      </div>
+                      <div className="space-y-2 text-sm">
+                        {Object.entries(response.responses as Record<string, any>).map(([key, value]) => (
+                          <div key={key} className="flex gap-2">
+                            <span className="text-muted-foreground">{key}:</span>
+                            <span>{String(value)}</span>
+                          </div>
+                        ))}
+                      </div>
+                      {response.signedAt && (
+                        <div className="mt-2 pt-2 border-t text-xs text-muted-foreground">
+                          Signed: {new Date(response.signedAt).toLocaleString()}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/app/(dashboard)/studies/[id]/forms/new/page.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useSession } from "~/lib/auth-client";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import {
+  FileText,
+  ArrowLeft,
+  Plus,
+  Trash2,
+  GripVertical,
+  FileSignature,
+  ClipboardList,
+  FileQuestion,
+  Save,
+  Copy,
+  LayoutTemplate,
+} from "lucide-react";
+import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Badge } from "~/components/ui/badge";
+import { api } from "~/trpc/react";
+import { toast } from "sonner";
+
+interface Field {
+  id: string;
+  type: string;
+  label: string;
+  required: boolean;
+  options?: string[];
+  settings?: Record<string, any>;
+}
+
+const fieldTypes = [
+  { value: "text", label: "Text (short)", icon: "📝" },
+  { value: "textarea", label: "Text (long)", icon: "📄" },
+  { value: "multiple_choice", label: "Multiple Choice", icon: "☑️" },
+  { value: "checkbox", label: "Checkbox", icon: "✅" },
+  { value: "rating", label: "Rating Scale", icon: "⭐" },
+  { value: "yes_no", label: "Yes/No", icon: "✔️" },
+  { value: "date", label: "Date", icon: "📅" },
+  { value: "signature", label: "Signature", icon: "✍️" },
+];
+
+const formTypes = [
+  { value: "consent", label: "Consent Form", icon: FileSignature, description: "Legal/IRB consent documents" },
+  { value: "survey", label: "Survey", icon: ClipboardList, description: "Multi-question questionnaires" },
+  { value: "questionnaire", label: "Questionnaire", icon: FileQuestion, description: "Custom data collection forms" },
+];
+
+export default function NewFormPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { data: session } = useSession();
+  const utils = api.useUtils();
+
+  const studyId = typeof params.id === "string" ? params.id : "";
+
+  const [formType, setFormType] = useState<string>("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [fields, setFields] = useState<Field[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { data: study } = api.studies.get.useQuery(
+    { id: studyId },
+    { enabled: !!studyId },
+  );
+
+  const { data: templates } = api.forms.listTemplates.useQuery();
+
+  const createFromTemplate = api.forms.createFromTemplate.useMutation({
+    onSuccess: (data) => {
+      toast.success("Form created from template!");
+      router.push(`/studies/${studyId}/forms/${data.id}`);
+    },
+    onError: (error) => {
+      toast.error("Failed to create from template", { description: error.message });
+    },
+  });
+
+  const createForm = api.forms.create.useMutation({
+    onSuccess: (data) => {
+      toast.success("Form created successfully!");
+      router.push(`/studies/${studyId}/forms/${data.id}`);
+    },
+    onError: (error) => {
+      toast.error("Failed to create form", { description: error.message });
+      setIsSubmitting(false);
+    },
+  });
+
+  useBreadcrumbsEffect([
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Studies", href: "/studies" },
+    { label: study?.name ?? "Study", href: `/studies/${studyId}` },
+    { label: "Forms", href: `/studies/${studyId}/forms` },
+    { label: "Create Form" },
+  ]);
+
+  if (!session?.user) {
+    return notFound();
+  }
+
+  const addField = (type: string) => {
+    const newField: Field = {
+      id: crypto.randomUUID(),
+      type,
+      label: `New ${fieldTypes.find(f => f.value === type)?.label || "Field"}`,
+      required: false,
+      options: type === "multiple_choice" ? ["Option 1", "Option 2"] : undefined,
+    };
+    setFields([...fields, newField]);
+  };
+
+  const removeField = (id: string) => {
+    setFields(fields.filter(f => f.id !== id));
+  };
+
+  const updateField = (id: string, updates: Partial<Field>) => {
+    setFields(fields.map(f => f.id === id ? { ...f, ...updates } : f));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!formType || !title) {
+      toast.error("Please select a form type and enter a title");
+      return;
+    }
+
+    setIsSubmitting(true);
+    createForm.mutate({
+      studyId,
+      type: formType as "consent" | "survey" | "questionnaire",
+      title,
+      description,
+      fields,
+      settings: {},
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href={`/studies/${studyId}/forms`}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back
+          </Link>
+        </Button>
+      </div>
+
+      <div>
+        <h1 className="text-2xl font-bold">Create New Form</h1>
+        <p className="text-muted-foreground">Design a consent form, survey, or questionnaire</p>
+      </div>
+
+      {templates && templates.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <LayoutTemplate className="h-5 w-5" />
+              Start from Template
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-3 sm:grid-cols-3">
+              {templates.map((template) => {
+                const TypeIcon = formTypes.find(t => t.value === template.type)?.icon || FileText;
+                return (
+                  <button
+                    key={template.id}
+                    type="button"
+                    onClick={() => {
+                      createFromTemplate.mutate({
+                        studyId,
+                        templateId: template.id,
+                      });
+                    }}
+                    disabled={createFromTemplate.isPending}
+                    className="flex flex-col items-start rounded-lg border p-4 text-left transition-all hover:bg-muted/50 disabled:opacity-50"
+                  >
+                    <TypeIcon className="mb-2 h-5 w-5 text-muted-foreground" />
+                    <span className="font-medium">{template.templateName}</span>
+                    <span className="text-muted-foreground text-xs capitalize">{template.type}</span>
+                    <span className="text-muted-foreground text-xs mt-1 line-clamp-2">
+                      {template.description}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+            <div className="mt-4 text-center text-sm text-muted-foreground">
+              Or design from scratch below
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Form Details</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label>Form Type</Label>
+              <div className="grid gap-3 sm:grid-cols-3">
+                {formTypes.map((type) => (
+                  <button
+                    key={type.value}
+                    type="button"
+                    onClick={() => setFormType(type.value)}
+                    className={`flex flex-col items-start rounded-lg border p-4 text-left transition-all hover:bg-muted/50 ${
+                      formType === type.value
+                        ? "border-primary bg-primary/5 ring-1 ring-primary"
+                        : "border-border"
+                    }`}
+                  >
+                    <type.icon className={`mb-2 h-5 w-5 ${formType === type.value ? "text-primary" : "text-muted-foreground"}`} />
+                    <span className="font-medium">{type.label}</span>
+                    <span className="text-muted-foreground text-xs">{type.description}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="title">Title</Label>
+                <Input
+                  id="title"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  placeholder="Enter form title"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="description">Description (optional)</Label>
+                <Input
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="Brief description"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>Form Fields</CardTitle>
+            <Select onValueChange={addField}>
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="Add field..." />
+              </SelectTrigger>
+              <SelectContent>
+                {fieldTypes.map((type) => (
+                  <SelectItem key={type.value} value={type.value}>
+                    <span className="mr-2">{type.icon}</span>
+                    {type.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </CardHeader>
+          <CardContent>
+            {fields.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                <FileText className="mb-2 h-8 w-8" />
+                <p>No fields added yet</p>
+                <p className="text-sm">Use the dropdown above to add fields</p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {fields.map((field, index) => (
+                  <div
+                    key={field.id}
+                    className="flex items-start gap-3 rounded-lg border p-4"
+                  >
+                    <div className="flex cursor-grab items-center text-muted-foreground">
+                      <GripVertical className="h-5 w-5" />
+                    </div>
+                    <div className="flex-1 space-y-3">
+                      <div className="flex items-center gap-3">
+                        <Badge variant="outline" className="text-xs">
+                          {fieldTypes.find(f => f.value === field.type)?.icon}{" "}
+                          {fieldTypes.find(f => f.value === field.type)?.label}
+                        </Badge>
+                        <Input
+                          value={field.label}
+                          onChange={(e) => updateField(field.id, { label: e.target.value })}
+                          placeholder="Field label"
+                          className="flex-1"
+                        />
+                        <label className="flex items-center gap-2 text-sm">
+                          <input
+                            type="checkbox"
+                            checked={field.required}
+                            onChange={(e) => updateField(field.id, { required: e.target.checked })}
+                            className="rounded border-gray-300"
+                          />
+                          Required
+                        </label>
+                      </div>
+                      {field.type === "multiple_choice" && (
+                        <div className="space-y-2">
+                          <Label className="text-xs">Options</Label>
+                          {field.options?.map((opt, i) => (
+                            <div key={i} className="flex items-center gap-2">
+                              <Input
+                                value={opt}
+                                onChange={(e) => {
+                                  const newOptions = [...(field.options || [])];
+                                  newOptions[i] = e.target.value;
+                                  updateField(field.id, { options: newOptions });
+                                }}
+                                placeholder={`Option ${i + 1}`}
+                                className="flex-1"
+                              />
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => {
+                                  const newOptions = field.options?.filter((_, idx) => idx !== i);
+                                  updateField(field.id, { options: newOptions });
+                                }}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          ))}
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                              const newOptions = [...(field.options || []), `Option ${(field.options?.length || 0) + 1}`];
+                              updateField(field.id, { options: newOptions });
+                            }}
+                          >
+                            <Plus className="mr-1 h-4 w-4" />
+                            Add Option
+                          </Button>
+                        </div>
+                      )}
+                      {field.type === "rating" && (
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <span>Scale:</span>
+                          <Select
+                            value={field.settings?.scale?.toString() || "5"}
+                            onValueChange={(val) => updateField(field.id, { settings: { scale: parseInt(val) } })}
+                          >
+                            <SelectTrigger className="w-[100px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="5">1-5</SelectItem>
+                              <SelectItem value="7">1-7</SelectItem>
+                              <SelectItem value="10">1-10</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      )}
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeField(field.id)}
+                    >
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-end gap-3">
+          <Button variant="outline" asChild>
+            <Link href={`/studies/${studyId}/forms`}>Cancel</Link>
+          </Button>
+          <Button type="submit" disabled={isSubmitting || !formType || !title}>
+            <Save className="mr-2 h-4 w-4" />
+            {isSubmitting ? "Creating..." : "Create Form"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/app/(dashboard)/studies/[id]/forms/page.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useSession } from "~/lib/auth-client";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import {
+  FileText,
+  Plus,
+  Search,
+  ClipboardList,
+  FileQuestion,
+  FileSignature,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  Eye,
+  CheckCircle,
+} from "lucide-react";
+import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { api } from "~/trpc/react";
+import { toast } from "sonner";
+import { PageHeader } from "~/components/ui/page-header";
+
+const formTypeIcons = {
+  consent: FileSignature,
+  survey: ClipboardList,
+  questionnaire: FileQuestion,
+};
+
+const formTypeColors = {
+  consent: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+  survey: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  questionnaire: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+};
+
+interface StudyFormsPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default function StudyFormsPage({ params }: StudyFormsPageProps) {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const utils = api.useUtils();
+  const [resolvedParams, setResolvedParams] = useState<{ id: string } | null>(null);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    const resolveParams = async () => {
+      const resolved = await params;
+      setResolvedParams(resolved);
+    };
+    void resolveParams();
+  }, [params]);
+
+  const { data: study } = api.studies.get.useQuery(
+    { id: resolvedParams?.id ?? "" },
+    { enabled: !!resolvedParams?.id },
+  );
+
+  const { data: formsData, isLoading } = api.forms.list.useQuery(
+    { studyId: resolvedParams?.id ?? "", search: search || undefined },
+    { enabled: !!resolvedParams?.id },
+  );
+
+  const userRole = (study as any)?.userRole;
+  const canManage = userRole === "owner" || userRole === "researcher";
+
+  const deleteMutation = api.forms.delete.useMutation({
+    onSuccess: () => {
+      toast.success("Form deleted successfully");
+      void utils.forms.list.invalidate({ studyId: resolvedParams?.id });
+    },
+    onError: (error) => {
+      toast.error("Failed to delete form", { description: error.message });
+    },
+  });
+
+  const setActiveMutation = api.forms.setActive.useMutation({
+    onSuccess: () => {
+      toast.success("Form set as active");
+      void utils.forms.list.invalidate({ studyId: resolvedParams?.id });
+    },
+    onError: (error) => {
+      toast.error("Failed to set active", { description: error.message });
+    },
+  });
+
+  useBreadcrumbsEffect([
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Studies", href: "/studies" },
+    { label: study?.name ?? "Study", href: `/studies/${resolvedParams?.id}` },
+    { label: "Forms" },
+  ]);
+
+  if (!session?.user) {
+    return notFound();
+  }
+
+  if (!study) return <div>Loading...</div>;
+
+  const forms = formsData?.forms ?? [];
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Forms"
+        description="Manage consent forms, surveys, and questionnaires for this study"
+        icon={FileText}
+        actions={
+          canManage && (
+            <Button asChild>
+              <Link href={`/studies/${resolvedParams?.id}/forms/new`}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Form
+              </Link>
+            </Button>
+          )
+        }
+      />
+
+      {forms.length === 0 && !isLoading ? (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <FileText className="h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-semibold mb-2">No Forms Yet</h3>
+          <p className="text-muted-foreground mb-4">
+            Create consent forms, surveys, or questionnaires to collect data from participants
+          </p>
+          {canManage && (
+            <Button asChild>
+              <Link href={`/studies/${resolvedParams?.id}/forms/new`}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Your First Form
+              </Link>
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="flex items-center gap-4">
+            <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="Search forms..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {forms.map((form) => {
+              const TypeIcon = formTypeIcons[form.type as keyof typeof formTypeIcons] || FileText;
+              const typeColor = formTypeColors[form.type as keyof typeof formTypeColors] || "bg-gray-100";
+              const isActive = form.active;
+
+              return (
+                <Card key={form.id} className="overflow-hidden">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-2">
+                        <div className={`rounded-md p-2 ${typeColor}`}>
+                          <TypeIcon className="h-4 w-4" />
+                        </div>
+                        <div>
+                          <CardTitle className="text-base">{form.title}</CardTitle>
+                          <p className="text-muted-foreground text-xs capitalize">
+                            {form.type}
+                          </p>
+                        </div>
+                      </div>
+                      {isActive && (
+                        <Badge variant="default" className="text-xs">
+                          Active
+                        </Badge>
+                      )}
+                    </div>
+                  </CardHeader>
+                  <CardContent className="pb-3">
+                    {form.description && (
+                      <p className="text-muted-foreground text-sm line-clamp-2 mb-3">
+                        {form.description}
+                      </p>
+                    )}
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <span>v{form.version}</span>
+                      <span>{(form as any)._count?.responses ?? 0} responses</span>
+                    </div>
+                  </CardContent>
+                  <div className="flex items-center justify-between border-t bg-muted/30 px-4 py-2">
+                    <Button asChild variant="ghost" size="sm">
+                      <Link href={`/studies/${resolvedParams?.id}/forms/${form.id}`}>
+                        <Eye className="mr-1 h-3 w-3" />
+                        View
+                      </Link>
+                    </Button>
+                    {canManage && (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="sm">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                            <Link href={`/studies/${resolvedParams?.id}/forms/${form.id}/edit`}>
+                              <Pencil className="mr-2 h-4 w-4" />
+                              Edit
+                            </Link>
+                          </DropdownMenuItem>
+                          {!isActive && (
+                            <DropdownMenuItem
+                              onClick={() => setActiveMutation.mutate({ id: form.id })}
+                            >
+                              <CheckCircle className="mr-2 h-4 w-4" />
+                              Set Active
+                            </DropdownMenuItem>
+                          )}
+                          <DropdownMenuItem
+                            onClick={() => {
+                              if (confirm("Are you sure you want to delete this form?")) {
+                                deleteMutation.mutate({ id: form.id });
+                              }
+                            }}
+                            className="text-destructive"
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )}
+                  </div>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}