fix: inline pills

This commit is contained in:
David Kaya
2026-03-25 21:40:40 +01:00
parent 29c054f47d
commit 7957928fc7
2 changed files with 53 additions and 31 deletions
+51 -29
View File
@@ -336,40 +336,62 @@ export function ChatPane({
</div> </div>
)} )}
{/* Scratchpad config pills — inline above composer */} {/* Scratchpad pills — tools/approval left, model/reasoning right */}
{isScratchpad && primaryAgent && ( {isScratchpad && (
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<InlineModelPill {hasConfigurableTools && onUpdateSessionTooling && (
disabled={isComposerDisabled} <InlineToolsPill
models={availableModels} disabled={isComposerDisabled}
onChange={(modelId) => { lspProfiles={lspProfiles}
const nextModel = findModel(modelId, availableModels); mcpServers={mcpServers}
void handleScratchpadConfigChange({ onToggle={onUpdateSessionTooling}
model: modelId, selection={toolSelection}
reasoningEffort: resolveReasoningEffort(nextModel, scratchpadReasoningEffort), />
}); )}
}} {hasToolCallApproval && onUpdateSessionApprovalSettings && approvalTools.length > 0 && (
value={primaryAgent.model} <InlineApprovalPill
/> approvalTools={approvalTools}
<InlineThinkingPill disabled={isComposerDisabled}
disabled={isComposerDisabled} effectiveAutoApproved={effectiveAutoApproved}
onChange={(reasoningEffort) => isOverridden={isApprovalOverridden}
void handleScratchpadConfigChange({ onUpdate={onUpdateSessionApprovalSettings}
model: primaryAgent.model, />
reasoningEffort, )}
}) {primaryAgent && (
} <div className="ml-auto flex items-center gap-2">
supportedEfforts={supportedEfforts} <InlineModelPill
value={scratchpadReasoningEffort} disabled={isComposerDisabled}
/> models={availableModels}
{isUpdatingScratchpadConfig && ( onChange={(modelId) => {
<Loader2 className="size-3 animate-spin text-zinc-500" /> const nextModel = findModel(modelId, availableModels);
void handleScratchpadConfigChange({
model: modelId,
reasoningEffort: resolveReasoningEffort(nextModel, scratchpadReasoningEffort),
});
}}
value={primaryAgent.model}
/>
<InlineThinkingPill
disabled={isComposerDisabled}
onChange={(reasoningEffort) =>
void handleScratchpadConfigChange({
model: primaryAgent.model,
reasoningEffort,
})
}
supportedEfforts={supportedEfforts}
value={scratchpadReasoningEffort}
/>
{isUpdatingScratchpadConfig && (
<Loader2 className="size-3 animate-spin text-zinc-500" />
)}
</div>
)} )}
</div> </div>
)} )}
{/* Session config pills — tool & approval controls */} {/* Session config pills — tool & approval controls (non-scratchpad) */}
{(hasConfigurableTools || hasToolCallApproval) && ( {!isScratchpad && (hasConfigurableTools || hasToolCallApproval) && (
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
{hasConfigurableTools && onUpdateSessionTooling && ( {hasConfigurableTools && onUpdateSessionTooling && (
<InlineToolsPill <InlineToolsPill
+2 -2
View File
@@ -78,7 +78,7 @@ export function InlineModelPill({
</button> </button>
{open && !disabled && ( {open && !disabled && (
<div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox"> <div className="absolute bottom-full right-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
{groupedModels.map((pg) => ( {groupedModels.map((pg) => (
<div key={pg.id}> <div key={pg.id}>
<div className="flex items-center gap-2 px-3 pb-1 pt-2.5"> <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
@@ -183,7 +183,7 @@ export function InlineThinkingPill({
</button> </button>
{open && !disabled && ( {open && !disabled && (
<div className="absolute bottom-full left-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox"> <div className="absolute bottom-full right-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
{options.map((option) => ( {options.map((option) => (
<button <button
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${ className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${