improvement(mothership): reuse logs detail panel in resource view (#4389)

* improvement(mothership): reuse logs detail panel in resource view

* improvement(logs): drop unnecessary memo and export tab type

* fix(logs): notify embedder on every resolved-tab change

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { lazy, memo, Suspense, useEffect, useMemo, useState } from 'react'
+import { lazy, memo, Suspense, useEffect, useMemo } from 'react'
 import { createLogger } from '@sim/logger'
-import { formatDuration } from '@sim/utils/formatting'
 import { Square } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { Button, Eye, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
+import { Button, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
 import {
   Download,
   FileX,
@@ -14,15 +13,12 @@ import {
   SquareArrowUpRight,
   WorkflowX,
 } from '@/components/emcn/icons'
-import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import type { FilePreviewSession } from '@/lib/copilot/request/session'
 import {
   cancelRunToolExecution,
   markRunToolManuallyStopped,
   reportManualRunToolStop,
 } from '@/lib/copilot/tools/client/run-tool-execution'
-import { cn } from '@/lib/core/utils/cn'
-import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-spans'
 import {
   downloadWorkspaceFile,
   getFileExtension,
@@ -43,18 +39,7 @@ import type {
   MothershipResource,
 } from '@/app/workspace/[workspaceId]/home/types'
 import { KnowledgeBase } from '@/app/workspace/[workspaceId]/knowledge/[id]/base'
-import {
-  ExecutionSnapshot,
-  FileCards,
-  TraceSpans,
-  WorkflowOutputSection,
-} from '@/app/workspace/[workspaceId]/logs/components'
-import {
-  formatDate,
-  getDisplayStatus,
-  StatusBadge,
-  TriggerBadge,
-} from '@/app/workspace/[workspaceId]/logs/utils'
+import { LogDetailsContent } from '@/app/workspace/[workspaceId]/logs/components'
 import {
   useUserPermissionsContext,
   useWorkspacePermissionsContext,
@@ -68,7 +53,6 @@ import { downloadTableExport } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
-import { formatCost } from '@/providers/utils'
 import { useExecutionStore } from '@/stores/execution/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
@@ -639,26 +623,6 @@ interface EmbeddedLogProps {
 
 function EmbeddedLog({ logId }: EmbeddedLogProps) {
   const { data: log, isLoading } = useLogDetail(logId)
-  const [isSnapshotOpen, setIsSnapshotOpen] = useState(false)
-
-  const logStatus = getDisplayStatus(log?.status)
-
-  const workflowOutput = useMemo(() => {
-    const executionData = log?.executionData as
-      | { finalOutput?: Record<string, unknown> }
-      | undefined
-    if (!executionData?.finalOutput) return null
-    return filterHiddenOutputKeys(executionData.finalOutput) as Record<string, unknown>
-  }, [log?.executionData])
-
-  const isWorkflowExecutionLog =
-    !!log &&
-    ((log.trigger === 'manual' && !!log.duration) ||
-      !!(log.executionData?.enhanced && log.executionData?.traceSpans))
-
-  const hasCostInfo = isWorkflowExecutionLog && log?.cost
-
-  const formattedTimestamp = log ? formatDate(log.createdAt) : null
 
   if (isLoading) return LOADING_SKELETON
 
@@ -676,232 +640,9 @@ function EmbeddedLog({ logId }: EmbeddedLogProps) {
     )
   }
 
-  const workflowColor =
-    log.trigger === 'mothership'
-      ? '#ec4899'
-      : log.workflow?.color || (!log.workflowId ? 'var(--text-tertiary)' : undefined)
-
-  const totalToolCost = (() => {
-    const models = (log.cost as Record<string, unknown>)?.models as
-      | Record<string, { toolCost?: number }>
-      | undefined
-    return models ? Object.values(models).reduce((sum, m) => sum + (m?.toolCost || 0), 0) : 0
-  })()
-
   return (
-    <div className='flex h-full flex-col overflow-y-auto'>
-      <div className='flex flex-col gap-2.5 p-4 pb-6'>
-        {/* Timestamp & Workflow Row */}
-        <div className='flex min-w-0 items-center gap-4 px-[1px]'>
-          <div className='flex w-[140px] flex-shrink-0 flex-col gap-2'>
-            <div className='font-medium text-[var(--text-tertiary)] text-caption'>Timestamp</div>
-            <div className='flex items-center gap-1.5'>
-              <span className='font-medium text-[var(--text-secondary)] text-sm'>
-                {formattedTimestamp?.compactDate || 'N/A'}
-              </span>
-              <span className='font-medium text-[var(--text-secondary)] text-sm'>
-                {formattedTimestamp?.compactTime || 'N/A'}
-              </span>
-            </div>
-          </div>
-          <div className='flex w-0 min-w-0 flex-1 flex-col gap-2'>
-            <div className='font-medium text-[var(--text-tertiary)] text-caption'>
-              {log.trigger === 'mothership' ? 'Job' : 'Workflow'}
-            </div>
-            <div className='flex min-w-0 items-center gap-2'>
-              <div
-                className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
-                style={{
-                  backgroundColor: workflowColor,
-                  borderColor: workflowColor ? workflowBorderColor(workflowColor) : undefined,
-                  backgroundClip: 'padding-box',
-                }}
-              />
-              <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-secondary)] text-sm'>
-                {log.trigger === 'mothership'
-                  ? log.jobTitle || 'Untitled Job'
-                  : log.workflow?.name || (!log.workflowId ? 'Deleted Workflow' : 'Unknown')}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* Run ID */}
-        {log.executionId && (
-          <div className='flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
-            <span className='font-medium text-[var(--text-tertiary)] text-caption'>Run ID</span>
-            <span className='truncate font-medium text-[var(--text-secondary)] text-sm'>
-              {log.executionId}
-            </span>
-          </div>
-        )}
-
-        {/* Details Section */}
-        <div className='-my-1 flex min-w-0 flex-col overflow-hidden'>
-          <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-2'>
-            <span className='font-medium text-[var(--text-tertiary)] text-caption'>Level</span>
-            <StatusBadge status={logStatus} />
-          </div>
-          <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-2'>
-            <span className='font-medium text-[var(--text-tertiary)] text-caption'>Trigger</span>
-            {log.trigger ? (
-              <TriggerBadge trigger={log.trigger} />
-            ) : (
-              <span className='font-medium text-[var(--text-secondary)] text-caption'>—</span>
-            )}
-          </div>
-          <div
-            className={cn(
-              'flex h-[48px] items-center justify-between border-b p-2',
-              log.deploymentVersion ? 'border-[var(--border)]' : 'border-transparent'
-            )}
-          >
-            <span className='font-medium text-[var(--text-tertiary)] text-caption'>Duration</span>
-            <span className='font-medium text-[var(--text-secondary)] text-small'>
-              {formatDuration(log.duration, { precision: 2 }) || '—'}
-            </span>
-          </div>
-          {log.deploymentVersion && (
-            <div className='flex h-[48px] items-center gap-2 p-2'>
-              <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
-                Version
-              </span>
-              <div className='flex w-0 flex-1 justify-end'>
-                <span className='max-w-full truncate rounded-md bg-[var(--badge-success-bg)] px-[9px] py-0.5 font-medium text-[var(--badge-success-text)] text-caption'>
-                  {log.deploymentVersionName || `v${log.deploymentVersion}`}
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Workflow State Snapshot */}
-        {isWorkflowExecutionLog && log.executionId && log.trigger !== 'mothership' && (
-          <div className='-mt-2 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
-            <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-              Workflow State
-            </span>
-            <Button
-              variant='active'
-              onClick={() => setIsSnapshotOpen(true)}
-              className='flex w-full items-center justify-between px-2.5 py-1.5'
-            >
-              <span className='font-medium text-caption'>View Snapshot</span>
-              <Eye className='h-[14px] w-[14px]' />
-            </Button>
-          </div>
-        )}
-
-        {/* Workflow Output */}
-        {isWorkflowExecutionLog && workflowOutput && (
-          <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
-            <span
-              className={cn(
-                'font-medium text-caption',
-                workflowOutput.error ? 'text-[var(--text-error)]' : 'text-[var(--text-tertiary)]'
-              )}
-            >
-              Workflow Output
-            </span>
-            <WorkflowOutputSection output={workflowOutput} />
-          </div>
-        )}
-
-        {/* Trace Spans */}
-        {isWorkflowExecutionLog && log.executionData?.traceSpans && (
-          <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
-            <span className='font-medium text-[var(--text-tertiary)] text-caption'>Trace Span</span>
-            <TraceSpans traceSpans={log.executionData.traceSpans} />
-          </div>
-        )}
-
-        {/* Files */}
-        {log.files && log.files.length > 0 && <FileCards files={log.files} isExecutionFile />}
-
-        {/* Cost Breakdown */}
-        {hasCostInfo && (
-          <div className='flex flex-col gap-2'>
-            <span className='px-[1px] font-medium text-[var(--text-tertiary)] text-caption'>
-              Cost Breakdown
-            </span>
-            <div className='flex flex-col gap-1 rounded-md border border-[var(--border)]'>
-              <div className='flex flex-col gap-2.5 rounded-md p-2.5'>
-                <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-                    Base Execution:
-                  </span>
-                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
-                    {formatCost(BASE_EXECUTION_CHARGE)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-                    Model Input:
-                  </span>
-                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
-                    {formatCost(log.cost?.input || 0)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-                    Model Output:
-                  </span>
-                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
-                    {formatCost(log.cost?.output || 0)}
-                  </span>
-                </div>
-                {totalToolCost > 0 && (
-                  <div className='flex items-center justify-between'>
-                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-                      Tool Usage:
-                    </span>
-                    <span className='font-medium text-[var(--text-secondary)] text-caption'>
-                      {formatCost(totalToolCost)}
-                    </span>
-                  </div>
-                )}
-              </div>
-              <div className='border-[var(--border)] border-t' />
-              <div className='flex flex-col gap-2.5 rounded-md p-2.5'>
-                <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-                    Total:
-                  </span>
-                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
-                    {formatCost(log.cost?.total || 0)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
-                    Tokens:
-                  </span>
-                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
-                    {log.cost?.tokens?.input || log.cost?.tokens?.prompt || 0} in /{' '}
-                    {log.cost?.tokens?.output || log.cost?.tokens?.completion || 0} out
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div className='flex items-center justify-center rounded-md bg-[var(--surface-2)] p-2 text-center'>
-              <p className='font-medium text-[var(--text-subtle)] text-xs'>
-                Total cost includes a base execution charge of {formatCost(BASE_EXECUTION_CHARGE)}{' '}
-                plus any model and tool usage costs.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Frozen Canvas Modal */}
-      {log.executionId && (
-        <ExecutionSnapshot
-          executionId={log.executionId}
-          traceSpans={log.executionData?.traceSpans}
-          isModal
-          isOpen={isSnapshotOpen}
-          onClose={() => setIsSnapshotOpen(false)}
-        />
-      )}
+    <div className='flex h-full flex-col overflow-hidden px-3.5 pt-3'>
+      <LogDetailsContent log={log} />
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/logs/components/index.ts

@@ -1,5 +1,6 @@
 export { Dashboard } from './dashboard'
-export { LogDetails, WorkflowOutputSection } from './log-details'
+export type { LogDetailsTab } from './log-details'
+export { LogDetails, LogDetailsContent, WorkflowOutputSection } from './log-details'
 export { ExecutionSnapshot } from './log-details/components/execution-snapshot'
 export { FileCards } from './log-details/components/file-download'
 export { TraceSpans } from './log-details/components/trace-spans'

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/index.ts

@@ -1 +1,2 @@
-export { LogDetails, WorkflowOutputSection } from './log-details'
+export type { LogDetailsTab } from './log-details'
+export { LogDetails, LogDetailsContent, WorkflowOutputSection } from './log-details'