[mrmm]

Iteration on top of #2656 (already merged into release/v3.8.3).

What changes

Refactors the provider Test slide-over for a chat-first experience.

Slide-over header now owns the toolbar

• Model picker, Key picker and Clear button move from inside the Test tab into a dedicated toolbar row between the slide-over header and the tab strip.
• The Test tab body becomes 100% chat: messages flex-1 + composer pinned at the bottom. Maximum real estate for the conversation, like Claude / ChatGPT playgrounds.

Tab strip simplified

• Drop Models and Keys tabs. Model selection lives in the toolbar; key management stays on the provider page.
• Tab strip is now Test + Logs only. Logs tab keeps its link-out to /dashboard/logs?connection=<id>.

Keep focus in the composer

• LlmChatCard now holds a textareaRef and refocuses it after each send completes, so users can keep typing without reaching for the mouse.
• It also autofocuses on mount when rendered in embedded mode (i.e. inside the slide-over).

LlmChatCard API surface

New optional props (all backwards-compatible with the existing inline mini-playground usage):

• hideToolbar — skip the default header controls so a parent can render its own.
• model / onModelChange — controlled model selection.
• selectedKey / onSelectedKeyChange — controlled key selection.
• onControlsChange — callback firing { clear, hasMessages, streaming } so a parent toolbar can drive Clear without breaking React Compiler strict (no refs in render).

Why

After #2656 landed, the inside-the-tab toolbar competed for vertical space with the chat content, and four tabs (Test / Models / Keys / Logs) felt heavier than needed for a quick-test surface. This iteration commits to a chat-first layout, removes redundant tabs (Models data is the picker; Keys is a provider-page concern), and fixes the focus-loss after sending which made keyboard-only usage clunky.

Verification

• npx eslint clean on both touched files.
• npx tsc --noEmit clean for the touched files.
• Manual test on http://localhost:20130/dashboard/providers: open any LLM provider's slide-over, switch models in the new toolbar, send a message, watch focus stay in the textarea so the next message can be typed immediately.

Refs

• feat(dashboard): add Cmd+K / Ctrl+K command palette for sidebar navigation #2656 — initial slide-over + Cmd+K work, already merged into release/v3.8.3 (d06d5aec1).

[kilo-code-bot]

Kilo Code Review could not run — your account is out of credits.

Add credits or switch to a free model to enable reviews on this change.

[gemini-code-assist]

Code Review

This pull request refactors the LlmChatCard and ProviderTestSlideOver components to support externalized controls and an integrated toolbar. Key changes include the introduction of a LlmChatControls interface, hybrid state management for model and key selection, and the removal of redundant tabs. Feedback identifies a bug in the hybrid state logic where internal updates are skipped if callbacks are provided, redundant API calls from duplicate hook usage, and hardcoded strings that require internationalization.

[gemini-code-assist]

The current implementation of the hybrid controlled/uncontrolled state for selectedKey and model has a bug. If a consumer provides the callback (e.g., onModelChange) but does not provide the value prop (e.g., model), the internal state will never update because the callback presence prevents setInternalModel from being called.

To support all usage patterns (fully controlled, fully uncontrolled, or callback-only), the internal state should be updated regardless of whether a callback is provided, while the prop should take precedence for the rendered value.

Suggested change

	const selectedKey = selectedKeyProp ?? internalSelectedKey;
	const setSelectedKey = useCallback(
	(k: string) => {
	if (onSelectedKeyChange) onSelectedKeyChange(k);
	else setInternalSelectedKey(k);
	},
	[onSelectedKeyChange]
	);
	const model = modelProp ?? internalModel;
	const setModel = useCallback(
	(m: string) => {
	if (onModelChange) onModelChange(m);
	else setInternalModel(m);
	},
	[onModelChange]
	);
	const selectedKey = selectedKeyProp !== undefined ? selectedKeyProp : internalSelectedKey;
	const setSelectedKey = useCallback(
	(k: string) => {
	setInternalSelectedKey(k);
	onSelectedKeyChange?.(k);
	},
	[onSelectedKeyChange]
	);
	const model = modelProp !== undefined ? modelProp : internalModel;
	const setModel = useCallback(
	(m: string) => {
	setInternalModel(m);
	onModelChange?.(m);
	},
	[onModelChange]
	);

[gemini-code-assist]

Both useApiKey and useProviderModels are called here and again inside the LlmChatCard component. Since these hooks perform network fetches on mount, this results in redundant API calls every time the slide-over is opened. Consider lifting the data fetching entirely to this parent component and passing the results down to LlmChatCard as props, or implementing a caching layer in the hooks.

[gemini-code-assist]

Several user-facing strings in the new TestToolbar are hardcoded. For consistency with the rest of the dashboard and to support internationalization, please use the useTranslations hook with the appropriate locale keys (e.g., from the miniPlayground namespace).

[gemini-code-assist]

The strings in the LogsTab component are hardcoded. Please refactor these to use the project's internationalization system.

[diegosouzapw]

Thanks @mrmm for this excellent polishing! Option A is indeed a much cleaner UX for the provider test slide-over. Consolidating the selects/buttons to a unified toolbar and keeping the Test tab 100% focused on chat, combined with tailing provider logs in the Logs tab and keeping composer focus, makes for a very premium experience. I've squashed and merged this, and it will be included in the v3.8.3 release. Great work!