feat(logs): trace span tree rewrite with resizable split, provider icons, and execution improvements

.agents/skills/ship/SKILL.md

@@ -0,0 +1,82 @@
+---
+name: ship
+description: Commit, push, and open a PR to staging in one shot
+---
+
+# Ship Command
+
+You help ship code by creating commits, pushing to the remote branch, and creating PRs in the user's voice.
+
+## Your Task
+
+When the user runs `/ship`:
+
+1. **Check git status** - See what files have changed
+2. **Generate a commit message** following this format: `type(scope): description`
+   - Types: `fix`, `feat`, `improvement`, `chore`
+   - Scope: short identifier (e.g., `undo-redo`, `api`, `ui`)
+   - Keep it concise
+
+3. **Run lint** - Run `bun run lint` from the repo root to fix formatting issues before staging
+
+4. **Stage and commit** the changes with the generated message
+
+5. **Push to origin** using the current branch name
+
+6. **Create a PR** to staging with a description in the user's voice
+
+## Commit Message Format
+
+Based on the repo's commit history:
+```
+fix(scope): description for bug fixes
+feat(scope): description for new features
+improvement(scope): description for enhancements
+chore(scope): description for maintenance
+```
+
+## PR Description Format
+
+Use this exact template in the user's voice (concise, bullet points):
+
+```markdown
+## Summary
+- bullet point describing what changed
+- another bullet point if needed
+
+## Type of Change
+- [x] Bug fix (or appropriate type)
+
+## Testing
+Tested manually (or describe testing)
+
+## Checklist
+- [x] Code follows project style guidelines
+- [x] Self-reviewed my changes
+- [ ] Tests added/updated and passing
+- [x] No new warnings introduced
+- [x] I confirm that I have read and agree to the terms outlined in the [Contributor License Agreement (CLA)](./CONTRIBUTING.md#contributor-license-agreement-cla)
+```
+
+## PR Creation Command
+
+Use this command structure:
+```bash
+gh pr create --base staging --title "COMMIT_MESSAGE" --body "PR_BODY"
+```
+
+## Important Notes
+
+- Always confirm the commit message and PR description with the user before executing
+- The PR should be created against `staging` branch
+- Keep descriptions concise and in active voice
+- Match the user's previous PR style: direct, no fluff, bullet points
+- **DO NOT add "Co-Authored-By" lines to commits** - keep commit messages clean
+
+## User's Voice Characteristics (based on previous PRs)
+
+- Short, direct bullet points
+- No unnecessary explanation
+- "Tested manually" is acceptable for testing section
+- Checkboxes filled in appropriately
+- No screenshots section unless UI changes

.claude/commands/ship.md

@@ -0,0 +1,82 @@
+---
+description: Commit, push, and open a PR to staging in one shot
+argument-hint: [optional context or scope notes]
+---
+
+# Ship Command
+
+You help ship code by creating commits, pushing to the remote branch, and creating PRs in the user's voice.
+
+## Your Task
+
+When the user runs `/ship`:
+
+1. **Check git status** - See what files have changed
+2. **Generate a commit message** following this format: `type(scope): description`
+   - Types: `fix`, `feat`, `improvement`, `chore`
+   - Scope: short identifier (e.g., `undo-redo`, `api`, `ui`)
+   - Keep it concise
+
+3. **Run lint** - Run `bun run lint` from the repo root to fix formatting issues before staging
+
+4. **Stage and commit** the changes with the generated message
+
+5. **Push to origin** using the current branch name
+
+6. **Create a PR** to staging with a description in the user's voice
+
+## Commit Message Format
+
+Based on the repo's commit history:
+```
+fix(scope): description for bug fixes
+feat(scope): description for new features
+improvement(scope): description for enhancements
+chore(scope): description for maintenance
+```
+
+## PR Description Format
+
+Use this exact template in the user's voice (concise, bullet points):
+
+```markdown
+## Summary
+- bullet point describing what changed
+- another bullet point if needed
+
+## Type of Change
+- [x] Bug fix (or appropriate type)
+
+## Testing
+Tested manually (or describe testing)
+
+## Checklist
+- [x] Code follows project style guidelines
+- [x] Self-reviewed my changes
+- [ ] Tests added/updated and passing
+- [x] No new warnings introduced
+- [x] I confirm that I have read and agree to the terms outlined in the [Contributor License Agreement (CLA)](./CONTRIBUTING.md#contributor-license-agreement-cla)
+```
+
+## PR Creation Command
+
+Use this command structure:
+```bash
+gh pr create --base staging --title "COMMIT_MESSAGE" --body "PR_BODY"
+```
+
+## Important Notes
+
+- Always confirm the commit message and PR description with the user before executing
+- The PR should be created against `staging` branch
+- Keep descriptions concise and in active voice
+- Match the user's previous PR style: direct, no fluff, bullet points
+- **DO NOT add "Co-Authored-By" lines to commits** - keep commit messages clean
+
+## User's Voice Characteristics (based on previous PRs)
+
+- Short, direct bullet points
+- No unnecessary explanation
+- "Tested manually" is acceptable for testing section
+- Checkboxes filled in appropriately
+- No screenshots section unless UI changes

.cursor/commands/ship.md

@@ -0,0 +1,77 @@
+# Ship Command
+
+You help ship code by creating commits, pushing to the remote branch, and creating PRs in the user's voice.
+
+## Your Task
+
+When the user runs `/ship`:
+
+1. **Check git status** - See what files have changed
+2. **Generate a commit message** following this format: `type(scope): description`
+   - Types: `fix`, `feat`, `improvement`, `chore`
+   - Scope: short identifier (e.g., `undo-redo`, `api`, `ui`)
+   - Keep it concise
+
+3. **Run lint** - Run `bun run lint` from the repo root to fix formatting issues before staging
+
+4. **Stage and commit** the changes with the generated message
+
+5. **Push to origin** using the current branch name
+
+6. **Create a PR** to staging with a description in the user's voice
+
+## Commit Message Format
+
+Based on the repo's commit history:
+```
+fix(scope): description for bug fixes
+feat(scope): description for new features
+improvement(scope): description for enhancements
+chore(scope): description for maintenance
+```
+
+## PR Description Format
+
+Use this exact template in the user's voice (concise, bullet points):
+
+```markdown
+## Summary
+- bullet point describing what changed
+- another bullet point if needed
+
+## Type of Change
+- [x] Bug fix (or appropriate type)
+
+## Testing
+Tested manually (or describe testing)
+
+## Checklist
+- [x] Code follows project style guidelines
+- [x] Self-reviewed my changes
+- [ ] Tests added/updated and passing
+- [x] No new warnings introduced
+- [x] I confirm that I have read and agree to the terms outlined in the [Contributor License Agreement (CLA)](./CONTRIBUTING.md#contributor-license-agreement-cla)
+```
+
+## PR Creation Command
+
+Use this command structure:
+```bash
+gh pr create --base staging --title "COMMIT_MESSAGE" --body "PR_BODY"
+```
+
+## Important Notes
+
+- Always confirm the commit message and PR description with the user before executing
+- The PR should be created against `staging` branch
+- Keep descriptions concise and in active voice
+- Match the user's previous PR style: direct, no fluff, bullet points
+- **DO NOT add "Co-Authored-By" lines to commits** - keep commit messages clean
+
+## User's Voice Characteristics (based on previous PRs)
+
+- Short, direct bullet points
+- No unnecessary explanation
+- "Tested manually" is acceptable for testing section
+- Checkboxes filled in appropriately
+- No screenshots section unless UI changes

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -313,7 +313,10 @@ export const ResourceTable = memo(function ResourceTable({
           </thead>
         </table>
       </div>
-      <div className='min-h-0 flex-1 overflow-auto' onScroll={handleBodyScroll}>
+      <div
+        className='min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable]'
+        onScroll={handleBodyScroll}
+      >
         <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
@@ -562,7 +565,7 @@ const ResourceColGroup = memo(function ResourceColGroup({
           key={col.id}
           style={
             colIdx === 0
-              ? { minWidth: 200 * (col.widthMultiplier ?? 1) }
+              ? { width: 400 * (col.widthMultiplier ?? 1) }
               : { width: 160 * (col.widthMultiplier ?? 1) }
           }
         />

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

@@ -3,6 +3,7 @@ export { LogDetails, 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'
+export { TraceView } from './log-details/components/trace-view'
 export { LogRowContextMenu } from './log-row-context-menu'
 export { LogsList } from './logs-list'
 export { AutocompleteSearch, LogsToolbar, NotificationSettings } from './logs-toolbar'

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

@@ -1,9 +1,11 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import type React from 'react'
+import { useRef, useState } from 'react'
 import { AlertCircle, Loader2 } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
+  Copy,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -13,7 +15,6 @@ import {
   ModalContent,
   ModalHeader,
 } from '@/components/emcn'
-import { Copy } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { Preview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useExecutionSnapshot } from '@/hooks/queries/logs'
@@ -64,21 +65,21 @@ export function ExecutionSnapshot({
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
   const menuRef = useRef<HTMLDivElement>(null)
 
-  const closeMenu = useCallback(() => {
+  function closeMenu() {
     setIsMenuOpen(false)
-  }, [])
+  }
 
-  const handleCanvasContextMenu = useCallback((e: React.MouseEvent) => {
+  function handleCanvasContextMenu(e: React.MouseEvent) {
     e.preventDefault()
     e.stopPropagation()
     setMenuPosition({ x: e.clientX, y: e.clientY })
     setIsMenuOpen(true)
-  }, [])
+  }
 
-  const handleCopyExecutionId = useCallback(() => {
+  function handleCopyExecutionId() {
     navigator.clipboard.writeText(executionId)
     closeMenu()
-  }, [executionId, closeMenu])
+  }
 
   const workflowState = data?.workflowState as WorkflowState | undefined
   const childWorkflowSnapshots = data?.childWorkflowSnapshots as
@@ -161,6 +162,7 @@ export function ExecutionSnapshot({
         onCanvasContextMenu={handleCanvasContextMenu}
         showBorder={!isModal}
         autoSelectLeftmost
+        showBlockCloseButton={!isModal}
       />
     )
   }