feat(settings): discovery hero rollout + ephemeral playground token (#21072)

## Summary Two intertwined streams of work: ### UI — discovery hero pattern, settings shell, AI/API redesign - **Generalize `SettingsDiscoveryHeroCard`** and use it on Layout, Data Model, Apps, AI, API/Webhooks, Members. Drops 4 per-page wrapper files (`SettingsObjectCoverImage`, `SettingsLayoutCoverImage`, `SettingsLayoutCustomizeVideoModal`, `SettingsDataModelVisualizeVideoModal`). Each page now supplies cover src, modal id, and tab list. - **Modal**: swap `<video>` placeholder for the Vimeo iframe pattern from `twenty-docs`, per-tab `vimeoId`. Drop the parallel border-bottom on the header (TabList draws its own baseline) and the grey background behind the video. Note: Vimeo's embed allowlist applies — the iframes load with the correct URL on `localhost` but the player itself requires the video owner to allow the dev/staging domains in Vimeo settings. - **AI page** rebuilt into a Cockpit pattern (Overview / Models / Skills / Tools / Usage). New `SettingsAiOverviewTab` with default Smart/Fast pickers, at-a-glance stats, and an MCP signpost that deep-links to `/settings/api-webhooks#mcp`. System Prompt link moved under Models. Advanced tab removed. - **API & Webhooks** now has 4 tabs (Playground / MCP / API Keys / Webhooks). Hero card above tabs. Playground tab inverted to "Core API" / "Metadata API" sections, each containing REST + GraphQL cards — schema is the meaningful axis, protocol is secondary. Hash deep-link sync delegated to the shared `TabListFromUrlOptionalEffect`. - **Settings shell**: unified drawer outer padding (kill `isSettings` branch), extract `CollapsibleNavigationDrawerSection`, add `iconColor` on settings nav items, fix Exit Settings button alignment, 880px content cap. ### Backend — strategy C: ephemeral playground token The legacy paste-your-API-key flow is replaced by an on-demand short-lived token scoped to the calling user's permissions. No shared "Playground" API key to manage or revoke. - New `JwtTokenTypeEnum.PLAYGROUND`. `PlaygroundTokenJwtPayload = Omit<AccessTokenJwtPayload, 'type' | impersonation fields>` so any future ACCESS claim flows through automatically. - `AccessTokenService.generatePlaygroundToken` signs an access-shaped JWT with `type: PLAYGROUND` and a configurable short TTL. A shared private `resolveTokenSubject` helper parallelizes the user / workspace / userWorkspace lookups for both generators. - `JwtAuthStrategy.validateAccessToken` widened to accept `AccessTokenJwtPayload | PlaygroundTokenJwtPayload`; impersonation gated on `payload.type === ACCESS` so the union narrows without `as unknown as` casts. The two branches in `validate()` collapse into one. - New `PLAYGROUND_TOKEN_EXPIRES_IN` config var (default `2h`). - New `generatePlaygroundToken` mutation (`WorkspaceAuthGuard`, no args, returns `AuthToken`). - Frontend `useOpenPlayground` hook centralizes mint → atom write → navigate, with Apollo `onError` snackbar and a "use cached PLAYGROUND token if still fresh" short-circuit (decodes via `jwt-decode`, checks both `type` AND `exp`). Old API_KEY tokens left in localStorage from the prior paste-form flow are rejected on `type` alone and force a re-mint — this is what was causing the "This API Key is revoked" symptom on stale browsers. ### Drive-by cleanups - `PlaygroundToken` DTO removed (identical shape to `AuthToken` already in use). - 5 `customize-sidebar.webm` imports and the dead placeholder pipeline removed. ## Test plan ### Discovery hero - [ ] `/settings/layout`, `/settings/data-model`, `/settings/applications`, `/settings/ai`, `/settings/api-webhooks`, `/settings/members` each render the discovery hero card with its illustration + play button + tabbed modal - [ ] Modal tabs show the correct Vimeo embed URL per tab; aspect ratio stays at 1440/900; no parallel border-bottom jog at the tab baseline - [ ] AI Overview tab shows Smart/Fast model pickers + stats grid + MCP signpost card; the MCP card lands on `/settings/api-webhooks#mcp` with the MCP tab active ### API playground (ephemeral token) - [ ] With an empty `playgroundApiKeyState` in localStorage, clicking REST or GraphQL playground card opens the playground and the cached token has `type: "PLAYGROUND"` with ~2h exp - [ ] Clicking the card again within the freshness window does **not** re-mint (`iat` / fingerprint stable across visits) - [ ] Planting a fake API_KEY-shaped JWT in localStorage and clicking the card forces a fresh mint (old token rejected on `type`) - [ ] `GET /rest/companies?limit=1` with the cached token returns 200 + real data - [ ] `POST /graphql { __typename }` returns 200 ### Settings shell - [ ] Settings nav matches main app drawer padding; sections collapse; Exit Settings button aligns with the workspace links above - [ ] Active nav items have a right-gap (cleaner active state) - [ ] Content area capped at 880px ### Verify - [ ] `npx nx typecheck twenty-front` passes - [ ] `npx nx typecheck twenty-server` passes - [ ] `npx nx lint:diff-with-main twenty-front` passes - [ ] `npx nx lint:diff-with-main twenty-server` passes
2026-06-01 14:16:02 +02:00
parent 6e00a122c6
commit b338a7a1d2
148 changed files with 3092 additions and 1694 deletions
@@ -0,0 +1,28 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { ToolProviderModule } from 'src/engine/core-modules/tool-provider/tool-provider.module';
+import { AgentChatThreadEntity } from 'src/engine/metadata-modules/ai/ai-chat/entities/agent-chat-thread.entity';
+import { AiWorkspaceStatsResolver } from 'src/engine/metadata-modules/ai/ai-workspace-stats/resolvers/ai-workspace-stats.resolver';
+import { AiWorkspaceStatsService } from 'src/engine/metadata-modules/ai/ai-workspace-stats/services/ai-workspace-stats.service';
+import { WorkspaceManyOrAllFlatEntityMapsCacheModule } from 'src/engine/metadata-modules/flat-entity/services/workspace-many-or-all-flat-entity-maps-cache.module';
+import { PermissionsModule } from 'src/engine/metadata-modules/permissions/permissions.module';
+import { UserRoleModule } from 'src/engine/metadata-modules/user-role/user-role.module';
+import { provideWorkspaceScopedRepository } from 'src/engine/twenty-orm/workspace-scoped-repository/provide-workspace-scoped-repository';
+
+@Module({
+  imports: [
+    TypeOrmModule.forFeature([AgentChatThreadEntity]),
+    WorkspaceManyOrAllFlatEntityMapsCacheModule,
+    PermissionsModule,
+    ToolProviderModule,
+    UserRoleModule,
+  ],
+  providers: [
+    AiWorkspaceStatsResolver,
+    AiWorkspaceStatsService,
+    provideWorkspaceScopedRepository(AgentChatThreadEntity),
+  ],
+  exports: [AiWorkspaceStatsService],
+})
+export class AiWorkspaceStatsModule {}
@@ -0,0 +1,13 @@
+import { Field, Int, ObjectType } from '@nestjs/graphql';
+
+@ObjectType('WorkspaceAiStats')
+export class WorkspaceAiStatsDTO {
+  @Field(() => Int)
+  conversationsCount: number;
+
+  @Field(() => Int)
+  skillsCount: number;
+
+  @Field(() => Int)
+  toolsCount: number;
+}
@@ -0,0 +1,38 @@
+import { UseGuards } from '@nestjs/common';
+import { Query } from '@nestjs/graphql';
+
+import { PermissionFlagType } from 'twenty-shared/constants';
+
+import { MetadataResolver } from 'src/engine/api/graphql/graphql-config/decorators/metadata-resolver.decorator';
+import { type WorkspaceEntity } from 'src/engine/core-modules/workspace/workspace.entity';
+import { AuthUserWorkspaceId } from 'src/engine/decorators/auth/auth-user-workspace-id.decorator';
+import { AuthWorkspace } from 'src/engine/decorators/auth/auth-workspace.decorator';
+import { SettingsPermissionGuard } from 'src/engine/guards/settings-permission.guard';
+import { WorkspaceAuthGuard } from 'src/engine/guards/workspace-auth.guard';
+import { WorkspaceAiStatsDTO } from 'src/engine/metadata-modules/ai/ai-workspace-stats/dtos/workspace-ai-stats.dto';
+import { AiWorkspaceStatsService } from 'src/engine/metadata-modules/ai/ai-workspace-stats/services/ai-workspace-stats.service';
+import { UserRoleService } from 'src/engine/metadata-modules/user-role/user-role.service';
+
+@UseGuards(WorkspaceAuthGuard, SettingsPermissionGuard(PermissionFlagType.AI))
+@MetadataResolver()
+export class AiWorkspaceStatsResolver {
+  constructor(
+    private readonly aiWorkspaceStatsService: AiWorkspaceStatsService,
+    private readonly userRoleService: UserRoleService,
+  ) {}
+
+  @Query(() => WorkspaceAiStatsDTO)
+  async findWorkspaceAiStats(
+    @AuthWorkspace() { id: workspaceId }: WorkspaceEntity,
+    @AuthUserWorkspaceId() userWorkspaceId: string,
+  ): Promise<WorkspaceAiStatsDTO> {
+    // The tool catalog is role-scoped, so resolve the caller's role to count
+    // the tools they can actually see.
+    const roleId = await this.userRoleService.getRoleIdForUserWorkspace({
+      userWorkspaceId,
+      workspaceId,
+    });
+
+    return this.aiWorkspaceStatsService.computeStats(workspaceId, roleId);
+  }
+}
@@ -0,0 +1,47 @@
+import { Injectable } from '@nestjs/common';
+
+import { isDefined } from 'twenty-shared/utils';
+
+import { ToolRegistryService } from 'src/engine/core-modules/tool-provider/services/tool-registry.service';
+import { AgentChatThreadEntity } from 'src/engine/metadata-modules/ai/ai-chat/entities/agent-chat-thread.entity';
+import { WorkspaceAiStatsDTO } from 'src/engine/metadata-modules/ai/ai-workspace-stats/dtos/workspace-ai-stats.dto';
+import { WorkspaceManyOrAllFlatEntityMapsCacheService } from 'src/engine/metadata-modules/flat-entity/services/workspace-many-or-all-flat-entity-maps-cache.service';
+import { InjectWorkspaceScopedRepository } from 'src/engine/twenty-orm/workspace-scoped-repository/inject-workspace-scoped-repository.decorator';
+import { WorkspaceScopedRepository } from 'src/engine/twenty-orm/workspace-scoped-repository/workspace-scoped-repository';
+
+@Injectable()
+export class AiWorkspaceStatsService {
+  constructor(
+    @InjectWorkspaceScopedRepository(AgentChatThreadEntity)
+    private readonly threadRepository: WorkspaceScopedRepository<AgentChatThreadEntity>,
+    private readonly flatEntityMapsCacheService: WorkspaceManyOrAllFlatEntityMapsCacheService,
+    private readonly toolRegistryService: ToolRegistryService,
+  ) {}
+
+  async computeStats(
+    workspaceId: string,
+    roleId: string,
+  ): Promise<WorkspaceAiStatsDTO> {
+    const [conversationsCount, flatMaps, toolIndex] = await Promise.all([
+      this.threadRepository.count(workspaceId),
+      this.flatEntityMapsCacheService.getOrRecomputeManyOrAllFlatEntityMaps({
+        workspaceId,
+        flatMapsKeys: ['flatSkillMaps'],
+      }),
+      // Count the full tool catalog the user can see (built-in tools + custom
+      // logic-function tools), matching the Tools tab rather than only the
+      // custom subset. The catalog is role-scoped, like the tab.
+      this.toolRegistryService.buildToolIndex(workspaceId, roleId),
+    ]);
+
+    const skillsCount = Object.values(
+      flatMaps.flatSkillMaps.byUniversalIdentifier,
+    ).filter(isDefined).length;
+
+    return {
+      conversationsCount,
+      skillsCount,
+      toolsCount: toolIndex.length,
+    };
+  }
+}
@@ -5,6 +5,7 @@ import { AiAgentMonitorModule } from 'src/engine/metadata-modules/ai/ai-agent-mo
 import { AiAgentModule } from 'src/engine/metadata-modules/ai/ai-agent/ai-agent.module';
 import { AiChatModule } from 'src/engine/metadata-modules/ai/ai-chat/ai-chat.module';
 import { AiGenerateTextModule } from 'src/engine/metadata-modules/ai/ai-generate-text/ai-generate-text.module';
+import { AiWorkspaceStatsModule } from 'src/engine/metadata-modules/ai/ai-workspace-stats/ai-workspace-stats.module';
 import { CalendarChannelMetadataModule } from 'src/engine/metadata-modules/calendar-channel/calendar-channel-metadata.module';
 import { ConnectedAccountMetadataModule } from 'src/engine/metadata-modules/connected-account/connected-account-metadata.module';
 import { CommandMenuItemModule } from 'src/engine/metadata-modules/command-menu-item/command-menu-item.module';
@@ -43,6 +44,7 @@ import { WorkspaceMetadataVersionModule } from 'src/engine/metadata-modules/work
    AiAgentMonitorModule,
    AiChatModule,
    AiGenerateTextModule,
+    AiWorkspaceStatsModule,
    MinimalMetadataModule,
    ViewModule,
    WorkspaceMetadataVersionModule,