/app/chrome-extension/entrypoints/sidepanel/components/agent-chat/AgentRequestThread.vue

<template>
  <div ref="rootRef" class="group">
    <!-- User Query Header -->
    <div class="mb-4">
      <div class="flex justify-between items-start">
        <!-- Special rendering for web editor apply messages -->
        <ApplyMessageChip v-if="thread.header?.webEditorApply" :header="thread.header" />

        <!-- Default title rendering for regular messages -->
        <h2
          v-else
          class="text-lg font-medium leading-snug"
          :style="{
            color: 'var(--ac-text)',
          }"
        >
          {{ thread.title }}
        </h2>

        <!-- Edit button (placeholder, appears on hover) -->
        <button
          class="opacity-0 group-hover:opacity-100 transition-opacity p-1 cursor-pointer"
          :style="{ color: 'var(--ac-text-subtle)' }"
          title="Edit (coming soon)"
        >
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
            />
          </svg>
        </button>
      </div>

      <!-- Attachment thumbnails -->
      <div v-if="thread.attachments.length > 0" class="flex flex-wrap gap-2 mt-3">
        <button
          v-for="attachment in thread.attachments"
          :key="`${attachment.messageId}:${attachment.index}`"
          type="button"
          class="relative group/thumb w-16 h-16 rounded-lg overflow-hidden transition-opacity hover:opacity-90 cursor-pointer"
          :style="{
            backgroundColor: 'var(--ac-surface-muted)',
            border: 'var(--ac-border-width) solid var(--ac-border)',
          }"
          :title="attachment.originalName"
          @click="openViewer(attachment)"
        >
          <img
            v-if="getAttachmentUrl(attachment)"
            :src="getAttachmentUrl(attachment)!"
            :alt="attachment.originalName"
            class="w-full h-full object-cover"
            loading="lazy"
          />
          <!-- Fallback placeholder when server not ready -->
          <div
            v-else
            class="w-full h-full flex items-center justify-center"
            :style="{ color: 'var(--ac-text-subtle)' }"
            title="Server not ready"
          >
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>

          <!-- Filename overlay on hover -->
          <div
            class="absolute bottom-0 left-0 right-0 px-0.5 py-0.5 text-[8px] truncate opacity-0 group-hover/thumb:opacity-100 transition-opacity"
            :style="{
              backgroundColor: 'rgba(0,0,0,0.6)',
              color: 'white',
            }"
          >
            {{ attachment.originalName }}
          </div>
        </button>
      </div>
    </div>

    <!-- Timeline -->
    <AgentTimeline :items="thread.items" :state="thread.state" />

    <!-- Image Viewer Modal (teleported to avoid stacking context issues) -->
    <Teleport :to="overlayTarget" :disabled="!overlayTarget">
      <div
        v-if="viewerAttachment"
        class="fixed inset-0 z-50 flex items-center justify-center"
        role="dialog"
        aria-modal="true"
        aria-label="Image preview"
      >
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black/60" @click="closeViewer" />

        <!-- Image container -->
        <div
          class="relative max-w-[92vw] max-h-[92vh] overflow-hidden"
          :style="{
            backgroundColor: 'var(--ac-surface, #ffffff)',
            border: 'var(--ac-border-width, 1px) solid var(--ac-border, #e5e5e5)',
            borderRadius: 'var(--ac-radius-card, 12px)',
            boxShadow: 'var(--ac-shadow-float, 0 4px 20px -2px rgba(0,0,0,0.2))',
          }"
        >
          <!-- Close button -->
          <button
            type="button"
            class="absolute top-2 right-2 p-1 rounded-full transition-colors hover:bg-black/20 cursor-pointer"
            :style="{ color: 'white' }"
            aria-label="Close image preview"
            @click="closeViewer"
          >
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>

          <!-- Full-size image -->
          <img
            v-if="viewerUrl"
            :src="viewerUrl"
            :alt="viewerAttachment.originalName"
            class="block max-w-[92vw] max-h-[92vh] object-contain"
          />
          <div v-else class="p-6 text-sm" :style="{ color: 'var(--ac-text-muted, #6e6e6e)' }">
            Agent server not ready (missing server port).
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, onMounted, ref, watch } from 'vue';
import type { AttachmentMetadata } from 'chrome-mcp-shared';
import type { AgentThread } from '../../composables/useAgentThreads';
import { AGENT_SERVER_PORT_KEY } from '../../composables';
import AgentTimeline from './AgentTimeline.vue';
import ApplyMessageChip from './ApplyMessageChip.vue';

const props = defineProps<{
  thread: AgentThread;
}>();

// Inject server port from parent
const serverPort = inject(AGENT_SERVER_PORT_KEY, ref<number | null>(null));

// Compute base URL for attachment requests
const baseUrl = computed(() => {
  const port = serverPort.value;
  if (!Number.isInteger(port) || port === null || port <= 0) return null;
  return `http://127.0.0.1:${port}`;
});

/**
 * Build full URL for an attachment.
 * Ensures urlPath starts with / for proper concatenation.
 */
function getAttachmentUrl(attachment: AttachmentMetadata): string | null {
  const base = baseUrl.value;
  if (!base) return null;
  const path = attachment.urlPath.startsWith('/') ? attachment.urlPath : `/${attachment.urlPath}`;
  return `${base}${path}`;
}

// Teleport target for modal overlay
const rootRef = ref<HTMLElement | null>(null);
const overlayTarget = ref<Element | null>(null);

// Image viewer state
const viewerAttachment = ref<AttachmentMetadata | null>(null);
const viewerUrl = computed(() => {
  if (!viewerAttachment.value) return null;
  return getAttachmentUrl(viewerAttachment.value);
});

function openViewer(attachment: AttachmentMetadata): void {
  viewerAttachment.value = attachment;
}

function closeViewer(): void {
  viewerAttachment.value = null;
}

// Handle Escape key to close viewer
function handleKeydown(e: KeyboardEvent): void {
  if (e.key === 'Escape' && viewerAttachment.value) {
    closeViewer();
  }
}

// Register/unregister keyboard listener only when viewer is open
watch(
  () => viewerAttachment.value,
  (current, _prev, onCleanup) => {
    if (!current) return;
    document.addEventListener('keydown', handleKeydown);
    onCleanup(() => document.removeEventListener('keydown', handleKeydown));
  },
);

onMounted(() => {
  // Find teleport target (agent-theme container or body)
  overlayTarget.value =
    rootRef.value?.closest('.agent-theme') ?? rootRef.value?.ownerDocument?.body ?? null;
});
</script>