Skip to content

Conversation

@emir-karabeg
Copy link
Collaborator

@emir-karabeg emir-karabeg commented Jan 27, 2026

Summary

  • Terminal: collapsed JSON, structured output
  • Logs: initial response hidden, preview improvements, default "live"
  • Invite: default "admin"

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: ___________

Testing

Solo.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link

vercel bot commented Jan 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Jan 28, 2026 10:31pm

Request Review

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 27, 2026

Greptile Overview

Greptile Summary

This PR introduces structured output visualization for the terminal with two major components: a new collapsible tree view for nested JSON data and JSON collapse functionality in the code viewer.

Key Changes

  • Structured Output Component: New StructuredOutput component renders JSON as an interactive tree with collapsible nodes, search highlighting, and auto-expansion. Uses React Context for performance optimization to prevent re-render cascades during search navigation.

  • Terminal Refactoring: Extracted OutputPanel, FilterPopover, StatusDisplay, and other components from the monolithic terminal component, reducing it from ~2000 to ~600 lines. This improves maintainability and follows established component extraction patterns.

  • Real-time Execution Tracking: Modified workflow execution to create console entries when blocks start (with isRunning: true) and update them on completion. This enables users to see in-progress executions in the terminal.

  • JSON Collapse in Code Viewer: Added collapsible regions for JSON blocks and long string values in the code component. Implements proper escape sequence handling by counting consecutive backslashes to determine if quotes are escaped.

  • Store Updates: Added structuredView preference to terminal store and updateConsole/cancelRunningEntries methods to console store for tracking running state.

Previous Review Notes

Several edge cases in the JSON parsing logic were identified in previous review threads and remain unaddressed:

  • Brace matching doesn't account for braces inside JSON strings (e.g., {"key": "value with { brace"})
  • String detection conflicts when a line has both long string value AND opening brace
  • Magic number 31 used without named constant

These issues could cause incorrect collapse regions in edge cases but are unlikely to affect typical workflow outputs.

Confidence Score: 4/5

  • Safe to merge with minor edge cases in JSON parsing that were previously identified
  • The PR demonstrates solid architectural improvements with good component extraction, proper performance optimizations, and clean separation of concerns. The code follows established patterns and includes comprehensive documentation. Score reflects the existing JSON parsing edge cases from previous review that haven't been addressed, but these are unlikely to impact typical usage.
  • No files require special attention - the identified JSON parsing edge cases in code.tsx were flagged in previous review threads

Important Files Changed

Filename Overview
apps/sim/components/emcn/components/code/code.tsx Added JSON collapse functionality with escape handling improvements and string truncation, though some parsing edge cases remain from previous review
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx New structured output component with clean architecture, good performance optimizations (React Context, memoization), and comprehensive search functionality
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx Well-structured output panel with good separation of concerns, proper memoization, and clean integration of structured/code view modes
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts Comprehensive utility functions for terminal entry grouping, tree building, and iteration handling with proper type safety
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx Major refactoring extracting output panel and other components, reducing complexity from ~2000 lines to ~600 lines while maintaining functionality
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts Updated to create console entries on block start (with isRunning flag) and update them on completion, enabling real-time execution visibility

Sequence Diagram

sequenceDiagram
    participant User
    participant WorkflowExecution
    participant ConsoleStore
    participant Terminal
    participant OutputPanel
    participant StructuredOutput
    
    User->>WorkflowExecution: Execute workflow
    WorkflowExecution->>ConsoleStore: addConsole(blockId, isRunning=true)
    ConsoleStore->>Terminal: Notify new entry
    Terminal->>OutputPanel: Display running state
    OutputPanel->>StructuredOutput: Render with isRunning=true
    StructuredOutput-->>OutputPanel: Show "Running" badge
    
    Note over WorkflowExecution: Block executes...
    
    WorkflowExecution->>ConsoleStore: updateConsole(blockId, output, isRunning=false)
    ConsoleStore->>Terminal: Update entry
    Terminal->>OutputPanel: Re-render with output
    
    alt Structured View Enabled
        OutputPanel->>StructuredOutput: Render output data
        StructuredOutput-->>OutputPanel: Nested collapsible structure
    else Code View
        OutputPanel->>Code.Viewer: Render JSON string
        Code.Viewer-->>OutputPanel: Syntax highlighted JSON with collapse
    end
    
    User->>OutputPanel: Toggle search
    OutputPanel->>StructuredOutput: searchQuery prop
    StructuredOutput->>StructuredOutput: Find matches & highlight
    StructuredOutput->>StructuredOutput: Auto-expand to current match
    StructuredOutput-->>User: Scroll to highlighted match
Loading

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

4 files reviewed, 4 comments

Edit Code Review Agent Settings | Greptile

Comment on lines 109 to 126
for (const char of line) {
if (char === '{' || char === '[') {
stack.push({ char, line: i })
} else if (char === '}' || char === ']') {
const expected = char === '}' ? '{' : '['
if (stack.length > 0 && stack[stack.length - 1].char === expected) {
const start = stack.pop()!
// Only create a region if it spans multiple lines
if (i > start.line) {
regions.set(start.line, {
startLine: start.line,
endLine: i,
type: 'block',
})
}
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

The brace matching logic doesn't account for braces inside JSON strings, which will cause incorrect parsing. For example, {"key": "value with { brace"} will incorrectly match the brace inside the string.

This will cause incorrect collapse regions and potentially break the collapsing functionality.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/components/emcn/components/code/code.tsx
Line: 109:126

Comment:
The brace matching logic doesn't account for braces inside JSON strings, which will cause incorrect parsing. For example, `{"key": "value with { brace"}` will incorrectly match the brace inside the string.

This will cause incorrect collapse regions and potentially break the collapsing functionality.

How can I resolve this? If you propose a fix, please make it concise.

* Regex to match a JSON string value (key: "value" pattern).
* Pre-compiled for performance.
*/
const STRING_VALUE_REGEX = /:\s*"([^"\\]|\\.)*"[,]?\s*$/
Copy link
Contributor

Choose a reason for hiding this comment

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

The regex doesn't handle escaped quotes within the string value correctly. For example, "key": "value with \" quote" will incorrectly match up to the escaped quote rather than the closing quote.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/components/emcn/components/code/code.tsx
Line: 76:76

Comment:
The regex doesn't handle escaped quotes within the string value correctly. For example, `"key": "value with \" quote"` will incorrectly match up to the escaped quote rather than the closing quote.

How can I resolve this? If you propose a fix, please make it concise.

Comment on lines 92 to 115
const stringMatch = line.match(STRING_VALUE_REGEX)
if (stringMatch) {
const colonIdx = line.indexOf('":')
if (colonIdx !== -1) {
const valueStart = line.indexOf('"', colonIdx + 1)
const valueEnd = line.lastIndexOf('"')
if (valueStart !== -1 && valueEnd > valueStart) {
const stringValue = line.slice(valueStart + 1, valueEnd)
// Check if string is long enough or contains escaped newlines
if (stringValue.length >= MIN_COLLAPSIBLE_STRING_LENGTH || stringValue.includes('\\n')) {
regions.set(i, { startLine: i, endLine: i, type: 'string' })
}
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

The string detection logic processes string regions before block regions in the same line, which could cause conflicts. If a line has both a long string value AND an opening brace, both will be added to the regions map with the same key (line index), causing the block region to overwrite the string region.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/components/emcn/components/code/code.tsx
Line: 92:106

Comment:
The string detection logic processes string regions before block regions in the same line, which could cause conflicts. If a line has both a long string value AND an opening brace, both will be added to the regions map with the same key (line index), causing the block region to overwrite the string region.

How can I resolve this? If you propose a fix, please make it concise.

Comment on lines 200 to 201
const suffix = line.charCodeAt(line.length - 1) === 44 /* ',' */ ? '",' : '"'
const truncated = line.slice(valueStart + 1, valueStart + 31)
Copy link
Contributor

Choose a reason for hiding this comment

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

Magic number 31 used without explanation. Consider extracting to a named constant like MAX_TRUNCATED_STRING_LENGTH for clarity.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/components/emcn/components/code/code.tsx
Line: 200:201

Comment:
Magic number 31 used without explanation. Consider extracting to a named constant like `MAX_TRUNCATED_STRING_LENGTH` for clarity.

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

@emir-karabeg
Copy link
Collaborator Author

@greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

1 file reviewed, 1 comment

Edit Code Review Agent Settings | Greptile

const prevChar = j > 0 ? line[j - 1] : ''

// Toggle string state on unescaped quotes
if (char === '"' && prevChar !== '\\') {
Copy link
Contributor

Choose a reason for hiding this comment

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

Escape sequence handling is incomplete. prevChar !== '\\' doesn't handle escaped backslashes (\\"). For example, "value with \\\\" quote" will incorrectly toggle string state at the escaped quote.

Need to count consecutive backslashes to determine if the quote is truly escaped.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/components/emcn/components/code/code.tsx
Line: 123:123

Comment:
Escape sequence handling is incomplete. `prevChar !== '\\'` doesn't handle escaped backslashes (`\\"`). For example, `"value with \\\\" quote"` will incorrectly toggle string state at the escaped quote.

Need to count consecutive backslashes to determine if the quote is truly escaped.

How can I resolve this? If you propose a fix, please make it concise.

@emir-karabeg
Copy link
Collaborator Author

@greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

No files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@emir-karabeg
Copy link
Collaborator Author

@greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

4 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@emir-karabeg emir-karabeg changed the title feat(code): collapsed JSON in terminal feat(terminal): structured output Jan 28, 2026
@emir-karabeg
Copy link
Collaborator Author

@greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

5 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@emir-karabeg emir-karabeg force-pushed the feat/terminal-structured-output branch from 2e29dbb to 3d51849 Compare January 28, 2026 20:02
@emir-karabeg
Copy link
Collaborator Author

@greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

6 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@emir-karabeg emir-karabeg merged commit 5c02d46 into staging Jan 28, 2026
11 checks passed
@emir-karabeg emir-karabeg deleted the feat/terminal-structured-output branch January 28, 2026 22:40
Sign up for free to 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