improvement(platform): chat, emcn, terminal, usage-limit

[emir-karabeg]

Summary

Chat:

• Initial layout
• Popover
• Display

Usage-limit:

• Layout

Terminal:

• Higher default height

Emcn:

• Popover improvements

Type of Change

• New feature

Testing

Solo testing

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• 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 14, 2025 0:02am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements UI improvements across chat, terminal, usage indicator, and popover components:

• Chat: Repositioned to top-right corner with border styling, improved popover constraints
• Terminal: Default height increased from 145px to 196px
• Usage Indicator: Layout spacing adjustments, replaced hardcoded colors with CSS variables
• Popover Component: Enhanced with maxWidth/minWidth props and automatic truncation
• Workflow Block: Fixed edge path recalculation when toggling horizontal handles

Issue Found: The globals.css file was edited to change the terminal height, which violates the project policy (custom rule c3b5e4b0-6580-4307-83aa-ba28f105b3c4) that requires avoiding globals.css edits and moving styles to local component files instead.

Confidence Score: 3/5

• This PR contains mostly safe UI improvements but violates project policy regarding globals.css editing
• Score reflects the policy violation in globals.css editing. While the code changes are functionally sound and well-implemented (TSDoc updates, proper React Flow integration, good CSS variable usage), the globals.css edit contradicts established project guidelines. The other changes are high quality with proper typing, documentation, and no logical errors.
• Pay close attention to apps/sim/app/globals.css - the terminal height change should be moved to the local component file per project policy

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/globals.css	2/5	Terminal height increased from 145px to 196px, violating project policy to avoid editing globals.css
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	5/5	Added useEffect to notify React Flow when handle orientation changes, fixing edge path recalculation
apps/sim/components/emcn/components/popover/popover.tsx	5/5	Enhanced popover with maxWidth/minWidth props, improved overflow handling, and automatic truncation support

Sequence Diagram

sequenceDiagram
    participant User
    participant Chat
    participant ChatStore
    participant OutputSelect
    participant Popover
    participant Terminal
    participant WorkflowBlock
    participant ReactFlow

    User->>Chat: Opens chat window
    Chat->>ChatStore: calculateDefaultPosition()
    ChatStore-->>Chat: Position (top-right, 32px offset)
    Chat->>Chat: Renders with border styling
    
    User->>OutputSelect: Clicks output selector
    OutputSelect->>Popover: Opens with align='end', maxHeight=140
    Popover-->>OutputSelect: Displays output options
    User->>OutputSelect: Selects output
    OutputSelect->>ChatStore: Updates selected outputs
    
    User->>Terminal: Views terminal
    Terminal->>Terminal: Uses DEFAULT_HEIGHT=196px
    Note over Terminal: Height matches CSS variable
    
    User->>WorkflowBlock: Toggles horizontal handles
    WorkflowBlock->>WorkflowBlock: horizontalHandles changes
    WorkflowBlock->>ReactFlow: updateNodeInternals(id)
    ReactFlow-->>WorkflowBlock: Recalculates edge paths
    Note over WorkflowBlock,ReactFlow: Fixes edge rendering without dimension change

Loading

[greptile-apps]

_{9 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: editing globals.css violates project policy - terminal height styling should be moved to local terminal component file

Suggested change

	--terminal-height: 196px;
	--terminal-height: 145px;

Context Used: Context from dashboard - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/globals.css
Line: 14:14

Comment:
**logic:** editing `globals.css` violates project policy - terminal height styling should be moved to local terminal component file

```suggestion
  --terminal-height: 145px;
```

**Context Used:** Context from `dashboard` - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... ([source](https://app.greptile.com/review/custom-context?memory=c3b5e4b0-6580-4307-83aa-ba28f105b3c4))

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