feat(app): Browser Automations — smart connect + UI redesign (WIP)

apps/api/.env.example

@@ -48,8 +48,28 @@ OPENAI_API_KEY=
 ANTHROPIC_API_KEY=
 GROQ_API_KEY=
 
-# 1Password service account token for browser-automation credential storage.
-# Optional: when unset, browser automations fall back to human re-authentication.
+# Browserbase — the cloud browser that powers Browser Automations.
+# REQUIRED for the browser-automation feature (connect, analyze, runs).
+BROWSERBASE_API_KEY=
+BROWSERBASE_PROJECT_ID=
+# Optional model overrides (defaults are sensible; no need to set these).
+# BROWSERBASE_CUA_MODEL: screenshot-based navigation agent. Defaults to
+#   "openai/gpt-5.6-terra" (needs OPENAI_API_KEY; falls back to Claude if it's
+#   missing). Set to "openai/gpt-5.6-sol" for max accuracy, or an "anthropic/…"
+#   computer-use model to use Claude instead.
+# BROWSERBASE_STAGEHAND_MODEL: model behind page reading / pass-fail verdicts —
+#   keep this a general model (Claude), NOT a computer-use model.
+BROWSERBASE_CUA_MODEL=
+BROWSERBASE_STAGEHAND_MODEL=
+
+# 1Password service account token (starts with "ops_") for storing browser-
+# automation logins in a Comp-managed vault.
+# Enables the "Sign in for me" password path: Comp stores the login and signs in
+# on its own (including generating 2FA codes) for the first sign-in and for
+# scheduled runs.
+# Optional — when unset, that path is unavailable and users sign in manually in
+# the live browser each time (no unattended re-login).
+# Create one at 1Password → Developer → Service Accounts (needs vault-create access).
 OP_SERVICE_ACCOUNT_TOKEN=
 
 # Inference.net Catalyst tracing (optional — no-op if CATALYST_OTLP_TOKEN is unset)

apps/api/src/browserbase/browser-auth-profile.service.spec.ts

@@ -10,6 +10,7 @@ jest.mock('@db', () => ({
       findFirst: jest.fn(),
       create: jest.fn(),
       update: jest.fn(),
+      delete: jest.fn(),
       deleteMany: jest.fn(),
     },
     browserbaseContext: {
@@ -19,6 +20,9 @@ jest.mock('@db', () => ({
       updateMany: jest.fn(),
       deleteMany: jest.fn(),
     },
+    browserAutomation: {
+      findMany: jest.fn(),
+    },
   },
 }));
 
@@ -188,4 +192,110 @@ describe('BrowserAuthProfileService', () => {
       where: { organizationId: 'org_1', contextId: '__PENDING__' },
     });
   });
+
+  describe('listProfiles', () => {
+    it('attaches an automation count per connection by hostname', async () => {
+      (db.browserAuthProfile.findMany as jest.Mock).mockResolvedValue([
+        { id: 'bap_gh', organizationId: 'org_1', hostname: 'github.com' },
+        { id: 'bap_aws', organizationId: 'org_1', hostname: 'aws.amazon.com' },
+        { id: 'bap_dd', organizationId: 'org_1', hostname: 'datadoghq.com' },
+      ]);
+      (db.browserAutomation.findMany as jest.Mock).mockResolvedValue([
+        { targetUrl: 'https://github.com/acme/repo' },
+        { targetUrl: 'https://github.com/acme/other' },
+        { targetUrl: 'https://aws.amazon.com/console' },
+        { targetUrl: 'not-a-url' }, // malformed -> skipped, not fatal
+      ]);
+
+      const result = await service.listProfiles('org_1');
+
+      expect(db.browserAutomation.findMany).toHaveBeenCalledWith({
+        where: { task: { organizationId: 'org_1' } },
+        select: { targetUrl: true },
+      });
+      expect(result.find((p) => p.id === 'bap_gh')?.automationCount).toBe(2);
+      expect(result.find((p) => p.id === 'bap_aws')?.automationCount).toBe(1);
+      expect(result.find((p) => p.id === 'bap_dd')?.automationCount).toBe(0);
+    });
+  });
+
+  describe('updateProfile / deleteProfile', () => {
+    const existing = {
+      id: 'bap_1',
+      organizationId: 'org_1',
+      hostname: 'app.example.com',
+      displayName: 'Example',
+      status: 'verified',
+    };
+
+    beforeEach(() => {
+      (db.browserAuthProfile.update as jest.Mock).mockImplementation(
+        ({ data }) => ({ ...existing, ...data }),
+      );
+      (db.browserAuthProfile.delete as jest.Mock).mockResolvedValue(existing);
+    });
+
+    it('updates only the display name (trimmed)', async () => {
+      (db.browserAuthProfile.findFirst as jest.Mock).mockResolvedValue(existing);
+      await service.updateProfile({
+        organizationId: 'org_1',
+        profileId: 'bap_1',
+        displayName: '  New name  ',
+      });
+      expect(db.browserAuthProfile.update).toHaveBeenCalledWith({
+        where: { id: 'bap_1' },
+        data: { displayName: 'New name' },
+      });
+    });
+
+    it('keeps the connection signed in when the URL stays on the same host', async () => {
+      (db.browserAuthProfile.findFirst as jest.Mock).mockResolvedValue(existing);
+      await service.updateProfile({
+        organizationId: 'org_1',
+        profileId: 'bap_1',
+        url: 'https://app.example.com/account/login',
+      });
+      const data = (db.browserAuthProfile.update as jest.Mock).mock.calls[0][0]
+        .data;
+      expect(data.lastAuthCheckUrl).toBe(
+        'https://app.example.com/account/login',
+      );
+      expect(data.status).toBeUndefined();
+    });
+
+    it('marks needs_reauth when the URL moves to a different host', async () => {
+      (db.browserAuthProfile.findFirst as jest.Mock).mockResolvedValue(existing);
+      await service.updateProfile({
+        organizationId: 'org_1',
+        profileId: 'bap_1',
+        url: 'https://other.com/login',
+      });
+      const data = (db.browserAuthProfile.update as jest.Mock).mock.calls[0][0]
+        .data;
+      expect(data.status).toBe('needs_reauth');
+    });
+
+    it('deletes the profile', async () => {
+      (db.browserAuthProfile.findFirst as jest.Mock).mockResolvedValue(existing);
+      const result = await service.deleteProfile({
+        organizationId: 'org_1',
+        profileId: 'bap_1',
+      });
+      expect(db.browserAuthProfile.delete).toHaveBeenCalledWith({
+        where: { id: 'bap_1' },
+      });
+      expect(result.success).toBe(true);
+    });
+
+    it('throws when updating a missing profile', async () => {
+      (db.browserAuthProfile.findFirst as jest.Mock).mockResolvedValue(null);
+      await expect(
+        service.updateProfile({
+          organizationId: 'org_1',
+          profileId: 'nope',
+          displayName: 'x',
+        }),
+      ).rejects.toThrow('not found');
+    });
+  });
 });

apps/api/src/browserbase/browser-auth-profile.service.ts

@@ -3,13 +3,16 @@ import {
   Injectable,
   NotFoundException,
 } from '@nestjs/common';
-import { db } from '@db';
+import { db, Prisma } from '@db';
 import {
   defaultProfileDisplayName,
   normalizeHostnameFromUrl,
   normalizeLoginIdentity,
 } from './browserbase-url';
-import { BrowserbaseSessionService } from './browserbase-session.service';
+import {
+  BrowserbaseSessionService,
+  INTERACTIVE_VIEWPORT,
+} from './browserbase-session.service';
 import { BrowserAuthProfileContextService } from './browser-auth-profile-context.service';
 import {
   BrowserbaseOrgContextService,
@@ -41,10 +44,33 @@ export class BrowserAuthProfileService {
   ) {}
 
   async listProfiles(organizationId: string) {
-    return db.browserAuthProfile.findMany({
-      where: { organizationId },
-      orderBy: [{ hostname: 'asc' }, { updatedAt: 'desc' }],
-    });
+    const [profiles, automations] = await Promise.all([
+      db.browserAuthProfile.findMany({
+        where: { organizationId },
+        orderBy: [{ hostname: 'asc' }, { updatedAt: 'desc' }],
+      }),
+      db.browserAutomation.findMany({
+        where: { task: { organizationId } },
+        select: { targetUrl: true },
+      }),
+    ]);
+
+    // Automations bind to a connection by hostname (not a FK), so tally per host.
+    const countByHost = new Map<string, number>();
+    for (const { targetUrl } of automations) {
+      let host: string;
+      try {
+        host = normalizeHostnameFromUrl(targetUrl);
+      } catch {
+        continue; // skip malformed targetUrls rather than fail the whole list
+      }
+      countByHost.set(host, (countByHost.get(host) ?? 0) + 1);
+    }
+
+    return profiles.map((profile) => ({
+      ...profile,
+      automationCount: countByHost.get(profile.hostname) ?? 0,
+    }));
   }
 
   async getProfile({
@@ -163,7 +189,12 @@ export class BrowserAuthProfileService {
       throw new NotFoundException('Browser auth profile not found');
     }
     const readyProfile = await this.profileContexts.ready(profile);
-    return this.sessions.createSessionWithContext(readyProfile.contextId);
+    // Human-facing session — use the smaller viewport so the sign-in page reads
+    // larger in the live view.
+    return this.sessions.createSessionWithContext(
+      readyProfile.contextId,
+      INTERACTIVE_VIEWPORT,
+    );
   }
 
   async verifyProfileSession(input: {
@@ -224,6 +255,52 @@ export class BrowserAuthProfileService {
     });
   }
 
+  async updateProfile(input: {
+    organizationId: string;
+    profileId: string;
+    displayName?: string;
+    url?: string;
+  }) {
+    const profile = await this.getProfile(input);
+    if (!profile) {
+      throw new NotFoundException('Browser auth profile not found');
+    }
+
+    const data: Prisma.BrowserAuthProfileUpdateInput = {};
+
+    const name = input.displayName?.trim();
+    if (name) data.displayName = name;
+
+    if (input.url !== undefined) {
+      data.lastAuthCheckUrl = input.url;
+      // A different hostname means the saved session no longer applies — the
+      // connection must be re-established. (Hostname is the connection identity,
+      // so we don't reassign it here.)
+      try {
+        if (normalizeHostnameFromUrl(input.url) !== profile.hostname) {
+          data.status = 'needs_reauth';
+          data.blockedReason = 'Sign-in URL changed — reconnect required.';
+        }
+      } catch {
+        // Ignore an unparseable URL — leave status untouched.
+      }
+    }
+
+    return db.browserAuthProfile.update({
+      where: { id: profile.id },
+      data,
+    });
+  }
+
+  async deleteProfile(input: { organizationId: string; profileId: string }) {
+    const profile = await this.getProfile(input);
+    if (!profile) {
+      throw new NotFoundException('Browser auth profile not found');
+    }
+    await db.browserAuthProfile.delete({ where: { id: profile.id } });
+    return { success: true, profile };
+  }
+
   async markNeedsReauth(input: {
     organizationId: string;
     profileId: string;

apps/api/src/browserbase/browser-auth-profiles.controller.ts

@@ -1,4 +1,13 @@
-import { Body, Controller, Get, Param, Post, UseGuards } from '@nestjs/common';
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  Patch,
+  Post,
+  UseGuards,
+} from '@nestjs/common';
 import {
   ApiBody,
   ApiOperation,
@@ -18,7 +27,10 @@ import {
   ResolveAuthProfileDto,
   ResolveAuthProfileResponseDto,
   SessionResponseDto,
+  SignInAuthProfileDto,
+  SignInAuthProfileResponseDto,
   StoreAuthProfileCredentialsDto,
+  UpdateAuthProfileDto,
   VerifyAuthProfileResponseDto,
   VerifyAuthProfileSessionDto,
 } from './dto/browserbase.dto';
@@ -134,9 +146,76 @@ export class BrowserAuthProfilesController {
       username: dto.username,
       password: dto.password,
       totpSeed: dto.totpSeed,
+      extraFields: dto.extraFields,
+    })) as BrowserAuthProfileResponseDto;
+  }
+
+  @Post('profiles/:profileId/sign-in')
+  @RequirePermission('integration', 'update')
+  @ApiOperation({
+    summary: 'Automated sign-in for a browser auth profile',
+    description:
+      'Starts a background run that signs in to the vendor using the credentials stored for this profile, so the user does not have to type them into the browser. Returns a run handle to subscribe to; if the automated sign-in cannot complete (CAPTCHA, email/SMS code, SSO), the connect flow falls back to a live browser.',
+  })
+  @ApiParam({ name: 'profileId', description: 'Browser auth profile ID' })
+  @ApiBody({ type: SignInAuthProfileDto })
+  @ApiResponse({ status: 201, type: SignInAuthProfileResponseDto })
+  async signInProfile(
+    @OrganizationId() organizationId: string,
+    @Param('profileId') profileId: string,
+    @Body() dto: SignInAuthProfileDto,
+  ): Promise<SignInAuthProfileResponseDto> {
+    return this.browserbaseService.signInAuthProfile({
+      organizationId,
+      profileId,
+      url: dto.url,
+      mode: dto.mode,
+    });
+  }
+
+  @Patch('profiles/:profileId')
+  @RequirePermission('integration', 'update')
+  @ApiOperation({
+    summary: 'Update a browser auth profile',
+    description:
+      'Edit a connection’s display name and/or sign-in URL. Changing to a different hostname marks the connection as needing reconnection.',
+  })
+  @ApiParam({ name: 'profileId', description: 'Browser auth profile ID' })
+  @ApiBody({ type: UpdateAuthProfileDto })
+  @ApiResponse({ status: 200, type: BrowserAuthProfileResponseDto })
+  async updateProfile(
+    @OrganizationId() organizationId: string,
+    @Param('profileId') profileId: string,
+    @Body() dto: UpdateAuthProfileDto,
+  ): Promise<BrowserAuthProfileResponseDto> {
+    return (await this.browserbaseService.updateAuthProfile({
+      organizationId,
+      profileId,
+      displayName: dto.displayName,
+      url: dto.url,
     })) as BrowserAuthProfileResponseDto;
   }
 
+  @Delete('profiles/:profileId')
+  @RequirePermission('integration', 'delete')
+  @ApiOperation({
+    summary: 'Remove a browser auth profile',
+    description:
+      'Delete a connection and best-effort remove its stored login from the vault. Automations that relied on it stop running until reconnected.',
+  })
+  @ApiParam({ name: 'profileId', description: 'Browser auth profile ID' })
+  @ApiResponse({ status: 200 })
+  async deleteProfile(
+    @OrganizationId() organizationId: string,
+    @Param('profileId') profileId: string,
+  ): Promise<{ success: boolean }> {
+    const result = await this.browserbaseService.deleteAuthProfile({
+      organizationId,
+      profileId,
+    });
+    return { success: result.success };
+  }
+
   @Post('profiles/:profileId/needs-reauth')
   @RequirePermission('integration', 'update')
   @ApiOperation({