improvement(platform): add integration block + connected credential detail pages, extract skills into top-level route, polish sidebar and settings

Author: emir-karabeg

apps/docs/components/icons.tsx

@@ -5618,12 +5618,22 @@ export function GreenhouseIcon(props: SVGProps<SVGSVGElement>) {
 
 export function GreptileIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg {...props} viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+    <svg {...props} viewBox='0 0 367 420' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path
-        clipRule='evenodd'
-        fillRule='evenodd'
-        fill='#44A775'
-        d='M3.353.004a6.074 6.074 0 01-.265.045C2.63.12 2.092.348 1.71.633 1.426.846.717 1.575.557 1.819a3.359 3.359 0 00-.23 3.296c.154.322.35.59.71.972.187.198.434.486.55.64a6.629 6.629 0 011.305 3.546c.01.138.035 1.607.057 3.264.043 3.273.038 3.18.203 3.485.266.494.94.79 1.474.648.29-.077.463-.204 1.353-.986.957-.84 1.092-.932 1.446-.98.124-.017.631 0 1.66.053 1.513.08 1.622.079 1.85-.016.393-.164.539-.4.661-1.074.247-1.36 1.296-2.56 2.64-3.022.116-.04.373-.104.572-.144.198-.04.426-.102.506-.138.296-.136.515-.424.566-.744.017-.11-.007-.549-.089-1.602-.091-1.179-.107-1.483-.083-1.621.057-.342.139-.46 1.01-1.448.447-.506.85-.976.895-1.043.262-.39.288-.91.068-1.345a1.44 1.44 0 00-.822-.67c-.1-.029-.834-.037-3.544-.038H9.897l-.335-.063c-.958-.179-1.765-.49-2.484-.958-.362-.236-.583-.41-1.018-.804-.408-.37-.59-.502-.921-.67A3.018 3.018 0 003.744.005a3.942 3.942 0 00-.391 0zm15.728 5.858c-.132.049-.217.127-.48.44-.592.707-.74 1.336-.531 2.256.106.466.163.572.361.673.105.054.169.055 2.637.046l2.53-.009.118-.063a.551.551 0 00.095-.895 184.88 184.88 0 00-2.223-1.254c-2.293-1.282-2.281-1.276-2.507-1.194zm-3.216 6.71a9.258 9.258 0 00-1.364.696c-.844.557-1.454 1.36-1.923 2.53-.211.525-.202.75.04.935.111.087 6.478 3.14 6.667 3.198.153.047.27.027.43-.074a.538.538 0 00.24-.434c0-.06-.03-.18-.065-.264-.156-.368-3.098-6.467-3.158-6.545-.168-.222-.394-.232-.867-.042zm-8.48 5.457c-.453.102-.83.32-1.285.745-.296.277-.336.468-.167.798.053.103.61 1.104 1.236 2.224 1.297 2.317 1.22 2.206 1.558 2.202.152-.002.198-.015.296-.084a.662.662 0 00.173-.193c.058-.11.06-.152.08-2.595.018-1.93.015-2.51-.011-2.606a.569.569 0 00-.138-.227c-.09-.091-.14-.112-.406-.176-.582-.138-.992-.165-1.336-.088z'
+        d='M240.269 49.8154L166.804 115.963L115.966 159.44L181.335 220.585L249.784 162.048L196.78 112.47L253.068 61.7881L362.605 164.246L178.739 321.489L3.14502 157.242L187.011 0L240.269 49.8154Z'
+        fill='#28E99F'
+      />
+      <rect
+        width='236.453'
+        height='83.4566'
+        transform='matrix(0.75471 -0.656059 0 1 188.017 336.544)'
+        fill='#28E99F'
+      />
+      <rect
+        width='236.453'
+        height='83.4566'
+        transform='matrix(0.731354 0.681998 0 1 0 174.962)'
+        fill='#28E99F'
       />
     </svg>
   )

apps/docs/components/ui/icon-mapping.ts

@@ -30,7 +30,9 @@ import {
   CloudFormationIcon,
   CloudflareIcon,
   CloudWatchIcon,
+  ConfluenceIcon,
   CrowdStrikeIcon,
+  CursorIcon,
   DagsterIcon,
   DatabricksIcon,
   DatadogIcon,
@@ -47,14 +49,19 @@ import {
   EnrichSoIcon,
   EvernoteIcon,
   ExaAIIcon,
+  ExtendIcon,
   FathomIcon,
   FirecrawlIcon,
+  FirefliesIcon,
   GammaIcon,
+  GithubIcon,
   GitLabIcon,
+  GmailIcon,
   GongIcon,
   GoogleAdsIcon,
   GoogleBigQueryIcon,
   GoogleBooksIcon,
+  GoogleCalendarIcon,
   GoogleContactsIcon,
   GoogleDocsIcon,
   GoogleDriveIcon,
@@ -65,6 +72,7 @@ import {
   GoogleMeetIcon,
   GooglePagespeedIcon,
   GoogleSheetsIcon,
+  GoogleSlidesIcon,
   GoogleTasksIcon,
   GoogleTranslateIcon,
   GoogleVaultIcon,
@@ -81,13 +89,16 @@ import {
   IdentityCenterIcon,
   IncidentioIcon,
   InfisicalIcon,
+  IntercomIcon,
   JinaAIIcon,
   JiraIcon,
   JiraServiceManagementIcon,
+  KalshiIcon,
   KetchIcon,
   LangsmithIcon,
   LaunchDarklyIcon,
   LemlistIcon,
+  LinearIcon,
   LinkedInIcon,
   LinkupIcon,
   LoopsIcon,
@@ -101,6 +112,7 @@ import {
   MicrosoftPlannerIcon,
   MicrosoftSharepointIcon,
   MicrosoftTeamsIcon,
+  MistralIcon,
   MondayIcon,
   MongoDBIcon,
   NotionIcon,
@@ -117,11 +129,13 @@ import {
   PolymarketIcon,
   PosthogIcon,
   ProfoundIcon,
+  PulseIcon,
   QdrantIcon,
   QuiverIcon,
   RDSIcon,
   RedditIcon,
   RedisIcon,
+  ReductoIcon,
   ResendIcon,
   RevenueCatIcon,
   RipplingIcon,
@@ -147,6 +161,7 @@ import {
   TailscaleIcon,
   TavilyIcon,
   TelegramIcon,
+  TextractIcon,
   TinybirdIcon,
   TrelloIcon,
   TwilioIcon,
@@ -194,7 +209,11 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   cloudflare: CloudflareIcon,
   cloudformation: CloudFormationIcon,
   cloudwatch: CloudWatchIcon,
+  confluence: ConfluenceIcon,
+  confluence_v2: ConfluenceIcon,
   crowdstrike: CrowdStrikeIcon,
+  cursor: CursorIcon,
+  cursor_v2: CursorIcon,
   dagster: DagsterIcon,
   databricks: DatabricksIcon,
   datadog: DatadogIcon,
@@ -211,14 +230,24 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   enrich: EnrichSoIcon,
   evernote: EvernoteIcon,
   exa: ExaAIIcon,
+  extend: ExtendIcon,
+  extend_v2: ExtendIcon,
   fathom: FathomIcon,
   firecrawl: FirecrawlIcon,
+  fireflies: FirefliesIcon,
+  fireflies_v2: FirefliesIcon,
   gamma: GammaIcon,
+  github: GithubIcon,
+  github_v2: GithubIcon,
   gitlab: GitLabIcon,
+  gmail: GmailIcon,
+  gmail_v2: GmailIcon,
   gong: GongIcon,
   google_ads: GoogleAdsIcon,
   google_bigquery: GoogleBigQueryIcon,
   google_books: GoogleBooksIcon,
+  google_calendar: GoogleCalendarIcon,
+  google_calendar_v2: GoogleCalendarIcon,
   google_contacts: GoogleContactsIcon,
   google_docs: GoogleDocsIcon,
   google_drive: GoogleDriveIcon,
@@ -230,6 +259,8 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   google_search: GoogleIcon,
   google_sheets: GoogleSheetsIcon,
   google_sheets_v2: GoogleSheetsIcon,
+  google_slides: GoogleSlidesIcon,
+  google_slides_v2: GoogleSlidesIcon,
   google_tasks: GoogleTasksIcon,
   google_translate: GoogleTranslateIcon,
   google_vault: GoogleVaultIcon,
@@ -246,13 +277,19 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   identity_center: IdentityCenterIcon,
   incidentio: IncidentioIcon,
   infisical: InfisicalIcon,
+  intercom: IntercomIcon,
+  intercom_v2: IntercomIcon,
   jina: JinaAIIcon,
   jira: JiraIcon,
   jira_service_management: JiraServiceManagementIcon,
+  kalshi: KalshiIcon,
+  kalshi_v2: KalshiIcon,
   ketch: KetchIcon,
   langsmith: LangsmithIcon,
   launchdarkly: LaunchDarklyIcon,
   lemlist: LemlistIcon,
+  linear: LinearIcon,
+  linear_v2: LinearIcon,
   linkedin: LinkedInIcon,
   linkup: LinkupIcon,
   loops: LoopsIcon,
@@ -266,6 +303,8 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   microsoft_excel_v2: MicrosoftExcelIcon,
   microsoft_planner: MicrosoftPlannerIcon,
   microsoft_teams: MicrosoftTeamsIcon,
+  mistral_parse: MistralIcon,
+  mistral_parse_v3: MistralIcon,
   monday: MondayIcon,
   mongodb: MongoDBIcon,
   notion: NotionIcon,
@@ -284,11 +323,15 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   polymarket: PolymarketIcon,
   posthog: PosthogIcon,
   profound: ProfoundIcon,
+  pulse: PulseIcon,
+  pulse_v2: PulseIcon,
   qdrant: QdrantIcon,
   quiver: QuiverIcon,
   rds: RDSIcon,
   reddit: RedditIcon,
   redis: RedisIcon,
+  reducto: ReductoIcon,
+  reducto_v2: ReductoIcon,
   resend: ResendIcon,
   revenuecat: RevenueCatIcon,
   rippling: RipplingIcon,
@@ -315,6 +358,8 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   tailscale: TailscaleIcon,
   tavily: TavilyIcon,
   telegram: TelegramIcon,
+  textract: TextractIcon,
+  textract_v2: TextractIcon,
   tinybird: TinybirdIcon,
   trello: TrelloIcon,
   twilio_sms: TwilioIcon,

apps/sim/app/(landing)/components/features/components/features-preview.tsx

@@ -760,7 +760,7 @@ function MockFullLogs({ revealedRows }: { revealedRows: number }) {
               <tr>
                 {['Workflow', 'Date', 'Status', 'Cost', 'Trigger', 'Duration'].map((col) => (
                   <th key={col} className='h-10 px-6 py-2.5 text-left align-middle'>
-                    <span className='font-base text-[#999] text-[13px]'>{col}</span>
+                    <span className='text-[#999] text-[13px]'>{col}</span>
                   </th>
                 ))}
               </tr>

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx

@@ -216,7 +216,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                     <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                       <Blimp className='h-[16px] w-[16px]' style={{ color: C.TEXT_ICON }} />
                     </div>
-                    <span className='font-base text-sm' style={{ color: C.TEXT_BODY }}>
+                    <span className='text-sm' style={{ color: C.TEXT_BODY }}>
                       Mothership
                     </span>
                     <ChevronDown
@@ -358,7 +358,7 @@ function ToolCallRow({ icon, title }: { icon: React.ReactNode; title: string })
   return (
     <div className='flex items-center gap-[8px] pl-[24px]'>
       <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>{icon}</div>
-      <span className='font-base text-[13px]' style={{ color: C.TEXT_SECONDARY }}>
+      <span className='text-[13px]' style={{ color: C.TEXT_SECONDARY }}>
         {title}
       </span>
     </div>

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx

@@ -297,7 +297,7 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel({
                       onKeyDown={handleKeyDown}
                       placeholder='Build an AI agent...'
                       rows={2}
-                      className='mb-1.5 min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-0.5 py-1 font-base text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
+                      className='mb-1.5 min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-0.5 py-1 text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
                     />
                     <div className='flex items-center justify-end'>
                       <button

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx

@@ -169,7 +169,7 @@ export function LandingPreviewSidebar({
       {/* Workspace */}
       <div className='mt-3.5 flex flex-shrink-0 flex-col'>
         <div className='px-4 pb-1.5'>
-          <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
+          <div className='text-[12px]' style={{ color: C.TEXT_ICON }}>
             Workspace
           </div>
         </div>
@@ -191,7 +191,7 @@ export function LandingPreviewSidebar({
         {/* Workflows */}
         <div className='flex flex-col'>
           <div className='px-4'>
-            <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
+            <div className='text-[12px]' style={{ color: C.TEXT_ICON }}>
               Workflows
             </div>
           </div>