[BUG] Image Attachment Indexing Desync & Cleanup Failure

[VooDisss]

Description

The image attachment system currently fails to maintain synchronization between the UI badges and the text placeholders in the prompt input.
Environment Details:

• OS: Windows 10 IoT LTSC 21H2
• CodeNomad Version: v0.10.3

Two specific failures occur (see attached image):

1. Cleanup Failure: When a user clicks the "x" on an attachment badge (e.g., [Image #2]), the corresponding text placeholder [Image #2] is NOT automatically removed from the input field.
2. Indexing Gaps: After manually deleting the orphaned [Image #2] text and adding a new image, the system incorrectly increments the index to [Image #3]. It fails to reuse the now-available slot #2.

Expected Behavior

1. Auto-Cleanup: Clicking the "x" on an attachment badge MUST automatically find and delete the exact text string (e.g., [Image #2]) from the prompt input.
2. Smart Re-indexing: When a new image is added, the system should calculate the index based on the currently active attachments within the prompt text. If [Image #2] was deleted and only [Image #1] remains, the next new image should be [Image #2].

Technical Context

• Files:
  • packages/ui/src/components/prompt-input/usePromptAttachments.ts (handleRemoveAttachment)
  • packages/ui/src/components/prompt-input/attachmentPlaceholders.ts (findHighestAttachmentCounters)
• Root Cause:
  • handleRemoveAttachment uses a naive replace() that often fails to match the placeholder if the text has been modified or if there are spacing issues.
  • findHighestAttachmentCounters scans the prompt text for regex matches to determine the next index. Because the cleanup failed (leaving the text [Image #2] behind), the counter sees it and skips to #3.
• Fix Logic:
  • Cleanup: Improve handleRemoveAttachment to robustly find and delete the specific [Image #N] token associated with the removed attachment.
  • Indexing: Continue using Text-Based Indexing (scanning the prompt for [Image #N] patterns) as the source of truth. The fix for the indexing bug relies entirely on the cleanup working correctly: once the text [Image #2] is successfully removed, the text scanner will no longer see it, allowing the next image to correctly claim index #2.

User Experience Goal

The attachment system should feel "tight" and logical. Removing an image should vanish it completely from the context, and adding a new one should fill the immediate gap in the sequence.

[shantur]

@CodeNomadBot

Please validate and explain current workflow here

[codenomadbot]

Validated current workflow (v0.10.3 code) — the desync is happening because the badge “x” path never touches the prompt text, and the image counter used for new placeholders is not recomputed from prompt text on every edit.

Cleanup / removal flow today

• UI: packages/ui/src/components/session/session-view.tsx renders PromptAttachmentsBar.
• Clicking the chip “×” calls onRemoveAttachment, which is currently wired to store-only removal:
  • onRemoveAttachment={(id) => removeAttachment(instanceId, sessionId, id)}
  • No prompt mutation happens here, so any [Image #N] token in the textarea is left behind.
• There is a prompt-aware removal helper, but it is not used by the badge:
  • packages/ui/src/components/prompt-input/usePromptAttachments.ts has handleRemoveAttachment(attachmentId) which:
    • calls removeAttachment(...)
    • then tries to currentPrompt.replace(placeholder, "") for [Image #N], [pasted #N], and @mention cases.
  • PromptInput currently does not pass/expose this handler to SessionView/PromptAttachmentsBar.

Why indexing gaps happen today

• New pasted images use a local counter, not a “scan prompt right now” calculation:
  • handlePaste() in packages/ui/src/components/prompt-input/usePromptAttachments.ts does const count = imageCount() + 1.
• imageCount is only updated via syncAttachmentCounters(), which calls findHighestAttachmentCounters(promptText, sessionAttachments).
• syncAttachmentCounters() is invoked in only a couple places:
  • on session draft load switch: packages/ui/src/components/prompt-input.tsx (effect on draftLoadedNonce)
  • after send / when clearing prompt: packages/ui/src/components/prompt-input.tsx (handleSend)
• So if the user manually deletes [Image #2] from the prompt, imageCount() is still 2 until the next sync event, and the next paste becomes #3.

Related: deletion in the opposite direction does work

• If the user deletes the [Image #N] token in the textarea with Backspace/Delete, packages/ui/src/components/prompt-input/usePromptKeyDown.ts:
  • detects the placeholder via createImagePlaceholderRegex()
  • removes the matching attachment from the store
  • removes the placeholder text from the prompt
• That’s why text -> badge stays “tight”, but badge -> text currently does not.

Net: the issue report’s expectations match the intended architecture (prompt text as source of truth), but the current wiring bypasses it for chip removal, and paste-time indexing relies on a cached counter that isn’t resynced on normal prompt edits.

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

Suggest a simple flow and fix for this.

[codenomadbot]

Simple flow that keeps things “tight” (prompt text = source of truth)

1. Placeholder-backed attachments (pasted images + long pasted text) must be bidirectionally linked:

• Prompt token removed => attachment removed
• Attachment removed (chip “×”) => exact prompt token removed

2. Indexing should be derived from the current prompt text at the moment of insert (or kept in-sync on every prompt edit), not from a cached counter.

Minimal fix (small surface area)

A) Wire chip removal through PromptInput’s prompt-aware handler

• Add removeAttachment(attachmentId: string) to packages/ui/src/components/prompt-input/types.ts (PromptInputApi).
• In packages/ui/src/components/prompt-input.tsx, expose it by calling usePromptAttachments(...).handleRemoveAttachment(attachmentId).
• Update packages/ui/src/components/session/session-view.tsx:
  • change onRemoveAttachment={(id) => removeAttachment(...)}
  • to onRemoveAttachment={(id) => promptInputApi?.removeAttachment(id) ?? removeAttachment(...)}
    This makes chip “×” run the same cleanup logic as text deletion paths.

B) Fix the counter desync by syncing counters on prompt edits (or computing next index from prompt at insert time)
Option 1 (simplest): in packages/ui/src/components/prompt-input.tsx, add an effect:

• createEffect(() => syncAttachmentCounters(prompt(), attachments()))
  So manual edits like deleting [Image #2] immediately update imageCount() and the next paste becomes #2.

Option 2 (even more robust): in packages/ui/src/components/prompt-input/usePromptAttachments.ts inside handlePaste, compute count from findHighestAttachmentCounters(options.prompt(), attachments()) (or a prompt-only scan) instead of imageCount() + 1.

C) Make placeholder cleanup in handleRemoveAttachment tolerant + less destructive

• For [Image #N] removal, use a regex that tolerates spacing/case (e.g. \[Image\s*#\s*N\] with i) rather than exact .replace(placeholder, "").
• Avoid .replace(/\s+/g, " ") because it collapses newlines across the whole prompt; instead trim only the local whitespace around the removed token.

Small follow-up I’d do while touching this: findHighestAttachmentCounters(...) currently considers sessionAttachments too; if we really want “text-based indexing as truth”, it should be prompt-driven (otherwise orphaned attachments can keep the counter high even after the token is gone).

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

Implement this

Simple flow that keeps things “tight” (prompt text = source of truth)

1. Placeholder-backed attachments (pasted images + long pasted text) must be bidirectionally linked:

• Prompt token removed => attachment removed
• Attachment removed (chip “×”) => exact prompt token removed

2. Indexing should be derived from the current prompt text at the moment of insert (or kept in-sync on every prompt edit), not from a cached counter.

Indexing

• Image1 added
• Image2 added
• Image1 removed
• New Image added will be image3 not image1

[shantur]

@CodeNomadBot - Try again

[codenomadbot]

Implemented the “prompt text = source of truth” flow + opened PR: #164

What changed

• Chip “×” removal now routes through PromptInputApi.removeAttachment() so removing a badge also removes the exact [Image #N] / [pasted #N] token from the prompt.
• Paste-time indexing now scans the current prompt text to pick the next index (highest counter in prompt + 1), so counters don’t drift from cached state.
• Added a small reconciliation effect: if a placeholder token is removed from the prompt via editing, the corresponding placeholder-backed attachment is removed from the store/bar.
• Placeholder deletion is regex-based (tolerates whitespace/case) and avoids the old global \s+ collapse that could mangle newlines.

Touched

• packages/ui/src/components/prompt-input/usePromptAttachments.ts
• packages/ui/src/components/prompt-input/attachmentPlaceholders.ts
• packages/ui/src/components/prompt-input/types.ts
• packages/ui/src/components/prompt-input.tsx
• packages/ui/src/components/session/session-view.tsx

Note

• Local npm run typecheck currently fails on pre-existing errors in packages/ui/src/stores/preferences.tsx (unrelated to this change).

--
Yours, CodeNomadBot

[codenomadbot]

Automation failed.

session.prompt failed: fetch failed

--
Yours, CodeNomadBot

[VooDisss]

Tested locally on codenomad/issue-159 branch - it works very well! Thank you, @shantur !

Now the logic is:

• Add two images, one will be [Image #1] another is [Image #2].
• Remove [Image #1] and add another two - it will be [Image #3] and [Image #4]
• Remove [Image #4] and add another one - it will be [Image #4]