icons

apps/web/src/app/features/world/location-interaction-panel/location-interaction-panel.component.html

@@ -7,6 +7,15 @@
     data-interaction-panel
   >
     @if (result) {
+      @if (result.img) {
+        <img
+          class="interaction-panel__portrait"
+          data-interaction-portrait
+          [src]="result.img"
+          [alt]="result.title"
+          (error)="($any($event.target).style.visibility = 'hidden')"
+        />
+      }
       <h2 class="interaction-panel__title">{{ result.title }}</h2>
       <p class="interaction-panel__text">{{ result.text }}</p>
     } @else {

apps/web/src/app/features/world/location-interaction-panel/location-interaction-panel.component.scss

@@ -22,6 +22,15 @@
   pointer-events: auto;
 }
 
+.interaction-panel__portrait {
+  inline-size: 5rem;
+  block-size: 5rem;
+  object-fit: contain;
+  border: 1px solid var(--ar-border-highlight);
+  border-radius: var(--ar-radius-md);
+  background: var(--ar-panel-muted);
+}
+
 .interaction-panel__title {
   margin: 0;
   color: var(--ar-gold);

apps/web/src/app/features/world/location-interaction-panel/location-interaction-panel.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LocationInteractionPanelComponent } from './location-interaction-panel.component';
 
 async function setup(inputs: {
-  result?: { interactionKey: string; title: string; text: string } | null;
+  result?: { interactionKey: string; title: string; text: string; img?: string } | null;
   error?: string | null;
 }): Promise<{
   fixture: ComponentFixture<LocationInteractionPanelComponent>;
@@ -62,6 +62,31 @@ describe('LocationInteractionPanelComponent', () => {
     expect(element.querySelectorAll('button')).toHaveLength(1);
   });
 
+  it("shows the NPC's portrait when the result carries one", async () => {
+    const { element } = await setup({
+      result: {
+        interactionKey: 'gate-watch',
+        title: 'Gate Watch',
+        text: 'Beyond the gate, Graufurt\'s protection ends.',
+        img: '/images/npcs/graufurt-gate-watch.png',
+      },
+    });
+
+    const portrait = element.querySelector<HTMLImageElement>(
+      '[data-interaction-portrait]',
+    );
+    expect(portrait?.src).toContain('/images/npcs/graufurt-gate-watch.png');
+    expect(portrait?.alt).toBe('Gate Watch');
+  });
+
+  it('shows no portrait when the result carries none', async () => {
+    const { element } = await setup({
+      result: { interactionKey: 'inspect-tracks', title: 'Suspicious Tracks', text: 'X' },
+    });
+
+    expect(element.querySelector('[data-interaction-portrait]')).toBeNull();
+  });
+
   it('reports a rejected interaction in place instead of navigating away', async () => {
     const { element } = await setup({ error: "There's nothing to discover here." });
 

apps/web/src/app/features/world/world-page.component.scss

@@ -91,11 +91,11 @@
 }
 
 .world-page__node--south-gate {
-  inset: 58% auto auto 12%;
+  inset: 35% auto auto 16%;
 }
 
 .world-page__node--burned-road {
-  inset: 39% auto auto 60%;
+  inset: 49% auto auto 27%;
 }
 
 .world-page__travel-panel {