UI Onboarding V2

[mrzmyr]

Main user journey when adding a source:

• Add URL on sources page
• Auto detect type
• Add Credentials (e.g. user authenticates)
• Optional: Change Permissions (e.g. using the policy manager to set read / write controls)

Components

Card Stack Entry

• There are two form types in card stack:

full-width: shows title, subtitle in one line; field is below

right slot: show title, subtitle below each other; field is in right slot

Secret Dropdown

• Uses native shadcn select
• Secret dropdown has always a "Add secret…" entry at the top of the list which opens a modal (this replaces the current inline secret creation)

Headers Panel

• Uses Card Stack + Card Stack header
• Right slot is "+" ghost icon button
• Card Stack List item shows key, value, type, delete button
  • depending on type (text or secret), value is free text or a secret dropdown

Authorization Panel

- A component that provides authorization presets
- Supported presets
	- No Auth
	- Basic Auth: key, value (secret dropdown)
	- API Key: key, value (secret dropdown), type (header, query parameter)
	- Bearer Token: fields token (secret dropdown)
	- OAuth 2.0: shows "Sign in" button using the config from open api spec
- Uses Card Stack with Card Stack header
- Uses a sidebar with vertical shadcn ui tabs
- Uses content on the right of the sidebar to show selected method

Source Header

• shows favicon (extracted via google api from the base url via openapi, mcp or graphql)
• title
• version

Source Operations
- Uses Card Stack list + header
- Right slot of header is search
- http methods is mono font on the left and POST blue 400, PUT / PATCH yellow 600, GET green 400, DELETE red 400
- right slot of each operations shows shadcn ui tabs read, write, deny

Source Settings

• see below settings per source type

Source Add / Edit page per Sources Type

OpenAPI

• Breadcrumb ("Sources → Add OpenAPI")
• Source Header

Tabs:

• Settings
• Operations (see "Source Operations")

Settings:
URL, Name, Namespace are in one card stack

• Name: right slot form field

• Namespace: right slot form field

• URL: full-width form field

• Authorization

• Headers

MCP

• Breadcrumb ("Sources → Add MCP")

Tabs:

• Settings
• Tools (see "Source Operations", this tab is disabled as long as we do not know the tools e.g. Standard I/O not configured or Remote HTTP not fetched yet)

Name, Namespace are in one card stack

Settings:

• Name: right slot form field
• Namespace: right slot form field

depending on the transport (but its one card stack):

Remote HTTP

• Transport: Remote HTTP, Standard I/O
• URL: full-width form field
• Authorization

Standard I/O

• Transport: Remote HTTP, Standard I/O
• Command: mono font, full-width form field
• Arguments: mono font, full-width form field
• Environment Variables: mono font, full-width form field with textarea (default rows 3)

GraphQL

• Breadcrumb ("Sources → Add GraphQL")
• Source Header

Tabs:

• Settings
• Operations (see "Source Operations")

Settings:

• Name: right slot form field
• Namespace: right slot form field
• URL: full-width form field
• Authorization
• Headers

Google Discovery

• Breadcrumb ("Sources → Add Google Service")

Tabs:

• Settings
• Operations (see "Source Operations", also show scopes on top of it)

Settings:

• Name: right slot form field
• Namespace: right slot form field
• URL: full-width form field (prev. Discovery URL)
• Authorization: disable all other vertical tabs and keep OAuth 2.0 selected