feat(logs): open the workflow from the log details panel

The workflow name in a log's details panel was static text, so the only
way to reach the workflow was the row's right-click context menu. Make
the label a link to the workflow editor, opening in a new tab so the
log list keeps its filters, scroll position, and open panel.

On hover or keyboard focus the leading workflow icon morphs into
SquareArrowUpRight, reusing the grid-stacked cross-fade already used by
the resource header breadcrumb. Sim agent jobs and deleted workflows
have no reachable workflow and stay static text.

Adds a `group-hover-hover` variant so the morph is gated on a real
hover-capable pointer, matching the existing `hover-hover` variant and
keeping touch devices out of a half-applied hover state.

Author: mzxchandra

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

@@ -29,11 +29,13 @@ import {
   ChevronUp,
   Clipboard,
   Search,
+  SquareArrowUpRight,
   Workflow,
   Wrench,
   X,
 } from '@sim/emcn/icons'
 import { formatDuration } from '@sim/utils/formatting'
+import Link from 'next/link'
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { createPortal } from 'react-dom'
@@ -59,8 +61,10 @@ import {
   DELETED_WORKFLOW_LABEL,
   formatDate,
   getDisplayStatus,
+  resolveLogWorkflowId,
   StatusBadge,
   TriggerBadge,
+  workflowEditorPath,
 } from '@/app/workspace/[workspaceId]/logs/utils'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -317,6 +321,19 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
   const isWorkflowExecutionLog =
     (log.trigger === 'manual' && !!log.duration) || !!log.executionData?.traceSpans
 
+  /**
+   * The workflow this run belongs to, when it is still reachable. Null for Sim
+   * agent jobs and deleted workflows, which render their label as static text.
+   */
+  const openableWorkflowId = resolveLogWorkflowId(log)
+
+  const workflowLabel =
+    log.trigger === 'mothership'
+      ? log.jobTitle || 'Untitled Job'
+      : openableWorkflowId
+        ? log.workflow?.name || 'Unknown'
+        : DELETED_WORKFLOW_LABEL
+
   const hasCostInfo = !!(isWorkflowExecutionLog && log.cost)
   const showWorkflowState =
     isWorkflowExecutionLog &&
@@ -465,15 +482,31 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                   <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                     {log.trigger === 'mothership' ? 'Job' : 'Workflow'}
                   </span>
-                  <div className='flex min-w-0 items-center gap-1.5'>
-                    <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
-                    <span className='min-w-0 truncate font-medium text-[var(--text-secondary)] text-sm'>
-                      {log.trigger === 'mothership'
-                        ? log.jobTitle || 'Untitled Job'
-                        : log.workflow?.name ||
-                          (!log.workflowId ? DELETED_WORKFLOW_LABEL : 'Unknown')}
-                    </span>
-                  </div>
+                  {openableWorkflowId ? (
+                    <Link
+                      href={workflowEditorPath(workspaceId, openableWorkflowId)}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      prefetch={false}
+                      className='-mx-1.5 -my-0.5 group flex w-fit min-w-0 max-w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-[5px] px-1.5 py-0.5 transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
+                    >
+                      <span className='inline-grid size-[14px] shrink-0 place-items-center'>
+                        <Workflow className='col-start-1 row-start-1 size-[14px] text-[var(--text-icon)] opacity-100 blur-0 transition-[opacity,filter,transform] duration-200 ease-in-out group-hover-hover:scale-[0.25] group-hover-hover:opacity-0 group-hover-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
+                        <SquareArrowUpRight className='col-start-1 row-start-1 size-[14px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover-hover:scale-100 group-hover-hover:opacity-100 group-hover-hover:blur-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-0 motion-reduce:transition-none' />
+                      </span>
+                      <span className='min-w-0 truncate font-medium text-[var(--text-secondary)] text-sm transition-colors group-hover-hover:text-[var(--text-primary)] group-focus-visible:text-[var(--text-primary)]'>
+                        {workflowLabel}
+                      </span>
+                      <span className='sr-only'>(opens in a new tab)</span>
+                    </Link>
+                  ) : (
+                    <div className='flex min-w-0 items-center gap-1.5'>
+                      <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                      <span className='min-w-0 truncate font-medium text-[var(--text-secondary)] text-sm'>
+                        {workflowLabel}
+                      </span>
+                    </div>
+                  )}
                 </div>
               </div>
 

apps/sim/tailwind.config.ts

@@ -300,6 +300,10 @@ export default {
     require('tailwindcss/plugin')(
       ({ addVariant }: { addVariant: (name: string, definition: string) => void }) => {
         addVariant('hover-hover', '@media (hover: hover) and (pointer: fine) { &:hover }')
+        addVariant(
+          'group-hover-hover',
+          '@media (hover: hover) and (pointer: fine) { :merge(.group):hover & }'
+        )
       }
     ),
   ],