Skip to content

Add reject feedback to permission UI #499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pascalandr merged 6 commits into from
May 25, 2026
Merged

Add reject feedback to permission UI #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89d144d
Release v0.15.0 - Git operations, Remote servers with self signed, Ma…
shantur May 3, 2026
3f93309
Release v0.16.0 - Web previews with direct page feedback, repository …
shantur May 14, 2026
45d71a6
Fix issue #496: collect permission reject reason
OfflinePing May 23, 2026
c9ff27c
fix(ui): harden permission reject feedback
OfflinePing May 23, 2026
16cb45f
fix(ui): disable permission shortcuts during reject
OfflinePing May 23, 2026
1629047
Merge branch 'dev' into pr/496-reject-reason-ui-clean
pascalandr May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 87 additions & 28 deletions packages/ui/src/components/permission-approval-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
} from "../stores/instances"
import { ensureSessionParentExpanded, loadMessages, sessions as sessionStateSessions, setActiveSessionFromList } from "../stores/sessions"
import { messageStoreBus } from "../stores/message-v2/bus"
import { PERMISSION_REJECT_REASON_MAX_LENGTH } from "./tool-call/permission-constants"

const LazyToolCall = lazy(() => import("./tool-call"))

Expand Down Expand Up @@ -136,6 +137,8 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
const [loadingSession, setLoadingSession] = createSignal<string | null>(null)
const [permissionSubmitting, setPermissionSubmitting] = createSignal<Set<string>>(new Set())
const [permissionError, setPermissionError] = createSignal<Map<string, string>>(new Map())
const [rejectingPermissionId, setRejectingPermissionId] = createSignal<string | null>(null)
const [rejectReason, setRejectReason] = createSignal("")

const setPermissionBusy = (permissionId: string, busy: boolean) => {
setPermissionSubmitting((prev) => {
Expand All @@ -155,7 +158,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
})
}

async function handlePermissionDecision(permission: PermissionRequestLike, response: "once" | "always" | "reject") {
async function handlePermissionDecision(permission: PermissionRequestLike, response: "once" | "always" | "reject", message?: string) {
const permissionId = permission?.id
if (!permissionId) return

Expand All @@ -166,7 +169,11 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)

try {
const sessionId = getPermissionSessionId(permission) || ""
await sendPermissionResponse(props.instanceId, sessionId, permissionId, response)
await sendPermissionResponse(props.instanceId, sessionId, permissionId, response, message)
if (rejectingPermissionId() === permissionId) {
setRejectingPermissionId(null)
setRejectReason("")
}
} catch (error) {
setPermissionItemError(
permissionId,
Expand Down Expand Up @@ -370,34 +377,86 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
<code>{primaryTitle()}</code>
</div>
<Show when={item.kind === "permission"}>
<div class="tool-call-permission-actions">
<div class="tool-call-permission-buttons">
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "once")}
>
{t("permissionApproval.actions.allowOnce")}
</button>
<button
type="button"
class="tool-call-permission-button"
<Show
when={rejectingPermissionId() === item.id}
fallback={
<div class="tool-call-permission-actions">
<div class="tool-call-permission-buttons">
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "once")}
>
{t("permissionApproval.actions.allowOnce")}
</button>
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "always")}
>
{t("permissionApproval.actions.alwaysAllow")}
</button>
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() => {
setRejectingPermissionId(item.id)
setRejectReason("")
}}
>
{t("permissionApproval.actions.deny")}
</button>
</div>
</div>
}
>
<div class="tool-call-permission-reject-reason">
<label class="tool-call-permission-reject-label" for={`permission-center-reject-reason-${item.id}`}>
{t("permissionApproval.rejectReason.label")}
</label>
<textarea
id={`permission-center-reject-reason-${item.id}`}
class="tool-call-permission-reject-textarea"
value={rejectReason()}
rows={3}
maxLength={PERMISSION_REJECT_REASON_MAX_LENGTH}
placeholder={t("permissionApproval.rejectReason.placeholder")}
disabled={permissionSubmitting().has(item.id)}
onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "always")}
>
{t("permissionApproval.actions.alwaysAllow")}
</button>
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "reject")}
>
{t("permissionApproval.actions.deny")}
</button>
onInput={(event) => setRejectReason(event.currentTarget.value)}
/>
<p class="tool-call-permission-reject-hint">{t("permissionApproval.rejectReason.hint")}</p>
<div class="tool-call-permission-buttons">
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() =>
void handlePermissionDecision(
item.payload as PermissionRequestLike,
"reject",
rejectReason().trim() || undefined,
)
}
>
{t("permissionApproval.actions.confirmDeny")}
</button>
<button
type="button"
class="tool-call-permission-button"
disabled={permissionSubmitting().has(item.id)}
onClick={() => {
setRejectingPermissionId(null)
setRejectReason("")
}}
>
{t("permissionApproval.actions.cancel")}
</button>
</div>
</div>
</div>
</Show>
<Show when={permissionError().get(item.id)}>
{(err) => <div class="tool-call-permission-error">{err()}</div>}
</Show>
Expand Down
13 changes: 7 additions & 6 deletions packages/ui/src/components/tool-call.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ function ToolCallDetails(props: {

const [permissionSubmitting, setPermissionSubmitting] = createSignal(false)
const [permissionError, setPermissionError] = createSignal<string | null>(null)
const [permissionRejectReasonOpen, setPermissionRejectReasonOpen] = createSignal(false)

const followScroll = createFollowScroll({
getScrollTopSnapshot: props.scrollTopSnapshot,
Expand Down Expand Up @@ -225,13 +226,13 @@ function ToolCallDetails(props: {
})
})

async function handlePermissionResponse(permission: PermissionRequestLike, response: "once" | "always" | "reject") {
async function handlePermissionResponse(permission: PermissionRequestLike, response: "once" | "always" | "reject", message?: string) {
if (!permission) return
setPermissionSubmitting(true)
setPermissionError(null)
try {
const sessionId = getPermissionSessionId(permission) || props.sessionId
await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
await sendPermissionResponse(props.instanceId, sessionId, permission.id, response, message)
} catch (error) {
log.error("Failed to send permission response", error)
setPermissionError(error instanceof Error ? error.message : props.t("toolCall.permission.errors.unableToUpdate"))
Expand All @@ -244,6 +245,8 @@ function ToolCallDetails(props: {
const activeKey = activePermissionKey()
if (!activeKey) return
const handler = (event: KeyboardEvent) => {
if (isTextInputFocused()) return
if (permissionRejectReasonOpen()) return
const permission = permissionDetails()
if (!permission || !props.isPermissionActive()) return
if (event.key === "Enter") {
Expand All @@ -252,9 +255,6 @@ function ToolCallDetails(props: {
} else if (event.key === "a" || event.key === "A") {
event.preventDefault()
void handlePermissionResponse(permission, "always")
} else if (event.key === "d" || event.key === "D") {
event.preventDefault()
void handlePermissionResponse(permission, "reject")
}
}
document.addEventListener("keydown", handler)
Expand Down Expand Up @@ -483,7 +483,8 @@ function ToolCallDetails(props: {
error={permissionError}
renderDiff={renderDiffContent}
fallbackSessionId={() => props.sessionId}
onRespond={(permission, sessionId, response) => void handlePermissionResponse(permission, response)}
onRejectReasonOpenChange={setPermissionRejectReasonOpen}
onRespond={(permission, sessionId, response, message) => void handlePermissionResponse(permission, response, message)}
/>
)

Expand Down
Loading
Loading