feat(platform): new UI and templates #639

emir-karabeg · 2025-07-09T01:18:16Z

Description

Platform upgrade for workflow.tsx and new templates module.

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Code refactoring (no functional changes)

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have added tests that prove my fix is effective or that my feature works
All tests pass locally and in CI (bun run test)
My changes generate no new warnings
Any dependent changes have been merged and published in downstream modules
I have updated version numbers as needed (if needed)
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Security Considerations:

My changes do not introduce any new security vulnerabilities
I have considered the security implications of my changes

vercel · 2025-07-09T01:18:21Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sim	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2025 4:46pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Skipped (Inspect)			Jul 15, 2025 4:46pm

greptile-apps

PR Summary

Major UI overhaul of the workflow interface focusing on improved control bar positioning and debug functionality.

Transformed control bar from top-fixed to floating toolbar in top-right corner with simplified single-run approach in apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar.tsx
Added workflow-specific CSS custom properties in globals.css for consistent theming across light/dark modes
Enhanced debug functionality with new validation system and opt-in execution mode in use-workflow-execution.ts
Streamlined deployment controls UI with new color schemes and hover states using CSS variables
Improved skeleton loading component with right-side fixed positioning and simplified button layout

_{6 files reviewed, 8 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-07-09T01:18:47Z

apps/sim/app/globals.css

+    /* Workflow Custom Properties - Light Mode (keep existing values) */
+    --workflow-background: 0 0% 100%;
+    --workflow-dots: 0 0% 94.5%;
+    --workflow-control-button: 0 0% 99.2%;
+    --workflow-control-button-border: 0 0% 89.8%;
+    --workflow-control-button-text: 0 0% 20%;
+    --workflow-control-button-hover: 0 0% 96.1%;
+    --workflow-run-button-shadow: 252 47% 49%;


style: Move workflow-specific CSS variables to a dedicated component config file to improve maintainability

greptile-apps · 2025-07-09T01:18:48Z

.../app/workspace/[workspaceId]/w/[workflowId]/components/skeleton-loading/skeleton-loading.tsx

+        variant='outline'
+        className='h-12 w-12 rounded-[11px] border-[hsl(var(--workflow-control-button-border))] bg-[hsl(var(--workflow-control-button))] text-[hsl(var(--workflow-control-button-text))] shadow-xs opacity-50 cursor-not-allowed hover:bg-[hsl(var(--workflow-control-button))] hover:border-[hsl(var(--workflow-control-button-border))]'
+        disabled


style: Extract repeated button styles into a shared class to avoid duplication across multiple buttons

greptile-apps · 2025-07-09T01:18:48Z

...w/[workflowId]/components/control-bar/components/deployment-controls/deployment-controls.tsx

              className={cn(
-                'hover:text-[#802FFF]',
+                'h-12 w-12 rounded-[11px] border-[hsl(var(--workflow-control-button-border))] bg-[hsl(var(--workflow-control-button))] text-[hsl(var(--workflow-control-button-text))] shadow-xs',
+                'hover:bg-[#701FFC] hover:border-[#701FFC] hover:text-white',
+                'transition-all duration-200',
                isDeployed && 'text-[#802FFF]',
-                isDisabled && 'cursor-not-allowed opacity-50'
+                isDisabled && 'cursor-not-allowed opacity-50 hover:bg-[hsl(var(--workflow-control-button))] hover:border-[hsl(var(--workflow-control-button-border))] hover:text-[hsl(var(--workflow-control-button-text))] hover:shadow-xs'
              )}


style: Consider extracting button styles to a config file for better maintainability

greptile-apps · 2025-07-09T01:18:49Z

.../app/workspace/[workspaceId]/w/[workflowId]/components/skeleton-loading/skeleton-loading.tsx

+        variant='outline'
+        className='h-12 w-12 rounded-[11px] border-[hsl(var(--workflow-control-button-border))] bg-[hsl(var(--workflow-control-button))] text-[hsl(var(--workflow-control-button-text))] shadow-xs hover:bg-gray-100 opacity-50 cursor-not-allowed hover:bg-[hsl(var(--workflow-control-button))] hover:border-[hsl(var(--workflow-control-button-border))]'
+        disabled


logic: Inconsistent hover styles - hover:bg-gray-100 will be overridden by the following hover class. Remove the first occurrence

Suggested change

variant='outline'

className='h-12 w-12 rounded-[11px] border-[hsl(var(--workflow-control-button-border))] bg-[hsl(var(--workflow-control-button))] text-[hsl(var(--workflow-control-button-text))] shadow-xs hover:bg-gray-100 opacity-50 cursor-not-allowed hover:bg-[hsl(var(--workflow-control-button))] hover:border-[hsl(var(--workflow-control-button-border))]'

disabled

variant='outline'

className='h-12 w-12 rounded-[11px] border-[hsl(var(--workflow-control-button-border))] bg-[hsl(var(--workflow-control-button))] text-[hsl(var(--workflow-control-button-text))] shadow-xs opacity-50 cursor-not-allowed hover:bg-[hsl(var(--workflow-control-button))] hover:border-[hsl(var(--workflow-control-button-border))]'

disabled

greptile-apps · 2025-07-09T01:18:51Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

  const handleRunWorkflow = useCallback(
-    async (workflowInput?: any) => {
+    async (workflowInput?: any, enableDebug: boolean = false) => {
      if (!activeWorkflowId) return


logic: handleRunWorkflow accepts enableDebug but defaults to false, potentially breaking existing debug mode functionality that relied on isDebugModeEnabled. Should maintain backward compatibility by using isDebugModeEnabled || enableDebug.

greptile-apps · 2025-07-09T01:18:51Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

                  result.metadata = { duration: 0, startTime: new Date().toISOString() }
                }
-                ;(result.metadata as any).source = 'chat'
+                ; (result.metadata as any).source = 'chat'


syntax: Remove unnecessary semicolon before metadata assignment.

Suggested change

; (result.metadata as any).source = 'chat'

(result.metadata as any).source = 'chat'

greptile-apps · 2025-07-09T01:18:58Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar.tsx

   */
  const handleDeleteWorkflow = () => {
-    if (!activeWorkflowId || !userPermissions.canAdmin) return
+    if (!activeWorkflowId || !userPermissions.canEdit) return


logic: Permission check should be canAdmin not canEdit for deleting workflows - this is an important security boundary

Suggested change

if (!activeWorkflowId || !userPermissions.canEdit) return

if (!activeWorkflowId || !userPermissions.canAdmin) return

greptile-apps · 2025-07-09T01:18:59Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar.tsx

+    const debugButtonClass = cn(
+      'h-12 w-12 rounded-[11px] font-medium',
+      'bg-[#701FFC] hover:bg-[#6518E6]',
+      'shadow-[0_0_0_0_#701FFC] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
+      'text-white transition-all duration-200',
+      'disabled:opacity-50 disabled:hover:bg-[#701FFC] disabled:hover:shadow-none'
+    )


style: Move these style constants to a dedicated config file for button styles

delve-auditor · 2025-07-09T01:19:53Z

✅ No security or compliance issues detected. Reviewed everything up to 41e80ff.

Security Overview

🔎 Scanned files: 114 changed file(s)

Detected Code Changes

Change Type	Relevant files
Other	No changes provided in the diff

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

* improvement: control bar * improvement: debug flow * improvement: control bar hovers and skeleton loading * improvement: completed control bar * improvement: panel tab selector complete * refactor: deleted notifications and history dropdown * improvement: chat UI complete * fix: tab change on control bar run * improvement: finshed console (audio display not working) * fix: text wrapping in console content * improvement: audio UI * improvement: image display * feat: add input to console * improvement: code input and showing input on errors * feat: download chat and console * improvement: expandable panel and console visibility * improvement: empty state UI * improvement: finished variables * fix: image in console entry * improvement: sidebar and templates ui * feat: uploading and fetching templates * improvement: sidebar and control bar * improvement: templates * feat: templates done

* Fix docs agent * Doc agent fixes * Refactor copilot * Lint * Update yaml editor * Lint * Fix block tool * Lint * Get block metadata tool * Lint * Yaml changes * Lint * Fixes? * Lint * Better yaml language * Lint * UPdate * Lint * Fix condition blocks * lint * Fix start block * Fix starter block stuff * Lint * Fix yaml ui * Lint * get yaml tool * Lint * hi * Lint * Agnet * Copilot UI * Lint * Better workflow builder * Lint * REHYDRATION * Lint * Auto layout * Lint * Fixes * Lint * Chatbar sizing * Lint * Initial chat fixes * Lint * Dropdown overflow * Lint * UI text * Lint * Sample question pills * Lint * Ui button * Fix dropdown appearance * Lint * Modal fixes * UI Updates * Lint * Initial ask vs agent mode * Lint * Ask vs agent * Lint * Ask udpate * Ui fixes * Lint * User message width * Chat leak fix * Lint * Agent ui * Checkpointing * Lint * Checkpoints * Lint * Tweaks * Sample questions * Lint * Modal full screen mode * Lint * Prompt updates * Cleaning * Lint * Prompt update * Streaming v1 * Lint * Tool call inline * Lint * Checkpoint * Lint * Fix lint * Sizing * Lint * Copilot ui tool call fixes * Remove output from tool call ui * Updates * Lint * Checkpoitn * Loading icon * Lint * Pulse * Lint * Modal fixes * Sidebar padding * Checkpoint * checkpoint * feat(platform): new UI and templates (#639) (#693) * improvement: control bar * improvement: debug flow * improvement: control bar hovers and skeleton loading * improvement: completed control bar * improvement: panel tab selector complete * refactor: deleted notifications and history dropdown * improvement: chat UI complete * fix: tab change on control bar run * improvement: finshed console (audio display not working) * fix: text wrapping in console content * improvement: audio UI * improvement: image display * feat: add input to console * improvement: code input and showing input on errors * feat: download chat and console * improvement: expandable panel and console visibility * improvement: empty state UI * improvement: finished variables * fix: image in console entry * improvement: sidebar and templates ui * feat: uploading and fetching templates * improvement: sidebar and control bar * improvement: templates * feat: templates done * fix(sockets): remove package-lock * fix: sidebar scroll going over sidebar height (#709) * Checkpoint * Fix build error * Checkpoitn * Docs updates * Checkpoint * Streaming vs non streaming * Clean up yaml save * Fix revert checkpoitn yaml * Doc fixes * Small docs fix * Clean up old yaml docs * Doc updates * Hide copilot * Revert width * Db migration fixes * Add snapshot * Remove space from mdx * Add spaces * Lint * Address greptile comments * lint fix * Hide copilot --------- Co-authored-by: Vikhyath Mondreti <vikhyathvikku@gmail.com> Co-authored-by: Waleed Latif <walif6@gmail.com> Co-authored-by: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com> Co-authored-by: Siddharth Sim <sidstudio@SiddharthsMBP2.attlocal.net>

* improvement: control bar * improvement: debug flow * improvement: control bar hovers and skeleton loading * improvement: completed control bar * improvement: panel tab selector complete * refactor: deleted notifications and history dropdown * improvement: chat UI complete * fix: tab change on control bar run * improvement: finshed console (audio display not working) * fix: text wrapping in console content * improvement: audio UI * improvement: image display * feat: add input to console * improvement: code input and showing input on errors * feat: download chat and console * improvement: expandable panel and console visibility * improvement: empty state UI * improvement: finished variables * fix: image in console entry * improvement: sidebar and templates ui * feat: uploading and fetching templates * improvement: sidebar and control bar * improvement: templates * feat: templates done

* Fix docs agent * Doc agent fixes * Refactor copilot * Lint * Update yaml editor * Lint * Fix block tool * Lint * Get block metadata tool * Lint * Yaml changes * Lint * Fixes? * Lint * Better yaml language * Lint * UPdate * Lint * Fix condition blocks * lint * Fix start block * Fix starter block stuff * Lint * Fix yaml ui * Lint * get yaml tool * Lint * hi * Lint * Agnet * Copilot UI * Lint * Better workflow builder * Lint * REHYDRATION * Lint * Auto layout * Lint * Fixes * Lint * Chatbar sizing * Lint * Initial chat fixes * Lint * Dropdown overflow * Lint * UI text * Lint * Sample question pills * Lint * Ui button * Fix dropdown appearance * Lint * Modal fixes * UI Updates * Lint * Initial ask vs agent mode * Lint * Ask vs agent * Lint * Ask udpate * Ui fixes * Lint * User message width * Chat leak fix * Lint * Agent ui * Checkpointing * Lint * Checkpoints * Lint * Tweaks * Sample questions * Lint * Modal full screen mode * Lint * Prompt updates * Cleaning * Lint * Prompt update * Streaming v1 * Lint * Tool call inline * Lint * Checkpoint * Lint * Fix lint * Sizing * Lint * Copilot ui tool call fixes * Remove output from tool call ui * Updates * Lint * Checkpoitn * Loading icon * Lint * Pulse * Lint * Modal fixes * Sidebar padding * Checkpoint * checkpoint * feat(platform): new UI and templates (simstudioai#639) (simstudioai#693) * improvement: control bar * improvement: debug flow * improvement: control bar hovers and skeleton loading * improvement: completed control bar * improvement: panel tab selector complete * refactor: deleted notifications and history dropdown * improvement: chat UI complete * fix: tab change on control bar run * improvement: finshed console (audio display not working) * fix: text wrapping in console content * improvement: audio UI * improvement: image display * feat: add input to console * improvement: code input and showing input on errors * feat: download chat and console * improvement: expandable panel and console visibility * improvement: empty state UI * improvement: finished variables * fix: image in console entry * improvement: sidebar and templates ui * feat: uploading and fetching templates * improvement: sidebar and control bar * improvement: templates * feat: templates done * fix(sockets): remove package-lock * fix: sidebar scroll going over sidebar height (simstudioai#709) * Checkpoint * Fix build error * Checkpoitn * Docs updates * Checkpoint * Streaming vs non streaming * Clean up yaml save * Fix revert checkpoitn yaml * Doc fixes * Small docs fix * Clean up old yaml docs * Doc updates * Hide copilot * Revert width * Db migration fixes * Add snapshot * Remove space from mdx * Add spaces * Lint * Address greptile comments * lint fix * Hide copilot --------- Co-authored-by: Vikhyath Mondreti <vikhyathvikku@gmail.com> Co-authored-by: Waleed Latif <walif6@gmail.com> Co-authored-by: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com> Co-authored-by: Siddharth Sim <sidstudio@SiddharthsMBP2.attlocal.net>

emir-karabeg added 3 commits July 8, 2025 16:21

improvement: control bar

2159d80

improvement: debug flow

3809e9a

improvement: control bar hovers and skeleton loading

a9e880e

greptile-apps bot reviewed Jul 9, 2025

View reviewed changes

vercel bot deployed to Preview – sim July 9, 2025 01:19 View deployment

improvement: completed control bar

9816ea1

emir-karabeg force-pushed the improvement/platform branch from 3062994 to 9816ea1 Compare July 9, 2025 01:27

vercel bot temporarily deployed to Preview – docs July 9, 2025 01:27 Inactive

vercel bot deployed to Preview – sim July 9, 2025 01:31 View deployment

improvement: panel tab selector complete

7bcd020

vercel bot temporarily deployed to Preview – docs July 9, 2025 03:12 Inactive

vercel bot deployed to Preview – sim July 9, 2025 03:24 View deployment

refactor: deleted notifications and history dropdown

1438483

vercel bot temporarily deployed to Preview – docs July 9, 2025 03:42 Inactive

vercel bot deployed to Preview – sim July 9, 2025 03:45 View deployment

improvement: chat UI complete

93cee09

vercel bot temporarily deployed to Preview – docs July 9, 2025 23:39 Inactive

vercel bot deployed to Preview – sim July 9, 2025 23:42 View deployment

fix: tab change on control bar run

0e9cf2f

vercel bot temporarily deployed to Preview – docs July 9, 2025 23:58 Inactive

vercel bot deployed to Preview – sim July 10, 2025 00:01 View deployment

improvement: finshed console (audio display not working)

d87edd3

vercel bot temporarily deployed to Preview – docs July 11, 2025 00:56 Inactive

vercel bot had a problem deploying to Preview – sim July 11, 2025 00:59 Failure

fix: text wrapping in console content

0cacb83

emir-karabeg force-pushed the improvement/platform branch from 6dcd5c4 to 0cacb83 Compare July 11, 2025 01:10

vercel bot temporarily deployed to Preview – docs July 11, 2025 01:10 Inactive

vercel bot deployed to Preview – sim July 11, 2025 01:13 View deployment

vercel bot deployed to Preview – docs July 15, 2025 05:53 View deployment

emir-karabeg changed the title ~~improvement(platform): new UI~~ feat(platform): new UI and templates Jul 15, 2025

vercel bot deployed to Preview – sim July 15, 2025 05:57 View deployment

emir-karabeg added 3 commits July 14, 2025 23:27

Merge remote-tracking branch 'origin/staging' into improvement/platform

fb9086b

improvement: sidebar and control bar

cfa92e0

improvement: templates

8bab857

vercel bot deployed to Preview – docs July 15, 2025 15:38 View deployment

vercel bot deployed to Preview – sim July 15, 2025 15:41 View deployment

feat: templates done

dc06db6

vercel bot temporarily deployed to Preview – docs July 15, 2025 16:39 Inactive

Merge remote-tracking branch 'origin/staging' into improvement/platform

41e80ff

vercel bot temporarily deployed to Preview – docs July 15, 2025 16:43 Inactive

emir-karabeg merged commit 487f032 into staging Jul 15, 2025
3 of 5 checks passed

vercel bot deployed to Preview – sim July 15, 2025 16:46 View deployment

waleedlatif1 mentioned this pull request Jul 16, 2025

fix(invitation): allow admins to remove members from workspace #701

Merged

12 tasks

emir-karabeg deleted the improvement/platform branch July 16, 2025 23:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(platform): new UI and templates #639

feat(platform): new UI and templates #639

Uh oh!

emir-karabeg commented Jul 9, 2025 •

edited

Loading

Uh oh!

vercel bot commented Jul 9, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

greptile-apps bot Jul 9, 2025

Uh oh!

delve-auditor bot commented Jul 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	; (result.metadata as any).source = 'chat'
	(result.metadata as any).source = 'chat'

	if (!activeWorkflowId \|\| !userPermissions.canEdit) return
	if (!activeWorkflowId \|\| !userPermissions.canAdmin) return

feat(platform): new UI and templates #639

feat(platform): new UI and templates #639

Uh oh!

Conversation

emir-karabeg commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist:

Security Considerations:

Uh oh!

vercel bot commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

delve-auditor bot commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

emir-karabeg commented Jul 9, 2025 •

edited

Loading

vercel bot commented Jul 9, 2025 •

edited

Loading

delve-auditor bot commented Jul 9, 2025 •

edited

Loading