feat: toolbar, terminal, tool-input, emcn updates, chat, deploy

[emir-karabeg]

Summary

Toolbar:

• Added search and improved resize logic

Terminal:

• Added console

Tool-input:

• Aligned styling with EMCN

Chat:

• Added workflow chat component

Deploy:

• Connected deploy logic

Type of Change

• New feature

Testing

Solo testing.

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]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 10, 2025 11:05am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR enhances the workflow UI with improved terminal console features, toolbar search functionality, and refined tool selection experience.

Key Changes

• Terminal Enhancements: Added run ID color coding (6 color palette), timestamp display (formatTimestamp), clear console button, and input/output view toggle. Maximum height increased from 50% to 70% of viewport. Run IDs use stable color mapping via executionIdOrderMap.

• Toolbar Search: Implemented search functionality with dynamic height adjustment. Search auto-resizes triggers/blocks sections to show filtered results optimally. Search state preserved via preSearchHeight in toolbar store. Header click toggles between min/max states.

• Tool Input Refactor: Migrated from command-style UI to new Popover components (PopoverSearch, PopoverSection, PopoverScrollArea). Tool cards now display in cleaner layout with consistent 15px icon containers and 11px icons. Removed old CommandInput and CommandGroup in favor of external search control.

• Drag Preview: Added custom drag preview for toolbar items that matches workflow block appearance (250px width, rounded corners, proper icon/text layout).

• Component Reorganization: Mode selector and other user input components moved into dedicated folders following the custom instruction pattern.

Architecture

The changes follow a clear separation of concerns:

• UI components use Popover primitives from @/components/emcn
• State management via Zustand stores (useToolbarStore, useTerminalConsoleStore)
• Resize logic extracted into reusable hooks (use-toolbar-resize.ts)
• Height calculations centralized in calculateTriggerHeights utility

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - primarily UI/UX improvements with proper null checks and type safety
• Score reflects well-structured code with proper null checks (e.g., shouldShowCodeDisplay guards input.code access), consistent error handling, and no breaking changes. Deducted one point due to incomplete PR description lacking context about the "w" feature scope, and the refactoring touches many UI files without explicit test coverage mentioned.
• Pay attention to terminal.tsx:315-317 where selectedEntry.input.code is accessed - while guarded by shouldShowCodeDisplay, verify function block inputs always have the expected structure in production.

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx	4/5	Enhanced terminal with run ID color coding, timestamp display, clear console functionality, input/output view toggle, and resizable height (30px-70% viewport). Logic is sound with proper null checks.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/toolbar/toolbar.tsx	4/5	Added search functionality with dynamic height adjustment, click-to-expand header, and improved UX. Search auto-adjusts triggers/blocks sections based on filtered results.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/tool-input/tool-input.tsx	4/5	Refactored tool selection UI with new Popover components, improved styling, and better organization. Tool items now display in cleaner card-based layout with consistent spacing.
apps/sim/components/emcn/components/popover/popover.tsx	5/5	Added PopoverSearch component with integrated search state management. Clean implementation with proper context usage and auto-focus on mount.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/toolbar/hooks/use-toolbar-resize.ts	5/5	Added calculateTriggerHeights utility for dynamic height calculations. Improved resize logic to respect content boundaries and prevent over-scrolling.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/toolbar/components/drag-preview.ts	5/5	New file implementing custom drag preview for toolbar items. Creates consistent visual feedback when dragging blocks to canvas.

Sequence Diagram

sequenceDiagram
    participant User
    participant Toolbar
    participant ToolbarStore
    participant PopoverSearch
    participant ToolInput
    participant Terminal
    participant ConsoleStore

    Note over Toolbar,ToolbarStore: Toolbar Search & Resize Flow
    User->>Toolbar: Click search icon
    Toolbar->>PopoverSearch: Activate search input
    User->>PopoverSearch: Type search query
    PopoverSearch->>Toolbar: Update searchQuery state
    Toolbar->>Toolbar: Filter triggers/blocks
    Toolbar->>ToolbarStore: Calculate & set optimal height
    ToolbarStore->>Toolbar: Update toolbarTriggersHeight
    User->>Toolbar: Clear search
    Toolbar->>ToolbarStore: Restore preSearchHeight
    
    Note over User,ToolInput: Tool Selection Flow
    User->>ToolInput: Click "Add Tool"
    ToolInput->>PopoverSearch: Open popover with search
    User->>PopoverSearch: Search tools
    PopoverSearch->>ToolInput: Filter tools list
    User->>ToolInput: Select tool
    ToolInput->>ToolInput: Add tool to selectedTools
    ToolInput->>User: Display tool card with params
    
    Note over User,ConsoleStore: Terminal Console Flow
    User->>Terminal: Click terminal row
    Terminal->>Terminal: Set selectedEntry
    Terminal->>Terminal: Calculate shouldShowCodeDisplay
    Terminal->>User: Display output panel (right side)
    User->>Terminal: Toggle Input/Output
    Terminal->>Terminal: Update showInput state
    Terminal->>User: Show input.code or output data
    User->>Terminal: Click clear button
    Terminal->>ConsoleStore: clearWorkflowConsole(workflowId)
    ConsoleStore->>Terminal: Update filtered entries
    Terminal->>User: Clear display

Loading

_{29 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}