improvement(credentials): ui

[emir-karabeg]

Summary

Improves credentials UI.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

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.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Feb 24, 2026 10:42pm

[emir-karabeg]

@greptile

[greptile-apps]

Greptile Summary

This PR renames user-facing terminology across the settings UI — "Credentials" becomes "Secrets", "API Keys" becomes "Sim Keys" — and significantly overhauls the credentials manager layout from a two-pane split view to a list/detail navigation pattern.

• Terminology rebrand: All user-facing strings updated from "API key(s)" → "Sim key(s)" and "Credential(s)" → "Secret(s)" across api-keys, create-api-key-modal, credentials-manager, and settings-modal
• Credentials manager layout overhaul: Replaced side-by-side list+detail pane with a full-width list view that navigates to a detail view on selection, using early return rendering pattern
• Delete flow unified: Both list view and detail view now use a shared handleDeleteClick → handleConfirmDelete flow with a confirmation dialog, consolidating the previously separate handleDeleteCredential and handleDisconnectSelectedCredential functions
• Bulk secrets input redesign: Replaced freeform textarea for bulk .env import with structured editable key/value rows; paste detection on the single-input key field auto-switches to bulk mode
• New TerminalWindow icon: Added to the emcn icon library for the "Sim Keys" nav item; credentials nav now uses the Key icon instead of Connections
• Default create type changed: Create modal now defaults to "Secret" instead of "OAuth Account", with the options reordered accordingly

Confidence Score: 4/5

• This PR is safe to merge — it's primarily a UI/UX refactor with no backend or data model changes.
• The changes are entirely client-side UI: terminology updates, layout restructuring, and icon changes. The consolidated delete handler preserves the same underlying mutation calls. One minor gap is that delete errors aren't surfaced to the user, but this isn't a regression. No logic, security, or data integrity risks.
• credentials-manager.tsx is the main file to review given the substantial layout and logic refactoring.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx	Major UI overhaul: replaces two-pane layout with list/detail view, adds delete confirmation dialog, revamps bulk secret input from textarea to editable rows, renames "Credential" to "Secret" across the UI. Delete error handling could be improved.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx	Navigation label updates: "Credentials" renamed to "Secrets" with Key icon, "API Keys" renamed to "Sim Keys" with new TerminalWindow icon, Connections icon import removed.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx	Text-only changes: all instances of "API key(s)" renamed to "Sim key(s)" in search placeholder, empty states, error messages, and dialog headers.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx	Text-only changes: all user-facing "API key" strings renamed to "Sim key" in modal headers, labels, error messages, and instructions.
apps/sim/components/emcn/icons/terminal-window.tsx	New SVG icon component following existing emcn icon patterns with proper TypeScript typing and currentColor fills.
apps/sim/components/emcn/icons/index.ts	Barrel export updated to include the new TerminalWindow icon, inserted alphabetically.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[CredentialsManager] --> B{selectedCredential?}
    B -->|Yes| C[Detail View]
    B -->|No| D[List View]

    D --> E[Search Bar + Add Button]
    D --> F[Credential List]
    F --> G[Details Button]
    F --> H[Delete Button]
    G --> |handleSelectCredential| C
    H --> |handleDeleteClick| I[Delete Confirm Dialog]

    C --> J[Type / Display Name / Description]
    C --> K[Members Management]
    C --> L[Action Bar]
    L --> M[Back Button]
    L --> N[Reconnect / Promote / Share]
    L --> O[Delete Button]
    L --> P[Save Button]
    O --> |handleDeleteClick| I

    I --> |handleConfirmDelete| Q{OAuth?}
    Q -->|Yes| R[disconnectOAuthService]
    Q -->|No| S[deleteCredential]
    R --> T[refetchCredentials + dispatch event]
    S --> U[Auto-invalidates via React Query]

    D --> V[Create Modal]
    V --> W{Type?}
    W -->|Secret| X[Single / Bulk Input]
    W -->|OAuth| Y[OAuth Connect Flow]

Loading

_{Last reviewed commit: 6651be7}

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on March 3

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[emir-karabeg]

@greptile

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[emir-karabeg]

@greptile

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

icon property added but not fully utilized - only used in overlayContent on line 315-330, not rendered in the dropdown list itself

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

[emir-karabeg]

@greptile

[emir-karabeg]

@cursor run

[cursor]

I've addressed the PR review issues identified by the reviewers.

Changes made:

• Fixed the high severity issue: OAuth deletion now shows a user-friendly error message when accountId or providerId is missing, instead of silently failing
• Added deleteError state to track and display deletion errors in the confirmation dialog
• The confirmation dialog now stays open when deletion fails, allowing the user to see the error and retry or cancel
• Added loading state to the delete button during deletion to prevent double-clicks
• Error messages are displayed with proper styling consistent with other error displays in the component

Regarding the other issues mentioned:

• The "delete button bypasses confirmation in detail view" issue was already fixed in the current code - the detail view delete button at line 1752 correctly uses handleDeleteClick(selectedCredential) which triggers the confirmation dialog
• The icon in the OAuth dropdown options is already being rendered correctly by the Combobox component (the icon property is supported and rendered in dropdown options per lines 731-773 of the Combobox component)

  

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}