improvement: copilot, dimensions

[emir-karabeg]

Summary

Copilot ui/ux; refactor: store dimensions.

Type of Change

• New feature

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]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 30, 2025 4:37am

[greptile-apps]

Greptile Summary

This PR introduces two main improvements: a refactoring of dimension constants into a centralized location and UI/UX enhancements to the copilot interface.

Dimension Refactoring

• Created stores/constants.ts with centralized dimension constants for all layout elements (sidebar, panel, terminal, toolbar, editor)
• Refactored 8 store files and 2 resize hooks to use these centralized constants instead of local definitions
• Updated globals.css CSS variable defaults to match new constants (panel width changed from 260px to 290px, editor connections height from 200px to 172px)
• Added comprehensive documentation linking constants.ts, globals.css, and layout.tsx to prevent sync issues

Copilot UI/UX Improvements

• Updated mention highlights from purple (rgba(142,76,251,0.65)) to green (rgba(50,189,126,0.65)) with adjusted border radius
• Changed input/message background from surface-5 to surface-4 for better contrast
• Improved dark mode styling for buttons (stop/submit) with better color contrast
• Adjusted gradient fade opacity for better readability

Settings Modal Enhancement

• Replaced slider with combobox for snap-to-grid setting (better UX for discrete values)
• Reordered settings for improved layout flow
• Updated labels for clarity

Note: The globals.css file was edited, which goes against project guidelines that recommend avoiding global style changes.

Confidence Score: 4/5

• This PR is safe to merge with minor guideline deviation
• The refactoring is well-executed with proper synchronization between constants, CSS variables, and the blocking script. All dimension values are correctly updated across files. The copilot UI changes are purely cosmetic. The only concern is the globals.css edit which violates project guidelines, though the change is necessary for SSR hydration and well-documented.
• Pay attention to apps/sim/app/_styles/globals.css - violates guideline about avoiding global style edits

Important Files Changed

Filename	Overview
apps/sim/stores/constants.ts	Added centralized dimension constants for layout (sidebar, panel, terminal, toolbar, editor) with proper documentation
apps/sim/app/_styles/globals.css	Updated CSS variable defaults to match new constants; changed panel-width from 260px to 290px and editor-connections-height from 200px to 172px
apps/sim/app/layout.tsx	Updated blocking script to use new panel width constraint (290px) and added documentation about syncing with constants
apps/sim/stores/panel/store.ts	Refactored to use centralized PANEL_WIDTH constants, removing local MIN_PANEL_WIDTH definition
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx	Updated copilot UI: changed mention highlight color to green, updated surface color to surface-4, improved dark mode styling for buttons

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Layout
    participant CSS
    participant Store
    participant Component

    User->>Browser: Load workspace page
    Browser->>Layout: Execute blocking script
    Layout->>Layout: Read localStorage (sidebar/panel/terminal state)
    Layout->>CSS: Set CSS variables (--sidebar-width, --panel-width, etc)
    Note over Layout,CSS: Uses hardcoded constants (232px, 290px, 155px)
    Browser->>Component: React hydration starts
    Component->>Store: Initialize Zustand stores
    Store->>Store: Load persisted state from localStorage
    Note over Store: Uses SIDEBAR_WIDTH, PANEL_WIDTH, TERMINAL_HEIGHT from constants.ts
    Component->>CSS: Read CSS variables for initial render
    Note over Component,CSS: No layout shift - values already set
    User->>Component: Resize panel/sidebar/terminal
    Component->>Store: Update store state
    Store->>CSS: Update CSS variables dynamically
    Store->>Store: Persist to localStorage

Loading

[greptile-apps]

_{21 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Editing globals.css should be avoided per project guidelines. Consider moving these CSS variable definitions to a separate layout-specific CSS file or using CSS-in-JS within the layout component.

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

_{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/app/_styles/globals.css
Line: 12:18

Comment:
**style:** Editing `globals.css` should be avoided per project guidelines. Consider moving these CSS variable definitions to a separate layout-specific CSS file or using CSS-in-JS within the layout component.

**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))

<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.