UI: Add chunk context for posts.

[ryan-roemer]

• Adds a leading icon column to the Similar Posts table showing which posts contributed chunks to the RAG prompt context
• Clicking a quote icon expands a row below the post displaying the raw chunk text excerpts with position metadata
• Threads usedChunks and chunkTexts through the session state and component hierarchy to expose RAG context details in the UI

Assist: opencode, Qwen3.6-35B-A3B-MTP UD-Q4_K_XL, llama.cpp

[Copilot]

Pull request overview

This PR adds “chunk context” visibility to the chat UI by plumbing through which RAG chunks were included in the prompt and rendering expandable chunk excerpts per post in the “Similar Posts” modal.

Changes:

• Expose usedChunks and chunkTexts from context-building code through the RAG/search and chat-session layers into the UI.
• Add an expand/collapse UI in the posts table to show chunk excerpts for posts that contributed to the prompt context.
• Add CSS styling for the chunk excerpt list.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
public/styles.css	Adds styling for the chunk excerpts UI.
public/local/data/api/chat.js	Captures per-chunk text excerpts (chunkTexts) during context construction and returns them with usedChunks.
public/local/data/api/rag.js	Includes usedChunks/chunkTexts in contextState returned from RAG search.
public/local/data/api/chat-session.js	Adds getters to expose usedChunks/chunkTexts to the UI.
public/app/hooks/use-chat-session.js	Stores usedChunks/chunkTexts in hook state after the search event.
public/app/pages/chat.js	Passes chunk context props through to PostsFound.
public/app/components/posts-found.js	Passes chunk context props into PostsTable within the modal.
public/app/components/posts-table.js	Adds icon column + expandable rows to display chunk excerpts per post.

Comments suppressed due to low confidence (2)

public/app/components/posts-table.js:105

• Inside the posts.map(...), the top-level element returned is a <Fragment> without a key prop. Keys on the nested <tr> elements won’t satisfy React’s list key requirement and will still trigger warnings / unstable reconciliation. Add the key to the <Fragment> (or return an array of rows with keys) and avoid relying on keys on children only.

              return html`
                <${Fragment}>
                  <tr key=${`post-item-${i}`}>
                    <td>

public/app/components/posts-table.js:116

• The chunk-expansion toggle is implemented as a clickable <i> with onClick. This is not keyboard-accessible and lacks button semantics for screen readers. Use a <button type="button"> (or add role="button", tabIndex=0, and onKeyDown handling) and provide an aria-label describing the action/state.

                        html`<i
                          class="iconoir-quote"
                          style=${{ cursor: "pointer" }}
                          onClick=${() =>
                            setExpandedSlug(isExpanded ? null : slug)}
                          title=${isExpanded
                            ? "Click to collapse chunk excerpts"
                            : "Click to view chunk excerpts"}
                        ></i>`

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.