improve delete worktree failure diagnostics (#302)
## Summary - move delete-worktree failures out of transient toast-only UX and keep them inline in the delete modal - add parsed diagnostics for common failure modes, including a short summary, likely cause, and suggested next step - make the raw error easier to review and share with raw and sanitized copy actions Closes #301. ## BEFORE: <img width="1127" height="860" alt="image" src="https://github.com/user-attachments/assets/dd09ba1e-be8c-450c-a1dd-f1cde2a48802" /> ## AFTER: <img width="1384" height="835" alt="image" src="https://github.com/user-attachments/assets/6b0d1459-21fa-4264-9e54-45540f584538" /> ## Problem Before this change, delete-worktree failures were difficult to work with: 1. The failure message was effectively raw backend or git output. 2. Users had to infer the meaning of the error themselves. 3. The UI did not explain what likely went wrong or what to do next. 4. Sharing the error for debugging was awkward when it included machine-local absolute paths. 5. The confirmation modal was not being used as the primary diagnostic surface for a destructive action that frequently fails for understandable reasons. This was especially frustrating for common cases such as: - modified or untracked files in the worktree - a process still using the worktree directory - permission errors on Windows - missing worktree directories or stale worktree records ## What changed ### Modal failure UX - keep delete failures inline inside `packages/ui/src/components/worktree-selector.tsx` - clear modal-local error state when opening or closing the dialog - keep the success toast on successful deletion, but use the modal itself for failure presentation ### Human-readable diagnostics - parse JSON-shaped backend error payloads such as `{"error":"..."}` before classification - classify common delete failure patterns into: - `localChanges` - `inUse` - `notFound` - `permissionDenied` - `unknown` - render three user-facing lines above the raw error: - summary - likely cause - suggested next step ### Copy flows - add `Copy error` for the original failure text - add `Copy sanitized` to redact common absolute path and username patterns before copying ### Modal content and sizing - present the target worktree in a simpler two-line summary block - update the delete description text to plain English: `Deletes this branch worktree and its local folder.` - size the delete modal deliberately for desktop use while allowing vertical expansion to the viewport limit before scrolling ### i18n coverage - add the new delete diagnostic strings across all currently supported locales touched by this area: - `en` - `es` - `fr` - `he` - `ja` - `ru` - `zh-Hans` ## Why this approach - It keeps the backend contract unchanged and solves the UX problem where it occurs. - It preserves access to the raw failure text instead of hiding implementation detail entirely. - It gives users immediate guidance without forcing them to translate git errors into next actions. - It improves bug reporting without requiring a separate logging or export workflow. ## Not included - server-side preflight guards that block delete when the worktree is still assigned or in use - process-aware worktree locking detection - automatic retry or force-delete-and-retry flows Those are useful follow-ups, but this PR is intentionally scoped to failure presentation and debuggability. ## Files changed - `packages/ui/src/components/worktree-selector.tsx` - `packages/ui/src/lib/i18n/messages/en/instance.ts` - `packages/ui/src/lib/i18n/messages/es/instance.ts` - `packages/ui/src/lib/i18n/messages/fr/instance.ts` - `packages/ui/src/lib/i18n/messages/he/instance.ts` - `packages/ui/src/lib/i18n/messages/ja/instance.ts` - `packages/ui/src/lib/i18n/messages/ru/instance.ts` - `packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts` ## Validation - `npm run typecheck --workspace @codenomad/ui` - `npm run build --workspace @codenomad/ui` - `npm run typecheck --workspace @neuralnomads/codenomad-electron-app` ## Notes for reviewers - The error classifier is intentionally heuristic and string-based. It is meant to improve the common cases without increasing backend coupling. - The sanitized copy flow is conservative and focused on path and username redaction, not full structured log scrubbing. --------- Co-authored-by: Shantur Rathore <i@shantur.com>
This commit is contained in:
VooDisss
@@ -26,6 +26,14 @@ type WorktreeOption =
|
||||
| { kind: "action"; key: "__create__"; label: string }
|
||||
| { kind: "worktree"; key: string; slug: string; directory: string; raw: WorktreeDescriptor }
|
||||
|
||||
type DeleteErrorKind = "localChanges" | "inUse" | "notFound" | "permissionDenied" | "unknown"
|
||||
|
||||
type DeleteErrorDetails = {
|
||||
summary: string
|
||||
causeLabel: string
|
||||
nextStep: string
|
||||
}
|
||||
|
||||
function preventSelectPress(event: PointerEvent | MouseEvent) {
|
||||
// Prevent Select.Item from treating this as a selection.
|
||||
// We intentionally prevent default to stop Kobalte's internal press handling.
|
||||
@@ -64,6 +72,57 @@ function relativePath(fromDir: string, toDir: string): string {
|
||||
return relParts.join("/") || "."
|
||||
}
|
||||
|
||||
function extractDeleteErrorMessage(input: string): string {
|
||||
const trimmed = (input ?? "").trim()
|
||||
if (!trimmed) return ""
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(trimmed) as { error?: unknown }
|
||||
if (typeof parsed?.error === "string" && parsed.error.trim()) {
|
||||
return parsed.error.trim()
|
||||
}
|
||||
} catch {
|
||||
// Fall back to the raw string when the backend returned plain text.
|
||||
}
|
||||
|
||||
return trimmed
|
||||
}
|
||||
|
||||
function classifyDeleteError(message: string): DeleteErrorKind {
|
||||
const normalized = message.toLowerCase()
|
||||
|
||||
if (
|
||||
normalized.includes("modified or untracked files") ||
|
||||
normalized.includes("contains modified") ||
|
||||
normalized.includes("contains untracked") ||
|
||||
normalized.includes("use --force to delete it")
|
||||
) {
|
||||
return "localChanges"
|
||||
}
|
||||
|
||||
if (
|
||||
normalized.includes("in use") ||
|
||||
normalized.includes("resource busy") ||
|
||||
normalized.includes("device or resource busy") ||
|
||||
normalized.includes("ebusy") ||
|
||||
normalized.includes("file is being used") ||
|
||||
normalized.includes("process cannot access the file") ||
|
||||
normalized.includes("directory not empty")
|
||||
) {
|
||||
return "inUse"
|
||||
}
|
||||
|
||||
if (normalized.includes("not found") || normalized.includes("no such file") || normalized.includes("cannot find")) {
|
||||
return "notFound"
|
||||
}
|
||||
|
||||
if (normalized.includes("permission denied") || normalized.includes("access is denied") || normalized.includes("eperm")) {
|
||||
return "permissionDenied"
|
||||
}
|
||||
|
||||
return "unknown"
|
||||
}
|
||||
|
||||
interface WorktreeSelectorProps {
|
||||
instanceId: string
|
||||
sessionId: string
|
||||
@@ -80,6 +139,7 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
const [deleteTarget, setDeleteTarget] = createSignal<WorktreeOption & { kind: "worktree" } | null>(null)
|
||||
const [forceDelete, setForceDelete] = createSignal(false)
|
||||
const [isDeleting, setIsDeleting] = createSignal(false)
|
||||
const [deleteError, setDeleteError] = createSignal<string | null>(null)
|
||||
|
||||
const session = createMemo(() => sessions().get(props.instanceId)?.get(props.sessionId))
|
||||
const isChildSession = createMemo(() => Boolean(session()?.parentId))
|
||||
@@ -114,10 +174,16 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
const openDeleteDialog = (opt: WorktreeOption & { kind: "worktree" }) => {
|
||||
if (opt.slug === "root") return
|
||||
setForceDelete(false)
|
||||
setDeleteError(null)
|
||||
setDeleteTarget(opt)
|
||||
setDeleteOpen(true)
|
||||
}
|
||||
|
||||
const closeDeleteDialog = () => {
|
||||
setDeleteOpen(false)
|
||||
setDeleteError(null)
|
||||
}
|
||||
|
||||
const repoRoot = createMemo(() => {
|
||||
const list = getWorktrees(props.instanceId)
|
||||
return list.find((wt) => wt.slug === "root")?.directory ?? ""
|
||||
@@ -139,6 +205,89 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
}
|
||||
}
|
||||
|
||||
const sanitizeDeleteError = (input: string) => {
|
||||
let sanitized = (input ?? "").trim()
|
||||
if (!sanitized) {
|
||||
return t("instanceShell.worktree.delete.error.fallback")
|
||||
}
|
||||
|
||||
sanitized = sanitized.replace(/[A-Za-z]:[\\/][^\r\n"']+/g, "[path]")
|
||||
sanitized = sanitized.replace(/\\Users\\[^\\/\r\n]+/gi, "\\Users\\[user]")
|
||||
sanitized = sanitized.replace(/\/Users\/[^/\r\n]+/g, "/Users/[user]")
|
||||
sanitized = sanitized.replace(/\/home\/[^/\r\n]+/g, "/home/[user]")
|
||||
sanitized = sanitized.replace(/([A-Za-z]:[\\/])?Users[\\/][^\\/\r\n]+/gi, "$1Users/[user]")
|
||||
return sanitized
|
||||
}
|
||||
|
||||
const handleCopyDeleteError = async (mode: "raw" | "sanitized") => {
|
||||
const raw = deleteError()
|
||||
if (!raw) return
|
||||
const text = mode === "sanitized" ? sanitizeDeleteError(raw) : raw
|
||||
|
||||
try {
|
||||
const ok = await copyToClipboard(text)
|
||||
showToastNotification({
|
||||
message: ok
|
||||
? t(mode === "sanitized" ? "instanceShell.worktree.delete.error.copySanitizedSuccess" : "instanceShell.worktree.delete.error.copySuccess")
|
||||
: t("instanceShell.worktree.delete.error.copyFailure"),
|
||||
variant: ok ? "success" : "error",
|
||||
})
|
||||
} catch (error) {
|
||||
log.error("Failed to copy delete worktree error", error)
|
||||
showToastNotification({
|
||||
message: t("instanceShell.worktree.delete.error.copyFailure"),
|
||||
variant: "error",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const deleteErrorDetails = createMemo<DeleteErrorDetails | null>(() => {
|
||||
const raw = deleteError()
|
||||
if (!raw) return null
|
||||
|
||||
const parsed = extractDeleteErrorMessage(raw)
|
||||
const kind = classifyDeleteError(parsed)
|
||||
|
||||
switch (kind) {
|
||||
case "localChanges":
|
||||
return {
|
||||
summary: t("instanceShell.worktree.delete.error.summary.localChanges"),
|
||||
causeLabel: t("instanceShell.worktree.delete.error.cause.localChanges"),
|
||||
nextStep: t("instanceShell.worktree.delete.error.nextStep.localChanges"),
|
||||
}
|
||||
case "inUse":
|
||||
return {
|
||||
summary: t("instanceShell.worktree.delete.error.summary.inUse"),
|
||||
causeLabel: t("instanceShell.worktree.delete.error.cause.inUse"),
|
||||
nextStep: t("instanceShell.worktree.delete.error.nextStep.inUse"),
|
||||
}
|
||||
case "notFound":
|
||||
return {
|
||||
summary: t("instanceShell.worktree.delete.error.summary.notFound"),
|
||||
causeLabel: t("instanceShell.worktree.delete.error.cause.notFound"),
|
||||
nextStep: t("instanceShell.worktree.delete.error.nextStep.notFound"),
|
||||
}
|
||||
case "permissionDenied":
|
||||
return {
|
||||
summary: t("instanceShell.worktree.delete.error.summary.permissionDenied"),
|
||||
causeLabel: t("instanceShell.worktree.delete.error.cause.permissionDenied"),
|
||||
nextStep: t("instanceShell.worktree.delete.error.nextStep.permissionDenied"),
|
||||
}
|
||||
default:
|
||||
return {
|
||||
summary: t("instanceShell.worktree.delete.error.summary.unknown"),
|
||||
causeLabel: t("instanceShell.worktree.delete.error.cause.unknown"),
|
||||
nextStep: t("instanceShell.worktree.delete.error.nextStep.unknown"),
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const displayDeleteError = createMemo(() => {
|
||||
const raw = deleteError()
|
||||
if (!raw) return null
|
||||
return extractDeleteErrorMessage(raw)
|
||||
})
|
||||
|
||||
const handleChange = async (value: WorktreeOption | null) => {
|
||||
if (worktreesUnavailable()) return
|
||||
if (!value) return
|
||||
@@ -343,22 +492,23 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
</Dialog.Portal>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={deleteOpen()} onOpenChange={(open) => !open && setDeleteOpen(false)}>
|
||||
<Dialog open={deleteOpen()} onOpenChange={(open) => !open && closeDeleteDialog()}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay class="modal-overlay" />
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-5">
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-3 md:p-4">
|
||||
<Dialog.Content class="modal-surface w-[clamp(640px,45vw,960px)] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] overflow-y-auto p-4 flex flex-col gap-3">
|
||||
<div>
|
||||
<Dialog.Title class="text-xl font-semibold text-primary">Delete worktree</Dialog.Title>
|
||||
<Dialog.Description class="text-sm text-secondary mt-2">Removes the git worktree checkout directory for this branch.</Dialog.Description>
|
||||
<Dialog.Description class="text-sm text-secondary mt-1">Deletes this branch worktree and its local folder.</Dialog.Description>
|
||||
</div>
|
||||
|
||||
<Show when={deleteTarget()}>
|
||||
{(target) => (
|
||||
<div class="rounded-lg border border-base bg-surface-secondary p-4">
|
||||
<p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Worktree</p>
|
||||
<p class="text-sm font-mono text-primary break-all">{target().slug}</p>
|
||||
<p class="text-[11px] text-secondary mt-2 break-all font-mono">{target().directory}</p>
|
||||
<div class="rounded-lg border border-base bg-surface-secondary px-3 py-2">
|
||||
<p class="text-sm text-primary">
|
||||
Worktree <span class="font-semibold font-mono">"{target().slug}"</span>
|
||||
</p>
|
||||
<p class="text-[11px] text-secondary break-all font-mono leading-5">{target().directory}</p>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
@@ -377,7 +527,7 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
<button
|
||||
type="button"
|
||||
class="selector-button selector-button-secondary"
|
||||
onClick={() => setDeleteOpen(false)}
|
||||
onClick={closeDeleteDialog}
|
||||
disabled={isDeleting()}
|
||||
>
|
||||
Cancel
|
||||
@@ -389,12 +539,13 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
onClick={() => {
|
||||
const target = deleteTarget()
|
||||
if (!target) {
|
||||
setDeleteOpen(false)
|
||||
closeDeleteDialog()
|
||||
return
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
setIsDeleting(true)
|
||||
setDeleteError(null)
|
||||
await deleteWorktree(props.instanceId, target.slug, { force: forceDelete() })
|
||||
await reloadWorktrees(props.instanceId)
|
||||
await reloadWorktreeMap(props.instanceId)
|
||||
@@ -403,15 +554,12 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
await setWorktreeSlugForParentSession(props.instanceId, parentId(), "root")
|
||||
}
|
||||
|
||||
setDeleteOpen(false)
|
||||
closeDeleteDialog()
|
||||
showToastNotification({ message: `Deleted worktree ${target.slug}`, variant: "success" })
|
||||
})()
|
||||
.catch((error) => {
|
||||
log.warn("Failed to delete worktree", error)
|
||||
showToastNotification({
|
||||
message: error instanceof Error ? error.message : "Failed to delete worktree",
|
||||
variant: "error",
|
||||
})
|
||||
setDeleteError(error instanceof Error ? error.message : t("instanceShell.worktree.delete.error.fallback"))
|
||||
})
|
||||
.finally(() => {
|
||||
setIsDeleting(false)
|
||||
@@ -421,6 +569,56 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
|
||||
{isDeleting() ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Show when={displayDeleteError()}>
|
||||
{(message) => (
|
||||
<div class="rounded-lg border border-danger bg-danger/10 p-3 flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-xs font-medium text-danger uppercase tracking-wide">
|
||||
{t("instanceShell.worktree.delete.error.title")}
|
||||
</p>
|
||||
<Show when={deleteErrorDetails()}>
|
||||
{(details) => (
|
||||
<>
|
||||
<p class="text-sm text-primary font-medium">{details().summary}</p>
|
||||
<p class="text-sm text-secondary">
|
||||
<span class="font-medium text-primary">{t("instanceShell.worktree.delete.error.causeLabel")}</span>{" "}
|
||||
{details().causeLabel}
|
||||
</p>
|
||||
<p class="text-sm text-secondary">
|
||||
<span class="font-medium text-primary">{t("instanceShell.worktree.delete.error.nextStepLabel")}</span>{" "}
|
||||
{details().nextStep}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<pre class="max-h-[40vh] overflow-auto whitespace-pre-wrap break-all rounded border border-danger/30 bg-surface-primary px-3 py-2 text-xs text-primary select-text leading-5">{message()}</pre>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="selector-button selector-button-secondary"
|
||||
onClick={() => {
|
||||
void handleCopyDeleteError("raw")
|
||||
}}
|
||||
>
|
||||
{t("instanceShell.worktree.delete.error.copyRaw")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="selector-button selector-button-secondary"
|
||||
onClick={() => {
|
||||
void handleCopyDeleteError("sanitized")
|
||||
}}
|
||||
>
|
||||
{t("instanceShell.worktree.delete.error.copySanitized")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
</Dialog.Content>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
|
||||
Reference in New Issue
Block a user