From f02bf67fb34ad310f935a52f1438cccc193be5bd Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Sun, 28 Dec 2025 12:42:13 -0800 Subject: [PATCH 1/3] improvement(globals): light colors --- apps/sim/app/_styles/globals.css | 48 ++++++++++++++++---------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 013e6b1d45..720be1fcc4 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -47,32 +47,32 @@ @layer base { :root, .light { - --bg: #f9faf8; /* main canvas - near white */ - --surface-1: #f9faf8; /* sidebar, panels - light warm gray */ - --surface-2: #fdfdfb; /* blocks, cards, modals - soft warm white */ - --surface-3: #f4f5f1; /* popovers, headers - more contrast */ - --surface-4: #f2f3ef; /* buttons base */ - --border: #d7dcda; /* primary border */ - --surface-5: #f0f1ed; /* inputs, form elements - subtle */ - --border-1: #d7dcda; /* stronger border - sage gray */ - --surface-6: #eceee9; /* popovers, elevated surfaces */ - --surface-7: #e8e9e4; - - --workflow-edge: #d7dcda; /* workflow handles/edges - matches border-1 */ - - /* Text - warm neutrals */ + --bg: #fafafa; /* main canvas - neutral near-white */ + --surface-1: #fafafa; /* sidebar, panels */ + --surface-2: #ffffff; /* blocks, cards, modals - pure white */ + --surface-3: #f7f7f7; /* popovers, headers */ + --surface-4: #f5f5f5; /* buttons base */ + --border: #e0e0e0; /* primary border */ + --surface-5: #f3f3f3; /* inputs, form elements */ + --border-1: #e0e0e0; /* stronger border */ + --surface-6: #f0f0f0; /* popovers, elevated surfaces */ + --surface-7: #ececec; + + --workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */ + + /* Text - neutral */ --text-primary: #2d2d2d; --text-secondary: #404040; --text-tertiary: #5c5c5c; --text-muted: #737373; --text-subtle: #8c8c8c; - --text-inverse: #f0fff6; + --text-inverse: #ffffff; --text-error: #ef4444; /* Borders / dividers */ - --divider: #e8e9e4; - --border-muted: #dfe0db; - --border-success: #d7dcda; + --divider: #ededed; + --border-muted: #e4e4e4; + --border-success: #e0e0e0; /* Brand & state */ --brand-400: #8e4cfb; @@ -152,13 +152,13 @@ --c-883827: #7c2d12; /* Terminal status badges */ - --terminal-status-error-bg: #feeeee; + --terminal-status-error-bg: #fef2f2; --terminal-status-error-border: #f87171; - --terminal-status-info-bg: #f5f5f4; - --terminal-status-info-border: #a8a29e; - --terminal-status-info-color: #57534e; - --terminal-status-warning-bg: #fef9e7; - --terminal-status-warning-border: #f5c842; + --terminal-status-info-bg: #f7f7f7; + --terminal-status-info-border: #a3a3a3; + --terminal-status-info-color: #525252; + --terminal-status-warning-bg: #fefce8; + --terminal-status-warning-border: #facc15; --terminal-status-warning-color: #a16207; } .dark { From bbf7c0146ff2aeff73cd2751e5088dda7e0eabd7 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Sun, 28 Dec 2025 13:02:46 -0800 Subject: [PATCH 2/3] improvement(ui): logs, templates, kb, light globals --- apps/sim/app/_styles/globals.css | 4 +-- apps/sim/app/templates/[id]/template.tsx | 4 +-- .../knowledge/[id]/[documentId]/document.tsx | 6 ++-- .../[workspaceId]/knowledge/[id]/base.tsx | 6 ++-- .../components/base-card/base-card.tsx | 18 ++++++------ .../[workspaceId]/knowledge/knowledge.tsx | 2 +- .../[workspaceId]/knowledge/layout.tsx | 6 +++- .../workflows-list/workflows-list.tsx | 8 +++--- .../logs/components/dashboard/dashboard.tsx | 28 +++++++++---------- .../logs/components/logs-list/logs-list.tsx | 4 +-- .../logs-toolbar/components/search/search.tsx | 4 +-- .../workspace/[workspaceId]/logs/layout.tsx | 6 +++- .../app/workspace/[workspaceId]/logs/logs.tsx | 6 ++-- .../templates/components/template-card.tsx | 24 ++++++++-------- .../[workspaceId]/templates/layout.tsx | 6 +++- .../[workspaceId]/templates/templates.tsx | 2 +- 16 files changed, 73 insertions(+), 61 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 720be1fcc4..1d5339f64d 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -47,8 +47,8 @@ @layer base { :root, .light { - --bg: #fafafa; /* main canvas - neutral near-white */ - --surface-1: #fafafa; /* sidebar, panels */ + --bg: #fdfdfd; /* main canvas - neutral near-white */ + --surface-1: #fcfcfc; /* sidebar, panels */ --surface-2: #ffffff; /* blocks, cards, modals - pure white */ --surface-3: #f7f7f7; /* popovers, headers */ --surface-4: #f5f5f5; /* buttons base */ diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx index 9619bcb553..55752a5531 100644 --- a/apps/sim/app/templates/[id]/template.tsx +++ b/apps/sim/app/templates/[id]/template.tsx @@ -68,7 +68,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
{/* Breadcrumb navigation */} @@ -638,7 +638,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
{/* Breadcrumb navigation */} diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx index 7b2d278cd4..69d726c025 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx @@ -212,7 +212,7 @@ function DocumentLoading({ return (
-
+
@@ -234,7 +234,7 @@ function DocumentLoading({
-
+
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx index 8274a9dd3a..0d1cf5d1e2 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx @@ -171,7 +171,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps) return (
-
+
@@ -193,7 +193,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
-
+
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx index c643347a55..64782d86b0 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx @@ -67,26 +67,26 @@ function formatAbsoluteDate(dateString: string): string { */ export function BaseCardSkeleton() { return ( -
+
-
-
+
+
-
-
+
+
-
+
-
-
+
+
@@ -122,7 +122,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa return ( -
+

{title} diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx index 132757e8fc..9e68bf536b 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx @@ -131,7 +131,7 @@ export function Knowledge() { <>
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx index d1d899e550..4283b6f852 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx @@ -2,5 +2,9 @@ * Knowledge Base layout - applies sidebar padding for all knowledge routes. */ export default function KnowledgeLayout({ children }: { children: React.ReactNode }) { - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx index 8a9c2ba7e1..a78caa79fd 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx @@ -35,9 +35,9 @@ export function WorkflowsList({ const { workflows } = useWorkflowRegistry() return ( -
+
{/* Table header */} -
+
Workflow @@ -66,8 +66,8 @@ export function WorkflowsList({
onToggleWorkflow(workflow.workflowId)} > diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx index 5aaafb4652..e573b813c4 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx @@ -36,14 +36,14 @@ const SKELETON_BAR_HEIGHTS = [ function GraphCardSkeleton({ title }: { title: string }) { return ( -
-
+
+
{title}
-
+
{SKELETON_BAR_HEIGHTS.map((height, i) => ( @@ -81,8 +81,8 @@ function WorkflowRowSkeleton() { function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) { return ( -
-
+
+
Workflow @@ -570,8 +570,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
-
-
+
+
Runs @@ -581,7 +581,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) { )}
-
+
{globalDetails ? (
-
-
+
+
Errors @@ -608,7 +608,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) { )}
-
+
{globalDetails ? (
-
-
+
+
Latency @@ -635,7 +635,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) { )}
-
+
{globalDetails ? ( diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx index 2569d6c5fb..f4964ad44d 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx @@ -163,7 +163,7 @@ export function AutocompleteSearch({ }} > -
+
{/* Search Icon */} @@ -179,7 +179,7 @@ export function AutocompleteSearch({ className={cn( 'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]', highlightedBadgeIndex === index && - 'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-5)]' + 'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-3)] dark:ring-offset-[var(--surface-5)]' )} onClick={() => removeBadge(index)} onKeyDown={(e) => { diff --git a/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx b/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx index 4247f01e9a..ec0a23ca33 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx @@ -1,3 +1,7 @@ export default function LogsLayout({ children }: { children: React.ReactNode }) { - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx index b43e0f89e1..69f95ac562 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx @@ -344,7 +344,7 @@ export default function Logs() { return (
-
+
{/* Table container */} -
+
{/* Table header */} -
+
Date diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx index 3f080de2d8..1b75649229 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx @@ -29,19 +29,19 @@ export function TemplateCardSkeleton({ className }: { className?: string }) { return (
-
+
-
+
{Array.from({ length: 3 }).map((_, index) => (
))}
@@ -49,14 +49,14 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
-
-
+
+
-
-
-
-
+
+
+
+
@@ -202,7 +202,7 @@ function TemplateCardInner({
@@ -223,7 +223,7 @@ function TemplateCardInner({ cursorStyle='pointer' /> ) : ( -
+
)}
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx b/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx index fb101fcaa1..bc62e41049 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx @@ -2,5 +2,9 @@ * Templates layout - applies sidebar padding for all template routes. */ export default function TemplatesLayout({ children }: { children: React.ReactNode }) { - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx index c92fa5bfc2..43a4bac2fd 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx @@ -172,7 +172,7 @@ export default function Templates({ return (
-
+
From e81b280e18e1f23095e6dda99490e11b678c3bf7 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Sun, 28 Dec 2025 13:18:14 -0800 Subject: [PATCH 3/3] improvement(subflows): start node and ui/ux --- .../components/subflows/subflow-node.tsx | 9 ++++---- .../workflow-preview-subflow.tsx | 22 ++++++++++--------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx index 4d2be4ed3a..98375ee569 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx @@ -108,12 +108,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps { const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150' - const colorClasses = '!bg-[var(--surface-7)]' + const colorClasses = '!bg-[var(--workflow-edge)]' const positionClasses = { - left: '!left-[-7px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-10px] hover:!w-[10px] hover:!rounded-l-full', + left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full', right: - '!right-[-7px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-10px] hover:!w-[10px] hover:!rounded-r-full', + '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full', } return cn(baseClasses, colorClasses, positionClasses[position]) @@ -205,13 +205,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps {/* Subflow Start */}
{/* Start handle inside - connects to first block in subflow */} -
+
Start
@@ -85,9 +87,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps