mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-14 16:07:52 +00:00
NealimeKennaandNealimeKenna
2d34bc956d
The native Claude Code provider turned each AskUserQuestion question into a permission request with only the option labels, shown in the permission banner. Descriptions, headers, previews and multi-select were lost, and the only way to give another answer was Skip, which tells Claude the user didn't answer. All questions now go out in one request carrying the full tool input, and the conversation shows them as a card above the composer: each option with its description, radio buttons or checkboxes for multi-select, an Other choice with a text field, the option's preview beside the options on a wide card (below them on a narrow one, sized to the tallest preview so hovering never moves the options), number keys to pick, Esc to skip, and one Submit for every answer. Ordinary permission requests keep the banner, and Skip answers as before. The answers go back in Claude Code's own format: question text to answer, multi-select picks and Other text comma-joined, with an item that contains the separator or a quote JSON-quoted so it reads back as one item. Closes #1628 Co-authored-by: NealimeKenna <22195793+NealimeKenna@users.noreply.github.com>
151 lines
3.0 KiB
CSS
151 lines
3.0 KiB
CSS
.row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--fg-strong);
|
|
cursor: default;
|
|
}
|
|
.disabled {
|
|
color: var(--fg-faint);
|
|
}
|
|
.label {
|
|
min-width: 0;
|
|
}
|
|
/* Checkbox icon: 16px box, rx 2.5 + 0.5 stroke, white check on the brand blue; 2px focus ring with 1px gap. */
|
|
.boxWrap {
|
|
position: relative;
|
|
flex: none;
|
|
display: inline-flex;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.native {
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: default;
|
|
}
|
|
.box {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 3px;
|
|
background: var(--bg-checkbox, var(--bg-button));
|
|
box-shadow: inset 0 0 0 1px var(--border-checkbox, var(--control-off));
|
|
color: var(--fg-button-primary);
|
|
transition:
|
|
background var(--dur-fast) var(--ease),
|
|
box-shadow var(--dur-fast) var(--ease);
|
|
pointer-events: none;
|
|
}
|
|
.on {
|
|
background: var(--bg-button-primary);
|
|
box-shadow: none;
|
|
}
|
|
.box {
|
|
/* Icons default to the grey --fg-icon; the check mark follows the box's text colour. */
|
|
--icon-color: currentColor;
|
|
}
|
|
.disabled .box {
|
|
background: transparent;
|
|
box-shadow: inset 0 0 0 1px var(--border);
|
|
color: var(--fg-faint);
|
|
}
|
|
.disabled .on {
|
|
background: var(--border);
|
|
}
|
|
.radio {
|
|
border-radius: 50%;
|
|
}
|
|
.radio.on::after {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
.native:focus-visible + .box {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* OnOff button (ToggleButton.*): "ON" on green with the knob right, "OFF" on grey with the knob left. */
|
|
.switch {
|
|
position: relative;
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 42px;
|
|
height: 18px;
|
|
padding: 0;
|
|
border-radius: 3px;
|
|
background: var(--bg-toggle-off, var(--bg-elev));
|
|
box-shadow: inset 0 0 0 1px var(--border-toggle, var(--control-off));
|
|
color: var(--fg-toggle-off, var(--fg-muted));
|
|
font-size: var(--fs-tiny);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
transition:
|
|
background var(--dur) var(--ease),
|
|
color var(--dur) var(--ease);
|
|
}
|
|
.switchOn {
|
|
background: var(--bg-toggle-on, var(--success));
|
|
box-shadow: none;
|
|
color: var(--fg-toggle-on, var(--fg-on-accent));
|
|
}
|
|
.knobLabel {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
right: 0;
|
|
pointer-events: none;
|
|
}
|
|
.switchOn .knobLabel {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
.knob {
|
|
position: absolute;
|
|
top: 1px;
|
|
bottom: 1px;
|
|
left: 1px;
|
|
width: 16px;
|
|
border-radius: 2px;
|
|
background: var(--bg-toggle-knob, var(--control-off));
|
|
transition: transform var(--dur) var(--ease);
|
|
}
|
|
.switchOn .knob {
|
|
transform: translateX(24px);
|
|
}
|
|
.switch:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 1px;
|
|
}
|
|
.switch:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.box,
|
|
.knob,
|
|
.switch {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.box,
|
|
.switch {
|
|
border: 1px solid ButtonText;
|
|
}
|
|
}
|