fix(copilot): ui/ux by emir-karabeg · Pull Request #2891 · simstudioai/sim

emir-karabeg · 2026-01-19T22:45:20Z

Summary

Added claude rules
Copilot: loading, options, refactors, thinking, tool calls, etc.

Type of Change

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 · 2026-01-19T22:45:25Z

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

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 20, 2026 7:25am

greptile-apps · 2026-01-19T22:52:38Z

Greptile Summary

Comprehensive refactoring of the Copilot component with improved streaming, tool calls, and user experience features including better loading states, enhanced option handling, and extracted specialized components
Addition of Claude AI rules documentation standardizing TypeScript, styling, architecture, testing, and integration patterns across the codebase
Significant component organization improvements with proper barrel exports, extracted utility functions, and separation of concerns following established architectural patterns

Important Files Changed

Filename	Overview
`apps/sim/stores/panel/copilot/store.ts`	Major refactor converting simple store to comprehensive streaming-capable message system with SSE parsing, tool call management, and message persistence
`apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx`	Significant refactoring of main Copilot component with improved state management, loading initialization, and extracted specialized components
`apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx`	Major refactoring extracting bottom controls, improving mention highlighting, and enhancing type safety with proper utility function extraction
`apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx`	Substantial improvements with extracted checkpoint confirmation UI, better streaming detection, and enhanced mention highlighting
`apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx`	Enhanced special tag parsing with fallback handling for malformed JSON during streaming and improved conditional rendering

Confidence score: 3/5

This PR contains substantial architectural changes to core copilot functionality that require careful review due to complexity and potential streaming edge cases
Score reflects concerns with store complexity, potential memory leaks in streaming logic, and missing error handling in some async operations particularly in SSE parsing
Pay close attention to the copilot store refactoring, streaming logic in tool-call component, and message serialization patterns for potential race conditions

Sequence Diagram

sequenceDiagram
    participant User
    participant UserInput
    participant CopilotStore
    participant API
    participant StreamParser
    participant CopilotMessage

    User->>UserInput: "Types message and clicks send"
    UserInput->>CopilotStore: "sendMessage(message, options)"
    CopilotStore->>CopilotStore: "createUserMessage()"
    CopilotStore->>CopilotStore: "createStreamingMessage()"
    CopilotStore->>CopilotStore: "buildCheckpointWorkflowState()"
    CopilotStore->>API: "sendStreamingMessage()"
    API-->>CopilotStore: "ReadableStream"
    CopilotStore->>StreamParser: "parseSSEStream()"
    loop For each SSE event
        StreamParser-->>CopilotStore: "SSE event data"
        alt Event: content
            CopilotStore->>CopilotStore: "appendTextBlock()"
        else Event: tool_call
            CopilotStore->>CopilotStore: "upsertToolCallBlock()"
            CopilotStore->>CopilotStore: "ensureClientToolInstance()"
        else Event: tool_result
            CopilotStore->>CopilotStore: "setToolCallState()"
        else Event: reasoning
            CopilotStore->>CopilotStore: "appendThinkingContent()"
        end
        CopilotStore->>CopilotStore: "updateStreamingMessage()"
    end
    CopilotStore->>CopilotStore: "finalizeMessage()"
    CopilotStore->>API: "POST /api/copilot/chat/update-messages"
    CopilotStore->>CopilotMessage: "Update messages state"
    CopilotMessage-->>User: "Display response"

emir-karabeg · 2026-01-20T03:02:21Z

@greptile

emir-karabeg · 2026-01-20T05:01:18Z

@greptile

greptile-apps

Additional Comments (3)

apps/sim/lib/copilot/tools/client/other/search-documentation.ts, line 71-73 (link)

style: Duplicate setState(ClientToolCallState.success) call

_{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!}
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/hooks/use-copilot-initialization.ts, line 15 (link)

style: The any type should be replaced with a proper type definition

Context Used: Context from dashboard - TypeScript conventions and type safety (source)
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/hooks/use-chat-history.ts, line 9 (link)

style: Type should be properly typed instead of any[] for better type safety

_{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!}

_{74 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-01-20T05:11:26Z

.claude/rules/global.md

+# Global Standards
+
+## Logging
+Import `createLogger` from `sim/logger`. Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`.


style: Import path should use @sim/logger to match existing convention based on the context provided

Suggested change

Import `createLogger` from `sim/logger`. Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`.

Import `createLogger` from `@sim/logger`. Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`.

_{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: .claude/rules/global.md Line: 4:4 Comment: **style:** Import path should use `@sim/logger` to match existing convention based on the context provided ```suggestion Import `createLogger` from `@sim/logger`. Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`. ``` <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.

greptile-apps · 2026-01-20T05:11:38Z

...nents/panel/components/copilot/components/copilot-message/hooks/use-checkpoint-management.ts

      pendingEditRef.current = null
    }
-  }, [message, messages, onEditModeChange, onCancelEdit])
+  }, [message, messages])


logic: Dependency array is incomplete - missing onEditModeChange and onCancelEdit that are used in the callback

Suggested change

}, [message, messages])

}, [message, messages, onEditModeChange, onCancelEdit])

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/copilot/components/copilot-message/hooks/use-checkpoint-management.ts Line: 214:214 Comment: **logic:** Dependency array is incomplete - missing `onEditModeChange` and `onCancelEdit` that are used in the callback ```suggestion }, [message, messages, onEditModeChange, onCancelEdit]) ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-01-20T05:11:45Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx

      showGutter
      language={language}
-      className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)]'
+      className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'


style: Redundant dark mode styling - both light and dark mode are set to the same CSS variable

Suggested change

className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'

className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)]'

_{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/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx Line: 262:262 Comment: **style:** Redundant dark mode styling - both light and dark mode are set to the same CSS variable ```suggestion className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)]' ``` <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.

vercel bot temporarily deployed to Preview January 20, 2026 03:02 Inactive

emir-karabeg added 6 commits January 19, 2026 19:02

feat(claude): added rules

93955ff

fix(copilot): chat loading; refactor(copilot): components, utils, hooks

842d37c

fix(copilot): options selection strikethrough

ba9fc33

fix(copilot): options render inside thinking

ec27e4a

fix(copilot): checkpoints, user-input; improvement(code): colors

81059dc

fix(copilot): scrolling, tool-call truncation, thinking ui

003f52d

emir-karabeg force-pushed the fix/copilot branch from 275d1d4 to 003f52d Compare January 20, 2026 04:27

emir-karabeg changed the title ~~fix(copilot): loading and options~~ fix(copilot): ui/ux Jan 20, 2026

vercel bot deployed to Preview January 20, 2026 04:29 View deployment

fix(copilot): tool call spacing and shimmer/actions on previous messages

c0d79b1

vercel bot temporarily deployed to Preview January 20, 2026 04:45 Inactive

improvement(copilot): queue

e4f7821

vercel bot temporarily deployed to Preview January 20, 2026 05:00 Inactive

greptile-apps bot reviewed Jan 20, 2026

View reviewed changes

addressed comments

779eaf0

emir-karabeg merged commit 2daf343 into staging Jan 20, 2026
4 checks passed

emir-karabeg deleted the fix/copilot branch January 20, 2026 07:23

vercel bot deployed to Preview January 20, 2026 07:25 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(copilot): ui/ux#2891

fix(copilot): ui/ux#2891
emir-karabeg merged 9 commits intostagingfrom
fix/copilot

emir-karabeg commented Jan 19, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 19, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Jan 19, 2026 •

edited

Loading

Uh oh!

emir-karabeg commented Jan 20, 2026

Uh oh!

emir-karabeg commented Jan 20, 2026

Uh oh!

greptile-apps bot left a comment •

edited

Loading

Uh oh!

greptile-apps bot Jan 20, 2026

Uh oh!

greptile-apps bot Jan 20, 2026

Uh oh!

greptile-apps bot Jan 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	Import `createLogger` from `sim/logger`. Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`.
	Import `createLogger` from `@sim/logger`. Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`.

	}, [message, messages])
	}, [message, messages, onEditModeChange, onCancelEdit])

	className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'
	className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)]'

Conversation

emir-karabeg commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Important Files Changed

Confidence score: 3/5

Sequence Diagram

Uh oh!

emir-karabeg commented Jan 20, 2026

Uh oh!

emir-karabeg commented Jan 20, 2026

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (3)

Uh oh!

greptile-apps bot Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

emir-karabeg commented Jan 19, 2026 •

edited

Loading

vercel bot commented Jan 19, 2026 •

edited

Loading

greptile-apps bot commented Jan 19, 2026 •

edited

Loading

greptile-apps bot left a comment •

edited

Loading