fix(office-excel): support Office.js add-in embed and surface Graph errors

Author: waleedlatif1

apps/sim/app/api/tools/microsoft_excel/drives/route.ts

@@ -7,7 +7,7 @@ import { validatePathSegment, validateSharePointSiteId } from '@/lib/core/securi
 import { generateRequestId } from '@/lib/core/utils/request'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { refreshAccessTokenIfNeeded } from '@/app/api/auth/oauth/utils'
-import { GRAPH_ID_PATTERN } from '@/tools/microsoft_excel/utils'
+import { extractGraphError, GRAPH_ID_PATTERN } from '@/tools/microsoft_excel/utils'
 
 export const dynamic = 'force-dynamic'
 
@@ -76,13 +76,8 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
       })
 
       if (!response.ok) {
-        const errorData = await response
-          .json()
-          .catch(() => ({ error: { message: 'Unknown error' } }))
-        return NextResponse.json(
-          { error: errorData.error?.message || 'Failed to fetch drive' },
-          { status: response.status }
-        )
+        const errorMessage = await extractGraphError(response)
+        return NextResponse.json({ error: errorMessage }, { status: response.status })
       }
 
       const data: GraphDrive = await response.json()
@@ -102,15 +97,12 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
     })
 
     if (!response.ok) {
-      const errorData = await response.json().catch(() => ({ error: { message: 'Unknown error' } }))
+      const errorMessage = await extractGraphError(response)
       logger.error(`[${requestId}] Microsoft Graph API error fetching drives`, {
         status: response.status,
-        error: errorData.error?.message,
+        error: errorMessage,
       })
-      return NextResponse.json(
-        { error: errorData.error?.message || 'Failed to fetch drives' },
-        { status: response.status }
-      )
+      return NextResponse.json({ error: errorMessage }, { status: response.status })
     }
 
     const data = await response.json()

apps/sim/app/api/tools/microsoft_excel/sheets/route.ts

@@ -6,7 +6,7 @@ import { authorizeCredentialUse } from '@/lib/auth/credential-access'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { refreshAccessTokenIfNeeded } from '@/app/api/auth/oauth/utils'
-import { getItemBasePath } from '@/tools/microsoft_excel/utils'
+import { extractGraphError, getItemBasePath } from '@/tools/microsoft_excel/utils'
 
 export const dynamic = 'force-dynamic'
 
@@ -73,18 +73,12 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     })
 
     if (!worksheetsResponse.ok) {
-      const errorData = await worksheetsResponse
-        .text()
-        .then((text) => JSON.parse(text))
-        .catch(() => ({ error: { message: 'Unknown error' } }))
+      const errorMessage = await extractGraphError(worksheetsResponse)
       logger.error(`[${requestId}] Microsoft Graph API error`, {
         status: worksheetsResponse.status,
-        error: errorData.error?.message || 'Failed to fetch worksheets',
+        error: errorMessage,
       })
-      return NextResponse.json(
-        { error: errorData.error?.message || 'Failed to fetch worksheets' },
-        { status: worksheetsResponse.status }
-      )
+      return NextResponse.json({ error: errorMessage }, { status: worksheetsResponse.status })
     }
 
     const data: WorksheetsResponse = await worksheetsResponse.json()

apps/sim/app/chat/[identifier]/office-embed-init.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import Script from 'next/script'
+
+declare global {
+  interface Window {
+    Office?: {
+      onReady: () => Promise<{ host: string | null; platform: string | null }>
+    }
+  }
+}
+
+/**
+ * Office.js nullifies window.history.replaceState and pushState (a legacy
+ * IE10 workaround inside the library) which breaks Next.js's client-side
+ * router. Cache the originals at module load — before <Script> renders
+ * Office.js into the DOM — so we can restore them after it loads.
+ *
+ * See https://learn.microsoft.com/en-us/answers/questions/1070090/using-office-javascript-api-in-next-js.
+ */
+const cachedHistory =
+  typeof window !== 'undefined'
+    ? {
+        replaceState: window.history.replaceState.bind(window.history),
+        pushState: window.history.pushState.bind(window.history),
+      }
+    : null
+
+/**
+ * Loads Office.js and signals readiness so Office host applications
+ * (Excel, Word, PowerPoint, Outlook) recognize this page as a valid add-in.
+ *
+ * Office.onReady() must be called once Office.js is loaded — see
+ * https://learn.microsoft.com/en-us/javascript/api/office#office-office-onready-function(1).
+ */
+export function OfficeEmbedInit() {
+  return (
+    <Script
+      src='https://appsforoffice.microsoft.com/lib/1/hosted/office.js'
+      strategy='afterInteractive'
+      onReady={() => {
+        if (cachedHistory) {
+          window.history.replaceState = cachedHistory.replaceState
+          window.history.pushState = cachedHistory.pushState
+        }
+        void window.Office?.onReady()
+      }}
+    />
+  )
+}

apps/sim/app/chat/[identifier]/page.tsx

@@ -1,11 +1,26 @@
 import type { Metadata } from 'next'
 import ChatClient from '@/app/chat/[identifier]/chat'
+import { OfficeEmbedInit } from '@/app/chat/[identifier]/office-embed-init'
 
 export const metadata: Metadata = {
   title: 'Chat',
 }
 
-export default async function ChatPage({ params }: { params: Promise<{ identifier: string }> }) {
+export default async function ChatPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ identifier: string }>
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
   const { identifier } = await params
-  return <ChatClient key={identifier} identifier={identifier} />
+  const { embed } = await searchParams
+  const isOfficeEmbed = embed === 'office'
+
+  return (
+    <>
+      {isOfficeEmbed && <OfficeEmbedInit />}
+      <ChatClient key={identifier} identifier={identifier} />
+    </>
+  )
 }

apps/sim/lib/core/security/csp.test.ts

@@ -25,6 +25,7 @@ import {
   buildTimeCSPDirectives,
   type CSPDirectives,
   generateRuntimeCSP,
+  getChatEmbedCSPPolicy,
   getMainCSPPolicy,
   getWorkflowExecutionCSPPolicy,
   removeCSPSource,
@@ -278,3 +279,21 @@ describe('buildTimeCSPDirectives', () => {
     expect(buildTimeCSPDirectives['img-src']).toContain('blob:')
   })
 })
+
+describe('getChatEmbedCSPPolicy', () => {
+  it('allows iframe embedding from any origin', () => {
+    expect(getChatEmbedCSPPolicy()).toContain('frame-ancestors *')
+  })
+
+  it('allows Office.js to load from Microsoft for Excel/Word add-in embedding', () => {
+    const policy = getChatEmbedCSPPolicy()
+    expect(policy).toMatch(/script-src[^;]*https:\/\/appsforoffice\.microsoft\.com/)
+    expect(policy).toMatch(/connect-src[^;]*https:\/\/appsforoffice\.microsoft\.com/)
+  })
+
+  it('does not regress object-src or base-uri restrictions', () => {
+    const policy = getChatEmbedCSPPolicy()
+    expect(policy).toContain("object-src 'none'")
+    expect(policy).toContain("base-uri 'self'")
+  })
+})

apps/sim/lib/core/security/csp.ts

@@ -236,10 +236,21 @@ function getEmbedCSPPolicy(): string {
 }
 
 /**
- * CSP for embeddable chat pages
+ * CSP for embeddable chat pages.
+ * Extends the shared embed policy with Microsoft Office.js sources so the
+ * chat page can serve as an Office (Excel/Word/Outlook) add-in surface
+ * when loaded with `?embed=office`.
  */
 export function getChatEmbedCSPPolicy(): string {
-  return getEmbedCSPPolicy()
+  return buildCSPString({
+    ...buildTimeCSPDirectives,
+    'script-src': [...STATIC_SCRIPT_SRC, 'https://appsforoffice.microsoft.com'],
+    'connect-src': [
+      ...(buildTimeCSPDirectives['connect-src'] ?? []),
+      'https://appsforoffice.microsoft.com',
+    ],
+    'frame-ancestors': ['*'],
+  })
 }
 
 /**

apps/sim/tools/error-extractors.ts

@@ -184,6 +184,53 @@ const ERROR_EXTRACTORS: ErrorExtractorConfig[] = [
     examples: ['Microsoft OAuth', 'Google OAuth', 'OAuth2 providers'],
     extract: (errorInfo) => errorInfo?.data?.error_description,
   },
+  {
+    id: 'microsoft-graph-errors',
+    description:
+      'Microsoft Graph error format with nested innerError chain and details[] (Excel, OneDrive, SharePoint, Outlook). See https://learn.microsoft.com/en-us/graph/errors',
+    examples: ['Microsoft Excel', 'Microsoft OneDrive', 'Microsoft SharePoint'],
+    extract: (errorInfo) => {
+      const data = errorInfo?.data
+      if (!data || typeof data !== 'object') return undefined
+
+      const root = (data as { error?: any }).error
+      if (root && typeof root === 'object') {
+        const messages: string[] = []
+        if (typeof root.message === 'string' && root.message.trim()) {
+          messages.push(root.message.trim())
+        }
+
+        // Walk nested innerError chain. Spec uses `innererror` (lowercase),
+        // Graph commonly returns `innerError` — accept both. Cap depth.
+        let inner: any = root.innererror ?? root.innerError
+        let depth = 0
+        while (inner && depth < 5) {
+          if (typeof inner.message === 'string' && inner.message.trim()) {
+            const msg = inner.message.trim()
+            if (!messages.includes(msg)) messages.push(msg)
+          }
+          inner = inner.innererror ?? inner.innerError
+          depth++
+        }
+
+        if (Array.isArray(root.details)) {
+          for (const detail of root.details) {
+            if (detail && typeof detail.message === 'string' && detail.message.trim()) {
+              const msg = detail.message.trim()
+              if (!messages.includes(msg)) messages.push(msg)
+            }
+          }
+        }
+
+        if (messages.length > 0) return messages.join(' — ')
+        if (typeof root.code === 'string' && root.code.trim()) return root.code.trim()
+      }
+
+      const topMessage = (data as { message?: unknown }).message
+      if (typeof topMessage === 'string' && topMessage.trim()) return topMessage.trim()
+      return undefined
+    },
+  },
   {
     id: 'nested-error-object',
     description: 'Error field containing nested object or string',
@@ -260,6 +307,7 @@ export function extractErrorMessage(errorInfo?: ErrorInfo, extractorId?: string)
 
 export const ErrorExtractorId = {
   ATLASSIAN_ERRORS: 'atlassian-errors',
+  MICROSOFT_GRAPH_ERRORS: 'microsoft-graph-errors',
   GRAPHQL_ERRORS: 'graphql-errors',
   TWITTER_ERRORS: 'twitter-errors',
   DETAILS_ARRAY: 'details-array',

apps/sim/tools/microsoft_excel/read.ts

@@ -1,3 +1,4 @@
+import { ErrorExtractorId } from '@/tools/error-extractors'
 import type {
   ExcelCellValue,
   MicrosoftExcelReadResponse,
@@ -8,15 +9,25 @@ import type {
 import {
   getItemBasePath,
   getSpreadsheetWebUrl,
+  parseGraphErrorMessage,
   trimTrailingEmptyRowsAndColumns,
 } from '@/tools/microsoft_excel/utils'
 import type { ToolConfig } from '@/tools/types'
 
+const EXCEL_RETRY_CONFIG = {
+  enabled: true,
+  maxRetries: 3,
+  initialDelayMs: 500,
+  maxDelayMs: 30000,
+  retryIdempotentOnly: true,
+} as const
+
 export const readTool: ToolConfig<MicrosoftExcelToolParams, MicrosoftExcelReadResponse> = {
   id: 'microsoft_excel_read',
   name: 'Read from Microsoft Excel',
   description: 'Read data from a Microsoft Excel spreadsheet',
   version: '1.0',
+  errorExtractor: ErrorExtractorId.MICROSOFT_GRAPH_ERRORS,
 
   oauth: {
     required: true,
@@ -95,6 +106,7 @@ export const readTool: ToolConfig<MicrosoftExcelToolParams, MicrosoftExcelReadRe
         Authorization: `Bearer ${params.accessToken}`,
       }
     },
+    retry: EXCEL_RETRY_CONFIG,
   },
 
   transformResponse: async (response: Response, params?: MicrosoftExcelToolParams) => {
@@ -123,8 +135,10 @@ export const readTool: ToolConfig<MicrosoftExcelToolParams, MicrosoftExcelReadRe
       })
 
       if (!rangeResp.ok) {
+        const errorText = await rangeResp.text().catch(() => '')
+        const detail = parseGraphErrorMessage(rangeResp.status, rangeResp.statusText, errorText)
         throw new Error(
-          'Invalid range provided or worksheet not found. Provide a range like "Sheet1!A1:B2" or just the sheet name to read the whole sheet'
+          `Failed to read worksheet "${firstSheetName}": ${detail}. Provide a range like "Sheet1!A1:B2" or just the sheet name to read the whole sheet.`
         )
       }
 
@@ -209,6 +223,7 @@ export const readV2Tool: ToolConfig<MicrosoftExcelV2ToolParams, MicrosoftExcelV2
   name: 'Read from Microsoft Excel V2',
   description: 'Read data from a specific sheet in a Microsoft Excel spreadsheet',
   version: '2.0.0',
+  errorExtractor: ErrorExtractorId.MICROSOFT_GRAPH_ERRORS,
 
   oauth: {
     required: true,
@@ -284,6 +299,7 @@ export const readV2Tool: ToolConfig<MicrosoftExcelV2ToolParams, MicrosoftExcelV2
         Authorization: `Bearer ${params.accessToken}`,
       }
     },
+    retry: EXCEL_RETRY_CONFIG,
   },
 
   transformResponse: async (response: Response, params?: MicrosoftExcelV2ToolParams) => {

apps/sim/tools/microsoft_excel/table_add.ts

@@ -1,3 +1,4 @@
+import { ErrorExtractorId } from '@/tools/error-extractors'
 import type {
   MicrosoftExcelTableAddResponse,
   MicrosoftExcelTableToolParams,
@@ -13,6 +14,7 @@ export const tableAddTool: ToolConfig<
   name: 'Add to Microsoft Excel Table',
   description: 'Add new rows to a Microsoft Excel table',
   version: '1.0',
+  errorExtractor: ErrorExtractorId.MICROSOFT_GRAPH_ERRORS,
 
   oauth: {
     required: true,