From ae65dcd51e5faabac0d595110436d472de8e8c64 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 14 Apr 2026 20:33:19 +0200
Subject: [PATCH] Add NPC dialogue selection UI

---
 src/app/App.tsx | 51 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 68567a86..abb2ffea 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -15833,6 +15833,57 @@ export function App({ store, initialStatusMessage }: AppProps) {
                         </button>
                       </div>
 
+                      <div className="form-section">
+                        <div className="label">Dialogue</div>
+                        <div className="stat-card">
+                          <div className="value">
+                            {selectedNpc.dialogueId === null
+                              ? "Unassigned"
+                              : selectedNpcDialogue?.title ?? "Missing Dialogue"}
+                          </div>
+                          <div className="material-summary">
+                            {selectedNpc.dialogueId === null
+                              ? "Assign a project dialogue to let this NPC open a conversation directly on click."
+                              : selectedNpcDialogue === null
+                                ? `This NPC references ${selectedNpc.dialogueId}, but the dialogue resource is missing.`
+                                : `${selectedNpcDialogue.lines.length} line${selectedNpcDialogue.lines.length === 1 ? "" : "s"} in this project dialogue.`}
+                          </div>
+                        </div>
+                        <label className="form-field">
+                          <span className="label">Dialogue</span>
+                          <select
+                            data-testid="npc-dialogue"
+                            className="select-input"
+                            value={npcDialogueIdDraft}
+                            onChange={(event) => {
+                              const nextDialogueId =
+                                event.currentTarget.value.trim();
+                              setNpcDialogueIdDraft(nextDialogueId);
+                              scheduleDraftCommit(() =>
+                                applyNpcChange({
+                                  dialogueId:
+                                    nextDialogueId.length === 0
+                                      ? null
+                                      : nextDialogueId
+                                })
+                              );
+                            }}
+                          >
+                            <option value="">— none —</option>
+                            {projectDialogueList.map((dialogue) => (
+                              <option key={dialogue.id} value={dialogue.id}>
+                                {dialogue.title}
+                              </option>
+                            ))}
+                          </select>
+                        </label>
+                        <div className="material-summary">
+                          This uses the same project dialogue library and
+                          runtime dialogue-start path as existing interaction
+                          links.
+                        </div>
+                      </div>
+
                       <div className="form-section">
                         <div className="label">Facing</div>
                         <label className="form-field">