improvement(org): move the organization view onto the new design system (#9708)

Move the organization view onto the Platform design system: sidebar, Home with Email, Calendar and activity widgets, Integrations, Sim Links, and Search as its own destination, with server prefetch for the first read.

Members now land on Home with the Assistant composer. Styles stay scoped under data-platform-ui and check:platform-css enforces the boundary.

Author: waleedlatif1

.github/ci-suites.json

@@ -24,6 +24,10 @@
       "group": "organization-search",
       "task": "ci:e2e-organization-search"
     },
+    {
+      "group": "org-redesign",
+      "task": "ci:e2e-org-redesign"
+    },
     {
       "group": "browser-extension-navigation",
       "task": "ci:e2e-browser-extension"

.github/scripts/ci-plan.gql

@@ -3,7 +3,7 @@ query($base: String!, $head: String!) {
   affectedTasks(base: $base, head: $head, tasks: [
     "test", "build", "type-check", "ci:integration", "ci:desktop-live",
     "ci:e2e-scim", "ci:e2e-cli", "ci:e2e-stop-after", "ci:e2e-desktop-inbox",
-    "ci:e2e-assistant-actions", "ci:e2e-organization-search",
+    "ci:e2e-assistant-actions", "ci:e2e-organization-search", "ci:e2e-org-redesign",
     "ci:e2e-docs-platform",
     "ci:e2e-browser-extension", "ci:e2e-project-files", "ci:e2e-mobile", "ci:e2e-seo"
   ]) {

.github/scripts/http-e2e.sh

@@ -3,7 +3,7 @@
 # CI groups, which reuse the production build from `e2e-build`.
 # The job extracts it into apps/sim/.next before running these suites.
 #
-# Usage: http-e2e.sh <scim|cli|stop-after|desktop-inbox|assistant-actions|organization-search|browser-extension|browser-extension-native|browser-extension-navigation|browser-extension-composer|browser-extension-access|project-files|mobile|seo>   (run from apps/sim)
+# Usage: http-e2e.sh <scim|cli|stop-after|desktop-inbox|assistant-actions|organization-search|org-redesign|browser-extension|browser-extension-native|browser-extension-navigation|browser-extension-composer|browser-extension-access|project-files|mobile|seo>   (run from apps/sim)
 #
 # The job provides DATABASE_URL, BETTER_AUTH_SECRET and ENCRYPTION_KEY; each group sets the rest of
 # its app's environment here. Reports and server logs land in $RUNNER_TEMP/e2e.
@@ -20,7 +20,7 @@
 # telemetry flush runs detached and still writes .next/dev).
 set -euo pipefail
 
-group=${1:?usage: http-e2e.sh <scim|cli|stop-after|desktop-inbox|assistant-actions|organization-search|browser-extension|browser-extension-native|browser-extension-navigation|browser-extension-composer|browser-extension-access|project-files|mobile|seo>}
+group=${1:?usage: http-e2e.sh <scim|cli|stop-after|desktop-inbox|assistant-actions|organization-search|org-redesign|browser-extension|browser-extension-native|browser-extension-navigation|browser-extension-composer|browser-extension-access|project-files|mobile|seo>}
 report_dir="$RUNNER_TEMP/e2e"
 ready_timeout_seconds=600
 mkdir -p "$report_dir"
@@ -32,6 +32,7 @@ status_log=''
 realtime_pid=''
 realtime_tag=''
 realtime_log=''
+agent_pid=''
 browsers_pid=''
 local_app_url=''
 # `dev` or `start`; a group sets it before start_app.
@@ -63,6 +64,10 @@ finish() {
       tail -n 100 "$realtime_log"
     fi
   fi
+  if [ -n "$agent_pid" ]; then
+    kill "$agent_pid" 2>/dev/null || true
+    wait "$agent_pid" 2>/dev/null || true
+  fi
   if [ -n "$browsers_pid" ]; then
     kill -- "-$browsers_pid" 2>/dev/null || true
     wait "$browsers_pid" 2>/dev/null || true
@@ -133,6 +138,13 @@ start_realtime() {
   wait_ready "$realtime_pid" "http://127.0.0.1:$port/health" "$name realtime server"
 }
 
+# stop_app: stops the app start_app started, so a group can start it again under other flags.
+stop_app() {
+  bash "$GITHUB_WORKSPACE/.github/scripts/stop-session.sh" "$server_pid" "$app_tag"
+  wait "$server_pid" 2>/dev/null || true
+  server_pid=''
+}
+
 # wait_ready <pid> <health-url> <label>
 wait_ready() {
   local pid=$1 url=$2 label=$3
@@ -268,6 +280,59 @@ case "$group" in
     esac
     ;;
 
+  # One hosted Enterprise organization, a scripted worker in place of the
+  # model, and the app twice: with People off, then on. Hosted is decided by the
+  # app's hostname, which the job maps to loopback. Both phases report, whichever fails.
+  org-redesign)
+    app_server=start
+    export REDIS_URL=redis://127.0.0.1:6379
+    export E2E_APP_PUBLIC_URL=http://org-redesign.sim.ai:3029
+    export NEXT_PUBLIC_APP_URL="$E2E_APP_PUBLIC_URL"
+    export INTERNAL_API_BASE_URL=http://127.0.0.1:3029 TRUSTED_ORIGINS=http://127.0.0.1:3029
+    export NEXT_PUBLIC_SOCKET_URL=http://127.0.0.1:3030 SOCKET_SERVER_URL=http://127.0.0.1:3030
+    export BILLING_ENABLED=true NEXT_PUBLIC_BILLING_ENABLED=true
+    export ENTERPRISE_ENABLED=true NEXT_PUBLIC_ENTERPRISE_ENABLED=true
+    export ORGANIZATIONS_ENABLED=true NEXT_PUBLIC_ORGANIZATIONS_ENABLED=true
+    export SSO_ENABLED=true NEXT_PUBLIC_SSO_ENABLED=true
+    export KNOWLEDGE_MEMBER_ACCESS=true CREDENTIAL_GROUPS=true ACCESS_CONTROL_ENABLED=true
+    export NEXT_PUBLIC_ACCESS_CONTROL_ENABLED=true SIM_LINKS=true
+    export COPILOT_TOOL_PERMISSIONS_ENABLED=true
+    export INTERNAL_API_SECRET=org-redesign-ci-local-secret-at-least-32-characters
+    export COPILOT_API_KEY=org-redesign-ci-local-copilot-key MOTHERSHIP_SIM_TRANSPORT=direct
+    export SIM_AGENT_API_URL=http://127.0.0.1:3031
+    export GOOGLE_CLIENT_ID=org-redesign-google-client GOOGLE_CLIENT_SECRET=org-redesign-google-secret
+    export JIRA_CLIENT_ID=org-redesign-jira-client JIRA_CLIENT_SECRET=org-redesign-jira-secret
+    export CONFLUENCE_CLIENT_ID=org-redesign-confluence-client CONFLUENCE_CLIENT_SECRET=org-redesign-confluence-secret
+    export STRIPE_SECRET_KEY=sk_test_org_redesign STRIPE_WEBHOOK_SECRET=whsec_org_redesign
+    export DB_TX_TRIPWIRE=throw
+    export BROWSER_EXTENSION_IDS=abcdefghijklmnopabcdefghijklmnop
+    bun --no-env-file scripts/org-redesign-seed.ts
+    start_browser_install org-redesign --only-shell chromium
+    bun --no-env-file scripts/org-redesign-e2e/scripted-agent.ts 3031 \
+      > "$report_dir/org-redesign-agent.log" 2>&1 &
+    agent_pid=$!
+    wait_ready "$agent_pid" http://127.0.0.1:3031/health 'scripted agent'
+    start_app org-redesign 3029 'organization redesign' record-http-status
+    start_realtime org-redesign 3030
+    wait_for_browsers
+    run_status=0
+    ORG_REDESIGN_E2E_ORIGIN="$E2E_APP_PUBLIC_URL" \
+    ORG_REDESIGN_E2E_DATABASE_URL="$DATABASE_URL" \
+    ORG_REDESIGN_E2E_AUTH_SECRET="$BETTER_AUTH_SECRET" \
+    ORG_REDESIGN_E2E_REPORT_PATH="$report_dir/org-redesign-ui-report.json" \
+      bun --no-env-file scripts/test-org-redesign-e2e.ts || run_status=$?
+    stop_app
+    export PEOPLE=true
+    start_app org-redesign-people 3029 'organization redesign, People on'
+    ORG_REDESIGN_E2E_PHASE=people \
+    ORG_REDESIGN_E2E_ORIGIN="$E2E_APP_PUBLIC_URL" \
+    ORG_REDESIGN_E2E_DATABASE_URL="$DATABASE_URL" \
+    ORG_REDESIGN_E2E_AUTH_SECRET="$BETTER_AUTH_SECRET" \
+    ORG_REDESIGN_E2E_REPORT_PATH="$report_dir/org-redesign-people-ui-report.json" \
+      bun --no-env-file scripts/test-org-redesign-e2e.ts || run_status=$?
+    exit "$run_status"
+    ;;
+
   browser-extension|browser-extension-native|browser-extension-navigation|browser-extension-composer|browser-extension-access)
     extension_group=all
     case "$group" in

.github/workflows/checks.yml

@@ -207,7 +207,7 @@ jobs:
     needs: [changes, e2e-build]
     if: needs.changes.outputs.http == 'true'
     runs-on: ubuntu-24.04
-    timeout-minutes: 20
+    timeout-minutes: ${{ matrix.group == 'org-redesign' && 45 || 20 }}
     strategy:
       fail-fast: false
       matrix: ${{ fromJSON(needs.changes.outputs.http_matrix) }}
@@ -227,7 +227,7 @@ jobs:
           --health-retries 10
       # Desktop inbox, browser extension, and Project Files use Redis.
       redis:
-        image: ${{ (matrix.group == 'desktop-inbox' || matrix.group == 'assistant-actions' || matrix.group == 'organization-search' || startsWith(matrix.group, 'browser-extension-') || matrix.group == 'project-files') && 'redis:8.2-alpine' || '' }}
+        image: ${{ (matrix.group == 'desktop-inbox' || matrix.group == 'assistant-actions' || matrix.group == 'organization-search' || matrix.group == 'org-redesign' || startsWith(matrix.group, 'browser-extension-') || matrix.group == 'project-files') && 'redis:8.2-alpine' || '' }}
         ports:
           - 6379:6379
         options: >-
@@ -293,6 +293,10 @@ jobs:
         if: matrix.group == 'scim'
         run: printf '127.0.0.1 scim-e2e.sim.ai\n' | sudo tee -a /etc/hosts
 
+      - name: Map the hosted organization fixture to loopback
+        if: matrix.group == 'org-redesign'
+        run: printf '127.0.0.1 org-redesign.sim.ai\n' | sudo tee -a /etc/hosts
+
       # No step timeout: the job's bound covers a hang without cutting a slow but healthy suite
       # short of writing its report.
       - name: Run end-to-end suites

apps/sim/app/api/organizations/[id]/home/calendar/route.ts

@@ -0,0 +1,25 @@
+import { getOrganizationHomeCalendarContract } from '@/lib/api/contracts/organization-home'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import {
+  organizationHomeOperations,
+  readOrganizationHomeCalendar,
+} from '@/lib/organizations/application/home-widgets'
+import { createCredentialGroupInternalErrorPolicy } from '@/app/api/workspaces/[id]/credential-groups/error-policy'
+
+export const GET = defineInternalJsonRoute({
+  contract: getOrganizationHomeCalendarContract,
+  auth: internalSessionAuth,
+  operation: organizationHomeOperations.readCalendar,
+  rateLimit: internalRateLimits.user({ bucketName: 'organization-home-calendar' }),
+  errorPolicy: createCredentialGroupInternalErrorPolicy(
+    'Failed to load calendar',
+    'Organization not found'
+  ),
+  mapInput: ({ params, query }) => ({ organizationId: params.id, ...query }),
+  useCase: readOrganizationHomeCalendar,
+  staticResponseHeaders: { 'Cache-Control': 'private, no-store' },
+})

apps/sim/app/api/organizations/[id]/home/email/route.ts

@@ -0,0 +1,25 @@
+import { getOrganizationHomeEmailContract } from '@/lib/api/contracts/organization-home'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import {
+  organizationHomeOperations,
+  readOrganizationHomeEmail,
+} from '@/lib/organizations/application/home-widgets'
+import { createCredentialGroupInternalErrorPolicy } from '@/app/api/workspaces/[id]/credential-groups/error-policy'
+
+export const GET = defineInternalJsonRoute({
+  contract: getOrganizationHomeEmailContract,
+  auth: internalSessionAuth,
+  operation: organizationHomeOperations.readEmail,
+  rateLimit: internalRateLimits.user({ bucketName: 'organization-home-email' }),
+  errorPolicy: createCredentialGroupInternalErrorPolicy(
+    'Failed to load email',
+    'Organization not found'
+  ),
+  mapInput: ({ params }) => ({ organizationId: params.id }),
+  useCase: readOrganizationHomeEmail,
+  staticResponseHeaders: { 'Cache-Control': 'private, no-store' },
+})

apps/sim/app/api/organizations/[id]/search/history/sources/route.ts

@@ -0,0 +1,23 @@
+import { removeSearchHistorySourceContract } from '@/lib/api/contracts/knowledge/search-history'
+import {
+  defineInternalJsonRoute,
+  internalOrchestrationErrorPolicy,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import {
+  removeSearchHistorySource,
+  searchHistoryOperations,
+} from '@/lib/knowledge/application/search-history'
+
+export const DELETE = defineInternalJsonRoute({
+  contract: removeSearchHistorySourceContract,
+  auth: internalSessionAuth,
+  operation: searchHistoryOperations.removeSource,
+  rateLimit: internalRateLimits.user({ bucketName: 'search-history-write' }),
+  errorPolicy: internalOrchestrationErrorPolicy,
+  parseOptions: { maxBodyBytes: 24 * 1024 },
+  mapInput: ({ params, body }) => ({ organizationId: params.id, url: body.url }),
+  useCase: removeSearchHistorySource,
+  staticResponseHeaders: { 'Cache-Control': 'private, no-store' },
+})

apps/sim/app/api/organizations/[id]/sim-links/route.ts

@@ -5,7 +5,7 @@ import {
   internalRateLimits,
   internalSessionAuth,
 } from '@/lib/api/server/routes'
-import { presentSimLink } from '@/lib/api/server/sim-link-presenters'
+import { presentSimLink, presentSimLinkPage } from '@/lib/api/server/sim-link-presenters'
 import { createSimLink, listSimLinks } from '@/lib/sim-links/application/use-cases'
 
 const policy = {
@@ -21,7 +21,7 @@ export const GET = defineInternalJsonRoute({
   operation: listSimLinks.operation,
   useCase: listSimLinks,
   mapInput: ({ params, query }) => ({ organizationId: params.id, ...query }),
-  present: ({ links, nextCursor }) => ({ links: links.map(presentSimLink), nextCursor }),
+  present: presentSimLinkPage,
 })
 
 export const POST = defineInternalJsonRoute({

apps/sim/app/o/[organizationId]/_redesign/hydrated.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react'
+import { type DehydratedState, HydrationBoundary } from '@tanstack/react-query'
+
+interface HydratedProps {
+  state: Promise<DehydratedState>
+  children: ReactNode
+}
+
+/**
+ * Children painted from a page's server reads. Put it inside a `Suspense`: it holds only that
+ * boundary, so the page's arrangement paints before the reads settle.
+ */
+export async function Hydrated({ state, children }: HydratedProps) {
+  return <HydrationBoundary state={await state}>{children}</HydrationBoundary>
+}

apps/sim/app/o/[organizationId]/_redesign/redesign-host.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import '@/platform/design-system/styles/embedded.css'
+import type { ReactNode } from 'react'
+import { PlatformSurface } from '@/platform/design-system/components/surface/platform-surface'
+
+interface RedesignSurfaceProps {
+  children: ReactNode
+}
+
+/**
+ * Mounts the design system. `system` follows the app's theme through `<html>`'s class, in CSS, so it
+ * tracks every change and is right before hydration (`lib/postcss/platform-embed.cjs`).
+ *
+ * Never render a legacy component inside: the surface redefines tokens legacy utilities read. Compose
+ * one beside a surface instead.
+ */
+export function RedesignSurface({ children }: RedesignSurfaceProps) {
+  return <PlatformSurface theme='system'>{children}</PlatformSurface>
+}