fix: modals, settings, panel

[emir-karabeg]

Summary

Fixed settings modal UI and logic, panel, and some modals.

Type of Change

• Bug fix
• New feature

Testing

Solo.

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			Dec 4, 2025 8:01pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR improves the settings modal UI/UX, fixes panel behavior, and updates various modal components. The main changes include adding an MCP server detail view with navigation, fixing SSO tab visibility logic for self-hosted environments, improving the name editing input auto-sizing, removing unwanted automatic focus/tab-switching behavior in the panel, and updating styling consistency across skeleton loaders and modal components.

Key changes:

• Added MCP server detail view with proper state management and navigation between list and detail views
• Fixed SSO tab visibility to properly handle self-hosted environments with NEXT_PUBLIC_SSO_ENABLED environment variable check
• Improved settings modal name input with invisible span technique for better auto-sizing
• Removed automatic Copilot focus and toolbar tab switching behavior that was interfering with user workflow
• Updated OAuth modal to use new ModalBody component with improved spacing
• Fixed API endpoint from /api/creator-profiles to /api/creators in template deploy
• Replaced Input component with native input for better styling control in tag inputs
• Updated skeleton loader heights and styling for visual consistency
• Fixed React prop names in SVG (stop-color to stopColor)

Issues found:

• Removed min-h-9 from email tag container could cause collapse when empty
• Input uses text-foreground instead of CSS variable pattern text-[var(--text-primary)]

Confidence Score: 4/5

• Safe to merge with minor issues that should be addressed
• The PR contains well-structured bug fixes and UI improvements with proper state management. Two minor issues were found: a removed min-height that could cause UI collapse and inconsistent CSS variable usage. These are non-critical styling issues but should be fixed for consistency. The logic changes (SSO visibility, panel behavior) are well-implemented and safe.
• Pay attention to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx - needs min-h-9 restored and CSS variable consistency fix

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx	4/5	Added MCP server detail view with navigation, including proper TypeScript interfaces and callback handlers
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx	5/5	Fixed SSO tab visibility logic for self-hosted environments and improved filter conditions with proper environment variable check
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx	5/5	Improved name editing input with better auto-sizing using invisible span technique and updated text colors to use tertiary variant
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx	5/5	Removed automatic Copilot input focus behavior when switching tabs
apps/sim/stores/panel/editor/store.ts	5/5	Removed automatic tab switching to toolbar when clearing block selection
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx	5/5	Replaced Input component with native input element for better styling control in tag input
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx	4/5	Fixed API endpoint from /api/creator-profiles to /api/creators and updated button styling and text references

Sequence Diagram

sequenceDiagram
    participant User
    participant SettingsModal
    participant MCPComponent
    participant ServerListItem
    participant MCPDetailView
    participant API

    Note over User,API: MCP Server Detail View Flow
    User->>SettingsModal: Open Settings Modal
    SettingsModal->>MCPComponent: Render MCP tab
    MCPComponent->>API: Fetch MCP servers
    API-->>MCPComponent: Return servers list
    MCPComponent->>ServerListItem: Render server list items
    User->>ServerListItem: Click "Details" button
    ServerListItem->>MCPComponent: Call onViewDetails(serverId)
    MCPComponent->>MCPComponent: Set selectedServerId state
    MCPComponent->>MCPDetailView: Render detail view (server info + tools)
    User->>MCPDetailView: Review server details
    User->>MCPDetailView: Click "Back" button
    MCPDetailView->>MCPComponent: Call handleBackToList()
    MCPComponent->>MCPComponent: Clear selectedServerId
    MCPComponent->>ServerListItem: Render server list again

    Note over User,API: Chat Popover Menu Flow
    User->>ChatComponent: Click more menu button
    ChatComponent->>ChatComponent: Set moreMenuOpen(true)
    ChatComponent->>User: Show popover menu
    User->>ChatComponent: Click "Export CSV" or "Clear Chat"
    ChatComponent->>ChatComponent: Execute action
    ChatComponent->>ChatComponent: Set moreMenuOpen(false)
    ChatComponent->>User: Close popover menu

    Note over User,SettingsModal: SSO Tab Visibility Logic
    User->>SettingsModal: Open settings modal
    SettingsModal->>SettingsModal: Check environment (hosted/self-hosted)
    alt Self-hosted environment
        SettingsModal->>SettingsModal: Check isSSOEnabled env var
        alt SSO enabled
            SettingsModal->>SettingsModal: Check if providers exist
            SettingsModal->>User: Show SSO tab (if no providers or is provider owner)
        else SSO not enabled
            SettingsModal->>User: Hide SSO tab
        end
    else Hosted environment
        SettingsModal->>SettingsModal: Check org + plan + permissions
        SettingsModal->>User: Show/hide SSO tab accordingly
    end

Loading

[greptile-apps]

_{20 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: min-h-9 removed - container might collapse when empty

Suggested change

	<div className='scrollbar-hide flex max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
	<div className='scrollbar-hide flex min-h-9 max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-9)]'>

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
Line: 783:783

Comment:
**logic:** `min-h-9` removed - container might collapse when empty

```suggestion
          <div className='scrollbar-hide flex min-h-9 max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
```

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

[greptile-apps]

style: text-foreground doesn't follow codebase CSS variable pattern - should use text-[var(--text-primary)]

Suggested change

	className='min-w-[180px] flex-1 border-none bg-transparent p-0 font-medium font-sans text-foreground text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
	className='min-w-[180px] flex-1 border-none bg-transparent p-0 font-medium font-sans text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
Line: 813:813

Comment:
**style:** `text-foreground` doesn't follow codebase CSS variable pattern - should use `text-[var(--text-primary)]`

```suggestion
              className='min-w-[180px] flex-1 border-none bg-transparent p-0 font-medium font-sans text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
```

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