WIP - fixes to spreadsheet view

WIP - added spredsheet view using ag-grid
WIP - fix AI suggestions during call progress
2026-04-09 09:28:25 +02:00 · 2026-02-06 22:01:59 +01:00 · 2026-02-05 03:02:02 +01:00 · 2026-02-05 02:41:54 +01:00 · 2026-02-04 08:55:08 +01:00 · 2026-02-04 00:21:06 +01:00
30 changed files with 1626 additions and 564 deletions
--- a/.env.web
+++ b/.env.web
@@ -1,5 +1,5 @@
 NUXT_PORT=3001
 NUXT_HOST=0.0.0.0

-# Point Nuxt to the API container (not localhost)
-NUXT_PUBLIC_API_BASE_URL=https://tenant1.routebox.co
+# Nitro BFF backend URL (server-only, not exposed to client)
+BACKEND_URL=https://backend.routebox.co
--- a/backend/src/ai-assistant/ai-assistant.service.ts
+++ b/backend/src/ai-assistant/ai-assistant.service.ts
@@ -2279,28 +2279,10 @@ export class AiAssistantService {

    const content = typeof response.content === 'string' ? response.content : '{}';
    const parsed = await parser.parse(content);
-    const normalizedPlan = this.normalizeSearchPlan(parsed, message, objectDefinition);
-
-    if (normalizedPlan.strategy === 'query') {
-      const aiExplanation = await this.generateQueryExplanationWithAi(
-        model,
-        message,
-        objectDefinition,
-        normalizedPlan,
-      );
-      if (aiExplanation) {
-        normalizedPlan.explanation = aiExplanation;
-      }
+    return this.normalizeSearchPlan(parsed, message);
  }

-    return normalizedPlan;
-  }
-
-  private normalizeSearchPlan(
-    plan: AiSearchPlan,
-    message: string,
-    objectDefinition?: any,
-  ): AiSearchPlan {
+  private normalizeSearchPlan(plan: AiSearchPlan, message: string): AiSearchPlan {
    if (!plan || typeof plan !== 'object') {
      return this.buildSearchPlanFallback(message);
    }
@@ -2320,155 +2302,15 @@ export class AiAssistantService {
      };
    }

-    const queryExplanation = this.buildQueryExplanation(
-      message,
-      objectDefinition,
-      Array.isArray(plan.filters) ? plan.filters : [],
-      plan.sort || null,
-    );
-
    return {
      strategy,
-      explanation: queryExplanation || explanation,
+      explanation,
      keyword: null,
      filters: Array.isArray(plan.filters) ? plan.filters : [],
      sort: plan.sort || null,
    };
  }

-  private buildQueryExplanation(
-    message: string,
-    objectDefinition: any,
-    filters: AiSearchFilter[],
-    sort: { field: string; direction: 'asc' | 'desc' } | null,
-  ): string {
-    const fieldLabelByApiName = new Map<string, string>(
-      (objectDefinition?.fields || []).map((field: any) => [field.apiName, field.label || field.apiName]),
-    );
-    const objectLabel = objectDefinition?.label || objectDefinition?.apiName || 'records';
-
-    const filterParts = filters
-      .map((filter) => this.describeFilter(filter, fieldLabelByApiName))
-      .filter(Boolean) as string[];
-
-    const sortLabel = sort?.field
-      ? fieldLabelByApiName.get(sort.field) || sort.field
-      : null;
-    const sortPart =
-      sortLabel && sort?.direction
-        ? `sorted by ${sortLabel} (${sort.direction === 'desc' ? 'newest/highest first' : 'oldest/lowest first'})`
-        : '';
-
-    if (filterParts.length > 0 && sortPart) {
-      return `Showing ${objectLabel} where ${filterParts.join(' and ')}, ${sortPart}.`;
-    }
-
-    if (filterParts.length > 0) {
-      return `Showing ${objectLabel} where ${filterParts.join(' and ')}.`;
-    }
-
-    if (sortPart) {
-      return `Showing ${objectLabel} ${sortPart}.`;
-    }
-
-    return `Applied filters based on: "${message.trim()}".`;
-  }
-
-  private describeFilter(filter: AiSearchFilter, fieldLabelByApiName: Map<string, string>): string {
-    const fieldLabel = fieldLabelByApiName.get(filter.field) || filter.field;
-    const formatValue = (value: any) =>
-      value === null || value === undefined || value === ''
-        ? 'empty'
-        : typeof value === 'string'
-          ? `"${value}"`
-          : String(value);
-
-    switch (filter.operator) {
-      case 'eq':
-        return `${fieldLabel} is ${formatValue(filter.value)}`;
-      case 'neq':
-        return `${fieldLabel} is not ${formatValue(filter.value)}`;
-      case 'gt':
-        return `${fieldLabel} is greater than ${formatValue(filter.value)}`;
-      case 'gte':
-        return `${fieldLabel} is at least ${formatValue(filter.value)}`;
-      case 'lt':
-        return `${fieldLabel} is less than ${formatValue(filter.value)}`;
-      case 'lte':
-        return `${fieldLabel} is at most ${formatValue(filter.value)}`;
-      case 'contains':
-        return `${fieldLabel} contains ${formatValue(filter.value)}`;
-      case 'startsWith':
-        return `${fieldLabel} starts with ${formatValue(filter.value)}`;
-      case 'endsWith':
-        return `${fieldLabel} ends with ${formatValue(filter.value)}`;
-      case 'in':
-        return `${fieldLabel} is one of ${(filter.values || []).map(formatValue).join(', ')}`;
-      case 'notIn':
-        return `${fieldLabel} is not one of ${(filter.values || []).map(formatValue).join(', ')}`;
-      case 'isNull':
-        return `${fieldLabel} is empty`;
-      case 'notNull':
-        return `${fieldLabel} is not empty`;
-      case 'between':
-        if (filter.from && filter.to) {
-          return `${fieldLabel} is between ${formatValue(filter.from)} and ${formatValue(filter.to)}`;
-        }
-        if (filter.from) {
-          return `${fieldLabel} is from ${formatValue(filter.from)} onward`;
-        }
-        if (filter.to) {
-          return `${fieldLabel} is up to ${formatValue(filter.to)}`;
-        }
-        return `${fieldLabel} uses a date range filter`;
-      default:
-        return '';
-    }
-  }
-
-  private async generateQueryExplanationWithAi(
-    model: ChatOpenAI,
-    message: string,
-    objectDefinition: any,
-    plan: AiSearchPlan,
-  ): Promise<string | null> {
-    try {
-      const fields = (objectDefinition?.fields || []).map((field: any) => ({
-        apiName: field.apiName,
-        label: field.label || field.apiName,
-      }));
-
-      const response = await model.invoke([
-        new SystemMessage(
-          `You explain CRM list query results in plain language for end users.` +
-            `\nWrite one short sentence (max 25 words).` +
-            `\nDescribe the resulting filters/sort in business language.` +
-            `\nDo NOT mention SQL, JSON, "strategy", "query mode", or AI decision process.` +
-            `\nIf values are present, mention the most important ones clearly.`,
-        ),
-        new HumanMessage(
-          `Object: ${objectDefinition?.label || objectDefinition?.apiName || 'records'}\n` +
-            `User request: ${message}\n` +
-            `Available fields: ${JSON.stringify(fields)}\n` +
-            `Applied filters: ${JSON.stringify(plan.filters || [])}\n` +
-            `Applied sort: ${JSON.stringify(plan.sort || null)}\n` +
-            `Current explanation draft: ${plan.explanation}`,
-        ),
-      ]);
-
-      const content = Array.isArray(response.content)
-        ? response.content
-            .map((part: any) => (typeof part === 'string' ? part : part?.text || ''))
-            .join(' ')
-        : String(response.content || '');
-      const cleaned = content.trim().replace(/\s+/g, ' ');
-      return cleaned || null;
-    } catch (error) {
-      this.logger.warn(`AI query explanation refinement failed: ${error.message}`);
-      return null;
-    }
-  }
-
  private sanitizeUserOwnerFields(
    fields: Record<string, any>,
    fieldDefinitions: any[],
--- a/backend/src/app-builder/app-builder.service.ts
+++ b/backend/src/app-builder/app-builder.service.ts
@@ -10,14 +10,14 @@ export class AppBuilderService {

  // Runtime endpoints
  async getApps(tenantId: string, userId: string) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    // For now, return all apps
    // In production, you'd filter by user permissions
    return App.query(knex).withGraphFetched('pages').orderBy('label', 'asc');
  }

  async getApp(tenantId: string, slug: string, userId: string) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const app = await App.query(knex)
      .findOne({ slug })
      .withGraphFetched('pages');
@@ -35,7 +35,7 @@ export class AppBuilderService {
    pageSlug: string,
    userId: string,
  ) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const app = await this.getApp(tenantId, appSlug, userId);

    const page = await AppPage.query(knex).findOne({
@@ -52,12 +52,12 @@ export class AppBuilderService {

  // Setup endpoints
  async getAllApps(tenantId: string) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    return App.query(knex).withGraphFetched('pages').orderBy('label', 'asc');
  }

  async getAppForSetup(tenantId: string, slug: string) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const app = await App.query(knex)
      .findOne({ slug })
      .withGraphFetched('pages');
@@ -77,7 +77,7 @@ export class AppBuilderService {
      description?: string;
    },
  ) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    return App.query(knex).insert({
      ...data,
      displayOrder: 0,
@@ -92,7 +92,7 @@ export class AppBuilderService {
      description?: string;
    },
  ) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const app = await this.getAppForSetup(tenantId, slug);

    return App.query(knex).patchAndFetchById(app.id, data);
@@ -109,7 +109,7 @@ export class AppBuilderService {
      sortOrder?: number;
    },
  ) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const app = await this.getAppForSetup(tenantId, appSlug);

    return AppPage.query(knex).insert({
@@ -133,7 +133,7 @@ export class AppBuilderService {
      sortOrder?: number;
    },
  ) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const app = await this.getAppForSetup(tenantId, appSlug);

    const page = await AppPage.query(knex).findOne({
--- a/backend/src/auth/auth.controller.ts
+++ b/backend/src/auth/auth.controller.ts
@@ -1,15 +1,19 @@
 import {
  Controller,
  Post,
+  Get,
  Body,
  UnauthorizedException,
  HttpCode,
  HttpStatus,
  Req,
+  UseGuards,
 } from '@nestjs/common';
 import { IsEmail, IsString, MinLength, IsOptional } from 'class-validator';
 import { AuthService } from './auth.service';
 import { TenantId } from '../tenant/tenant.decorator';
+import { JwtAuthGuard } from './jwt-auth.guard';
+import { CurrentUser } from './current-user.decorator';

 class LoginDto {
  @IsEmail()
@@ -111,4 +115,15 @@ export class AuthController {
    // This endpoint exists for consistency and potential future enhancements
    return { message: 'Logged out successfully' };
  }
+
+  @UseGuards(JwtAuthGuard)
+  @Get('me')
+  async me(@CurrentUser() user: any, @TenantId() tenantId: string) {
+    // Return the current authenticated user info
+    return {
+      id: user.userId,
+      email: user.email,
+      tenantId: tenantId || user.tenantId,
+    };
+  }
 }
--- a/backend/src/auth/auth.service.ts
+++ b/backend/src/auth/auth.service.ts
@@ -29,7 +29,7 @@ export class AuthService {
    }

    // Otherwise, validate as tenant user
-    const tenantDb = await this.tenantDbService.getTenantKnex(tenantId);
+    const tenantDb = await this.tenantDbService.getTenantKnexById(tenantId);

    const user = await tenantDb('users')
      .where({ email })
@@ -113,7 +113,7 @@ export class AuthService {
    }

    // Otherwise, register as tenant user
-    const tenantDb = await this.tenantDbService.getTenantKnex(tenantId);
+    const tenantDb = await this.tenantDbService.getTenantKnexById(tenantId);
    
    const hashedPassword = await bcrypt.hash(password, 10);

--- a/backend/src/page-layout/page-layout.service.ts
+++ b/backend/src/page-layout/page-layout.service.ts
@@ -7,7 +7,7 @@ export class PageLayoutService {
  constructor(private tenantDbService: TenantDatabaseService) {}

  async create(tenantId: string, createDto: CreatePageLayoutDto) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    const layoutType = createDto.layoutType || 'detail';
    
    // If this layout is set as default, unset other defaults for the same object and layout type
@@ -32,7 +32,7 @@ export class PageLayoutService {
  }

  async findAll(tenantId: string, objectId?: string, layoutType?: PageLayoutType) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    
    let query = knex('page_layouts');

@@ -49,7 +49,7 @@ export class PageLayoutService {
  }

  async findOne(tenantId: string, id: string) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    
    const layout = await knex('page_layouts').where({ id }).first();

@@ -61,7 +61,7 @@ export class PageLayoutService {
  }

  async findDefaultByObject(tenantId: string, objectId: string, layoutType: PageLayoutType = 'detail') {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    
    const layout = await knex('page_layouts')
      .where({ object_id: objectId, is_default: true, layout_type: layoutType })
@@ -71,7 +71,7 @@ export class PageLayoutService {
  }

  async update(tenantId: string, id: string, updateDto: UpdatePageLayoutDto) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    
    // Check if layout exists
    const layout = await this.findOne(tenantId, id);
@@ -112,7 +112,7 @@ export class PageLayoutService {
  }

  async remove(tenantId: string, id: string) {
-    const knex = await this.tenantDbService.getTenantKnex(tenantId);
+    const knex = await this.tenantDbService.getTenantKnexById(tenantId);
    
    await this.findOne(tenantId, id);

--- a/backend/src/tenant/tenant.controller.ts
+++ b/backend/src/tenant/tenant.controller.ts
@@ -16,26 +16,45 @@ import { TenantId } from './tenant.decorator';
 export class TenantController {
  constructor(private readonly tenantDbService: TenantDatabaseService) {}

+  /**
+   * Helper to find tenant by ID or domain
+   */
+  private async findTenant(identifier: string) {
+    const centralPrisma = getCentralPrisma();
+    
+    // Check if identifier is a CUID (tenant ID) or a domain
+    const isCUID = /^c[a-z0-9]{24}$/i.test(identifier);
+    
+    if (isCUID) {
+      // Look up by tenant ID directly
+      return centralPrisma.tenant.findUnique({
+        where: { id: identifier },
+        select: { id: true, integrationsConfig: true },
+      });
+    } else {
+      // Look up by domain
+      const domainRecord = await centralPrisma.domain.findUnique({
+        where: { domain: identifier },
+        include: { tenant: { select: { id: true, integrationsConfig: true } } },
+      });
+      return domainRecord?.tenant;
+    }
+  }
+
  /**
   * Get integrations configuration for the current tenant
   */
  @Get('integrations')
-  async getIntegrationsConfig(@TenantId() domain: string) {
-    const centralPrisma = getCentralPrisma();
+  async getIntegrationsConfig(@TenantId() tenantIdentifier: string) {
+    const tenant = await this.findTenant(tenantIdentifier);

-    // Look up tenant by domain
-    const domainRecord = await centralPrisma.domain.findUnique({
-      where: { domain },
-      include: { tenant: { select: { id: true, integrationsConfig: true } } },
-    });
-
-    if (!domainRecord?.tenant || !domainRecord.tenant.integrationsConfig) {
+    if (!tenant || !tenant.integrationsConfig) {
      return { data: null };
    }

    // Decrypt the config
    const config = this.tenantDbService.decryptIntegrationsConfig(
-      domainRecord.tenant.integrationsConfig as any,
+      tenant.integrationsConfig as any,
    );

    // Return config with sensitive fields masked
@@ -49,31 +68,26 @@ export class TenantController {
   */
  @Put('integrations')
  async updateIntegrationsConfig(
-    @TenantId() domain: string,
+    @TenantId() tenantIdentifier: string,
    @Body() body: { integrationsConfig: any },
  ) {
    const { integrationsConfig } = body;

-    if (!domain) {
-      throw new Error('Domain is missing from request');
+    if (!tenantIdentifier) {
+      throw new Error('Tenant identifier is missing from request');
    }

-    // Look up tenant by domain
-    const centralPrisma = getCentralPrisma();
-    const domainRecord = await centralPrisma.domain.findUnique({
-      where: { domain },
-      include: { tenant: { select: { id: true, integrationsConfig: true } } },
-    });
+    const tenant = await this.findTenant(tenantIdentifier);

-    if (!domainRecord?.tenant) {
-      throw new Error(`Tenant with domain ${domain} not found`);
+    if (!tenant) {
+      throw new Error(`Tenant with identifier ${tenantIdentifier} not found`);
    }

    // Merge with existing config to preserve masked values
    let finalConfig = integrationsConfig;
-    if (domainRecord.tenant.integrationsConfig) {
+    if (tenant.integrationsConfig) {
      const existingConfig = this.tenantDbService.decryptIntegrationsConfig(
-        domainRecord.tenant.integrationsConfig as any,
+        tenant.integrationsConfig as any,
      );

      // Replace masked values with actual values from existing config
@@ -86,8 +100,9 @@ export class TenantController {
    );

    // Update in database
+    const centralPrisma = getCentralPrisma();
    await centralPrisma.tenant.update({
-      where: { id: domainRecord.tenant.id },
+      where: { id: tenant.id },
      data: {
        integrationsConfig: encryptedConfig as any,
      },
--- a/backend/src/tenant/tenant.middleware.ts
+++ b/backend/src/tenant/tenant.middleware.ts
@@ -14,23 +14,26 @@ export class TenantMiddleware implements NestMiddleware {
    next: () => void,
  ) {
    try {
-      // Extract subdomain from hostname
-      const host = req.headers.host || '';
-      const hostname = host.split(':')[0]; // Remove port if present
+      // Priority 1: Check x-tenant-subdomain header from Nitro BFF proxy
+      // This is the primary method when using the BFF architecture
+      let subdomain = req.headers['x-tenant-subdomain'] as string | null;
+      let tenantId = req.headers['x-tenant-id'] as string;

-      // Check Origin header to get frontend subdomain (for API calls)
+      if (subdomain) {
+        this.logger.log(`Using x-tenant-subdomain header: ${subdomain}`);
+      }
+
+      // Priority 2: Fall back to extracting subdomain from Origin/Host headers
+      // This supports direct backend access for development/testing
+      if (!subdomain && !tenantId) {
+        const host = req.headers.host || '';
+        const hostname = host.split(':')[0];
        const origin = req.headers.origin as string;
        const referer = req.headers.referer as string;
        
        let parts = hostname.split('.');

-      this.logger.log(`Host header: ${host}, hostname: ${hostname}, origin: ${origin}, referer: ${referer}, parts: ${JSON.stringify(parts)}`);
-
-      // For local development, accept x-tenant-id header
-      let tenantId = req.headers['x-tenant-id'] as string;
-      let subdomain: string | null = null;
-
-      this.logger.log(`Host header: ${host}, hostname: ${hostname}, parts: ${JSON.stringify(parts)}, x-tenant-id: ${tenantId}`);
+        this.logger.log(`Host header: ${host}, hostname: ${hostname}, origin: ${origin}, referer: ${referer}`);

        // Try to extract subdomain from Origin header first (for API calls from frontend)
        if (origin) {
@@ -42,7 +45,7 @@ export class TenantMiddleware implements NestMiddleware {
          } catch (error) {
            this.logger.warn(`Failed to parse origin: ${origin}`);
          }
-      } else if (referer && !tenantId) {
+        } else if (referer) {
          // Fallback to Referer if no Origin
          try {
            const refererUrl = new URL(referer);
@@ -55,20 +58,17 @@ export class TenantMiddleware implements NestMiddleware {
        }

        // Extract subdomain (e.g., "tenant1" from "tenant1.routebox.co")
-      // For production domains with 3+ parts, extract first part as subdomain
        if (parts.length >= 3) {
          subdomain = parts[0];
-        // Ignore www subdomain
          if (subdomain === 'www') {
            subdomain = null;
          }
-      }
-      // For development (e.g., tenant1.localhost), also check 2 parts
-      else if (parts.length === 2 && parts[1] === 'localhost') {
+        } else if (parts.length === 2 && parts[1] === 'localhost') {
          subdomain = parts[0];
        }
+      }

-      this.logger.log(`Extracted subdomain: ${subdomain}`);
+      this.logger.log(`Extracted subdomain: ${subdomain}, x-tenant-id: ${tenantId}`);

      // Always attach subdomain to request if present
      if (subdomain) {
@@ -122,7 +122,7 @@ export class TenantMiddleware implements NestMiddleware {
        // Attach tenant info to request object
        (req as any).tenantId = tenantId;
      } else {
-        this.logger.warn(`No tenant identified from host: ${hostname}`);
+        this.logger.warn(`No tenant identified from host: ${subdomain}`);
      }

      next();
--- a/backend/src/voice/voice.controller.ts
+++ b/backend/src/voice/voice.controller.ts
@@ -98,37 +98,75 @@ export class VoiceController {

  /**
   * TwiML for outbound calls from browser (Twilio Device)
+   * Twilio sends application/x-www-form-urlencoded data
   */
  @Post('twiml/outbound')
  async outboundTwiml(@Req() req: FastifyRequest, @Res() res: FastifyReply) {
-    const body = req.body as any;
+    // Parse body - Twilio sends URL-encoded form data
+    let body = req.body as any;
+    
+    // Handle case where body might be parsed as JSON key (URL-encoded string as key)
+    if (body && typeof body === 'object' && Object.keys(body).length === 1) {
+      const key = Object.keys(body)[0];
+      if (key.startsWith('{') || key.includes('=')) {
+        try {
+          // Try parsing as JSON if it looks like JSON
+          if (key.startsWith('{')) {
+            body = JSON.parse(key);
+          } else {
+            // Parse as URL-encoded
+            const params = new URLSearchParams(key);
+            body = Object.fromEntries(params.entries());
+          }
+        } catch (e) {
+          this.logger.warn(`Failed to re-parse body: ${e.message}`);
+        }
+      }
+    }
+
    const to = body.To;
-    const from = body.From;
+    const from = body.From; // Format: "client:tenantId:userId"
    const callSid = body.CallSid;

    this.logger.log(`=== TwiML OUTBOUND REQUEST RECEIVED ===`);
-    this.logger.log(`CallSid: ${callSid}, Body From: ${from}, Body To: ${to}`);
-    this.logger.log(`Full body: ${JSON.stringify(body)}`);
+    this.logger.log(`CallSid: ${callSid}, From: ${from}, To: ${to}`);

    try {
-      // Extract tenant domain from Host header
-      const host = req.headers.host || '';
-      const tenantDomain = host.split('.')[0]; // e.g., "tenant1" from "tenant1.routebox.co"
+      // Extract tenant ID from the client identity
+      // Format: "client:tenantId:userId"
+      let tenantId: string | null = null;
+      if (from && from.startsWith('client:')) {
+        const parts = from.replace('client:', '').split(':');
+        if (parts.length >= 2) {
+          tenantId = parts[0]; // First part is tenantId
+          this.logger.log(`Extracted tenantId from client identity: ${tenantId}`);
+        }
+      }

-      this.logger.log(`Extracted tenant domain: ${tenantDomain}`);
+      if (!tenantId) {
+        this.logger.error(`Could not extract tenant from From: ${from}`);
+        throw new Error('Could not determine tenant from call');
+      }

      // Look up tenant's Twilio phone number from config
-      let callerId = to; // Fallback (will cause error if not found)
+      let callerId: string | undefined;
      try {
-        // Get Twilio config to find the phone number
-        const { config } = await this.voiceService['getTwilioClient'](tenantDomain);
+        const { config } = await this.voiceService['getTwilioClient'](tenantId);
        callerId = config.phoneNumber;
        this.logger.log(`Retrieved Twilio phone number for tenant: ${callerId}`);
      } catch (error: any) {
        this.logger.error(`Failed to get Twilio config: ${error.message}`);
+        throw error;
      }

-      const dialNumber = to;
+      if (!callerId) {
+        throw new Error('No caller ID configured for tenant');
+      }
+
+      const dialNumber = to?.trim();
+      if (!dialNumber) {
+        throw new Error('No destination number provided');
+      }

      this.logger.log(`Using callerId: ${callerId}, dialNumber: ${dialNumber}`);

@@ -145,10 +183,9 @@ export class VoiceController {
    } catch (error: any) {
      this.logger.error(`=== ERROR GENERATING TWIML ===`);
      this.logger.error(`Error: ${error.message}`);
-      this.logger.error(`Stack: ${error.stack}`);
      const errorTwiml = `<?xml version="1.0" encoding="UTF-8"?>
 <Response>
-  <Say>An error occurred while processing your call.</Say>
+  <Say>An error occurred while processing your call. ${error.message}</Say>
 </Response>`;
      res.type('text/xml').send(errorTwiml);
    }
@@ -156,13 +193,33 @@ export class VoiceController {

  /**
   * TwiML for inbound calls
+   * Twilio sends application/x-www-form-urlencoded data
   */
  @Post('twiml/inbound')
  async inboundTwiml(@Req() req: FastifyRequest, @Res() res: FastifyReply) {
-    const body = req.body as any;
+    // Parse body - Twilio sends URL-encoded form data
+    let body = req.body as any;
+    
+    // Handle case where body might be parsed incorrectly
+    if (body && typeof body === 'object' && Object.keys(body).length === 1) {
+      const key = Object.keys(body)[0];
+      if (key.startsWith('{') || key.includes('=')) {
+        try {
+          if (key.startsWith('{')) {
+            body = JSON.parse(key);
+          } else {
+            const params = new URLSearchParams(key);
+            body = Object.fromEntries(params.entries());
+          }
+        } catch (e) {
+          this.logger.warn(`Failed to re-parse body: ${e.message}`);
+        }
+      }
+    }
+
    const callSid = body.CallSid;
    const fromNumber = body.From;
-    const toNumber = body.To;
+    const toNumber = body.To; // This is the Twilio phone number that was called

    this.logger.log(`\n\n╔════════════════════════════════════════╗`);
    this.logger.log(`║ === INBOUND CALL RECEIVED ===`);
@@ -170,19 +227,28 @@ export class VoiceController {
    this.logger.log(`CallSid: ${callSid}`);
    this.logger.log(`From: ${fromNumber}`);
    this.logger.log(`To: ${toNumber}`);
-    this.logger.log(`Full body: ${JSON.stringify(body)}`);

    try {
-      // Extract tenant domain from Host header
-      const host = req.headers.host || '';
-      const tenantDomain = host.split('.')[0]; // e.g., "tenant1" from "tenant1.routebox.co"
+      // Look up tenant by the Twilio phone number that was called
+      const tenantInfo = await this.voiceService.findTenantByPhoneNumber(toNumber);
      
-      this.logger.log(`Extracted tenant domain: ${tenantDomain}`);
+      if (!tenantInfo) {
+        this.logger.error(`No tenant found for phone number: ${toNumber}`);
+        const twiml = `<?xml version="1.0" encoding="UTF-8"?>
+<Response>
+  <Say>Sorry, this number is not configured. Please contact support.</Say>
+  <Hangup/>
+</Response>`;
+        return res.type('text/xml').send(twiml);
+      }
+
+      const tenantId = tenantInfo.tenantId;
+      this.logger.log(`Found tenant: ${tenantId}`);

      // Get all connected users for this tenant
-      const connectedUsers = this.voiceGateway.getConnectedUsers(tenantDomain);
+      const connectedUsers = this.voiceGateway.getConnectedUsers(tenantId);
      
-      this.logger.log(`Connected users for tenant ${tenantDomain}: ${connectedUsers.length}`);
+      this.logger.log(`Connected users for tenant ${tenantId}: ${connectedUsers.length}`);
      if (connectedUsers.length > 0) {
        this.logger.log(`Connected user IDs: ${connectedUsers.join(', ')}`);
      }
@@ -198,20 +264,22 @@ export class VoiceController {
        return res.type('text/xml').send(twiml);
      }

-      // Build TwiML to dial all connected clients with Media Streams for AI
-      const clientElements = connectedUsers.map(userId => `    <Client>${userId}</Client>`).join('\n');
+      // Build TwiML to dial all connected clients
+      // Client identity format is now: tenantId:userId
+      const clientElements = connectedUsers.map(userId => `    <Client>${tenantId}:${userId}</Client>`).join('\n');
      
-      // Use wss:// for secure WebSocket (Traefik handles HTTPS)
+      // Log the client identities being dialed
+      this.logger.log(`Client identities being dialed:`);
+      connectedUsers.forEach(userId => {
+        this.logger.log(`  - ${tenantId}:${userId}`);
+      });
+      
+      // Use wss:// for secure WebSocket
+      const host = req.headers.host || 'backend.routebox.co';
      const streamUrl = `wss://${host}/api/voice/media-stream`;
      
      this.logger.log(`Stream URL: ${streamUrl}`);
      this.logger.log(`Dialing ${connectedUsers.length} client(s)...`);
-      this.logger.log(`Client IDs to dial: ${connectedUsers.join(', ')}`);
-      
-      // Verify we have client IDs in proper format
-      if (connectedUsers.length > 0) {
-        this.logger.log(`First Client ID format check: "${connectedUsers[0]}" (length: ${connectedUsers[0].length})`);
-      }

      // Notify connected users about incoming call via Socket.IO
      connectedUsers.forEach(userId => {
@@ -219,7 +287,7 @@ export class VoiceController {
          callSid,
          fromNumber,
          toNumber,
-          tenantDomain,
+          tenantId,
        });
      });

@@ -227,7 +295,7 @@ export class VoiceController {
 <Response>
  <Start>
    <Stream url="${streamUrl}">
-      <Parameter name="tenantId" value="${tenantDomain}"/>
+      <Parameter name="tenantId" value="${tenantId}"/>
      <Parameter name="userId" value="${connectedUsers[0]}"/>
    </Stream>
  </Start>
@@ -236,7 +304,7 @@ ${clientElements}
  </Dial>
 </Response>`;

-      this.logger.log(`✓ Returning inbound TwiML with Media Streams - dialing ${connectedUsers.length} client(s)`);
+      this.logger.log(`✓ Returning inbound TwiML - dialing ${connectedUsers.length} client(s)`);
      this.logger.log(`Generated TwiML:\n${twiml}\n`);
      res.type('text/xml').send(twiml);
    } catch (error: any) {
--- a/backend/src/voice/voice.gateway.ts
+++ b/backend/src/voice/voice.gateway.ts
@@ -61,33 +61,41 @@ export class VoiceGateway
      const payload = await this.jwtService.verifyAsync(token);
      
      // Extract domain from origin header (e.g., http://tenant1.routebox.co:3001)
-      // The domains table stores just the subdomain part (e.g., "tenant1")
      const origin = client.handshake.headers.origin || client.handshake.headers.referer;
-      let domain = 'localhost';
+      let subdomain = 'localhost';
      
      if (origin) {
        try {
          const url = new URL(origin);
-          const hostname = url.hostname; // e.g., tenant1.routebox.co or localhost
-          
-          // Extract first part of subdomain as domain
-          // tenant1.routebox.co -> tenant1
-          // localhost -> localhost
-          domain = hostname.split('.')[0];
+          const hostname = url.hostname;
+          subdomain = hostname.split('.')[0];
        } catch (error) {
          this.logger.warn(`Failed to parse origin: ${origin}`);
        }
      }
      
-      client.tenantId = domain; // Store the subdomain as tenantId
+      // Resolve the actual tenantId (UUID) from the subdomain
+      let tenantId: string | null = null;
+      try {
+        const tenant = await this.tenantDbService.getTenantByDomain(subdomain);
+        if (tenant) {
+          tenantId = tenant.id;
+          this.logger.log(`Resolved tenant ${subdomain} -> ${tenantId}`);
+        }
+      } catch (error) {
+        this.logger.warn(`Failed to resolve tenant for subdomain ${subdomain}: ${error.message}`);
+      }
+
+      // Fall back to subdomain if tenant lookup fails
+      client.tenantId = tenantId || subdomain;
      client.userId = payload.sub;
-      client.tenantSlug = domain; // Same as subdomain
+      client.tenantSlug = subdomain;

      this.connectedUsers.set(client.userId, client);
      this.logger.log(
-        `✓ Client connected: ${client.id} (User: ${client.userId}, Domain: ${domain})`,
+        `✓ Client connected: ${client.id} (User: ${client.userId}, TenantId: ${client.tenantId}, Subdomain: ${subdomain})`,
      );
-      this.logger.log(`Total connected users in ${domain}: ${this.getConnectedUsers(domain).length}`);
+      this.logger.log(`Total connected users in tenant ${client.tenantId}: ${this.getConnectedUsers(client.tenantId).length}`);

      // Send current call state if any active call
      const activeCallSid = this.activeCallsByUser.get(client.userId);
@@ -303,13 +311,14 @@ export class VoiceGateway

  /**
   * Get connected users for a tenant
+   * @param tenantId - The tenant UUID to filter by
   */
-  getConnectedUsers(tenantDomain?: string): string[] {
+  getConnectedUsers(tenantId?: string): string[] {
    const userIds: string[] = [];
    
    for (const [userId, socket] of this.connectedUsers.entries()) {
-      // If tenantDomain specified, filter by tenant
-      if (!tenantDomain || socket.tenantSlug === tenantDomain) {
+      // If tenantId specified, filter by tenant
+      if (!tenantId || socket.tenantId === tenantId) {
        userIds.push(userId);
      }
    }
--- a/backend/src/voice/voice.service.ts
+++ b/backend/src/voice/voice.service.ts
@@ -31,46 +31,46 @@ export class VoiceService {
  /**
   * Get Twilio client for a tenant
   */
-  private async getTwilioClient(tenantIdOrDomain: string): Promise<{ client: Twilio.Twilio; config: TwilioConfig; tenantId: string }> {
+  private async getTwilioClient(tenantId: string): Promise<{ client: Twilio.Twilio; config: TwilioConfig; tenantId: string }> {
    // Check cache first
-    if (this.twilioClients.has(tenantIdOrDomain)) {
+    if (this.twilioClients.has(tenantId)) {
      const centralPrisma = getCentralPrisma();
      
-      // Look up tenant by domain
-      const domainRecord = await centralPrisma.domain.findUnique({
-        where: { domain: tenantIdOrDomain },
-        include: { tenant: { select: { id: true, integrationsConfig: true } } },
+      // Look up tenant by ID
+      const tenant = await centralPrisma.tenant.findUnique({
+        where: { id: tenantId },
+        select: { id: true, integrationsConfig: true },
      });

-      const config = this.getIntegrationConfig(domainRecord?.tenant?.integrationsConfig as any);
+      const config = this.getIntegrationConfig(tenant?.integrationsConfig as any);
      return { 
-        client: this.twilioClients.get(tenantIdOrDomain), 
+        client: this.twilioClients.get(tenantId), 
        config: config.twilio,
-        tenantId: domainRecord.tenant.id 
+        tenantId: tenant.id 
      };
    }

    // Fetch tenant integrations config
    const centralPrisma = getCentralPrisma();
    
-    this.logger.log(`Looking up domain: ${tenantIdOrDomain}`);
+    this.logger.log(`Looking up tenant: ${tenantId}`);
    
-    const domainRecord = await centralPrisma.domain.findUnique({
-      where: { domain: tenantIdOrDomain },
-      include: { tenant: { select: { id: true, integrationsConfig: true } } },
+    const tenant = await centralPrisma.tenant.findUnique({
+      where: { id: tenantId },
+      select: { id: true, integrationsConfig: true },
    });

-    this.logger.log(`Domain record found: ${!!domainRecord}, Tenant: ${!!domainRecord?.tenant}, Config: ${!!domainRecord?.tenant?.integrationsConfig}`);
+    this.logger.log(`Tenant found: ${!!tenant}, Config: ${!!tenant?.integrationsConfig}`);

-    if (!domainRecord?.tenant) {
-      throw new Error(`Domain ${tenantIdOrDomain} not found`);
+    if (!tenant) {
+      throw new Error(`Tenant ${tenantId} not found`);
    }

-    if (!domainRecord.tenant.integrationsConfig) {
+    if (!tenant.integrationsConfig) {
      throw new Error('Tenant integrations config not found. Please configure Twilio credentials in Settings > Integrations');
    }

-    const config = this.getIntegrationConfig(domainRecord.tenant.integrationsConfig as any);
+    const config = this.getIntegrationConfig(tenant.integrationsConfig as any);

    this.logger.log(`Config decrypted: ${!!config.twilio}, AccountSid: ${config.twilio?.accountSid?.substring(0, 10)}..., AuthToken: ${config.twilio?.authToken?.substring(0, 10)}..., Phone: ${config.twilio?.phoneNumber}`);

@@ -79,9 +79,9 @@ export class VoiceService {
    }

    const client = Twilio.default(config.twilio.accountSid, config.twilio.authToken);
-    this.twilioClients.set(tenantIdOrDomain, client);
+    this.twilioClients.set(tenantId, client);

-    return { client, config: config.twilio, tenantId: domainRecord.tenant.id };
+    return { client, config: config.twilio, tenantId: tenant.id };
  }

  /**
@@ -105,22 +105,64 @@ export class VoiceService {
    return {};
  }

+  /**
+   * Find tenant by their configured Twilio phone number
+   * Used for inbound call routing
+   */
+  async findTenantByPhoneNumber(phoneNumber: string): Promise<{ tenantId: string; config: TwilioConfig } | null> {
+    const centralPrisma = getCentralPrisma();
+    
+    // Normalize phone number (remove spaces, ensure + prefix for comparison)
+    const normalizedPhone = phoneNumber.replace(/\s+/g, '').replace(/^(\d)/, '+$1');
+    
+    this.logger.log(`Looking up tenant by phone number: ${normalizedPhone}`);
+    
+    // Get all tenants with integrations config
+    const tenants = await centralPrisma.tenant.findMany({
+      where: {
+        integrationsConfig: { not: null },
+      },
+      select: { id: true, integrationsConfig: true },
+    });
+
+    for (const tenant of tenants) {
+      const config = this.getIntegrationConfig(tenant.integrationsConfig as any);
+      if (config.twilio?.phoneNumber) {
+        const tenantPhone = config.twilio.phoneNumber.replace(/\s+/g, '').replace(/^(\d)/, '+$1');
+        if (tenantPhone === normalizedPhone) {
+          this.logger.log(`Found tenant ${tenant.id} for phone number ${normalizedPhone}`);
+          return { tenantId: tenant.id, config: config.twilio };
+        }
+      }
+    }
+
+    this.logger.warn(`No tenant found for phone number: ${normalizedPhone}`);
+    return null;
+  }
+
  /**
   * Generate Twilio access token for browser Voice SDK
   */
-  async generateAccessToken(tenantDomain: string, userId: string): Promise<string> {
-    const { config, tenantId } = await this.getTwilioClient(tenantDomain);
+  async generateAccessToken(tenantId: string, userId: string): Promise<string> {
+    const { config, tenantId: resolvedTenantId } = await this.getTwilioClient(tenantId);

    if (!config.accountSid || !config.apiKey || !config.apiSecret) {
      throw new Error('Twilio API credentials not configured. Please add API Key and Secret in Settings > Integrations');
    }

+    // Include tenantId in the identity so we can extract it in TwiML webhooks
+    // Format: tenantId:userId
+    const identity = `${resolvedTenantId}:${userId}`;
+    
+    this.logger.log(`Generating access token with identity: ${identity}`);
+    this.logger.log(`  Input tenantId: ${tenantId}, Resolved tenantId: ${resolvedTenantId}, userId: ${userId}`);
+
    // Create an access token
    const token = new AccessToken(
      config.accountSid,
      config.apiKey,
      config.apiSecret,
-      { identity: userId, ttl: 3600 } // 1 hour expiry
+      { identity, ttl: 3600 } // 1 hour expiry
    );

    // Create a Voice grant
@@ -436,20 +478,28 @@ export class VoiceService {
    const { callSid, tenantId, userId } = params;

    try {
-      // Get OpenAI config - tenantId might be a domain, so look it up
+      // Get OpenAI config - tenantId might be a domain or a tenant ID (UUID or CUID)
      const centralPrisma = getCentralPrisma();
      
-      // Try to find tenant by domain first (if tenantId is like "tenant1")
+      // Detect if tenantId looks like an ID (UUID or CUID) or a domain name
+      // UUIDs: 8-4-4-4-12 hex format
+      // CUIDs: 25 character alphanumeric starting with 'c'
+      const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-/i.test(tenantId);
+      const isCUID = /^c[a-z0-9]{24}$/i.test(tenantId);
+      const isId = isUUID || isCUID;
+      
      let tenant;
-      if (!tenantId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-/i)) {
-        // Looks like a domain, not a UUID
+      if (!isId) {
+        // Looks like a domain, not an ID
+        this.logger.log(`Looking up tenant by domain: ${tenantId}`);
        const domainRecord = await centralPrisma.domain.findUnique({
          where: { domain: tenantId },
          include: { tenant: { select: { id: true, integrationsConfig: true } } },
        });
        tenant = domainRecord?.tenant;
      } else {
-        // It's a UUID
+        // It's an ID (UUID or CUID)
+        this.logger.log(`Looking up tenant by ID: ${tenantId}`);
        tenant = await centralPrisma.tenant.findUnique({
          where: { id: tenantId },
          select: { id: true, integrationsConfig: true },
--- a/frontend/components/LoginForm.vue
+++ b/frontend/components/LoginForm.vue
@@ -3,90 +3,32 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'

-const config = useRuntimeConfig()
 const router = useRouter()
 const { toast } = useToast()
+const { login, isLoading } = useAuth()

-// Cookie for server-side auth check
-const tokenCookie = useCookie('token')
-
-// Extract subdomain from hostname (e.g., tenant1.localhost → tenant1)
-const getSubdomain = () => {
-  if (!import.meta.client) return null
-  const hostname = window.location.hostname
-  const parts = hostname.split('.')
-  
-  console.log('Extracting subdomain from:', hostname, 'parts:', parts)
-  
-  // For localhost development: tenant1.localhost or localhost
-  if (hostname === 'localhost' || hostname === '127.0.0.1') {
-    return null // Use default tenant for plain localhost
-  }
-  
-  // For subdomains like tenant1.routebox.co or tenant1.localhost
-  if (parts.length >= 2 && parts[0] !== 'www') {
-    console.log('Using subdomain:', parts[0])
-    return parts[0] // Return subdomain
-  }
-  
-  return null
-}
-
-const subdomain = ref(getSubdomain())
 const email = ref('')
 const password = ref('')
-const loading = ref(false)
 const error = ref('')

 const handleLogin = async () => {
  try {
-    loading.value = true
    error.value = ''

-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-    }
-
-    // Only send x-tenant-id if we have a subdomain
-    if (subdomain.value) {
-      headers['x-tenant-id'] = subdomain.value
-    }
-
-    const response = await fetch(`${config.public.apiBaseUrl}/api/auth/login`, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify({
-        email: email.value,
-        password: password.value,
-      }),
-    })
-
-    if (!response.ok) {
-      const data = await response.json()
-      throw new Error(data.message || 'Login failed')
-    }
-
-    const data = await response.json()
-
-    // Store credentials in localStorage
-    // Store the tenant ID that was used for login
-    const tenantToStore = subdomain.value || data.user?.tenantId || 'tenant1'
-    localStorage.setItem('tenantId', tenantToStore)
-    localStorage.setItem('token', data.access_token)
-    localStorage.setItem('user', JSON.stringify(data.user))
-    
-    // Also store token in cookie for server-side auth check
-    tokenCookie.value = data.access_token
+    // Use the BFF login endpoint via useAuth
+    const result = await login(email.value, password.value)

+    if (result.success) {
      toast.success('Login successful!')
-    
      // Redirect to home
      router.push('/')
+    } else {
+      error.value = result.error || 'Login failed'
+      toast.error(result.error || 'Login failed')
+    }
  } catch (e: any) {
    error.value = e.message || 'Login failed'
    toast.error(e.message || 'Login failed')
-  } finally {
-    loading.value = false
  }
 }
 </script>
@@ -118,8 +60,8 @@ const handleLogin = async () => {
        </div>
        <Input id="password" v-model="password" type="password" required />
      </div>
-      <Button type="submit" class="w-full" :disabled="loading">
-        {{ loading ? 'Logging in...' : 'Login' }}
+      <Button type="submit" class="w-full" :disabled="isLoading">
+        {{ isLoading ? 'Logging in...' : 'Login' }}
      </Button>
    </div>
    <div class="text-center text-sm">
--- a/frontend/components/views/ListView.vue
+++ b/frontend/components/views/ListView.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import type { CellValueChangedEvent, ColDef, GridApi, GridReadyEvent } from 'ag-grid-community'
+import { AgGridVue } from 'ag-grid-vue3'
+import 'ag-grid-community/styles/ag-grid.css'
+import 'ag-grid-community/styles/ag-theme-alpine.css'
 import {
  Table,
  TableBody,
@@ -14,7 +18,7 @@ import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import FieldRenderer from '@/components/fields/FieldRenderer.vue'
-import { ListViewConfig, ViewMode, FieldType } from '@/types/field-types'
+import { ListViewConfig, ViewMode, FieldType, FieldConfig } from '@/types/field-types'
 import { ChevronDown, ChevronUp, Search, Plus, Download, Trash2, Edit } from 'lucide-vue-next'

 interface Props {
@@ -25,6 +29,9 @@ interface Props {
  baseUrl?: string
  totalCount?: number
  searchSummary?: string
+  draftEdits?: Record<string, Record<string, any>>
+  cellErrors?: Record<string, Record<string, string | boolean>>
+  savingDrafts?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -33,6 +40,9 @@ const props = withDefaults(defineProps<Props>(), {
  selectable: false,
  baseUrl: '/runtime/objects',
  searchSummary: '',
+  draftEdits: () => ({}),
+  cellErrors: () => ({}),
+  savingDrafts: false,
 })

 const emit = defineEmits<{
@@ -47,6 +57,10 @@ const emit = defineEmits<{
  'refresh': []
  'page-change': [page: number, pageSize: number]
  'load-more': [page: number, pageSize: number]
+  'view-change': [mode: 'list' | 'spreadsheet']
+  'cell-edit': [payload: { row: any; field: FieldConfig; newValue: any; oldValue: any }]
+  'save-drafts': []
+  'discard-drafts': []
 }>()

 // State
@@ -57,6 +71,8 @@ const sortField = ref<string>('')
 const sortDirection = ref<'asc' | 'desc'>('asc')
 const currentPage = ref(1)
 const bulkAction = ref('delete')
+const viewMode = ref<'list' | 'spreadsheet'>('list')
+const gridApi = ref<GridApi | null>(null)

 // Computed
 const visibleFields = computed(() => 
@@ -87,7 +103,7 @@ const paginatedData = computed(() => {
 })
 const pageStart = computed(() => (props.data.length === 0 ? 0 : startIndex.value + 1))
 const pageEnd = computed(() => Math.min(startIndex.value + paginatedData.value.length, totalRecords.value))
-const showPagination = computed(() => totalRecords.value > pageSize.value)
+const showPagination = computed(() => viewMode.value === 'list' && totalRecords.value > pageSize.value)
 const canGoPrev = computed(() => currentPage.value > 1)
 const canGoNext = computed(() => currentPage.value < availablePages.value)
 const showLoadMore = computed(() => (
@@ -95,6 +111,8 @@ const showLoadMore = computed(() => (
  Boolean(props.totalCount) &&
  props.data.length < totalRecords.value
 ))
+const draftRowCount = computed(() => Object.keys(props.draftEdits).length)
+const draftCellCount = computed(() => Object.values(props.draftEdits).reduce((sum, row) => sum + Object.keys(row).length, 0))

 const allSelected = computed({
  get: () => props.data.length > 0 && selectedRowIds.value.length === props.data.length,
@@ -159,6 +177,154 @@ const handleBulkAction = () => {
  emit('action', bulkAction.value, getSelectedRows())
 }

+const isEditableField = (field: FieldConfig) =>
+  field.showOnEdit !== false &&
+  !field.isReadOnly &&
+  ![FieldType.BELONGS_TO, FieldType.HAS_MANY, FieldType.MANY_TO_MANY].includes(field.type)
+
+const getRelationPropertyName = (apiName: string) => apiName.replace(/Id$/, '').toLowerCase()
+
+const formatFieldValue = (field: FieldConfig, value: any, record?: any) => {
+  if (value === null || value === undefined) return ''
+  switch (field.type) {
+    case FieldType.BELONGS_TO: {
+      const relationPropertyName = getRelationPropertyName(field.apiName)
+      const relatedObject = record?.[relationPropertyName]
+      if (relatedObject && typeof relatedObject === 'object') {
+        const displayField = field.relationDisplayField || 'name'
+        return relatedObject[displayField] || relatedObject.id || value
+      }
+      return value
+    }
+    case FieldType.DATE: {
+      const date = value instanceof Date ? value : new Date(value)
+      return Number.isNaN(date.getTime())
+        ? String(value)
+        : date.toLocaleDateString(undefined, { year: 'numeric', month: '2-digit', day: '2-digit' })
+    }
+    case FieldType.DATETIME: {
+      const date = value instanceof Date ? value : new Date(value)
+      return Number.isNaN(date.getTime())
+        ? String(value)
+        : date.toLocaleString(undefined, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false,
+          })
+    }
+    case FieldType.BOOLEAN:
+      return value ? 'Yes' : 'No'
+    case FieldType.CURRENCY:
+      return `${field.prefix || '$'}${Number(value).toFixed(2)}${field.suffix || ''}`
+    case FieldType.SELECT: {
+      const option = field.options?.find(opt => opt.value === value)
+      return option?.label || value
+    }
+    case FieldType.MULTI_SELECT:
+      return Array.isArray(value)
+        ? value
+            .map(v => field.options?.find(opt => opt.value === v)?.label || v)
+            .join(', ')
+        : ''
+    default:
+      return String(value)
+  }
+}
+
+const hasOwnProperty = (target: Record<string, any> | undefined, key: string) =>
+  !!target && Object.prototype.hasOwnProperty.call(target, key)
+
+const isDraftCell = (params: any) => {
+  const rowId = normalizeId(params?.data?.id)
+  const field = String(params?.colDef?.field || '')
+  return hasOwnProperty(props.draftEdits[rowId], field)
+}
+
+const isErrorCell = (params: any) => {
+  const rowId = normalizeId(params?.data?.id)
+  const field = String(params?.colDef?.field || '')
+  return hasOwnProperty(props.cellErrors[rowId], field)
+}
+
+const getCellClasses = (params: any) => {
+  const classes: string[] = []
+  if (isDraftCell(params)) classes.push('cell-draft')
+  if (isErrorCell(params)) classes.push('cell-error')
+  return classes
+}
+
+const getCellStyle = (params: any) => {
+  const isDraft = isDraftCell(params)
+  const isError = isErrorCell(params)
+  if (!isDraft && !isError) return null
+  const style: Record<string, string> = {}
+  if (isDraft) {
+    style.backgroundColor = 'hsl(var(--accent) / 0.45)'
+    style.outline = '2px solid hsl(var(--accent))'
+    style.outlineOffset = '-2px'
+  }
+  if (isError) {
+    style.backgroundColor = 'hsl(var(--destructive) / 0.28)'
+    style.outline = '2px solid hsl(var(--destructive))'
+    style.outlineOffset = '-2px'
+  }
+  return style
+}
+
+const columnDefs = computed<ColDef[]>(() =>
+  visibleFields.value.map(field => ({
+    field: field.apiName,
+    headerName: field.label,
+    sortable: field.sortable !== false,
+    editable: isEditableField(field),
+    valueFormatter: params => formatFieldValue(field, params.value, params.data),
+    cellClass: params => getCellClasses(params),
+    cellStyle: params => getCellStyle(params),
+    cellEditor:
+      field.type === FieldType.SELECT
+        ? 'agSelectCellEditor'
+        : field.type === FieldType.MULTI_SELECT
+          ? 'agTextCellEditor'
+          : field.type === FieldType.NUMBER || field.type === FieldType.CURRENCY
+            ? 'agTextCellEditor'
+            : undefined,
+    cellEditorParams:
+      field.type === FieldType.SELECT
+        ? { values: (field.options || []).map(opt => opt.value) }
+        : undefined,
+    valueParser:
+      field.type === FieldType.NUMBER || field.type === FieldType.CURRENCY
+        ? params => (params.newValue === '' ? null : Number(params.newValue))
+        : undefined,
+    flex: 1,
+    minWidth: 160,
+  }))
+)
+
+const defaultColDef: ColDef = {
+  resizable: true,
+  sortable: true,
+}
+
+const handleCellValueChanged = (event: CellValueChangedEvent) => {
+  const field = visibleFields.value.find(item => item.apiName === event.colDef.field)
+  if (!field || event.newValue === event.oldValue) return
+  emit('cell-edit', {
+    row: event.data,
+    field,
+    newValue: event.newValue,
+    oldValue: event.oldValue,
+  })
+}
+
+const handleGridReady = (event: GridReadyEvent) => {
+  gridApi.value = event.api
+}
+
 const goToPage = (page: number) => {
  const nextPage = Math.min(Math.max(page, 1), availablePages.value)
  if (nextPage !== currentPage.value) {
@@ -193,6 +359,23 @@ watch(
  },
  { deep: true }
 )
+
+watch(
+  () => viewMode.value,
+  (mode) => {
+    emit('view-change', mode)
+  }
+)
+
+watch(
+  () => [props.draftEdits, props.cellErrors],
+  () => {
+    if (gridApi.value) {
+      gridApi.value.refreshCells({ force: true })
+    }
+  },
+  { deep: true }
+)
 </script>

 <template>
@@ -216,6 +399,35 @@ watch(
      </div>

      <div class="flex items-center gap-2">
+        <Select v-model="viewMode">
+          <SelectTrigger class="h-8 w-[180px]">
+            <SelectValue placeholder="Select view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="list">List view</SelectItem>
+            <SelectItem value="spreadsheet">Spreadsheet view</SelectItem>
+          </SelectContent>
+        </Select>
+        <template v-if="viewMode === 'spreadsheet'">
+          <Badge v-if="draftRowCount > 0" variant="secondary" class="px-3 py-1">
+            {{ draftCellCount }} change{{ draftCellCount === 1 ? '' : 's' }}
+          </Badge>
+          <Button
+            variant="outline"
+            size="sm"
+            :disabled="draftRowCount === 0 || savingDrafts"
+            @click="emit('discard-drafts')"
+          >
+            Discard changes
+          </Button>
+          <Button
+            size="sm"
+            :disabled="draftRowCount === 0 || savingDrafts"
+            @click="emit('save-drafts')"
+          >
+            Save changes ({{ draftRowCount }})
+          </Button>
+        </template>
        <!-- Bulk Actions -->
        <template v-if="selectedRowIds.length > 0">
          <Badge variant="secondary" class="px-3 py-1">
@@ -264,7 +476,7 @@ watch(

    <!-- Table -->
    <div class="border rounded-lg">
-      <Table>
+      <Table v-if="viewMode === 'list'">
        <TableHeader>
          <TableRow>
            <TableHead v-if="selectable" class="w-12">
@@ -338,6 +550,19 @@ watch(
          </TableRow>
        </TableBody>
      </Table>
+      <div v-else class="ag-theme-alpine">
+        <AgGridVue
+          :row-data="data"
+          :column-defs="columnDefs"
+          :default-col-def="defaultColDef"
+          dom-layout="autoHeight"
+          row-selection="multiple"
+          suppress-row-click-selection
+          single-click-edit
+          @cell-value-changed="handleCellValueChanged"
+          @grid-ready="handleGridReady"
+        />
+      </div>
    </div>

    <div v-if="showPagination" class="flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
@@ -375,4 +600,5 @@ watch(
 .list-view :deep(input) {
  background-color: hsl(var(--background));
 }
+
 </style>
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -1,40 +1,25 @@
 export const useApi = () => {
-  const config = useRuntimeConfig()
  const router = useRouter()
  const { toast } = useToast()
  const { isLoggedIn, logout } = useAuth()

-  // Use current domain for API calls (same subdomain routing)
+  /**
+   * API calls now go through the Nitro BFF proxy at /api/*
+   * The proxy handles:
+   * - Auth token injection from HTTP-only cookies
+   * - Tenant subdomain extraction and forwarding
+   * - Forwarding requests to the NestJS backend
+   */
  const getApiBaseUrl = () => {
-    if (import.meta.client) {
-      // In browser, use current hostname but with port 3000 for API
-      const currentHost = window.location.hostname
-      const protocol = window.location.protocol
-      //return `${protocol}//${currentHost}:3000`
-      return `${protocol}//${currentHost}`
-    }
-    // Fallback for SSR
-    return config.public.apiBaseUrl
+    // All API calls go through Nitro proxy - works for both SSR and client
+    return ''
  }

  const getHeaders = () => {
+    // Headers are now minimal - auth and tenant are handled by the Nitro proxy
    const headers: Record<string, string> = {
      'Content-Type': 'application/json',
    }
-
-    // Add tenant ID from localStorage or state
-    if (import.meta.client) {
-      const tenantId = localStorage.getItem('tenantId')
-      if (tenantId) {
-        headers['x-tenant-id'] = tenantId
-      }
-
-      const token = localStorage.getItem('token')
-      if (token) {
-        headers['Authorization'] = `Bearer ${token}`
-      }
-    }
-
    return headers
  }

--- a/frontend/composables/useAuth.ts
+++ b/frontend/composables/useAuth.ts
@@ -1,43 +1,70 @@
+/**
+ * Authentication composable using BFF (Backend for Frontend) pattern
+ * Auth tokens are stored in HTTP-only cookies managed by Nitro server
+ * Tenant context is stored in a readable cookie for client-side access
+ */
 export const useAuth = () => {
-  const tokenCookie = useCookie('token')
  const authMessageCookie = useCookie('authMessage')
+  const tenantCookie = useCookie('routebox_tenant')
  const router = useRouter()
-  const config = useRuntimeConfig()
  
+  // Reactive user state - populated from /api/auth/me
+  const user = useState<any>('auth_user', () => null)
+  const isAuthenticated = useState<boolean>('auth_is_authenticated', () => false)
+  const isLoading = useState<boolean>('auth_is_loading', () => false)
+
+  /**
+   * Check if user is logged in
+   * Uses server-side session validation via /api/auth/me
+   */
  const isLoggedIn = () => {
-    if (!import.meta.client) return false
-    const token = localStorage.getItem('token')
-    const tenantId = localStorage.getItem('tenantId')
-    return !!(token && tenantId)
+    return isAuthenticated.value
  }

-  const logout = async () => {
-    if (import.meta.client) {
-      // Call backend logout endpoint
+  /**
+   * Login with email and password
+   * Calls the Nitro BFF login endpoint which sets HTTP-only cookies
+   */
+  const login = async (email: string, password: string) => {
+    isLoading.value = true
+    
    try {
-        const token = localStorage.getItem('token')
-        const tenantId = localStorage.getItem('tenantId')
-        
-        if (token) {
-          await fetch(`${config.public.apiBaseUrl}/api/auth/logout`, {
+      const response = await $fetch('/api/auth/login', {
        method: 'POST',
-            headers: {
-              'Authorization': `Bearer ${token}`,
-              ...(tenantId && { 'x-tenant-id': tenantId }),
-            },
+        body: { email, password },
      })
+      
+      if (response.success) {
+        user.value = response.user
+        isAuthenticated.value = true
+        return { success: true, user: response.user }
      }
+      
+      return { success: false, error: 'Login failed' }
+    } catch (error: any) {
+      const message = error.data?.message || error.message || 'Login failed'
+      return { success: false, error: message }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * Logout user
+   * Calls the Nitro BFF logout endpoint which clears HTTP-only cookies
+   */
+  const logout = async () => {
+    try {
+      await $fetch('/api/auth/logout', {
+        method: 'POST',
+      })
    } catch (error) {
      console.error('Logout error:', error)
    }
    
-      // Clear local storage
-      localStorage.removeItem('token')
-      localStorage.removeItem('tenantId')
-      localStorage.removeItem('user')
-      
-      // Clear cookie for server-side check
-      tokenCookie.value = null
+    // Clear local state
+    user.value = null
+    isAuthenticated.value = false
    
    // Set flash message for login page
    authMessageCookie.value = 'Logged out successfully'
@@ -45,17 +72,60 @@ export const useAuth = () => {
    // Redirect to login page
    router.push('/login')
  }
+
+  /**
+   * Check current authentication status
+   * Validates session with backend via Nitro BFF
+   */
+  const checkAuth = async () => {
+    isLoading.value = true
+    
+    try {
+      const response = await $fetch('/api/auth/me', {
+        method: 'GET',
+      })
+      
+      if (response.authenticated && response.user) {
+        user.value = response.user
+        isAuthenticated.value = true
+        return true
+      }
+    } catch (error) {
+      // Session invalid or expired
+      user.value = null
+      isAuthenticated.value = false
+    } finally {
+      isLoading.value = false
    }
    
+    return false
+  }
+
+  /**
+   * Get current user
+   */
  const getUser = () => {
-    if (!import.meta.client) return null
-    const userStr = localStorage.getItem('user')
-    return userStr ? JSON.parse(userStr) : null
+    return user.value
+  }
+
+  /**
+   * Get current tenant ID from cookie
+   */
+  const getTenantId = () => {
+    return tenantCookie.value
  }

  return {
+    // State
+    user,
+    isAuthenticated,
+    isLoading,
+    // Methods
    isLoggedIn,
+    login,
    logout,
+    checkAuth,
    getUser,
+    getTenantId,
  }
 }
--- a/frontend/composables/useSoftphone.ts
+++ b/frontend/composables/useSoftphone.ts
@@ -1,4 +1,4 @@
-import { ref, computed, onMounted, onUnmounted, shallowRef } from 'vue';
+import { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';
 import { io, Socket } from 'socket.io-client';
 import { Device, Call as TwilioCall } from '@twilio/voice-sdk';
 import { useAuth } from './useAuth';
@@ -44,17 +44,6 @@ const volume = ref(100);
 export function useSoftphone() {
  const auth = useAuth();

-  // Get token and tenantId from localStorage
-  const getToken = () => {
-    if (typeof window === 'undefined') return null;
-    return localStorage.getItem('token');
-  };
-
-  const getTenantId = () => {
-    if (typeof window === 'undefined') return null;
-    return localStorage.getItem('tenantId');
-  };
-
  // Computed properties
  const isInCall = computed(() => currentCall.value !== null);
  const hasIncomingCall = computed(() => incomingCall.value !== null);
@@ -93,6 +82,12 @@ export function useSoftphone() {
   * Initialize Twilio Device
   */
  const initializeTwilioDevice = async () => {
+    // Prevent re-initialization if device already exists and is registered
+    if (twilioDevice.value) {
+      console.log('Twilio Device already exists, skipping initialization');
+      return;
+    }
+
    try {
      // First, explicitly request microphone permission
      const hasPermission = await requestMicrophonePermission();
@@ -107,12 +102,14 @@ export function useSoftphone() {
      // Log the token payload to see what identity is being used
      try {
        const tokenPayload = JSON.parse(atob(token.split('.')[1]));
+        console.log('📱 Twilio Device identity:', tokenPayload.grants?.identity || tokenPayload.sub);
      } catch (e) {
        console.log('Could not parse token payload');
      }

+      console.log('📱 Creating new Twilio Device...');
      twilioDevice.value = new Device(token, {
-        logLevel: 3,
+        logLevel: 1, // Reduce log level (1 = errors only, 3 = debug)
        codecPreferences: ['opus', 'pcmu'],
        enableImprovedSignalingErrorPrecision: true,
        edge: 'ashburn',
@@ -120,10 +117,12 @@ export function useSoftphone() {

      // Device events
      twilioDevice.value.on('registered', () => {
+        console.log('✅ Twilio Device registered successfully');
        toast.success('Softphone ready');
      });

      twilioDevice.value.on('unregistered', () => {
+        console.log('📱 Twilio Device unregistered');
      });

      twilioDevice.value.on('error', (error) => {
@@ -132,6 +131,11 @@ export function useSoftphone() {
      });

      twilioDevice.value.on('incoming', (call: TwilioCall) => {
+        console.log('📞 Twilio Device incoming call event!', {
+          callSid: call.parameters.CallSid,
+          from: call.parameters.From,
+          to: call.parameters.To,
+        });
        twilioCall.value = call;

        // Update state
@@ -210,10 +214,29 @@ export function useSoftphone() {
  /**
   * Initialize WebSocket connection
   */
-  const connect = () => {
-    const token = getToken();
+  const connect = async () => {
+    // Guard against multiple connection attempts
+    if (socket.value) {
+      console.log('Softphone: Socket already exists, skipping connection');
+      return;
+    }

-    if (socket.value?.connected || !token) {
+    // Check if user is authenticated
+    if (!auth.isAuthenticated.value) {
+      // Try to verify authentication first
+      const isValid = await auth.checkAuth();
+      if (!isValid) {
+        console.log('Softphone: User not authenticated, skipping connection');
+        return;
+      }
+    }
+
+    try {
+      // Get WebSocket token from BFF (this retrieves the token from HTTP-only cookie server-side)
+      const wsAuth = await $fetch('/api/auth/ws-token');
+      
+      if (!wsAuth.token) {
+        console.log('Softphone: No WebSocket token available');
        return;
      }

@@ -230,7 +253,7 @@ export function useSoftphone() {
      // Connect to /voice namespace with proper auth header
      socket.value = io(`${getBackendUrl()}/voice`, {
        auth: {
-        token: token,
+          token: wsAuth.token,
        },
        transports: ['websocket', 'polling'],
        reconnection: true,
@@ -279,6 +302,10 @@ export function useSoftphone() {
    socket.value.on('ai:action', handleAiAction);

    isInitialized.value = true;
+    } catch (error: any) {
+      console.error('Softphone: Failed to connect:', error);
+      toast.error('Failed to initialize voice service');
+    }
  };

  /**
@@ -569,14 +596,25 @@ export function useSoftphone() {
    }
  };

-  // Auto-connect on mount if token is available
-  onMounted(() => {
-    if (getToken() && !isInitialized.value) {
+  // Only set up auto-connect and watchers once (not for every component that uses this composable)
+  // Use a module-level flag to track if watchers are already set up
+  if (process.client && !isInitialized.value && !socket.value) {
+    // Auto-connect if authenticated
+    if (auth.isAuthenticated.value) {
      connect();
    }
-  });

-  // Cleanup on unmount
+    // Watch for authentication changes to connect/disconnect
+    watch(() => auth.isAuthenticated.value, async (isAuth) => {
+      if (isAuth && !isInitialized.value && !socket.value) {
+        await connect();
+      } else if (!isAuth && isInitialized.value) {
+        disconnect();
+      }
+    });
+  }
+
+  // Cleanup on unmount - only stop ringtone, don't disconnect shared socket
  onUnmounted(() => {
    stopRingtone();
  });
--- a/frontend/middleware/auth.global.ts
+++ b/frontend/middleware/auth.global.ts
@@ -1,4 +1,4 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(async (to, from) => {
  // Allow pages to opt-out of auth with definePageMeta({ auth: false })
  if (to.meta.auth === false) {
    return
@@ -11,28 +11,45 @@ export default defineNuxtRouteMiddleware((to, from) => {
    return
  }

-  const token = useCookie('token')
  const authMessage = useCookie('authMessage')
+  // Check for tenant cookie (set alongside session cookie on login)
+  const tenantCookie = useCookie('routebox_tenant')
+  // Also check for session cookie (HTTP-only, but readable in SSR context)
+  const sessionCookie = useCookie('routebox_session')
  
  // Routes that don't need a toast message (user knows they need to login)
  const silentRoutes = ['/']

-  // Check token cookie (works on both server and client)
-  if (!token.value) {
+  // On client side, check the reactive auth state
+  if (import.meta.client) {
+    const { isAuthenticated, checkAuth } = useAuth()
+    
+    // If we already know we're authenticated, allow
+    if (isAuthenticated.value) {
+      return
+    }
+    
+    // If we have a tenant cookie, try to validate the session
+    if (tenantCookie.value) {
+      const isValid = await checkAuth()
+      if (isValid) {
+        return
+      }
+    }
+    
+    // Not authenticated
    if (!silentRoutes.includes(to.path)) {
      authMessage.value = 'Please login to access this page'
    }
    return navigateTo('/login')
  }
  
-  // On client side, also verify localStorage is in sync
-  if (import.meta.client) {
-    const { isLoggedIn } = useAuth()
-    if (!isLoggedIn()) {
+  // Server-side: check for both session and tenant cookies
+  // The session cookie is HTTP-only but can be read in SSR context
+  if (!sessionCookie.value || !tenantCookie.value) {
    if (!silentRoutes.includes(to.path)) {
      authMessage.value = 'Please login to access this page'
    }
    return navigateTo('/login')
  }
-  }
 })
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -24,9 +24,9 @@ export default defineNuxtConfig({
  },

  runtimeConfig: {
-    public: {
-      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:3000',
-    },
+    // Server-only config (not exposed to client)
+    // Used by Nitro BFF to proxy requests to the NestJS backend
+    backendUrl: process.env.BACKEND_URL || 'http://localhost:3000',
  },

  app: {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,8 @@
        "@nuxtjs/tailwindcss": "^6.11.4",
        "@twilio/voice-sdk": "^2.11.2",
        "@vueuse/core": "^10.11.1",
+        "ag-grid-community": "^32.3.4",
+        "ag-grid-vue3": "^32.3.4",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
        "gridstack": "^12.4.1",
@@ -4976,6 +4978,31 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/ag-charts-types": {
+      "version": "10.3.9",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.9.tgz",
+      "integrity": "sha512-drcRiJVencliC8LnRwk4MmeQDNNBg5GzmOoLFihO3/k0CUK0VF/N+2nc7iFozwaNG0btSB9vAhYuJLjqHMtRrQ==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-community": {
+      "version": "32.3.9",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.3.9.tgz",
+      "integrity": "sha512-l07SB0mCbGPkC1R8rQQFgBtI5+1FoXBi3RUk1+dHKV/UPeorMEFAzCokcsOhz0qwcWCPrHauUsbRa1SIxfVEJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "10.3.9"
+      }
+    },
+    "node_modules/ag-grid-vue3": {
+      "version": "32.3.9",
+      "resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-32.3.9.tgz",
+      "integrity": "sha512-86Xynbfg8bq/tGW0Yfl2O8HSUgT7nDtNzioMs4r8hNfPiqOfKUUWrTveP5S4Acs8Astr495ZdKKFDIcQVLx3Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "32.3.9",
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/agent-base": {
      "version": "7.1.4",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,8 @@
    "@nuxtjs/tailwindcss": "^6.11.4",
    "@twilio/voice-sdk": "^2.11.2",
    "@vueuse/core": "^10.11.1",
+    "ag-grid-community": "^32.3.4",
+    "ag-grid-vue3": "^32.3.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "gridstack": "^12.4.1",
--- a/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
@@ -57,6 +57,7 @@ const {
  fetchRecord,
  deleteRecord,
  deleteRecords,
+  updateRecord,
  handleSave,
 } = useViewState(`/runtime/objects/${objectApiName.value}/records`)

@@ -165,6 +166,12 @@ const deleteDialogOpen = ref(false)
 const deleteSubmitting = ref(false)
 const pendingDeleteRows = ref<any[]>([])
 const deleteSummary = ref<{ deletedIds: string[]; deniedIds: string[] } | null>(null)
+const normalizeRecordId = (id: any) => String(id)
+
+const draftEdits = ref<Record<string, Record<string, any>>>({})
+const draftOriginals = ref<Record<string, Record<string, any>>>({})
+const cellErrors = ref<Record<string, Record<string, string>>>({})
+const savingDrafts = ref(false)

 const isSearchActive = computed(() => searchQuery.value.trim().length > 0)
 const pendingDeleteCount = computed(() => pendingDeleteRows.value.length)
@@ -355,6 +362,22 @@ const handleLoadMore = async (page: number, pageSize: number) => {
  await loadListRecords(page, { append: true, pageSize })
 }

+const loadAllListRecords = async () => {
+  if (!records.value.length) {
+    await loadListRecords(1)
+  }
+  const resolvedTotal = totalCount.value ?? records.value.length
+  if (resolvedTotal > records.value.length) {
+    await loadListRecords(1, { append: false, pageSize: resolvedTotal })
+  }
+}
+
+const handleViewChange = async (mode: 'list' | 'spreadsheet') => {
+  if (mode === 'spreadsheet' && !isSearchActive.value) {
+    await loadAllListRecords()
+  }
+}
+
 const handleSearch = async (query: string) => {
  const trimmed = query.trim()
  searchQuery.value = trimmed
@@ -366,6 +389,140 @@ const handleSearch = async (query: string) => {
  await searchListRecords(1, { append: false, pageSize: listPageSize.value })
 }

+const handleCellEdit = async (payload: { row: any; field: any; newValue: any; oldValue: any }) => {
+  if (!payload?.row?.id || payload.newValue === payload.oldValue) return
+  const recordKey = normalizeRecordId(payload.row.id)
+  const fieldName = payload.field.apiName
+  const originalRow = draftOriginals.value[recordKey]
+  const originalValue = originalRow && Object.prototype.hasOwnProperty.call(originalRow, fieldName)
+    ? originalRow[fieldName]
+    : payload.oldValue
+
+  if (Object.is(payload.newValue, originalValue)) {
+    const nextDrafts = { ...draftEdits.value }
+    const nextRowDrafts = { ...(nextDrafts[recordKey] || {}) }
+    delete nextRowDrafts[fieldName]
+    if (Object.keys(nextRowDrafts).length === 0) {
+      delete nextDrafts[recordKey]
+    } else {
+      nextDrafts[recordKey] = nextRowDrafts
+    }
+    draftEdits.value = nextDrafts
+
+    const nextOriginals = { ...draftOriginals.value }
+    const nextRowOriginals = { ...(nextOriginals[recordKey] || {}) }
+    delete nextRowOriginals[fieldName]
+    if (Object.keys(nextRowOriginals).length === 0) {
+      delete nextOriginals[recordKey]
+    } else {
+      nextOriginals[recordKey] = nextRowOriginals
+    }
+    draftOriginals.value = nextOriginals
+  } else {
+    draftEdits.value = {
+      ...draftEdits.value,
+      [recordKey]: {
+        ...(draftEdits.value[recordKey] || {}),
+        [fieldName]: payload.newValue,
+      },
+    }
+    if (!originalRow || !Object.prototype.hasOwnProperty.call(originalRow, fieldName)) {
+      draftOriginals.value = {
+        ...draftOriginals.value,
+        [recordKey]: {
+          ...(draftOriginals.value[recordKey] || {}),
+          [fieldName]: payload.oldValue,
+        },
+      }
+    }
+  }
+
+  if (cellErrors.value[recordKey]?.[fieldName]) {
+    const nextErrors = { ...cellErrors.value }
+    const nextRowErrors = { ...(nextErrors[recordKey] || {}) }
+    delete nextRowErrors[fieldName]
+    if (Object.keys(nextRowErrors).length === 0) {
+      delete nextErrors[recordKey]
+    } else {
+      nextErrors[recordKey] = nextRowErrors
+    }
+    cellErrors.value = nextErrors
+  }
+}
+
+const handleSaveDrafts = async () => {
+  if (Object.keys(draftEdits.value).length === 0) return
+  savingDrafts.value = true
+  const nextErrors: Record<string, Record<string, string>> = {}
+  const nextDrafts = { ...draftEdits.value }
+  const nextOriginals = { ...draftOriginals.value }
+
+  for (const [recordKey, changes] of Object.entries(draftEdits.value)) {
+    const record = records.value.find(item => normalizeRecordId(item.id) === recordKey)
+    if (!record) {
+      delete nextDrafts[recordKey]
+      delete nextOriginals[recordKey]
+      continue
+    }
+    try {
+      await updateRecord(record.id, changes)
+      delete nextDrafts[recordKey]
+      delete nextOriginals[recordKey]
+    } catch (e: any) {
+      const message = e.message || 'Failed to update record'
+      nextErrors[recordKey] = {}
+      for (const fieldName of Object.keys(changes)) {
+        nextErrors[recordKey][fieldName] = message
+      }
+    }
+  }
+
+  draftEdits.value = nextDrafts
+  draftOriginals.value = nextOriginals
+  cellErrors.value = nextErrors
+  savingDrafts.value = false
+  if (Object.keys(nextErrors).length > 0) {
+    error.value = 'Some updates failed. Fix highlighted cells and try again.'
+  }
+}
+
+const handleDiscardDrafts = () => {
+  for (const [recordKey, fields] of Object.entries(draftOriginals.value)) {
+    const record = records.value.find(item => normalizeRecordId(item.id) === recordKey)
+    if (!record) continue
+    for (const [fieldName, originalValue] of Object.entries(fields)) {
+      record[fieldName] = originalValue
+    }
+  }
+  draftEdits.value = {}
+  draftOriginals.value = {}
+  cellErrors.value = {}
+}
+
+watch(
+  () => records.value.map(record => normalizeRecordId(record.id)),
+  (ids) => {
+    const idSet = new Set(ids)
+    const nextDrafts: Record<string, Record<string, any>> = {}
+    const nextOriginals: Record<string, Record<string, any>> = {}
+    const nextErrors: Record<string, Record<string, string>> = {}
+
+    for (const [recordKey, fields] of Object.entries(draftEdits.value)) {
+      if (idSet.has(recordKey)) nextDrafts[recordKey] = fields
+    }
+    for (const [recordKey, fields] of Object.entries(draftOriginals.value)) {
+      if (idSet.has(recordKey)) nextOriginals[recordKey] = fields
+    }
+    for (const [recordKey, fields] of Object.entries(cellErrors.value)) {
+      if (idSet.has(recordKey)) nextErrors[recordKey] = fields
+    }
+
+    draftEdits.value = nextDrafts
+    draftOriginals.value = nextOriginals
+    cellErrors.value = nextErrors
+  }
+)
+
 // Watch for route changes
 watch(() => route.params, async (newParams, oldParams) => {
  // Reset current record when navigating to 'new'
@@ -438,6 +595,9 @@ onMounted(async () => {
        :total-count="totalCount"
        :search-summary="searchSummary"
        :base-url="`/runtime/objects`"
+        :draft-edits="draftEdits"
+        :cell-errors="cellErrors"
+        :saving-drafts="savingDrafts"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
@@ -446,6 +606,10 @@ onMounted(async () => {
        @search="handleSearch"
        @page-change="handlePageChange"
        @load-more="handleLoadMore"
+        @view-change="handleViewChange"
+        @cell-edit="handleCellEdit"
+        @save-drafts="handleSaveDrafts"
+        @discard-drafts="handleDiscardDrafts"
      />

      <!-- Detail View -->
--- a/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
@@ -42,6 +42,7 @@ const {
  fetchRecord,
  deleteRecord,
  deleteRecords,
+  updateRecord,
  handleSave,
 } = useViewState(`/runtime/objects/${objectApiName.value}/records`)

@@ -90,6 +91,12 @@ const editConfig = computed(() => {

 const listPageSize = computed(() => listConfig.value?.pageSize ?? 25)
 const maxFrontendRecords = computed(() => listConfig.value?.maxFrontendRecords ?? 500)
+const normalizeRecordId = (id: any) => String(id)
+
+const draftEdits = ref<Record<string, Record<string, any>>>({})
+const draftOriginals = ref<Record<string, Record<string, any>>>({})
+const cellErrors = ref<Record<string, Record<string, string>>>({})
+const savingDrafts = ref(false)

 // Fetch object definition
 const fetchObjectDefinition = async () => {
@@ -212,6 +219,156 @@ const handleLoadMore = async (page: number, pageSize: number) => {
  await loadListRecords(page, { append: true, pageSize })
 }

+const loadAllListRecords = async () => {
+  if (!records.value.length) {
+    await loadListRecords(1)
+  }
+  const resolvedTotal = totalCount.value ?? records.value.length
+  if (resolvedTotal > records.value.length) {
+    await loadListRecords(1, { append: false, pageSize: resolvedTotal })
+  }
+}
+
+const handleViewChange = async (mode: 'list' | 'spreadsheet') => {
+  if (mode === 'spreadsheet') {
+    await loadAllListRecords()
+  }
+}
+
+const handleCellEdit = async (payload: { row: any; field: any; newValue: any; oldValue: any }) => {
+  if (!payload?.row?.id || payload.newValue === payload.oldValue) return
+  const recordKey = normalizeRecordId(payload.row.id)
+  const fieldName = payload.field.apiName
+  const originalRow = draftOriginals.value[recordKey]
+  const originalValue = originalRow && Object.prototype.hasOwnProperty.call(originalRow, fieldName)
+    ? originalRow[fieldName]
+    : payload.oldValue
+
+  if (Object.is(payload.newValue, originalValue)) {
+    const nextDrafts = { ...draftEdits.value }
+    const nextRowDrafts = { ...(nextDrafts[recordKey] || {}) }
+    delete nextRowDrafts[fieldName]
+    if (Object.keys(nextRowDrafts).length === 0) {
+      delete nextDrafts[recordKey]
+    } else {
+      nextDrafts[recordKey] = nextRowDrafts
+    }
+    draftEdits.value = nextDrafts
+
+    const nextOriginals = { ...draftOriginals.value }
+    const nextRowOriginals = { ...(nextOriginals[recordKey] || {}) }
+    delete nextRowOriginals[fieldName]
+    if (Object.keys(nextRowOriginals).length === 0) {
+      delete nextOriginals[recordKey]
+    } else {
+      nextOriginals[recordKey] = nextRowOriginals
+    }
+    draftOriginals.value = nextOriginals
+  } else {
+    draftEdits.value = {
+      ...draftEdits.value,
+      [recordKey]: {
+        ...(draftEdits.value[recordKey] || {}),
+        [fieldName]: payload.newValue,
+      },
+    }
+    if (!originalRow || !Object.prototype.hasOwnProperty.call(originalRow, fieldName)) {
+      draftOriginals.value = {
+        ...draftOriginals.value,
+        [recordKey]: {
+          ...(draftOriginals.value[recordKey] || {}),
+          [fieldName]: payload.oldValue,
+        },
+      }
+    }
+  }
+
+  if (cellErrors.value[recordKey]?.[fieldName]) {
+    const nextErrors = { ...cellErrors.value }
+    const nextRowErrors = { ...(nextErrors[recordKey] || {}) }
+    delete nextRowErrors[fieldName]
+    if (Object.keys(nextRowErrors).length === 0) {
+      delete nextErrors[recordKey]
+    } else {
+      nextErrors[recordKey] = nextRowErrors
+    }
+    cellErrors.value = nextErrors
+  }
+}
+
+const handleSaveDrafts = async () => {
+  if (Object.keys(draftEdits.value).length === 0) return
+  savingDrafts.value = true
+  const nextErrors: Record<string, Record<string, string>> = {}
+  const nextDrafts = { ...draftEdits.value }
+  const nextOriginals = { ...draftOriginals.value }
+
+  for (const [recordKey, changes] of Object.entries(draftEdits.value)) {
+    const record = records.value.find(item => normalizeRecordId(item.id) === recordKey)
+    if (!record) {
+      delete nextDrafts[recordKey]
+      delete nextOriginals[recordKey]
+      continue
+    }
+    try {
+      await updateRecord(record.id, changes)
+      delete nextDrafts[recordKey]
+      delete nextOriginals[recordKey]
+    } catch (e: any) {
+      const message = e.message || 'Failed to update record'
+      nextErrors[recordKey] = {}
+      for (const fieldName of Object.keys(changes)) {
+        nextErrors[recordKey][fieldName] = message
+      }
+    }
+  }
+
+  draftEdits.value = nextDrafts
+  draftOriginals.value = nextOriginals
+  cellErrors.value = nextErrors
+  savingDrafts.value = false
+  if (Object.keys(nextErrors).length > 0) {
+    error.value = 'Some updates failed. Fix highlighted cells and try again.'
+  }
+}
+
+const handleDiscardDrafts = () => {
+  for (const [recordKey, fields] of Object.entries(draftOriginals.value)) {
+    const record = records.value.find(item => normalizeRecordId(item.id) === recordKey)
+    if (!record) continue
+    for (const [fieldName, originalValue] of Object.entries(fields)) {
+      record[fieldName] = originalValue
+    }
+  }
+  draftEdits.value = {}
+  draftOriginals.value = {}
+  cellErrors.value = {}
+}
+
+watch(
+  () => records.value.map(record => normalizeRecordId(record.id)),
+  (ids) => {
+    const idSet = new Set(ids)
+    const nextDrafts: Record<string, Record<string, any>> = {}
+    const nextOriginals: Record<string, Record<string, any>> = {}
+    const nextErrors: Record<string, Record<string, string>> = {}
+
+    for (const [recordKey, fields] of Object.entries(draftEdits.value)) {
+      if (idSet.has(recordKey)) nextDrafts[recordKey] = fields
+    }
+    for (const [recordKey, fields] of Object.entries(draftOriginals.value)) {
+      if (idSet.has(recordKey)) nextOriginals[recordKey] = fields
+    }
+    for (const [recordKey, fields] of Object.entries(cellErrors.value)) {
+      if (idSet.has(recordKey)) nextErrors[recordKey] = fields
+    }
+
+    draftEdits.value = nextDrafts
+    draftOriginals.value = nextOriginals
+    cellErrors.value = nextErrors
+  }
+)
+
 // Watch for route changes
 watch(() => route.params, async (newParams, oldParams) => {
  // Reset current record when navigating to 'new'
@@ -278,6 +435,9 @@ onMounted(async () => {
        :data="records"
        :loading="dataLoading"
        :total-count="totalCount"
+        :draft-edits="draftEdits"
+        :cell-errors="cellErrors"
+        :saving-drafts="savingDrafts"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
@@ -285,6 +445,10 @@ onMounted(async () => {
        @delete="handleDelete"
        @page-change="handlePageChange"
        @load-more="handleLoadMore"
+        @view-change="handleViewChange"
+        @cell-edit="handleCellEdit"
+        @save-drafts="handleSaveDrafts"
+        @discard-drafts="handleDiscardDrafts"
      />

      <!-- Detail View -->
--- a/frontend/pages/register.vue
+++ b/frontend/pages/register.vue
@@ -74,24 +74,8 @@ definePageMeta({
  auth: false
 })

-const config = useRuntimeConfig()
 const router = useRouter()

-// Extract subdomain from hostname
-const getSubdomain = () => {
-  if (!import.meta.client) return null
-  const hostname = window.location.hostname
-  const parts = hostname.split('.')
-  if (hostname === 'localhost' || hostname === '127.0.0.1') {
-    return null
-  }
-  if (parts.length > 1 && parts[0] !== 'www') {
-    return parts[0]
-  }
-  return null
-}
-
-const subdomain = ref(getSubdomain())
 const email = ref('')
 const password = ref('')
 const firstName = ref('')
@@ -106,30 +90,17 @@ const handleRegister = async () => {
    error.value = ''
    success.value = false

-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-    }
-
-    if (subdomain.value) {
-      headers['x-tenant-id'] = subdomain.value
-    }
-
-    const response = await fetch(`${config.public.apiBaseUrl}/api/auth/register`, {
+    // Use BFF proxy - subdomain/tenant is handled automatically by Nitro
+    await $fetch('/api/auth/register', {
      method: 'POST',
-      headers,
-      body: JSON.stringify({
+      body: {
        email: email.value,
        password: password.value,
        firstName: firstName.value || undefined,
        lastName: lastName.value || undefined,
-      }),
+      },
    })

-    if (!response.ok) {
-      const data = await response.json()
-      throw new Error(data.message || 'Registration failed')
-    }
-
    success.value = true

    // Redirect to login after 2 seconds
@@ -137,9 +108,10 @@ const handleRegister = async () => {
      router.push('/login')
    }, 2000)
  } catch (e: any) {
-    error.value = e.message || 'Registration failed'
+    error.value = e.data?.message || e.message || 'Registration failed'
  } finally {
    loading.value = false
  }
 }
 </script>
+
--- a/frontend/server/api/[...path].ts
+++ b/frontend/server/api/[...path].ts
@@ -0,0 +1,119 @@
+import { defineEventHandler, getMethod, readBody, getQuery, createError, getHeader } from 'h3'
+import { getSubdomainFromRequest } from '~/server/utils/tenant'
+import { getSessionToken } from '~/server/utils/session'
+
+/**
+ * Catch-all API proxy that forwards requests to the NestJS backend
+ * Injects x-tenant-subdomain header and Authorization from HTTP-only cookie
+ */
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const method = getMethod(event)
+  const path = event.context.params?.path || ''
+  
+  // Get subdomain and session token
+  const subdomain = getSubdomainFromRequest(event)
+  const token = getSessionToken(event)
+  
+  const backendUrl = config.backendUrl || 'http://localhost:3000'
+  
+  // Build the full URL with query parameters
+  const query = getQuery(event)
+  const queryString = new URLSearchParams(query as Record<string, string>).toString()
+  const fullUrl = `${backendUrl}/api/${path}${queryString ? `?${queryString}` : ''}`
+  
+  console.log(`[BFF Proxy] ${method} ${fullUrl} (subdomain: ${subdomain}, hasToken: ${!!token})`)
+  
+  // Build headers to forward
+  const headers: Record<string, string> = {
+    'Content-Type': getHeader(event, 'content-type') || 'application/json',
+  }
+  
+  // Add subdomain header for backend tenant resolution
+  if (subdomain) {
+    headers['x-tenant-subdomain'] = subdomain
+  }
+  
+  // Add auth token from HTTP-only cookie
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`
+  }
+  
+  // Forward additional headers that might be needed
+  const acceptHeader = getHeader(event, 'accept')
+  if (acceptHeader) {
+    headers['Accept'] = acceptHeader
+  }
+
+  try {
+    // Prepare fetch options
+    const fetchOptions: RequestInit = {
+      method,
+      headers,
+    }
+    
+    // Add body for methods that support it
+    if (['POST', 'PUT', 'PATCH'].includes(method)) {
+      const body = await readBody(event)
+      if (body) {
+        fetchOptions.body = JSON.stringify(body)
+      }
+    }
+    
+    // Make request to backend
+    const response = await fetch(fullUrl, fetchOptions)
+    
+    // Handle non-JSON responses (like file downloads)
+    const contentType = response.headers.get('content-type')
+    
+    if (!response.ok) {
+      // Try to get error details
+      let errorMessage = `Backend error: ${response.status}`
+      let errorData = null
+      
+      try {
+        errorData = await response.json()
+        errorMessage = errorData.message || errorMessage
+      } catch {
+        // Response wasn't JSON
+        try {
+          const text = await response.text()
+          console.error(`[BFF Proxy] Backend error (non-JSON): ${text}`)
+        } catch {}
+      }
+      
+      console.error(`[BFF Proxy] Backend returned ${response.status}: ${errorMessage}`, errorData)
+      
+      throw createError({
+        statusCode: response.status,
+        statusMessage: errorMessage,
+        data: errorData,
+      })
+    }
+    
+    // Return empty response for 204 No Content
+    if (response.status === 204) {
+      return null
+    }
+    
+    // Handle JSON responses
+    if (contentType?.includes('application/json')) {
+      return await response.json()
+    }
+    
+    // Handle other content types (text, etc.)
+    return await response.text()
+    
+  } catch (error: any) {
+    // Re-throw H3 errors
+    if (error.statusCode) {
+      throw error
+    }
+    
+    console.error(`Proxy error for ${method} /api/${path}:`, error)
+    throw createError({
+      statusCode: 502,
+      statusMessage: 'Failed to connect to backend service',
+    })
+  }
+})
--- a/frontend/server/api/auth/login.post.ts
+++ b/frontend/server/api/auth/login.post.ts
@@ -0,0 +1,81 @@
+import { defineEventHandler, readBody, createError } from 'h3'
+import { getSubdomainFromRequest, isCentralSubdomain } from '~/server/utils/tenant'
+import { setSessionCookie, setTenantIdCookie } from '~/server/utils/session'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const body = await readBody(event)
+  
+  // Extract subdomain from the request
+  const subdomain = getSubdomainFromRequest(event)
+  
+  if (!subdomain) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Unable to determine tenant from subdomain',
+    })
+  }
+
+  // Determine the backend URL based on whether this is central admin or tenant
+  const isCentral = isCentralSubdomain(subdomain)
+  const backendUrl = config.backendUrl || 'http://localhost:3000'
+  const loginEndpoint = isCentral ? '/api/auth/central/login' : '/api/auth/login'
+
+  try {
+    // Forward login request to NestJS backend with subdomain header
+    const response = await fetch(`${backendUrl}${loginEndpoint}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-tenant-subdomain': subdomain,
+      },
+      body: JSON.stringify(body),
+    })
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status,
+        statusMessage: data.message || 'Login failed',
+        data: data,
+      })
+    }
+
+    // Extract token and tenant info from response
+    const { access_token, user, tenantId } = data
+
+    if (!access_token) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'No access token received from backend',
+      })
+    }
+
+    // Set HTTP-only cookie with the JWT token
+    setSessionCookie(event, access_token)
+    
+    // Set tenant ID cookie (readable by client for context)
+    // Use tenantId from response, or fall back to subdomain
+    const tenantToStore = tenantId || subdomain
+    setTenantIdCookie(event, tenantToStore)
+
+    // Return user info (but NOT the token - it's in HTTP-only cookie)
+    return {
+      success: true,
+      user,
+      tenantId: tenantToStore,
+    }
+  } catch (error: any) {
+    // Re-throw H3 errors
+    if (error.statusCode) {
+      throw error
+    }
+    
+    console.error('Login proxy error:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to connect to authentication service',
+    })
+  }
+})
--- a/frontend/server/api/auth/logout.post.ts
+++ b/frontend/server/api/auth/logout.post.ts
@@ -0,0 +1,37 @@
+import { defineEventHandler, createError } from 'h3'
+import { getSubdomainFromRequest } from '~/server/utils/tenant'
+import { getSessionToken, clearSessionCookie, clearTenantIdCookie } from '~/server/utils/session'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const subdomain = getSubdomainFromRequest(event)
+  const token = getSessionToken(event)
+
+  const backendUrl = config.backendUrl || 'http://localhost:3000'
+
+  try {
+    // Call backend logout endpoint if we have a token
+    if (token) {
+      await fetch(`${backendUrl}/api/auth/logout`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`,
+          ...(subdomain && { 'x-tenant-subdomain': subdomain }),
+        },
+      })
+    }
+  } catch (error) {
+    // Log but don't fail - we still want to clear cookies
+    console.error('Backend logout error:', error)
+  }
+
+  // Always clear cookies regardless of backend response
+  clearSessionCookie(event)
+  clearTenantIdCookie(event)
+
+  return {
+    success: true,
+    message: 'Logged out successfully',
+  }
+})
--- a/frontend/server/api/auth/me.get.ts
+++ b/frontend/server/api/auth/me.get.ts
@@ -0,0 +1,60 @@
+import { defineEventHandler, createError } from 'h3'
+import { getSubdomainFromRequest } from '~/server/utils/tenant'
+import { getSessionToken } from '~/server/utils/session'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const subdomain = getSubdomainFromRequest(event)
+  const token = getSessionToken(event)
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: 'Not authenticated',
+    })
+  }
+
+  const backendUrl = config.backendUrl || 'http://localhost:3000'
+
+  try {
+    // Fetch current user from backend
+    const response = await fetch(`${backendUrl}/api/auth/me`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        ...(subdomain && { 'x-tenant-subdomain': subdomain }),
+      },
+    })
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw createError({
+          statusCode: 401,
+          statusMessage: 'Session expired',
+        })
+      }
+      throw createError({
+        statusCode: response.status,
+        statusMessage: 'Failed to fetch user',
+      })
+    }
+
+    const user = await response.json()
+
+    return {
+      authenticated: true,
+      user,
+    }
+  } catch (error: any) {
+    if (error.statusCode) {
+      throw error
+    }
+    
+    console.error('Auth check error:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to verify authentication',
+    })
+  }
+})
--- a/frontend/server/api/auth/ws-token.get.ts
+++ b/frontend/server/api/auth/ws-token.get.ts
@@ -0,0 +1,26 @@
+import { defineEventHandler, createError } from 'h3'
+import { getSubdomainFromRequest } from '~/server/utils/tenant'
+import { getSessionToken } from '~/server/utils/session'
+
+/**
+ * Get a short-lived token for WebSocket authentication
+ * This is needed because socket.io cannot use HTTP-only cookies directly
+ */
+export default defineEventHandler(async (event) => {
+  const subdomain = getSubdomainFromRequest(event)
+  const token = getSessionToken(event)
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: 'Not authenticated',
+    })
+  }
+
+  // Return the token for WebSocket use
+  // The token is already validated by being in the HTTP-only cookie
+  return {
+    token,
+    subdomain,
+  }
+})
--- a/frontend/server/utils/session.ts
+++ b/frontend/server/utils/session.ts
@@ -0,0 +1,94 @@
+import type { H3Event } from 'h3'
+import { getCookie, setCookie, deleteCookie, getHeader } from 'h3'
+
+const SESSION_COOKIE_NAME = 'routebox_session'
+const SESSION_MAX_AGE = 60 * 60 * 24 * 7 // 7 days
+
+export interface SessionData {
+  token: string
+  tenantId: string
+  userId: string
+  email: string
+}
+
+/**
+ * Determine if the request is over a secure connection
+ * Checks both direct HTTPS and proxy headers
+ */
+function isSecureRequest(event: H3Event): boolean {
+  // Check x-forwarded-proto header (set by reverse proxies)
+  const forwardedProto = getHeader(event, 'x-forwarded-proto')
+  if (forwardedProto === 'https') {
+    return true
+  }
+  
+  // Check if NODE_ENV is production (assume HTTPS in production)
+  if (process.env.NODE_ENV === 'production') {
+    return true
+  }
+  
+  return false
+}
+
+/**
+ * Get the session token from HTTP-only cookie
+ */
+export function getSessionToken(event: H3Event): string | null {
+  return getCookie(event, SESSION_COOKIE_NAME) || null
+}
+
+/**
+ * Set the session token in an HTTP-only cookie
+ */
+export function setSessionCookie(event: H3Event, token: string): void {
+  const secure = isSecureRequest(event)
+  
+  setCookie(event, SESSION_COOKIE_NAME, token, {
+    httpOnly: true,
+    secure,
+    sameSite: 'lax',
+    maxAge: SESSION_MAX_AGE,
+    path: '/',
+  })
+}
+
+/**
+ * Clear the session cookie
+ */
+export function clearSessionCookie(event: H3Event): void {
+  deleteCookie(event, SESSION_COOKIE_NAME, {
+    path: '/',
+  })
+}
+
+/**
+ * Get tenant ID from a separate cookie (for SSR access)
+ * This is NOT the auth token - just tenant context
+ */
+export function getTenantIdFromCookie(event: H3Event): string | null {
+  return getCookie(event, 'routebox_tenant') || null
+}
+
+/**
+ * Set tenant ID cookie (readable by client for context)
+ */
+export function setTenantIdCookie(event: H3Event, tenantId: string): void {
+  const secure = isSecureRequest(event)
+  
+  setCookie(event, 'routebox_tenant', tenantId, {
+    httpOnly: false, // Allow client to read tenant context
+    secure,
+    sameSite: 'lax',
+    maxAge: SESSION_MAX_AGE,
+    path: '/',
+  })
+}
+
+/**
+ * Clear tenant ID cookie
+ */
+export function clearTenantIdCookie(event: H3Event): void {
+  deleteCookie(event, 'routebox_tenant', {
+    path: '/',
+  })
+}
--- a/frontend/server/utils/tenant.ts
+++ b/frontend/server/utils/tenant.ts
@@ -0,0 +1,39 @@
+import type { H3Event } from 'h3'
+import { getHeader } from 'h3'
+
+/**
+ * Extract subdomain from the request Host header
+ * Handles production domains (tenant1.routebox.co) and development (tenant1.localhost)
+ */
+export function getSubdomainFromRequest(event: H3Event): string | null {
+  const host = getHeader(event, 'host') || ''
+  const hostname = host.split(':')[0] // Remove port if present
+
+  const parts = hostname.split('.')
+
+  // For production domains with 3+ parts (e.g., tenant1.routebox.co)
+  if (parts.length >= 3) {
+    const subdomain = parts[0]
+    // Ignore www subdomain
+    if (subdomain === 'www') {
+      return null
+    }
+    return subdomain
+  }
+
+  // For development (e.g., tenant1.localhost)
+  if (parts.length === 2 && parts[1] === 'localhost') {
+    return parts[0]
+  }
+
+  return null
+}
+
+/**
+ * Check if the subdomain is a central/admin subdomain
+ */
+export function isCentralSubdomain(subdomain: string | null): boolean {
+  if (!subdomain) return false
+  const centralSubdomains = (process.env.CENTRAL_SUBDOMAINS || 'central,admin').split(',')
+  return centralSubdomains.includes(subdomain)
+}
Author	SHA1	Message	Date
Francisco Gaona	228c3fb704	WIP - fixes to spreadsheet view	2026-04-09 09:28:25 +02:00
Francisco Gaona	5f14a4050a	WIP - added spredsheet view using ag-grid	2026-02-06 22:01:59 +01:00
Francisco Gaona	eb1619c56c	WIP - fix AI suggestions during call progress	2026-02-05 03:02:02 +01:00
Francisco Gaona	9226442525	WIP - fix twilio functionality now that we use BFF	2026-02-05 02:41:54 +01:00
Francisco Gaona	49a571215d	WIP - fix browser refresh not holding user authentication	2026-02-04 08:55:08 +01:00
Francisco Gaona	0e2f3dddbc	WIP - BFF	2026-02-04 00:21:06 +01:00