CyphonTest.vue (Main Container)
├── CyphonHero.vue (Welcome screen)
├── CommandBox.vue (Input area)
├── ResultView.vue (Results display)
│   ├── SearchBar.vue (Mini search in header)
│   ├── AISummaryCard.vue (AI-generated summary)
│   └── SearchResults.vue (Per-command results)
│       └── [Dynamic Cards] (Whois, DNS, etc.)
└── CommandsModal.vue (Command reference modal)

data() {
  return {
    state: "idle",      // idle | responding | complete
    messages: [],       // Conversation history
    showCommandsModal: false
  };
}

async handleSubmit(question) {
  // 1. Update URL (for sharing/bookmarking)
  this.updateUrlQuery(question);

  // 2. Add user message to conversation
  this.messages = [{
    role: "user",
    type: "text",
    content: question
  }];

  // 3. Add loading placeholder
  this.messages.push({
    role: "ai",
    type: "loading",
    content: null
  });

  this.state = "responding";

  // 4. Call backend to get relevant commands
  const fullResponse = await discoveryAPI.executeCyphonQuery({
    question
  });

  // 5. Replace loading with actual results
  if (fullResponse?.relevantCommands?.length > 0) {
    this.messages[loadingIndex] = {
      role: "ai",
      type: "cards",
      content: fullResponse.relevantCommands
    };
  }

  this.state = "complete";
}

checkUrlQuery() {
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get("query");
  if (query) {
    this.handleSubmit(query);
  }
}

// Emits
$emit("submit", message); // When user sends message
$emit("open-commands"); // When user clicks Commands button

┌──────────────────────────────────────────────┐
│ ✨ Ask Cyphon about security threats...      │
│                                              │
├──────────────────────────────────────────────┤
│                        [/Commands ▼] [Send]  │
└──────────────────────────────────────────────┘
        Press Enter to send, Shift+Enter for new line

props: {
  messages: Array,     // Conversation history from parent
  isTyping: Boolean    // Shows loading state
}

computed: {
	userQuery(); // Extracts the user's question
	cards(); // Extracts the relevant commands to display
	noResultsMessage; // Handles empty results
}

messages (from parent)
    │
    ├── userQuery: "whois google.com"
    │
    └── cards: [
          { id: "whois", formattedOutput: "whois(\"google.com\")" }
        ]
           │
           ▼
    For each card, render <SearchResults :keyword="cmd.formattedOutput" />

async generateAISummary() {
  const allResults = this.collectedResults.flatMap(r => r.results);

  const response = await discoveryAPI.summarizeCyphonResults({
    userQuery: this.userQuery,
    results: allResults
  });

  this.aiSummary = response;  // { summary: "...", highlights: [...] }
}

async startResultLoader() {
  await this.loadResults();  // First call immediately

  // Then poll every 3 seconds
  this.resultLoader = setInterval(
    this.loadResults,
    this.resultRefreshInterval  // 3000ms default
  );
}

async loadResults() {
  // Rate limit: max 20 calls
  if (this.loadResultsCallCount >= this.rateLimit) {
    this.stopResultLoader();
    return;
  }

  const searchResponse = await intelAPI.search({
    keyword: this.keyword,
    id: this.searchResponse?.id  // Pass ID to get updates
  });

  if (searchResponse.done) {
    this.stopResultLoader();
  }
}

<component
	:is="card.cardType"
	v-for="card in searchResponse.results"
	:key="card.facts.factId"
	v-bind="card.facts.data"
/>

{
  name: "whois",
  description: "Retrieves WHOIS information for the provided domain.",
  syntax: "whois(domain)",
  example: 'whois("example.com")',
  category: "Domain Intelligence",
  icon: "mdi:domain"
}

props: {
  summary: Object,    // { summary: "...", highlights: [...] }
  loading: Boolean,
  error: String
}

CyphonTest.vue
    │
    │──── @submit ────► handleSubmit(question)
    │                         │
    │                         ▼
    │               discoveryAPI.executeCyphonQuery()
    │                         │
    │                         ▼
    │◄──── messages ──────────┘
    │
    ▼
ResultView.vue
    │
    │──── creates ────► SearchResults (one per command)
    │                         │
    │                         ▼
    │                   intelAPI.search()
    │                         │
    │◄─── @results ───────────┘
    │
    ▼
generateAISummary()