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

<template>
  <div
    v-if="open"
    class="fixed top-12 right-4 z-50 min-w-[160px] py-2"
    :style="{
      backgroundColor: 'var(--ac-surface, #ffffff)',
      border: 'var(--ac-border-width, 1px) solid var(--ac-border, #e5e5e5)',
      borderRadius: 'var(--ac-radius-inner, 8px)',
      boxShadow: 'var(--ac-shadow-float, 0 4px 20px -2px rgba(0,0,0,0.1))',
    }"
  >
    <!-- Header -->
    <div
      class="px-3 py-1 text-[10px] font-bold uppercase tracking-wider"
      :style="{ color: 'var(--ac-text-subtle, #a8a29e)' }"
    >
      Open In
    </div>

    <!-- VS Code Option -->
    <button
      class="w-full px-3 py-2 text-left text-sm flex items-center gap-2 ac-menu-item"
      :style="{
        color: defaultTarget === 'vscode' ? 'var(--ac-accent, #c87941)' : 'var(--ac-text, #1a1a1a)',
      }"
      @click="handleSelect('vscode')"
    >
      <!-- VS Code Icon -->
      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
        <path
          d="M17.583 2L6.167 11.667 2 8.5v7l4.167-3.167L17.583 22 22 19.75V4.25L17.583 2zm0 3.5v13l-8-6.5 8-6.5z"
        />
      </svg>
      <span class="flex-1">VS Code</span>
      <!-- Default indicator -->
      <svg
        v-if="defaultTarget === 'vscode'"
        class="w-4 h-4 flex-shrink-0"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
    </button>

    <!-- Terminal Option -->
    <button
      class="w-full px-3 py-2 text-left text-sm flex items-center gap-2 ac-menu-item"
      :style="{
        color:
          defaultTarget === 'terminal' ? 'var(--ac-accent, #c87941)' : 'var(--ac-text, #1a1a1a)',
      }"
      @click="handleSelect('terminal')"
    >
      <!-- Terminal Icon -->
      <svg
        class="w-4 h-4 flex-shrink-0"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
      <span class="flex-1">Terminal</span>
      <!-- Default indicator -->
      <svg
        v-if="defaultTarget === 'terminal'"
        class="w-4 h-4 flex-shrink-0"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
    </button>
  </div>
</template>

<script lang="ts" setup>
import type { OpenProjectTarget } from 'chrome-mcp-shared';

defineProps<{
  open: boolean;
  defaultTarget: OpenProjectTarget | null;
}>();

const emit = defineEmits<{
  select: [target: OpenProjectTarget];
  close: [];
}>();

function handleSelect(target: OpenProjectTarget): void {
  emit('select', target);
  emit('close');
}
</script>