Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Add workflow CFG visualization to observability UI - #456

Merged
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering
Dec 5, 2025
Merged

Add workflow CFG visualization to observability UI#456
VaguelySerious merged 13 commits into
vercel:mainfrom
karthikscale3:karthik/workflow-cfg-rendering

Conversation

@karthikscale3

@karthikscale3karthikscale3 commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

Note: This PR is related to #455

Adds a new "Workflows" tab to the observability dashboard that displays workflow definitions with interactive graph visualization.

Changes

  • @workflow/web-shared: Add fetchWorkflowsManifest server action to read the workflows.json manifest generated by the build process
  • @workflow/web: Add useWorkflowGraphManifest hook for fetching workflow graph data
  • @workflow/web: Add "Workflows" tab to the main page displaying all registered workflows
  • @workflow/web: Add WorkflowsList component with table view and slide-out graph viewer

Features

  • Lists all workflows with their file paths and step counts
  • Click on a workflow to view its control flow graph in a side panel
  • Shows step nodes, edges, and control flow structure (loops, conditionals, parallel execution)

@changeset-bot

changeset-botBot commented Nov 28, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 986e07e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
NameType
@workflow/web-sharedPatch
@workflow/webPatch
@workflow/cliPatch
workflowPatch
@workflow/world-testingPatch
@workflow/aiPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Nov 28, 2025

Copy link
Copy Markdown
Contributor

@karthikscale3 is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-securityBot commented Nov 28, 2025

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​@​radix-ui/​react-dropdown-menu@​2.1.6991007498100

View full report

Comment threadpackages/web/src/app/globals.css
Comment threadpackages/web/src/app/layout.tsx
Comment threadpackages/web/src/app/page.tsx
Comment threadpackages/web/src/components/settings-dropdown.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/badge.tsx
Comment threadpackages/web/src/components/ui/dropdown-menu.tsx
Comment threadpackages/web/src/components/ui/segmented-control.tsx
Comment threadpackages/web/src/components/ui/sheet.tsx
Comment threadpackages/web/src/components/ui/tabs.tsx
@karthikscale3karthikscale3 changed the title Add workflow graph visualization to observability UIAdd workflow CFG visualization to observability UINov 28, 2025
Comment threadpackages/web/src/lib/use-workflow-graph.ts
Comment threadpackages/web/src/app/page.tsx

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great too! Since #455 might take a bit, and this PR has a lot of UI polish that we could merge already without necessarily adding the flow graph, while also being prone to merge conflicts for UI work.

Some options:

  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)
  2. We split this PR into graph-related and non-graph-related changes, and merge the latter without having to wait for the former.
  3. We leave this PR as is and wait for iteration on Workflows graph extractor #455 and then alter resolve merge conflicts for UI code changes in the meantime

I'd prefer 1 or 2. If you're doing one, could I ask you to:

  • Comment out the TabsTrigger for "Workflows"
  • Comment out the TabsList used in run-detail-view.tsx
  • Move all the files related to graphs in web/src/lib into a subfolder web/src/lib/experimental-graphs
  • Ensure DCO passes

and then we can merge this, and you can iterate on the graph solution separately in #455.

Later on, we want to store and fetch manifests from World storage, according to the version spec, but I don't why that has to block this PR in the meantime

Thanks for the review @VaguelySerious ! I made a round of updates to #455 and made the corresponding changes to this one too. I will wait for a day to see if #455 moves. If not, I will go ahead with 1. and update this PR accordingly. Will keep you posted.

@vercelvercelBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details
📝 Patch Details
diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
new file mode 100644
index 0000000..6e2ebe0
--- /dev/null+++ b/packages/web/src/components/display-utils/back-link.tsx@@ -0,0 +1,21 @@+'use client';++import { ArrowLeft } from 'lucide-react';+import Link from 'next/link';++interface BackLinkProps {+ href: string;+ label?: string;+}++export function BackLink({ href, label = 'Back' }: BackLinkProps) {+ return (+ <Link+ href={href}+ className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"+ >+ <ArrowLeft className="h-4 w-4" />+ {label}+ </Link>+ );+}

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: ef9e5e4
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: c7d3256
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: b561f40
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6c51f45
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 89c7721
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: 6d7cb0e
I, Karthik Kalyanaraman <karthik@scale3labs.com>, hereby add my Signed-off-by to this commit: e018221
Signed-off-by: Karthik Kalyanaraman <karthik@scale3labs.com>
@karthikscale3

karthikscale3 commented Dec 5, 2025

Copy link
Copy Markdown
ContributorAuthor
  1. We hide the UI that isn't complete yet (due to dependency on Workflows graph extractor #455)

@VaguelySerious - I went with Option 1 and updated this PR by commenting out the parts that depend on #455 . Also made sure DCO passes in this one as well. Please take a look when you get a chance and let me know if it looks good.

I will uncomment the changes related to #455 and make a separate PR after #455 merges. Thanks again

@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

Additional Suggestion:

The BackLink component is imported from ./display-utils/back-link, but this file was deleted in this PR. This will cause a compilation error.

View Details

📝 Patch Details

Analysis

Missing BackLink component causes build failure in StreamDetailView

What fails:stream-detail-view.tsx imports BackLink component from ./display-utils/back-link, but the file was deleted in commit 89c7721 ("Workflow CFG Viewer and nuqs migration"), causing a module resolution error during build.

How to reproduce:

cd packages/web
pnpm install
pnpm run build

Result: Build fails with error:

Module not found: Can't resolve './display-utils/back-link'

at packages/web/src/components/stream-detail-view.tsx:9:1

Expected: Build should succeed. The BackLink component is actively used on line 115 of stream-detail-view.tsx to render a navigation link with an arrow icon for navigating back from the stream detail view.

Fix: Restored packages/web/src/components/display-utils/back-link.tsx which was inadvertently deleted. The component provides a styled navigation link with an ArrowLeft icon from lucide-react, which is essential for stream detail view navigation.

Fix on Vercel

This has been fixed

@VaguelySeriousVaguelySerious left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Comment thread.changeset/hip-singers-cut.md Outdated
Co-authored-by: Peter Wielander <mittgfu@gmail.com>
@karthikscale3

Copy link
Copy Markdown
ContributorAuthor

This looks great! The changeset is slightly off. I might merge this and fix in a follow-up, but if you have a chance to accept the change, that'd be easier

Good catch! Sorry my bad! Accepted it.

@VaguelySerious
VaguelySerious merged commit 4aecb99 into vercel:mainDec 5, 2025
46 of 71 checks passed
TooTallNate added a commit that referenced this pull request May 28, 2026
The repro app at runtime needs to reach workflow-server-7pxaxn4d4.vercel.sh
(preview of Pranay's monotonic-append PR #456) which has Vercel Deployment
Protection enabled. PR #1882 removed the explicit-bypass-token flow in
favor of OIDC trusted-sources, but trusted-sources only works for
GitHub-Actions-issued OIDC tokens — not for tokens minted inside a
customer Vercel deployment.
Re-add WORKFLOW_VERCEL_PROTECTION_BYPASS support on the direct (non-proxy)
path: if set, attach x-vercel-protection-bypass and x-vercel-set-bypass-cookie
headers on every outbound workflow-server request. Diagnostic-only; not
for production.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@karthikscale3@VaguelySerious