From 78b795742bb82435115571cdaef7a1e12d48eeb7 Mon Sep 17 00:00:00 2001
From: Krrish Ghimire <krrish.ghimire@amniltech.com>
Date: Wed, 25 Mar 2026 15:14:40 +0545
Subject: [PATCH] refactor

---
 .../components/GitHub/GitHubIngestionForm.vue | 281 -----------
 .../GitHub/GitHubIngestionStatus.vue          | 330 -------------
 .../GitHub/GitHubIntegrationSetup.vue         | 412 ----------------
 .../components/GitHub/GitHubIssuesList.vue    | 288 ------------
 .../GitHub/GitHubPullRequestsList.vue         | 362 --------------
 .../GitHub/GitHubRepositoryCard.vue           | 203 --------
 .../GitHub/GitHubRepositoryIngestion.vue      | 221 ---------
 .../components/GitHub/GitHubSearchFilter.vue  | 442 ------------------
 .../components/GitHub/GitHubStatsChart.vue    | 326 -------------
 .../components/KnowledgeBase/GitHubInput.vue  |  72 ++-
 .../[appId]/github/[repositoryId].vue         | 434 -----------------
 .../applications/[appId]/github/index.vue     | 399 ----------------
 .../[appId]/integrations/github-setup.vue     |  38 --
 .../[appId]/integrations/index.vue            | 345 --------------
 .../[appId]/knowledge-base-backup.vue         | 104 -----
 15 files changed, 34 insertions(+), 4223 deletions(-)
 delete mode 100644 frontend/components/GitHub/GitHubIngestionForm.vue
 delete mode 100644 frontend/components/GitHub/GitHubIngestionStatus.vue
 delete mode 100644 frontend/components/GitHub/GitHubIntegrationSetup.vue
 delete mode 100644 frontend/components/GitHub/GitHubIssuesList.vue
 delete mode 100644 frontend/components/GitHub/GitHubPullRequestsList.vue
 delete mode 100644 frontend/components/GitHub/GitHubRepositoryCard.vue
 delete mode 100644 frontend/components/GitHub/GitHubRepositoryIngestion.vue
 delete mode 100644 frontend/components/GitHub/GitHubSearchFilter.vue
 delete mode 100644 frontend/components/GitHub/GitHubStatsChart.vue
 delete mode 100644 frontend/pages/applications/[appId]/github/[repositoryId].vue
 delete mode 100644 frontend/pages/applications/[appId]/github/index.vue
 delete mode 100644 frontend/pages/applications/[appId]/integrations/github-setup.vue
 delete mode 100644 frontend/pages/applications/[appId]/integrations/index.vue
 delete mode 100644 frontend/pages/applications/[appId]/knowledge-base-backup.vue

diff --git a/frontend/components/GitHub/GitHubIngestionForm.vue b/frontend/components/GitHub/GitHubIngestionForm.vue
deleted file mode 100644
index a5433c7..0000000
--- a/frontend/components/GitHub/GitHubIngestionForm.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-  <UCard>
-    <template #header>
-      <div class="flex items-center justify-between">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-          Ingest GitHub Repository
-        </h3>
-        <UButton
-          icon="i-heroicons-x-mark-20-solid"
-          variant="ghost"
-          color="gray"
-          size="sm"
-          square
-          @click="$emit('close')"
-        />
-      </div>
-    </template>
-
-    <form @submit.prevent="handleSubmit" class="space-y-6">
-      <!-- Repository Input -->
-      <div class="space-y-2">
-        <C8Label for="repository" required>Repository</C8Label>
-        <div class="flex gap-2">
-          <div class="flex-1">
-            <C8Input
-              id="owner"
-              v-model="form.owner"
-              placeholder="owner"
-              required
-              :disabled="loading"
-            />
-          </div>
-          <span class="flex items-center text-gray-500 dark:text-gray-400">/</span>
-          <div class="flex-1">
-            <C8Input
-              id="repo"
-              v-model="form.repo"
-              placeholder="repository-name"
-              required
-              :disabled="loading"
-            />
-          </div>
-        </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Enter the GitHub repository in the format: owner/repository-name
-        </p>
-      </div>
-
-      <!-- Integration Display (Read-only) -->
-      <div class="space-y-2">
-        <C8Label>GitHub Integration</C8Label>
-        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-          <div class="flex items-center gap-2">
-            <UIcon name="i-simple-icons-github" class="text-gray-600 dark:text-gray-400" />
-            <span class="text-gray-900 dark:text-white">
-              {{ integrationName || 'No GitHub integration configured' }}
-            </span>
-          </div>
-          <p v-if="!integrationName" class="text-sm text-red-600 dark:text-red-400 mt-2">
-            Please configure a GitHub integration in the Integrations page first.
-          </p>
-        </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Using the configured GitHub integration for ingestion.
-        </p>
-      </div>
-
-      <div class="space-y-2">
-        <C8Label for="since">Ingest Since (Optional)</C8Label>
-        <C8Input
-          id="since"
-          v-model="form.since"
-          type="datetime-local"
-          placeholder="Only ingest data since this date"
-          :disabled="loading"
-        />
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Only ingest data created since this date. Leave empty to ingest all data.
-        </p>
-      </div>
-
-
-      <C8APIAlert :api-error="apiError" />
-
-      <div v-if="apiError && apiError.details && apiError.details.includes('already in progress')" class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
-        <div class="flex items-center gap-2 mb-2">
-          <UIcon name="i-heroicons-exclamation-triangle-16-solid" class="text-yellow-600 dark:text-yellow-400" />
-          <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Ingestion in Progress</h4>
-        </div>
-        <p class="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
-          Another ingestion is currently running. You can wait for it to complete or force restart it.
-        </p>
-        <div class="flex gap-2">
-          <UButton
-            size="xs"
-            variant="outline"
-            color="yellow"
-            @click="checkStatus"
-          >
-            Check Status
-          </UButton>
-          <UButton
-            size="xs"
-            variant="outline"
-            color="red"
-            @click="forceRetry"
-          >
-            Force Restart
-          </UButton>
-        </div>
-      </div>
-
-      <UAlert
-        v-if="success"
-        color="green"
-        variant="soft"
-        icon="i-heroicons-check-circle-16-solid"
-      >
-        <template #title>Ingestion Started</template>
-        <template #description>
-          Repository ingestion has started successfully. You can track the progress below.
-        </template>
-      </UAlert>
-
-      <div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-        <UButton
-          variant="ghost"
-          color="gray"
-          :disabled="loading"
-          @click="$emit('close')"
-        >
-          Cancel
-        </UButton>
-        <UButton
-          type="submit"
-          :loading="loading"
-          :disabled="!isFormValid"
-        >
-          {{ loading ? 'Ingesting...' : 'Start Ingestion' }}
-        </UButton>
-      </div>
-    </form>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-import type { GitHubIngestionRequest } from '~/types/github'
-import { useApiErrorHandling } from '~/composables/useApiErrorHandling'
-import C8APIAlert from '~/components/C8APIAlert.vue'
-import { toast } from 'vue-sonner'
-
-interface Props {
-  githubIntegration?: {
-    id: number
-    name: string
-    provider: string
-  }
-}
-
-const props = withDefaults(defineProps<Props>(), {})
-
-const emit = defineEmits<{
-  close: []
-  success: [data: GitHubIngestionRequest]
-  error: [error: string]
-  retry: [data: GitHubIngestionRequest]
-}>()
-
-const githubStore = useGitHubStore()
-const { apiError, handleError, clearError } = useApiErrorHandling()
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-const success = ref(false)
-
-const form = ref<GitHubIngestionRequest>({
-  owner: '',
-  repo: '',
-  app_integration_id: 0,
-  since: ''
-})
-
-
-const integrationName = computed(() => {
-  return props.githubIntegration?.name
-})
-
-const isFormValid = computed(() => {
-  return form.value.owner.trim() !== '' &&
-         form.value.repo.trim() !== '' &&
-         props.githubIntegration &&
-         props.githubIntegration.id > 0
-})
-
-const checkStatus = async () => {
-  if (!props.githubIntegration) return
-
-  try {
-    const repositories = await githubStore.getRepositories(props.githubIntegration.id)
-    const repo = repositories.find(r => r.full_name === `${form.value.owner}/${form.value.repo}`)
-
-    if (repo) {
-      if (repo.ingestion_status === 'completed') {
-        toast.success('Ingestion completed successfully!')
-        emit('close')
-      } else if (repo.ingestion_status === 'failed') {
-        toast.error('Ingestion failed. You can try again.')
-        clearError()
-      } else {
-        toast.info(`Ingestion status: ${repo.ingestion_status}`)
-      }
-    }
-  } catch (error) {
-    console.error('Failed to check status:', error)
-  }
-}
-
-const forceRetry = () => {
-  clearError()
-  emit('retry', {
-    owner: form.value.owner.trim(),
-    repo: form.value.repo.trim(),
-    app_integration_id: props.githubIntegration!.id,
-    since: form.value.since ? new Date(form.value.since).toISOString() : undefined
-  })
-}
-const handleSubmit = async () => {
-  if (!isFormValid.value) return
-
-  clearError()
-
-  try {
-    loading.value = true
-    success.value = false
-
-    let since = undefined
-    if (form.value.since) {
-      since = new Date(form.value.since).toISOString()
-    }
-
-    const ingestionData = {
-      owner: form.value.owner.trim(),
-      repo: form.value.repo.trim(),
-      app_integration_id: props.githubIntegration!.id,
-      since
-    }
-
-    await githubStore.ingestRepository(ingestionData)
-
-    success.value = true
-    emit('success', ingestionData)
-
-    setTimeout(() => {
-      resetForm()
-      emit('close')
-    }, 2000)
-
-  } catch (err: unknown) {
-    handleError(err, form)
-  } finally {
-    loading.value = false
-  }
-}
-
-const resetForm = () => {
-  form.value = {
-    owner: '',
-    repo: '',
-    app_integration_id: 0,
-    since: ''
-  }
-  success.value = false
-  clearError()
-}
-
-watch(() => props.githubIntegration, (newIntegration) => {
-  if (newIntegration) {
-    form.value.app_integration_id = newIntegration.id
-  }
-}, { immediate: true })
-</script>
diff --git a/frontend/components/GitHub/GitHubIngestionStatus.vue b/frontend/components/GitHub/GitHubIngestionStatus.vue
deleted file mode 100644
index 86aedf1..0000000
--- a/frontend/components/GitHub/GitHubIngestionStatus.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <div
-          class="w-3 h-3 rounded-full"
-          :class="statusIndicatorClass"
-        ></div>
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-          Ingestion Status
-        </h3>
-      </div>
-
-      <UButton
-        v-if="showRefreshButton"
-        icon="i-heroicons-arrow-path-16-solid"
-        variant="ghost"
-        color="gray"
-        size="xs"
-        :loading="refreshing"
-        @click="refreshStatus"
-      >
-        Refresh
-      </UButton>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-      <div v-if="status === 'running'" class="space-y-4">
-        <div class="flex items-center gap-3">
-          <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin text-blue-600" />
-          <span class="text-blue-600 dark:text-blue-400 font-medium">
-            Ingestion in Progress
-          </span>
-        </div>
-
-        <div class="space-y-2">
-          <div class="flex justify-between text-sm text-gray-600 dark:text-gray-300">
-            <span>{{ currentStep }}</span>
-            <span>{{ Math.round(progress) }}%</span>
-          </div>
-          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-            <div
-              class="bg-blue-600 h-2 rounded-full transition-all duration-300"
-              :style="{ width: `${progress}%` }"
-            ></div>
-          </div>
-        </div>
-
-        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
-          <div class="flex items-center gap-2 text-sm">
-            <UIcon name="i-heroicons-information-circle-16-solid" class="text-blue-600" />
-            <span class="text-blue-800 dark:text-blue-200">
-              {{ currentOperation }}
-            </span>
-          </div>
-        </div>
-
-        <div v-if="estimatedTime" class="text-sm text-gray-500 dark:text-gray-400">
-          Estimated completion: {{ estimatedTime }}
-        </div>
-      </div>
-
-      <div v-else-if="status === 'completed'" class="space-y-4">
-        <div class="flex items-center gap-3">
-          <UIcon name="i-heroicons-check-circle-16-solid" class="text-green-600" />
-          <span class="text-green-600 dark:text-green-400 font-medium">
-            Ingestion Completed Successfully
-          </span>
-        </div>
-
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="text-center">
-            <div class="text-lg font-semibold text-gray-900 dark:text-white">
-              {{ summary.issues }}
-            </div>
-            <div class="text-xs text-gray-500 dark:text-gray-400">Issues</div>
-          </div>
-          <div class="text-center">
-            <div class="text-lg font-semibold text-gray-900 dark:text-white">
-              {{ summary.pullRequests }}
-            </div>
-            <div class="text-xs text-gray-500 dark:text-gray-400">Pull Requests</div>
-          </div>
-          <div class="text-center">
-            <div class="text-lg font-semibold text-gray-900 dark:text-white">
-              {{ summary.discussions }}
-            </div>
-            <div class="text-xs text-gray-500 dark:text-gray-400">Discussions</div>
-          </div>
-          <div class="text-center">
-            <div class="text-lg font-semibold text-gray-900 dark:text-white">
-              {{ summary.files }}
-            </div>
-            <div class="text-xs text-gray-500 dark:text-gray-400">Files</div>
-          </div>
-        </div>
-
-        <div class="text-sm text-gray-500 dark:text-gray-400">
-          Completed {{ completedAt }}
-        </div>
-      </div>
-
-      <div v-else-if="status === 'failed'" class="space-y-4">
-        <div class="flex items-center gap-3">
-          <UIcon name="i-heroicons-x-circle-16-solid" class="text-red-600" />
-          <span class="text-red-600 dark:text-red-400 font-medium">
-            Ingestion Failed
-          </span>
-        </div>
-
-        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
-          <div class="flex items-start gap-2">
-            <UIcon name="i-heroicons-exclamation-triangle-16-solid" class="text-red-600 mt-0.5" />
-            <div class="flex-1">
-              <p class="text-sm text-red-800 dark:text-red-200">
-                {{ errorMessage }}
-              </p>
-              <p v-if="errorDetails" class="text-xs text-red-600 dark:text-red-400 mt-1">
-                {{ errorDetails }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex gap-3">
-          <UButton
-            icon="i-heroicons-arrow-path-16-solid"
-            size="sm"
-            @click="retryIngestion"
-          >
-            Retry
-          </UButton>
-          <UButton
-            variant="outline"
-            color="gray"
-            size="sm"
-            @click="viewLogs"
-          >
-            View Logs
-          </UButton>
-        </div>
-      </div>
-
-      <div v-else class="space-y-4">
-        <div class="flex items-center gap-3">
-          <UIcon name="i-heroicons-clock-16-solid" class="text-gray-600" />
-          <span class="text-gray-600 dark:text-gray-400 font-medium">
-            Waiting to Start
-          </span>
-        </div>
-
-        <div class="text-sm text-gray-500 dark:text-gray-400">
-          Ingestion is queued and will start shortly.
-        </div>
-      </div>
-    </div>
-
-    <div v-if="status === 'running' && detailedProgress" class="space-y-3">
-      <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-        Detailed Progress
-      </h4>
-
-      <div class="space-y-2">
-        <div
-          v-for="step in progressSteps"
-          :key="step.name"
-          class="flex items-center gap-3"
-        >
-          <div class="w-4 h-4 rounded-full flex items-center justify-center"
-               :class="stepStatusClass(step.status)"
-          >
-            <UIcon
-              v-if="step.status === 'completed'"
-              name="i-heroicons-check-16-solid"
-              class="w-2 h-2 text-white"
-            />
-            <UIcon
-              v-else-if="step.status === 'running'"
-              name="i-heroicons-arrow-path-16-solid"
-              class="w-2 h-2 text-white animate-spin"
-            />
-          </div>
-
-          <div class="flex-1">
-            <div class="text-sm font-medium text-gray-900 dark:text-white">
-              {{ step.name }}
-            </div>
-            <div v-if="step.details" class="text-xs text-gray-500 dark:text-gray-400">
-              {{ step.details }}
-            </div>
-          </div>
-
-          <div v-if="step.progress !== undefined" class="text-xs text-gray-500 dark:text-gray-400">
-            {{ step.progress }}%
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  status: 'pending' | 'running' | 'completed' | 'failed'
-  progress?: number
-  currentStep?: string
-  currentOperation?: string
-  estimatedTime?: string
-  completedAt?: string
-  errorMessage?: string
-  errorDetails?: string
-  summary?: {
-    issues: number
-    pullRequests: number
-    discussions: number
-    files: number
-  }
-  showRefreshButton?: boolean
-  detailedProgress?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  progress: 0,
-  showRefreshButton: true,
-  detailedProgress: false
-})
-
-const emit = defineEmits<{
-  refresh: []
-  retry: []
-  viewLogs: []
-}>()
-
-const refreshing = ref(false)
-
-const progressSteps = ref([
-  { name: 'Fetching repository info', status: 'completed', details: 'Repository metadata retrieved' },
-  { name: 'Ingesting issues', status: 'running', progress: 75, details: 'Processing 127 issues...' },
-  { name: 'Ingesting pull requests', status: 'pending', details: 'Waiting to start' },
-  { name: 'Ingesting discussions', status: 'pending', details: 'Waiting to start' },
-  { name: 'Ingesting wiki pages', status: 'pending', details: 'Waiting to start' },
-  { name: 'Processing repository files', status: 'pending', details: 'Waiting to start' },
-  { name: 'Creating knowledge base', status: 'pending', details: 'Waiting to start' }
-])
-
-const statusIndicatorClass = computed(() => {
-  switch (props.status) {
-    case 'running':
-      return 'bg-blue-600 animate-pulse'
-    case 'completed':
-      return 'bg-green-600'
-    case 'failed':
-      return 'bg-red-600'
-    default:
-      return 'bg-gray-600'
-  }
-})
-
-const stepStatusClass = (status: string) => {
-  switch (status) {
-    case 'completed':
-      return 'bg-green-600'
-    case 'running':
-      return 'bg-blue-600 animate-pulse'
-    case 'failed':
-      return 'bg-red-600'
-    default:
-      return 'bg-gray-300 dark:bg-gray-600'
-  }
-}
-
-const refreshStatus = async () => {
-  refreshing.value = true
-  try {
-    emit('refresh')
-  } finally {
-    refreshing.value = false
-  }
-}
-
-const retryIngestion = () => {
-  emit('retry')
-}
-
-const viewLogs = () => {
-  emit('viewLogs')
-}
-
-watch(() => props.progress, (newProgress) => {
-  if (newProgress <= 20) {
-    progressSteps.value[0].status = 'running'
-    progressSteps.value[0].progress = newProgress * 5
-  } else if (newProgress <= 50) {
-    progressSteps.value[0].status = 'completed'
-    progressSteps.value[1].status = 'running'
-    progressSteps.value[1].progress = ((newProgress - 20) / 30) * 100
-  } else if (newProgress <= 70) {
-    progressSteps.value[0].status = 'completed'
-    progressSteps.value[1].status = 'completed'
-    progressSteps.value[2].status = 'running'
-    progressSteps.value[2].progress = ((newProgress - 50) / 20) * 100
-  } else if (newProgress <= 85) {
-    progressSteps.value[0].status = 'completed'
-    progressSteps.value[1].status = 'completed'
-    progressSteps.value[2].status = 'completed'
-    progressSteps.value[3].status = 'running'
-    progressSteps.value[3].progress = ((newProgress - 70) / 15) * 100
-  } else if (newProgress <= 95) {
-    progressSteps.value[0].status = 'completed'
-    progressSteps.value[1].status = 'completed'
-    progressSteps.value[2].status = 'completed'
-    progressSteps.value[3].status = 'completed'
-    progressSteps.value[4].status = 'running'
-    progressSteps.value[4].progress = ((newProgress - 85) / 10) * 100
-  } else {
-    progressSteps.value.forEach((step, index) => {
-      if (index < 5) {
-        step.status = 'completed'
-        step.progress = 100
-      } else if (index === 5 && newProgress < 100) {
-        step.status = 'running'
-        step.progress = ((newProgress - 95) / 5) * 100
-      } else if (index === 6 && newProgress >= 100) {
-        step.status = 'running'
-        step.progress = 50
-      }
-    })
-  }
-}, { immediate: true })
-</script>
diff --git a/frontend/components/GitHub/GitHubIntegrationSetup.vue b/frontend/components/GitHub/GitHubIntegrationSetup.vue
deleted file mode 100644
index 8a4d04d..0000000
--- a/frontend/components/GitHub/GitHubIntegrationSetup.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="text-center">
-      <div class="flex justify-center mb-4">
-        <div class="w-16 h-16 bg-gray-900 dark:bg-white rounded-lg flex items-center justify-center">
-          <UIcon name="i-simple-icons-github" class="text-3xl text-white dark:text-gray-900" />
-        </div>
-      </div>
-      <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-        Connect GitHub Integration
-      </h2>
-      <p class="text-gray-600 dark:text-gray-300">
-        Connect your GitHub account to start ingesting repository data
-      </p>
-    </div>
-
-    <div class="max-w-3xl mx-auto">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            Setup Steps
-          </h3>
-        </template>
-
-        <div class="space-y-6">
-          <div class="space-y-3">
-            <div class="flex items-center gap-3">
-              <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-semibold">
-                1
-              </div>
-              <h4 class="text-lg font-medium text-gray-900 dark:text-white">
-                Create a GitHub Personal Access Token
-              </h4>
-            </div>
-
-            <div class="ml-11 space-y-3">
-              <p class="text-gray-600 dark:text-gray-300">
-                Follow these steps to create a Personal Access Token on GitHub:
-              </p>
-
-              <ol class="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-300">
-                <li>Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)</li>
-                <li>Click "Generate new token (classic)"</li>
-                <li>Give your token a descriptive name (e.g., "Ch8r Integration")</li>
-                <li>Select an expiration period (recommended: 90 days)</li>
-                <li>Under "Select scopes", check the following permissions:</li>
-              </ol>
-
-              <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-2">
-                <h5 class="font-medium text-gray-900 dark:text-white">Required Scopes:</h5>
-                <div class="space-y-1">
-                  <div class="flex items-center gap-2 text-sm">
-                    <UIcon name="i-heroicons-check-circle-16-solid" class="text-green-600" />
-                    <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">repo</code>
-                    <span class="text-gray-600 dark:text-gray-300">- Full control of private repositories</span>
-                  </div>
-                  <div class="flex items-center gap-2 text-sm">
-                    <UIcon name="i-heroicons-check-circle-16-solid" class="text-green-600" />
-                    <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">read:org</code>
-                    <span class="text-gray-600 dark:text-gray-300">- Read org and team membership</span>
-                  </div>
-                  <div class="flex items-center gap-2 text-sm">
-                    <UIcon name="i-heroicons-check-circle-16-solid" class="text-green-600" />
-                    <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">read:discussion</code>
-                    <span class="text-gray-600 dark:text-gray-300">- Access discussions</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="flex gap-3">
-                <UButton
-                  icon="i-heroicons-arrow-top-right-on-square-16-solid"
-                  variant="outline"
-                  @click="openGitHubTokenPage"
-                >
-                  Open GitHub Token Page
-                </UButton>
-                <UButton
-                  icon="i-heroicons-question-mark-circle-16-solid"
-                  variant="ghost"
-                  color="gray"
-                  @click="showTokenHelp = !showTokenHelp"
-                >
-                  {{ showTokenHelp ? 'Hide' : 'Show' }} Help
-                </UButton>
-              </div>
-
-              <UCollapse v-model="showTokenHelp">
-                <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 space-y-3">
-                  <h5 class="font-medium text-blue-900 dark:text-blue-100">Why are these permissions needed?</h5>
-                  <ul class="list-disc list-inside space-y-1 text-sm text-blue-800 dark:text-blue-200">
-                    <li><strong>repo</strong>: Required to read repository data including issues, pull requests, and files</li>
-                    <li><strong>read:org</strong>: Required to access organization repositories if applicable</li>
-                    <li><strong>read:discussion</strong>: Required to access GitHub discussions</li>
-                  </ul>
-                  <p class="text-sm text-blue-800 dark:text-blue-200">
-                    We only use these permissions to read data. We never modify your repositories.
-                  </p>
-                </div>
-              </UCollapse>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <div class="flex items-center gap-3">
-              <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-semibold">
-                2
-              </div>
-              <h4 class="text-lg font-medium text-gray-900 dark:text-white">
-                Configure Integration in Ch8r
-              </h4>
-            </div>
-
-            <div class="ml-11 space-y-4">
-              <div class="space-y-3">
-                <C8Label for="integration-name" required>Integration Name</C8Label>
-                <C8Input
-                  id="integration-name"
-                  v-model="integrationData.name"
-                  placeholder="e.g., GitHub Integration"
-                  required
-                />
-                <p class="text-sm text-gray-500 dark:text-gray-400">
-                  A descriptive name for this GitHub integration
-                </p>
-              </div>
-
-              <div class="space-y-3">
-                <C8Label for="github-token" required>GitHub Personal Access Token</C8Label>
-                <div class="relative">
-                  <C8Input
-                    id="github-token"
-                    v-model="integrationData.token"
-                    :type="showToken ? 'text' : 'password'"
-                    placeholder="ghp_..."
-                    required
-                  />
-                  <UButton
-                    :icon="showToken ? 'i-heroicons-eye-slash-16-solid' : 'i-heroicons-eye-16-solid'"
-                    variant="ghost"
-                    color="gray"
-                    size="sm"
-                    class="absolute right-2 top-1/2 transform -translate-y-1/2"
-                    @click="showToken = !showToken"
-                  />
-                </div>
-                <p class="text-sm text-gray-500 dark:text-gray-400">
-                  Your GitHub Personal Access Token will be encrypted and stored securely
-                </p>
-              </div>
-
-              <div v-if="tokenValidation.status" class="space-y-2">
-                <UAlert
-                  :color="tokenValidation.status === 'valid' ? 'green' : 'red'"
-                  :variant="tokenValidation.status === 'valid' ? 'soft' : 'solid'"
-                  :icon="tokenValidation.status === 'valid' ? 'i-heroicons-check-circle-16-solid' : 'i-heroicons-x-circle-16-solid'"
-                >
-                  <template #title>
-                    {{ tokenValidation.status === 'valid' ? 'Token Valid' : 'Token Invalid' }}
-                  </template>
-                  <template #description>
-                    {{ tokenValidation.message }}
-                  </template>
-                </UAlert>
-              </div>
-
-              <div class="flex gap-3">
-                <UButton
-                  icon="i-heroicons-shield-check-16-solid"
-                  :loading="validatingToken"
-                  @click="validateToken"
-                >
-                  Validate Token
-                </UButton>
-                <UButton
-                  icon="i-heroicons-arrow-path-16-solid"
-                  variant="outline"
-                  @click="testConnection"
-                  :loading="testingConnection"
-                >
-                  Test Connection
-                </UButton>
-              </div>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <div class="flex items-center gap-3">
-              <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-semibold">
-                3
-              </div>
-              <h4 class="text-lg font-medium text-gray-900 dark:text-white">
-                Complete Setup
-              </h4>
-            </div>
-
-            <div class="ml-11 space-y-4">
-              <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
-                <div class="flex items-start gap-3">
-                  <UIcon name="i-heroicons-check-circle-16-solid" class="text-green-600 mt-0.5" />
-                  <div>
-                    <h5 class="font-medium text-green-900 dark:text-green-100">Ready to Connect</h5>
-                    <p class="text-sm text-green-800 dark:text-green-200 mt-1">
-                      Your GitHub integration is configured and ready to use.
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <div class="flex gap-3">
-                <UButton
-                  icon="i-heroicons-plug-16-solid"
-                  :loading="creatingIntegration"
-                  @click="createIntegration"
-                  :disabled="!canCreateIntegration"
-                >
-                  Connect GitHub Integration
-                </UButton>
-                <UButton
-                  variant="ghost"
-                  color="gray"
-                  @click="$emit('cancel')"
-                >
-                  Cancel
-                </UButton>
-              </div>
-            </div>
-          </div>
-        </div>
-      </UCard>
-    </div>
-
-    <UModal v-model="showSuccessModal">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            Integration Connected Successfully!
-          </h3>
-        </template>
-
-        <div class="space-y-4">
-          <div class="text-center">
-            <UIcon name="i-heroicons-check-circle-16-solid" class="mx-auto text-4xl text-green-600 mb-4" />
-            <p class="text-gray-600 dark:text-gray-300">
-              Your GitHub integration has been connected successfully. You can now start ingesting repositories.
-            </p>
-          </div>
-
-          <div class="flex justify-center gap-3">
-            <UButton
-              icon="i-heroicons-plus-16-solid"
-              @click="goToIngestion"
-            >
-              Ingest First Repository
-            </UButton>
-            <UButton
-              variant="outline"
-              @click="$emit('success')"
-            >
-              Close
-            </UButton>
-          </div>
-        </div>
-      </UCard>
-    </UModal>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  appId: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  success: []
-  cancel: []
-  integrationCreated: [integration: any]
-}>()
-
-const showToken = ref(false)
-const showTokenHelp = ref(false)
-const showSuccessModal = ref(false)
-const validatingToken = ref(false)
-const testingConnection = ref(false)
-const creatingIntegration = ref(false)
-
-const integrationData = ref({
-  name: 'GitHub Integration',
-  token: ''
-})
-
-const tokenValidation = ref<{
-  status: 'valid' | 'invalid' | null
-  message: string
-}>({
-  status: null,
-  message: ''
-})
-
-const canCreateIntegration = computed(() => {
-  return integrationData.value.name.trim() !== '' &&
-         integrationData.value.token.trim() !== '' &&
-         tokenValidation.value.status === 'valid'
-})
-
-const openGitHubTokenPage = () => {
-  window.open('https://github.com/settings/tokens', '_blank')
-}
-
-const validateToken = async () => {
-  if (!integrationData.value.token.trim()) {
-    tokenValidation.value = {
-      status: 'invalid',
-      message: 'Please enter a GitHub token'
-    }
-    return
-  }
-
-  try {
-    validatingToken.value = true
-
-    await new Promise(resolve => setTimeout(resolve, 1000))
-
-    const token = integrationData.value.token.trim()
-    if (token.startsWith('ghp_') && token.length >= 40) {
-      tokenValidation.value = {
-        status: 'valid',
-        message: 'Token format is valid'
-      }
-    } else {
-      tokenValidation.value = {
-        status: 'invalid',
-        message: 'Invalid token format. Please check your token.'
-      }
-    }
-  } catch (error) {
-    tokenValidation.value = {
-      status: 'invalid',
-      message: 'Failed to validate token. Please try again.'
-    }
-  } finally {
-    validatingToken.value = false
-  }
-}
-
-const testConnection = async () => {
-  if (!canCreateIntegration.value) return
-
-  try {
-    testingConnection.value = true
-
-    await new Promise(resolve => setTimeout(resolve, 2000))
-
-    const toast = useToast()
-    toast.add({
-      title: 'Connection Test Successful',
-      description: 'Successfully connected to GitHub API.',
-      color: 'green'
-    })
-  } catch (error) {
-    const toast = useToast()
-    toast.add({
-      title: 'Connection Test Failed',
-      description: 'Failed to connect to GitHub API. Please check your token.',
-      color: 'red'
-    })
-  } finally {
-    testingConnection.value = false
-  }
-}
-
-const createIntegration = async () => {
-  if (!canCreateIntegration.value) return
-
-  try {
-    creatingIntegration.value = true
-
-    await new Promise(resolve => setTimeout(resolve, 2000))
-
-    const integration = {
-      id: Date.now(),
-      name: integrationData.value.name,
-      provider: 'github',
-      type: 'pms',
-      created_at: new Date().toISOString()
-    }
-
-    emit('integrationCreated', integration)
-    showSuccessModal.value = true
-
-  } catch (error) {
-    const toast = useToast()
-    toast.add({
-      title: 'Integration Creation Failed',
-      description: 'Failed to create GitHub integration. Please try again.',
-      color: 'red'
-    })
-  } finally {
-    creatingIntegration.value = false
-  }
-}
-
-const goToIngestion = () => {
-  navigateTo(`/applications/${props.appId}/github`)
-}
-
-watch(() => integrationData.value.token, () => {
-  tokenValidation.value = { status: null, message: '' }
-})
-</script>
diff --git a/frontend/components/GitHub/GitHubIssuesList.vue b/frontend/components/GitHub/GitHubIssuesList.vue
deleted file mode 100644
index 6879bb1..0000000
--- a/frontend/components/GitHub/GitHubIssuesList.vue
+++ /dev/null
@@ -1,288 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-      <div class="flex flex-col lg:flex-row gap-4">
-        <div class="flex-1">
-          <UInput
-            v-model="filters.search"
-            placeholder="Search issues..."
-            icon="i-heroicons-magnifying-glass-16-solid"
-            size="sm"
-          />
-        </div>
-
-        <div class="w-full lg:w-48">
-          <USelect
-            v-model="filters.state"
-            :options="stateOptions"
-            size="sm"
-          />
-        </div>
-
-        <div class="w-full lg:w-48">
-          <UInput
-            v-model="filters.author"
-            placeholder="Filter by author..."
-            size="sm"
-          />
-        </div>
-
-        <UButton
-          variant="ghost"
-          color="gray"
-          size="sm"
-          icon="i-heroicons-x-mark-16-solid"
-          @click="clearFilters"
-        >
-          Clear
-        </UButton>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-gray-900 dark:text-white">
-          {{ stats.totalIssues }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Total Issues</div>
-      </UCard>
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-green-600 dark:text-green-400">
-          {{ stats.openIssues }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Open Issues</div>
-      </UCard>
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-gray-600 dark:text-gray-400">
-          {{ stats.closedIssues }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Closed Issues</div>
-      </UCard>
-    </div>
-
-    <div v-if="loading" class="flex justify-center py-8">
-      <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin text-2xl text-blue-600" />
-    </div>
-
-    <UAlert
-      v-else-if="error"
-      color="red"
-      variant="soft"
-      icon="i-heroicons-exclamation-triangle-16-solid"
-    >
-      <template #title>Error Loading Issues</template>
-      <template #description>{{ error }}</template>
-      <template #actions>
-        <UButton @click="refreshIssues" variant="solid" color="red" size="xs">
-          Retry
-        </UButton>
-      </template>
-    </UAlert>
-
-    <UCard
-      v-else-if="filteredIssues.length === 0"
-      class="text-center py-8"
-    >
-      <UIcon name="i-heroicons-inbox-16-solid" class="mx-auto text-4xl text-gray-400 mb-4" />
-      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
-        No issues found
-      </h3>
-      <p class="text-gray-500 dark:text-gray-400">
-        {{ filters.search || filters.author ? 'Try adjusting your filters' : 'This repository has no issues' }}
-      </p>
-    </UCard>
-
-    <div v-else class="space-y-3">
-      <div
-        v-for="issue in paginatedIssues"
-        :key="issue.id"
-        class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-shadow"
-      >
-        <div class="flex items-start justify-between">
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-2">
-              <h4 class="text-lg font-medium text-gray-900 dark:text-white truncate">
-                {{ issue.title }}
-              </h4>
-              <UBadge
-                :color="issue.state === 'open' ? 'green' : 'gray'"
-                :variant="issue.state === 'open' ? 'solid' : 'outline'"
-                size="xs"
-              >
-                {{ issue.state }}
-              </UBadge>
-            </div>
-
-            <p v-if="issue.body" class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2 mb-3">
-              {{ issue.body }}
-            </p>
-
-            <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-user-16-solid" />
-                {{ issue.author }}
-              </span>
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-chat-bubble-left-right-16-solid" />
-                {{ issue.comment_count }} comments
-              </span>
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-calendar-16-solid" />
-                {{ formatDate(issue.created_at) }}
-              </span>
-              <span v-if="issue.labels.length > 0" class="flex items-center gap-1">
-                <UIcon name="i-heroicons-tag-16-solid" />
-                {{ issue.labels.length }} label{{ issue.labels.length !== 1 ? 's' : '' }}
-              </span>
-            </div>
-
-            <div v-if="issue.labels.length > 0" class="flex flex-wrap gap-1 mt-2">
-              <UBadge
-                v-for="label in issue.labels.slice(0, 5)"
-                :key="label"
-                variant="soft"
-                size="xs"
-              >
-                {{ label }}
-              </UBadge>
-              <UBadge
-                v-if="issue.labels.length > 5"
-                variant="outline"
-                size="xs"
-              >
-                +{{ issue.labels.length - 5 }} more
-              </UBadge>
-            </div>
-          </div>
-
-          <div class="flex items-center gap-2 ml-4">
-            <UButton
-              :to="issue.url"
-              target="_blank"
-              variant="ghost"
-              color="gray"
-              size="xs"
-              icon="i-heroicons-arrow-top-right-on-square-16-solid"
-            >
-              View on GitHub
-            </UButton>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="totalPages > 1" class="flex justify-center">
-      <UPagination
-        v-model="currentPage"
-        :page-count="pageSize"
-        :total="filteredIssues.length"
-        :max="7"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { GitHubIssue, GitHubFilters } from '~/types/github'
-
-interface Props {
-  repositoryId: number
-  issues?: GitHubIssue[]
-  loading?: boolean
-  error?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  issues: () => [],
-  loading: false,
-  error: null
-})
-
-const emit = defineEmits<{
-  refresh: []
-  filterChange: [filters: GitHubFilters]
-}>()
-
-const githubStore = useGitHubStore()
-
-const currentPage = ref(1)
-const pageSize = 20
-
-const filters = ref<GitHubFilters>({
-  state: 'all',
-  author: '',
-  labels: [],
-  since: '',
-  until: '',
-  search: ''
-})
-
-const stateOptions = [
-  { value: 'all', label: 'All Issues' },
-  { value: 'open', label: 'Open Only' },
-  { value: 'closed', label: 'Closed Only' }
-]
-
-const stats = computed(() => githubStore.stats)
-
-const filteredIssues = computed(() => {
-  let filtered = props.issues
-
-  if (filters.value.state !== 'all') {
-    filtered = filtered.filter(issue => issue.state === filters.value.state)
-  }
-
-  if (filters.value.author) {
-    filtered = filtered.filter(issue =>
-      issue.author.toLowerCase().includes(filters.value.author.toLowerCase())
-    )
-  }
-
-  if (filters.value.search) {
-    const search = filters.value.search.toLowerCase()
-    filtered = filtered.filter(issue =>
-      issue.title.toLowerCase().includes(search) ||
-      issue.body.toLowerCase().includes(search)
-    )
-  }
-
-  return filtered
-})
-
-const totalPages = computed(() => Math.ceil(filteredIssues.value.length / pageSize))
-
-const paginatedIssues = computed(() => {
-  const start = (currentPage.value - 1) * pageSize
-  const end = start + pageSize
-  return filteredIssues.value.slice(start, end)
-})
-
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString()
-}
-
-const clearFilters = () => {
-  filters.value = {
-    state: 'all',
-    author: '',
-    labels: [],
-    since: '',
-    until: '',
-    search: ''
-  }
-  currentPage.value = 1
-}
-
-const refreshIssues = () => {
-  emit('refresh')
-}
-
-watch(filters, (newFilters) => {
-  currentPage.value = 1
-  emit('filterChange', newFilters)
-}, { deep: true })
-
-watch(() => props.issues, () => {
-  currentPage.value = 1
-}, { deep: true })
-</script>
diff --git a/frontend/components/GitHub/GitHubPullRequestsList.vue b/frontend/components/GitHub/GitHubPullRequestsList.vue
deleted file mode 100644
index 63b5c77..0000000
--- a/frontend/components/GitHub/GitHubPullRequestsList.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-      <div class="flex flex-col lg:flex-row gap-4">
-        <div class="flex-1">
-          <UInput
-            v-model="filters.search"
-            placeholder="Search pull requests..."
-            icon="i-heroicons-magnifying-glass-16-solid"
-            size="sm"
-          />
-        </div>
-
-        <div class="w-full lg:w-48">
-          <USelect
-            v-model="filters.state"
-            :options="stateOptions"
-            size="sm"
-          />
-        </div>
-
-        <div class="w-full lg:w-48">
-          <UInput
-            v-model="filters.author"
-            placeholder="Filter by author..."
-            size="sm"
-          />
-        </div>
-
-        <UButton
-          variant="ghost"
-          color="gray"
-          size="sm"
-          icon="i-heroicons-x-mark-16-solid"
-          @click="clearFilters"
-        >
-          Clear
-        </UButton>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-gray-900 dark:text-white">
-          {{ stats.totalPRs }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Total PRs</div>
-      </UCard>
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
-          {{ stats.openPRs }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Open PRs</div>
-      </UCard>
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-green-600 dark:text-green-400">
-          {{ stats.mergedPRs }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Merged PRs</div>
-      </UCard>
-      <UCard class="text-center">
-        <div class="text-2xl font-bold text-gray-600 dark:text-gray-400">
-          {{ stats.closedPRs }}
-        </div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Closed PRs</div>
-      </UCard>
-    </div>
-
-    <div v-if="loading" class="flex justify-center py-8">
-      <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin text-2xl text-blue-600" />
-    </div>
-
-    <UAlert
-      v-else-if="error"
-      color="red"
-      variant="soft"
-      icon="i-heroicons-exclamation-triangle-16-solid"
-    >
-      <template #title>Error Loading Pull Requests</template>
-      <template #description>{{ error }}</template>
-      <template #actions>
-        <UButton @click="refreshPullRequests" variant="solid" color="red" size="xs">
-          Retry
-        </UButton>
-      </template>
-    </UAlert>
-
-    <UCard
-      v-else-if="filteredPullRequests.length === 0"
-      class="text-center py-8"
-    >
-      <UIcon name="i-heroicons-code-bracket-square-16-solid" class="mx-auto text-4xl text-gray-400 mb-4" />
-      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
-        No pull requests found
-      </h3>
-      <p class="text-gray-500 dark:text-gray-400">
-        {{ filters.search || filters.author ? 'Try adjusting your filters' : 'This repository has no pull requests' }}
-      </p>
-    </UCard>
-
-    <div v-else class="space-y-3">
-      <div
-        v-for="pr in paginatedPullRequests"
-        :key="pr.id"
-        class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-shadow"
-      >
-        <div class="flex items-start justify-between">
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-2">
-              <h4 class="text-lg font-medium text-gray-900 dark:text-white truncate">
-                {{ pr.title }}
-              </h4>
-              <UBadge
-                :color="prStateColor(pr.state)"
-                :variant="pr.state === 'open' ? 'solid' : 'outline'"
-                size="xs"
-              >
-                {{ pr.state }}
-              </UBadge>
-              <UBadge
-                v-if="pr.merged"
-                color="purple"
-                variant="solid"
-                size="xs"
-              >
-                Merged
-              </UBadge>
-            </div>
-
-            <p v-if="pr.body" class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2 mb-3">
-              {{ pr.body }}
-            </p>
-
-            <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mb-2">
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-arrow-right-16-solid" />
-                {{ pr.head_branch }}
-              </span>
-              <span>→</span>
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-arrow-left-16-solid" />
-                {{ pr.base_branch }}
-              </span>
-            </div>
-
-            <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-user-16-solid" />
-                {{ pr.author }}
-              </span>
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-chat-bubble-left-right-16-solid" />
-                {{ pr.comment_count }} comments
-              </span>
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-document-text-16-solid" />
-                {{ pr.file_count }} files
-              </span>
-              <span class="flex items-center gap-1">
-                <UIcon name="i-heroicons-calendar-16-solid" />
-                {{ formatDate(pr.created_at) }}
-              </span>
-              <span v-if="pr.labels.length > 0" class="flex items-center gap-1">
-                <UIcon name="i-heroicons-tag-16-solid" />
-                {{ pr.labels.length }} label{{ pr.labels.length !== 1 ? 's' : '' }}
-              </span>
-            </div>
-
-            <div class="flex items-center gap-4 text-xs mt-2">
-              <span class="flex items-center gap-1 text-green-600 dark:text-green-400">
-                <UIcon name="i-heroicons-plus-16-solid" />
-                +{{ pr.additions }}
-              </span>
-              <span class="flex items-center gap-1 text-red-600 dark:text-red-400">
-                <UIcon name="i-heroicons-minus-16-solid" />
-                -{{ pr.deletions }}
-              </span>
-              <span class="text-gray-500 dark:text-gray-400">
-                {{ pr.changed_files }} files changed
-              </span>
-            </div>
-
-            <div v-if="pr.labels.length > 0" class="flex flex-wrap gap-1 mt-2">
-              <UBadge
-                v-for="label in pr.labels.slice(0, 5)"
-                :key="label"
-                variant="soft"
-                size="xs"
-              >
-                {{ label }}
-              </UBadge>
-              <UBadge
-                v-if="pr.labels.length > 5"
-                variant="outline"
-                size="xs"
-              >
-                +{{ pr.labels.length - 5 }} more
-              </UBadge>
-            </div>
-          </div>
-
-          <div class="flex items-center gap-2 ml-4">
-            <UButton
-              :to="pr.url"
-              target="_blank"
-              variant="ghost"
-              color="gray"
-              size="xs"
-              icon="i-heroicons-arrow-top-right-on-square-16-solid"
-            >
-              View on GitHub
-            </UButton>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="totalPages > 1" class="flex justify-center">
-      <UPagination
-        v-model="currentPage"
-        :page-count="pageSize"
-        :total="filteredPullRequests.length"
-        :max="7"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { GitHubPullRequest, GitHubFilters } from '~/types/github'
-
-interface Props {
-  repositoryId: number
-  pullRequests?: GitHubPullRequest[]
-  loading?: boolean
-  error?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  pullRequests: () => [],
-  loading: false,
-  error: null
-})
-
-const emit = defineEmits<{
-  refresh: []
-  filterChange: [filters: GitHubFilters]
-}>()
-
-const githubStore = useGitHubStore()
-
-const currentPage = ref(1)
-const pageSize = 20
-
-const filters = ref<GitHubFilters>({
-  state: 'all',
-  author: '',
-  labels: [],
-  since: '',
-  until: '',
-  search: ''
-})
-
-const stateOptions = [
-  { value: 'all', label: 'All PRs' },
-  { value: 'open', label: 'Open Only' },
-  { value: 'closed', label: 'Closed Only' },
-  { value: 'merged', label: 'Merged Only' }
-]
-
-const stats = computed(() => {
-  const totalPRs = props.pullRequests.length
-  const openPRs = props.pullRequests.filter(pr => pr.state === 'open').length
-  const mergedPRs = props.pullRequests.filter(pr => pr.merged).length
-  const closedPRs = props.pullRequests.filter(pr => pr.state === 'closed' && !pr.merged).length
-
-  return {
-    totalPRs,
-    openPRs,
-    mergedPRs,
-    closedPRs
-  }
-})
-
-const filteredPullRequests = computed(() => {
-  let filtered = props.pullRequests
-
-  if (filters.value.state !== 'all') {
-    if (filters.value.state === 'merged') {
-      filtered = filtered.filter(pr => pr.merged)
-    } else {
-      filtered = filtered.filter(pr => pr.state === filters.value.state)
-    }
-  }
-
-  if (filters.value.author) {
-    filtered = filtered.filter(pr =>
-      pr.author.toLowerCase().includes(filters.value.author.toLowerCase())
-    )
-  }
-
-  if (filters.value.search) {
-    const search = filters.value.search.toLowerCase()
-    filtered = filtered.filter(pr =>
-      pr.title.toLowerCase().includes(search) ||
-      pr.body.toLowerCase().includes(search)
-    )
-  }
-
-  return filtered
-})
-
-const totalPages = computed(() => Math.ceil(filteredPullRequests.value.length / pageSize))
-
-const paginatedPullRequests = computed(() => {
-  const start = (currentPage.value - 1) * pageSize
-  const end = start + pageSize
-  return filteredPullRequests.value.slice(start, end)
-})
-
-const prStateColor = (state: string) => {
-  switch (state) {
-    case 'open':
-      return 'blue'
-    case 'closed':
-      return 'gray'
-    case 'merged':
-      return 'purple'
-    default:
-      return 'gray'
-  }
-}
-
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString()
-}
-
-const clearFilters = () => {
-  filters.value = {
-    state: 'all',
-    author: '',
-    labels: [],
-    since: '',
-    until: '',
-    search: ''
-  }
-  currentPage.value = 1
-}
-
-const refreshPullRequests = () => {
-  emit('refresh')
-}
-
-watch(filters, (newFilters) => {
-  currentPage.value = 1
-  emit('filterChange', newFilters)
-}, { deep: true })
-
-watch(() => props.pullRequests, () => {
-  currentPage.value = 1
-}, { deep: true })
-</script>
diff --git a/frontend/components/GitHub/GitHubRepositoryCard.vue b/frontend/components/GitHub/GitHubRepositoryCard.vue
deleted file mode 100644
index c209cec..0000000
--- a/frontend/components/GitHub/GitHubRepositoryCard.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-6 transition-all duration-200 hover:shadow-lg">
-    <div class="flex items-start justify-between mb-4">
-      <div class="flex-1">
-        <div class="flex items-center gap-2 mb-2">
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            {{ repository.name }}
-          </h3>
-          <span class="text-sm text-gray-500 dark:text-gray-400">
-            {{ repository.owner }}
-          </span>
-        </div>
-        <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
-          {{ repository.full_name }}
-        </p>
-        <p v-if="repository.description" class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
-          {{ repository.description }}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <UBadge
-          :color="statusColor"
-          :variant="statusVariant"
-          class="text-xs"
-        >
-          {{ statusText }}
-        </UBadge>
-
-        <UDropdown
-          v-if="showActions"
-          :items="actionItems"
-          :popper="{ placement: 'bottom-end' }"
-        >
-          <UButton
-            icon="i-heroicons-ellipsis-horizontal-20-solid"
-            variant="ghost"
-            color="gray"
-            size="xs"
-            square
-          />
-        </UDropdown>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
-      <div class="text-center">
-        <div class="text-lg font-semibold text-gray-900 dark:text-white">
-          {{ repository.issue_count || 0 }}
-        </div>
-        <div class="text-xs text-gray-500 dark:text-gray-400">Issues</div>
-      </div>
-      <div class="text-center">
-        <div class="text-lg font-semibold text-gray-900 dark:text-white">
-          {{ repository.pr_count || 0 }}
-        </div>
-        <div class="text-xs text-gray-500 dark:text-gray-400">PRs</div>
-      </div>
-      <div class="text-center">
-        <div class="text-lg font-semibold text-gray-900 dark:text-white">
-          {{ repository.discussion_count || 0 }}
-        </div>
-        <div class="text-xs text-gray-500 dark:text-gray-400">Discussions</div>
-      </div>
-      <div class="text-center">
-        <div class="text-lg font-semibold text-gray-900 dark:text-white">
-          {{ repository.wiki_page_count || 0 }}
-        </div>
-        <div class="text-xs text-gray-500 dark:text-gray-400">Wiki Pages</div>
-      </div>
-    </div>
-
-    <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-      <div class="flex items-center gap-4">
-        <span v-if="repository.is_private" class="flex items-center gap-1">
-          <UIcon name="i-heroicons-lock-closed-16-solid" />
-          Private
-        </span>
-        <span v-else class="flex items-center gap-1">
-          <UIcon name="i-heroicons-globe-alt-16-solid" />
-          Public
-        </span>
-        <span class="flex items-center gap-1">
-          <UIcon name="i-heroicons-code-bracket-16-solid" />
-          {{ repository.default_branch }}
-        </span>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <span v-if="repository.last_ingested_at">
-          Last synced: {{ formatDate(repository.last_ingested_at) }}
-        </span>
-        <UButton
-          :to="`/applications/${appId}/github/${repository.id}`"
-          variant="ghost"
-          color="primary"
-          size="xs"
-        >
-          View Details
-        </UButton>
-      </div>
-    </div>
-
-    <div v-if="repository.ingestion_status === 'running'" class="mt-4">
-      <div class="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400">
-        <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin" />
-        Ingesting repository data...
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { GitHubRepository } from '~/types/github'
-
-interface Props {
-  repository: GitHubRepository
-  appId: string
-  showActions?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showActions: true
-})
-
-const emit = defineEmits<{
-  delete: [repository: GitHubRepository]
-  reIngest: [repository: GitHubRepository]
-  refresh: [repository: GitHubRepository]
-}>()
-
-const githubStore = useGitHubStore()
-
-const statusColor = computed(() => {
-  switch (props.repository.ingestion_status) {
-    case 'completed':
-      return 'green'
-    case 'running':
-      return 'blue'
-    case 'failed':
-      return 'red'
-    default:
-      return 'gray'
-  }
-})
-
-const statusVariant = computed(() => {
-  switch (props.repository.ingestion_status) {
-    case 'completed':
-      return 'solid'
-    case 'running':
-      return 'soft'
-    case 'failed':
-      return 'solid'
-    default:
-      return 'outline'
-  }
-})
-
-const statusText = computed(() => {
-  switch (props.repository.ingestion_status) {
-    case 'completed':
-      return 'Ready'
-    case 'running':
-      return 'Ingesting'
-    case 'failed':
-      return 'Failed'
-    default:
-      return 'Pending'
-  }
-})
-
-const actionItems = computed(() => [
-  [
-    {
-      label: 'View Details',
-      icon: 'i-heroicons-eye-16-solid',
-      click: () => navigateTo(`/applications/${props.appId}/github/${props.repository.id}`)
-    },
-    {
-      label: 'Refresh Data',
-      icon: 'i-heroicons-arrow-path-16-solid',
-      click: () => emit('refresh', props.repository)
-    },
-    {
-      label: 'Re-ingest',
-      icon: 'i-heroicons-arrow-down-tray-16-solid',
-      click: () => emit('reIngest', props.repository)
-    }
-  ],
-  [
-    {
-      label: 'Delete',
-      icon: 'i-heroicons-trash-16-solid',
-      click: () => emit('delete', props.repository)
-    }
-  ]
-])
-
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString()
-}
-</script>
diff --git a/frontend/components/GitHub/GitHubRepositoryIngestion.vue b/frontend/components/GitHub/GitHubRepositoryIngestion.vue
deleted file mode 100644
index adecdc1..0000000
--- a/frontend/components/GitHub/GitHubRepositoryIngestion.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-  <UCard>
-    <template #header>
-      <div class="flex items-center justify-between">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-          Ingest GitHub Repository
-        </h3>
-        <UButton
-          icon="i-heroicons-x-mark-20-solid"
-          variant="ghost"
-          color="gray"
-          size="sm"
-          square
-          @click="$emit('cancel')"
-        />
-      </div>
-    </template>
-
-    <form @submit.prevent="handleSubmit" class="space-y-6">
-      <div class="space-y-2">
-        <C8Label for="repository" required>Repository</C8Label>
-        <div class="flex gap-2">
-          <div class="flex-1">
-            <C8Input
-              id="owner"
-              v-model="form.owner"
-              placeholder="owner"
-              required
-              :disabled="loading"
-            />
-          </div>
-          <span class="flex items-center text-gray-500 dark:text-gray-400">/</span>
-          <div class="flex-1">
-            <C8Input
-              id="repo"
-              v-model="form.repo"
-              placeholder="repository-name"
-              required
-              :disabled="loading"
-            />
-          </div>
-        </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Enter the GitHub repository in the format: owner/repository-name
-        </p>
-      </div>
-
-      <div class="space-y-2">
-        <C8Label for="integration" required>GitHub Integration</C8Label>
-        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-          <div class="flex items-center gap-2">
-            <UIcon name="i-simple-icons-github" class="text-gray-600 dark:text-gray-400" />
-            <span class="text-gray-900 dark:text-white">
-              {{ integrationName || 'No GitHub integration configured' }}
-            </span>
-          </div>
-          <p v-if="!integrationName" class="text-sm text-red-600 dark:text-red-400 mt-2">
-            Please configure a GitHub integration in the Integrations page first.
-          </p>
-        </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Using the configured GitHub integration for ingestion.
-        </p>
-      </div>
-
-      <div class="space-y-2">
-        <C8Label for="since">Ingest Since (Optional)</C8Label>
-        <C8Input
-          id="since"
-          v-model="form.since"
-          type="datetime-local"
-          placeholder="Only ingest data since this date"
-          :disabled="loading"
-        />
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Only ingest data created since this date. Leave empty to ingest all data.
-        </p>
-      </div>
-
-      <UAlert
-        v-if="error"
-        color="red"
-        variant="soft"
-        icon="i-heroicons-exclamation-triangle-16-solid"
-      >
-        <template #title>Ingestion Error</template>
-        <template #description>{{ error }}</template>
-      </UAlert>
-
-      <UAlert
-        v-if="success"
-        color="green"
-        variant="soft"
-        icon="i-heroicons-check-circle-16-solid"
-      >
-        <template #title>Ingestion Started</template>
-        <template #description>
-          Repository ingestion has started successfully. The repository will appear in your knowledge base once completed.
-        </template>
-      </UAlert>
-
-      <div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-        <UButton
-          variant="ghost"
-          color="gray"
-          :disabled="loading"
-          @click="$emit('cancel')"
-        >
-          Cancel
-        </UButton>
-        <UButton
-          type="submit"
-          :loading="loading"
-          :disabled="!isFormValid"
-        >
-          {{ loading ? 'Ingesting...' : 'Start Ingestion' }}
-        </UButton>
-      </div>
-    </form>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-import type { GitHubIngestionRequest } from '~/types/github'
-
-interface Props {
-  appId: string
-  githubIntegration?: {
-    id: number
-    name: string
-    provider: string
-  }
-}
-
-const props = withDefaults(defineProps<Props>(), {})
-
-const emit = defineEmits<{
-  cancel: []
-  success: [data: GitHubIngestionRequest]
-  error: [error: string]
-}>()
-
-const githubStore = useGitHubStore()
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-const success = ref(false)
-
-const form = ref<GitHubIngestionRequest>({
-  owner: '',
-  repo: '',
-  app_integration_id: 0,
-  since: ''
-})
-
-const integrationName = computed(() => {
-  return props.githubIntegration?.name
-})
-
-const isFormValid = computed(() => {
-  return form.value.owner.trim() !== '' &&
-         form.value.repo.trim() !== '' &&
-         props.githubIntegration &&
-         props.githubIntegration.id > 0
-})
-
-const handleSubmit = async () => {
-  if (!isFormValid.value) return
-
-  try {
-    loading.value = true
-    error.value = null
-    success.value = false
-
-    let since = undefined
-    if (form.value.since) {
-      since = new Date(form.value.since).toISOString()
-    }
-
-    const ingestionData = {
-      owner: form.value.owner.trim(),
-      repo: form.value.repo.trim(),
-      app_integration_id: props.githubIntegration!.id,
-      since
-    }
-
-    await githubStore.ingestRepository(ingestionData)
-
-    success.value = true
-    emit('success', ingestionData)
-
-    setTimeout(() => {
-      resetForm()
-      emit('cancel')
-    }, 2000)
-
-  } catch (err: any) {
-    error.value = err.message || 'Failed to start repository ingestion'
-    emit('error', error.value)
-  } finally {
-    loading.value = false
-  }
-}
-
-const resetForm = () => {
-  form.value = {
-    owner: '',
-    repo: '',
-    app_integration_id: 0,
-    since: ''
-  }
-  error.value = null
-  success.value = false
-}
-
-watch(() => props.githubIntegration, (newIntegration) => {
-  if (newIntegration) {
-    form.value.app_integration_id = newIntegration.id
-  }
-}, { immediate: true })
-</script>
diff --git a/frontend/components/GitHub/GitHubSearchFilter.vue b/frontend/components/GitHub/GitHubSearchFilter.vue
deleted file mode 100644
index 9b53169..0000000
--- a/frontend/components/GitHub/GitHubSearchFilter.vue
+++ /dev/null
@@ -1,442 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div class="relative">
-      <UInput
-        v-model="searchQuery"
-        placeholder="Search issues, pull requests, discussions..."
-        icon="i-heroicons-magnifying-glass-16-solid"
-        size="lg"
-        @keyup.enter="performSearch"
-      />
-      <UButton
-        v-if="searchQuery"
-        icon="i-heroicons-x-mark-16-solid"
-        variant="ghost"
-        color="gray"
-        size="sm"
-        class="absolute right-2 top-1/2 transform -translate-y-1/2"
-        @click="clearSearch"
-      />
-    </div>
-
-    <div class="flex items-center justify-between">
-      <UButton
-        variant="ghost"
-        color="gray"
-        size="sm"
-        icon="i-heroicons-funnel-16-solid"
-        @click="showAdvancedFilters = !showAdvancedFilters"
-      >
-        Advanced Filters
-        <UBadge
-          v-if="activeFilterCount > 0"
-          color="blue"
-          variant="solid"
-          size="xs"
-          class="ml-2"
-        >
-          {{ activeFilterCount }}
-        </UBadge>
-      </UButton>
-
-      <div class="flex items-center gap-2">
-        <span class="text-sm text-gray-500 dark:text-gray-400">
-          {{ totalResults }} results
-        </span>
-        <USelect
-          v-model="sortBy"
-          :options="sortOptions"
-          size="sm"
-          class="w-32"
-        />
-      </div>
-    </div>
-
-    <UCollapse v-model="showAdvancedFilters">
-      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4">
-        <div class="space-y-2">
-          <C8Label>Content Type</C8Label>
-          <div class="flex flex-wrap gap-2">
-            <UButton
-              v-for="type in contentTypes"
-              :key="type.value"
-              :variant="filters.contentTypes.includes(type.value) ? 'solid' : 'outline'"
-              :color="filters.contentTypes.includes(type.value) ? 'blue' : 'gray'"
-              size="sm"
-              @click="toggleContentType(type.value)"
-            >
-              {{ type.label }}
-            </UButton>
-          </div>
-        </div>
-
-        <div class="space-y-2">
-          <C8Label>State</C8Label>
-          <div class="flex flex-wrap gap-2">
-            <UButton
-              v-for="state in stateOptions"
-              :key="state.value"
-              :variant="filters.state === state.value ? 'solid' : 'outline'"
-              :color="filters.state === state.value ? 'blue' : 'gray'"
-              size="sm"
-              @click="filters.state = state.value"
-            >
-              {{ state.label }}
-            </UButton>
-          </div>
-        </div>
-
-        <div class="space-y-2">
-          <C8Label for="author">Author</C8Label>
-          <UInput
-            id="author"
-            v-model="filters.author"
-            placeholder="Filter by author..."
-            size="sm"
-          />
-        </div>
-
-        <div class="space-y-2">
-          <C8Label>Labels</C8Label>
-          <div class="flex gap-2">
-            <UInput
-              v-model="labelInput"
-              placeholder="Add label..."
-              size="sm"
-              @keyup.enter="addLabel"
-            />
-            <UButton
-              icon="i-heroicons-plus-16-solid"
-              variant="outline"
-              size="sm"
-              @click="addLabel"
-            >
-              Add
-            </UButton>
-          </div>
-          <div class="flex flex-wrap gap-2">
-            <UBadge
-              v-for="label in filters.labels"
-              :key="label"
-              color="blue"
-              variant="soft"
-              class="cursor-pointer"
-              @click="removeLabel(label)"
-            >
-              {{ label }}
-              <UIcon name="i-heroicons-x-mark-16-solid" class="ml-1" />
-            </UBadge>
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="space-y-2">
-            <C8Label for="date-from">From</C8Label>
-            <UInput
-              id="date-from"
-              v-model="filters.dateFrom"
-              type="date"
-              size="sm"
-            />
-          </div>
-          <div class="space-y-2">
-            <C8Label for="date-to">To</C8Label>
-            <UInput
-              id="date-to"
-              v-model="filters.dateTo"
-              type="date"
-              size="sm"
-            />
-          </div>
-        </div>
-
-        <div v-if="repositories.length > 1" class="space-y-2">
-          <C8Label>Repository</C8Label>
-          <USelect
-            v-model="filters.repository"
-            :options="repositoryOptions"
-            placeholder="All repositories"
-            size="sm"
-            clearable
-          />
-        </div>
-
-        <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
-          <UButton
-            variant="ghost"
-            color="gray"
-            size="sm"
-            @click="resetFilters"
-          >
-            Reset All
-          </UButton>
-          <UButton
-            size="sm"
-            @click="applyFilters"
-          >
-            Apply Filters
-          </UButton>
-        </div>
-      </div>
-    </UCollapse>
-
-    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2">
-      <UBadge
-        v-for="(value, key) in activeFiltersDisplay"
-        :key="key"
-        color="blue"
-        variant="soft"
-        class="cursor-pointer"
-        @click="removeFilter(key)"
-      >
-        {{ key }}: {{ value }}
-        <UIcon name="i-heroicons-x-mark-16-solid" class="ml-1" />
-      </UBadge>
-    </div>
-
-    <div v-if="showSuggestions && suggestions.length > 0" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-2">
-      <div class="space-y-1">
-        <div
-          v-for="suggestion in suggestions"
-          :key="suggestion.text"
-          class="flex items-center gap-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-          @click="selectSuggestion(suggestion)"
-        >
-          <UIcon :name="suggestion.icon" class="text-gray-400" />
-          <span class="text-sm">{{ suggestion.text }}</span>
-          <UBadge
-            :color="suggestion.type === 'issue' ? 'green' : suggestion.type === 'pr' ? 'blue' : 'purple'"
-            variant="soft"
-            size="xs"
-          >
-            {{ suggestion.type }}
-          </UBadge>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  repositories?: Array<{
-    id: number
-    full_name: string
-  }>
-  showSuggestions?: boolean
-  totalResults?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  repositories: () => [],
-  showSuggestions: false,
-  totalResults: 0
-})
-
-const emit = defineEmits<{
-  search: [query: string, filters: GitHubFilters]
-  filterChange: [filters: GitHubFilters]
-  clear: []
-}>()
-
-interface GitHubFilters {
-  contentTypes: string[]
-  state: string
-  author: string
-  labels: string[]
-  dateFrom: string
-  dateTo: string
-  repository: string | null
-}
-
-const searchQuery = ref('')
-const showAdvancedFilters = ref(false)
-const labelInput = ref('')
-const sortBy = ref('relevance')
-
-const filters = ref<GitHubFilters>({
-  contentTypes: ['issues', 'prs', 'discussions'],
-  state: 'all',
-  author: '',
-  labels: [],
-  dateFrom: '',
-  dateTo: '',
-  repository: null
-})
-
-const contentTypes = [
-  { value: 'issues', label: 'Issues' },
-  { value: 'prs', label: 'Pull Requests' },
-  { value: 'discussions', label: 'Discussions' },
-  { value: 'wiki', label: 'Wiki Pages' },
-  { value: 'files', label: 'Repository Files' }
-]
-
-const stateOptions = [
-  { value: 'all', label: 'All' },
-  { value: 'open', label: 'Open' },
-  { value: 'closed', label: 'Closed' },
-  { value: 'merged', label: 'Merged' }
-]
-
-const sortOptions = [
-  { value: 'relevance', label: 'Relevance' },
-  { value: 'newest', label: 'Newest' },
-  { value: 'oldest', label: 'Oldest' },
-  { value: 'updated', label: 'Recently Updated' },
-  { value: 'comments', label: 'Most Comments' }
-]
-
-const suggestions = ref([
-  { text: 'authentication bug', type: 'issue', icon: 'i-heroicons-chat-bubble-left-right-16-solid' },
-  { text: 'user login flow', type: 'pr', icon: 'i-heroicons-code-bracket-square-16-solid' },
-  { text: 'API documentation', type: 'discussion', icon: 'i-heroicons-chat-bubble-left-16-solid' }
-])
-
-const repositoryOptions = computed(() => [
-  { value: null, label: 'All repositories' },
-  ...props.repositories.map(repo => ({
-    value: repo.id.toString(),
-    label: repo.full_name
-  }))
-])
-
-const activeFilterCount = computed(() => {
-  let count = 0
-  if (filters.value.contentTypes.length < contentTypes.length) count++
-  if (filters.value.state !== 'all') count++
-  if (filters.value.author) count++
-  if (filters.value.labels.length > 0) count++
-  if (filters.value.dateFrom) count++
-  if (filters.value.dateTo) count++
-  if (filters.value.repository) count++
-  return count
-})
-
-const hasActiveFilters = computed(() => activeFilterCount.value > 0)
-
-const activeFiltersDisplay = computed(() => {
-  const display: Record<string, string> = {}
-
-  if (filters.value.contentTypes.length < contentTypes.length) {
-    display['Content'] = filters.value.contentTypes.join(', ')
-  }
-  if (filters.value.state !== 'all') {
-    display['State'] = filters.value.state
-  }
-  if (filters.value.author) {
-    display['Author'] = filters.value.author
-  }
-  if (filters.value.labels.length > 0) {
-    display['Labels'] = filters.value.labels.join(', ')
-  }
-  if (filters.value.dateFrom) {
-    display['From'] = filters.value.dateFrom
-  }
-  if (filters.value.dateTo) {
-    display['To'] = filters.value.dateTo
-  }
-  if (filters.value.repository) {
-    const repo = props.repositories.find(r => r.id.toString() === filters.value.repository)
-    display['Repository'] = repo?.full_name || filters.value.repository
-  }
-
-  return display
-})
-
-const performSearch = () => {
-  emit('search', searchQuery.value, filters.value)
-}
-
-const clearSearch = () => {
-  searchQuery.value = ''
-  emit('clear')
-}
-
-const toggleContentType = (type: string) => {
-  const index = filters.value.contentTypes.indexOf(type)
-  if (index > -1) {
-    filters.value.contentTypes.splice(index, 1)
-  } else {
-    filters.value.contentTypes.push(type)
-  }
-}
-
-const addLabel = () => {
-  const label = labelInput.value.trim()
-  if (label && !filters.value.labels.includes(label)) {
-    filters.value.labels.push(label)
-    labelInput.value = ''
-  }
-}
-
-const removeLabel = (label: string) => {
-  const index = filters.value.labels.indexOf(label)
-  if (index > -1) {
-    filters.value.labels.splice(index, 1)
-  }
-}
-
-const removeFilter = (key: string) => {
-  switch (key) {
-    case 'Content':
-      filters.value.contentTypes = ['issues', 'prs', 'discussions']
-      break
-    case 'State':
-      filters.value.state = 'all'
-      break
-    case 'Author':
-      filters.value.author = ''
-      break
-    case 'Labels':
-      filters.value.labels = []
-      break
-    case 'From':
-      filters.value.dateFrom = ''
-      break
-    case 'To':
-      filters.value.dateTo = ''
-      break
-    case 'Repository':
-      filters.value.repository = null
-      break
-  }
-}
-
-const resetFilters = () => {
-  filters.value = {
-    contentTypes: ['issues', 'prs', 'discussions'],
-    state: 'all',
-    author: '',
-    labels: [],
-    dateFrom: '',
-    dateTo: '',
-    repository: null
-  }
-}
-
-const applyFilters = () => {
-  emit('filterChange', filters.value)
-  showAdvancedFilters.value = false
-}
-
-const selectSuggestion = (suggestion: any) => {
-  searchQuery.value = suggestion.text
-  performSearch()
-}
-
-watch(searchQuery, (newQuery) => {
-  if (newQuery.length > 2) {
-    // Debounced search
-    debounceSearch()
-  }
-})
-
-watch(sortBy, () => {
-  emit('filterChange', filters.value)
-})
-
-const debounceSearch = debounce(() => {
-  performSearch()
-}, 300)
-</script>
diff --git a/frontend/components/GitHub/GitHubStatsChart.vue b/frontend/components/GitHub/GitHubStatsChart.vue
deleted file mode 100644
index cb45a72..0000000
--- a/frontend/components/GitHub/GitHubStatsChart.vue
+++ /dev/null
@@ -1,326 +0,0 @@
-<template>
-  <UCard>
-    <template #header>
-      <div class="flex items-center justify-between">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-          {{ title }}
-        </h3>
-        <USelect
-          v-model="selectedPeriod"
-          :options="periodOptions"
-          size="sm"
-          class="w-32"
-        />
-      </div>
-    </template>
-
-    <div class="space-y-4">
-      <div class="h-64 relative">
-        <canvas ref="chartCanvas" class="w-full h-full"></canvas>
-      </div>
-
-      <div class="flex flex-wrap gap-4 justify-center">
-        <div
-          v-for="item in legendItems"
-          :key="item.label"
-          class="flex items-center gap-2"
-        >
-          <div
-            class="w-3 h-3 rounded-full"
-            :style="{ backgroundColor: item.color }"
-          ></div>
-          <span class="text-sm text-gray-600 dark:text-gray-300">
-            {{ item.label }}
-          </span>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-        <div class="text-center">
-          <div class="text-lg font-semibold text-gray-900 dark:text-white">
-            {{ totalValue }}
-          </div>
-          <div class="text-xs text-gray-500 dark:text-gray-400">Total</div>
-        </div>
-        <div class="text-center">
-          <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">
-            {{ averageValue }}
-          </div>
-          <div class="text-xs text-gray-500 dark:text-gray-400">Average</div>
-        </div>
-        <div class="text-center">
-          <div class="text-lg font-semibold text-green-600 dark:text-green-400">
-            {{ peakValue }}
-          </div>
-          <div class="text-xs text-gray-500 dark:text-gray-400">Peak</div>
-        </div>
-        <div class="text-center">
-          <div class="text-lg font-semibold text-gray-600 dark:text-gray-400">
-            {{ trendDirection }}
-          </div>
-          <div class="text-xs text-gray-500 dark:text-gray-400">Trend</div>
-        </div>
-      </div>
-    </div>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  title: string
-  data: Array<{
-    label: string
-    value: number
-    date?: string
-  }>
-  type?: 'line' | 'bar' | 'area'
-  colors?: string[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'line',
-  colors: () => ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6']
-})
-
-const chartCanvas = ref<HTMLCanvasElement>()
-const selectedPeriod = ref('7d')
-
-const periodOptions = [
-  { value: '7d', label: '7 days' },
-  { value: '30d', label: '30 days' },
-  { value: '90d', label: '90 days' },
-  { value: '1y', label: '1 year' }
-]
-
-const legendItems = computed(() => {
-  if (props.data.length === 0) return []
-
-  const uniqueLabels = [...new Set(props.data.map(d => d.label))]
-
-  return uniqueLabels.map((label, index) => ({
-    label,
-    color: props.colors[index % props.colors.length]
-  }))
-})
-
-const totalValue = computed(() => {
-  return props.data.reduce((sum, item) => sum + item.value, 0).toLocaleString()
-})
-
-const averageValue = computed(() => {
-  if (props.data.length === 0) return '0'
-  const avg = props.data.reduce((sum, item) => sum + item.value, 0) / props.data.length
-  return Math.round(avg).toLocaleString()
-})
-
-const peakValue = computed(() => {
-  if (props.data.length === 0) return '0'
-  const peak = Math.max(...props.data.map(item => item.value))
-  return peak.toLocaleString()
-})
-
-const trendDirection = computed(() => {
-  if (props.data.length < 2) return 'N/A'
-
-  const recent = props.data.slice(-7) // Last 7 data points
-  const older = props.data.slice(-14, -7) // Previous 7 data points
-
-  if (older.length === 0) return 'N/A'
-
-  const recentAvg = recent.reduce((sum, item) => sum + item.value, 0) / recent.length
-  const olderAvg = older.reduce((sum, item) => sum + item.value, 0) / older.length
-
-  if (recentAvg > olderAvg * 1.1) return '↑ Up'
-  if (recentAvg < olderAvg * 0.9) return '↓ Down'
-  return '→ Stable'
-})
-
-const drawChart = () => {
-  if (!chartCanvas.value || props.data.length === 0) return
-
-  const canvas = chartCanvas.value
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
-
-  const rect = canvas.getBoundingClientRect()
-  canvas.width = rect.width
-  canvas.height = rect.height
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  const padding = 40
-  const chartWidth = canvas.width - padding * 2
-  const chartHeight = canvas.height - padding * 2
-
-  const values = props.data.map(d => d.value)
-  const minValue = Math.min(...values)
-  const maxValue = Math.max(...values)
-  const valueRange = maxValue - minValue || 1
-
-  ctx.strokeStyle = '#E5E7EB'
-  ctx.lineWidth = 1
-
-  ctx.beginPath()
-  ctx.moveTo(padding, padding)
-  ctx.lineTo(padding, canvas.height - padding)
-  ctx.stroke()
-
-  ctx.beginPath()
-  ctx.moveTo(padding, canvas.height - padding)
-  ctx.lineTo(canvas.width - padding, canvas.height - padding)
-  ctx.stroke()
-
-  ctx.strokeStyle = '#F3F4F6'
-  ctx.setLineDash([5, 5])
-
-  for (let i = 0; i <= 5; i++) {
-    const y = padding + (chartHeight / 5) * i
-    ctx.beginPath()
-    ctx.moveTo(padding, y)
-    ctx.lineTo(canvas.width - padding, y)
-    ctx.stroke()
-  }
-
-  ctx.setLineDash([])
-
-  const datasets = new Map<string, Array<{ value: number; index: number }>>()
-  props.data.forEach((item, index) => {
-    if (!datasets.has(item.label)) {
-      datasets.set(item.label, [])
-    }
-    datasets.get(item.label)!.push({ value: item.value, index })
-  })
-
-  let datasetIndex = 0
-  datasets.forEach((dataPoints, label) => {
-    const color = props.colors[datasetIndex % props.colors.length]
-
-    if (props.type === 'line' || props.type === 'area') {
-      drawLineChart(ctx, dataPoints, color, chartWidth, chartHeight, padding, minValue, valueRange, props.type === 'area')
-    } else if (props.type === 'bar') {
-      drawBarChart(ctx, dataPoints, color, chartWidth, chartHeight, padding, minValue, valueRange, datasets.size)
-    }
-
-    datasetIndex++
-  })
-
-  ctx.fillStyle = '#6B7280'
-  ctx.font = '12px sans-serif'
-
-  for (let i = 0; i <= 5; i++) {
-    const value = minValue + (valueRange / 5) * (5 - i)
-    const y = padding + (chartHeight / 5) * i
-    ctx.fillText(Math.round(value).toString(), 5, y + 4)
-  }
-
-  const labelCount = props.data.length
-  const step = Math.max(1, Math.floor(labelCount / 10))
-
-  props.data.forEach((item, index) => {
-    if (index % step === 0) {
-      const x = padding + (chartWidth / (labelCount - 1)) * index
-      const label = item.date || item.label
-      ctx.save()
-      ctx.translate(x, canvas.height - padding + 15)
-      ctx.rotate(-Math.PI / 4)
-      ctx.fillText(label, 0, 0)
-      ctx.restore()
-    }
-  })
-}
-
-const drawLineChart = (
-  ctx: CanvasRenderingContext2D,
-  dataPoints: Array<{ value: number; index: number }>,
-  color: string,
-  chartWidth: number,
-  chartHeight: number,
-  padding: number,
-  minValue: number,
-  valueRange: number,
-  fillArea: boolean
-) => {
-  if (dataPoints.length === 0) return
-
-  ctx.strokeStyle = color
-  ctx.lineWidth = 2
-  ctx.beginPath()
-
-  dataPoints.forEach((point, index) => {
-    const x = padding + (chartWidth / (props.data.length - 1)) * point.index
-    const y = padding + chartHeight - ((point.value - minValue) / valueRange) * chartHeight
-
-    if (index === 0) {
-      ctx.moveTo(x, y)
-    } else {
-      ctx.lineTo(x, y)
-    }
-  })
-
-  ctx.stroke()
-
-  if (fillArea) {
-    ctx.lineTo(padding + chartWidth, padding + chartHeight)
-    ctx.lineTo(padding, padding + chartHeight)
-    ctx.closePath()
-
-    ctx.fillStyle = color + '20'
-    ctx.fill()
-  }
-
-  ctx.fillStyle = color
-  dataPoints.forEach((point) => {
-    const x = padding + (chartWidth / (props.data.length - 1)) * point.index
-    const y = padding + chartHeight - ((point.value - minValue) / valueRange) * chartHeight
-
-    ctx.beginPath()
-    ctx.arc(x, y, 4, 0, Math.PI * 2)
-    ctx.fill()
-  })
-}
-
-const drawBarChart = (
-  ctx: CanvasRenderingContext2D,
-  dataPoints: Array<{ value: number; index: number }>,
-  color: string,
-  chartWidth: number,
-  chartHeight: number,
-  padding: number,
-  minValue: number,
-  valueRange: number,
-  datasetCount: number
-) => {
-  if (dataPoints.length === 0) return
-
-  const barWidth = (chartWidth / props.data.length) / datasetCount * 0.8
-  const barSpacing = (chartWidth / props.data.length) * 0.2
-
-  ctx.fillStyle = color
-
-  dataPoints.forEach((point, index) => {
-    const x = padding + (chartWidth / props.data.length) * point.index + barSpacing / 2
-    const barHeight = ((point.value - minValue) / valueRange) * chartHeight
-    const y = padding + chartHeight - barHeight
-
-    ctx.fillRect(x, y, barWidth, barHeight)
-  })
-}
-
-watch(() => [props.data, props.type, selectedPeriod.value], () => {
-  nextTick(() => {
-    drawChart()
-  })
-}, { deep: true })
-
-onMounted(() => {
-  nextTick(() => {
-    drawChart()
-  })
-
-  window.addEventListener('resize', drawChart)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', drawChart)
-})
-</script>
diff --git a/frontend/components/KnowledgeBase/GitHubInput.vue b/frontend/components/KnowledgeBase/GitHubInput.vue
index 0ed3132..8f0b067 100644
--- a/frontend/components/KnowledgeBase/GitHubInput.vue
+++ b/frontend/components/KnowledgeBase/GitHubInput.vue
@@ -1,5 +1,25 @@
 <template>
   <div class="space-y-4">
+
+    <div class="space-y-2">
+      <Label class="text-sm font-medium">GitHub Integration</Label>
+      <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          <span class="text-gray-900 dark:text-white">
+            {{ integrationName || 'No GitHub integration configured' }}
+          </span>
+        </div>
+        <p v-if="!integrationName" class="text-sm text-red-600 dark:text-red-400 mt-2">
+          Please configure a GitHub integration in the Integrations page first.
+        </p>
+      </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Using the configured GitHub integration for ingestion.
+      </p>
+    </div>
     <div class="space-y-2">
       <Label for="github_repo" class="text-sm font-medium">
         GitHub Repository
@@ -29,24 +49,6 @@
       </p>
     </div>
 
-    <div class="space-y-2">
-      <Label class="text-sm font-medium">GitHub Integration</Label>
-      <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-        <div class="flex items-center gap-2">
-          <UIcon name="i-simple-icons-github" class="text-gray-600 dark:text-gray-400" />
-          <span class="text-gray-900 dark:text-white">
-            {{ integrationName || 'No GitHub integration configured' }}
-          </span>
-        </div>
-        <p v-if="!integrationName" class="text-sm text-red-600 dark:text-red-400 mt-2">
-          Please configure a GitHub integration in the Integrations page first.
-        </p>
-      </div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        Using the configured GitHub integration for ingestion.
-      </p>
-    </div>
-
     <div class="space-y-2">
       <Label for="github_since" class="text-sm font-medium">
         Ingest Since (Optional)
@@ -63,32 +65,26 @@
       </p>
     </div>
 
-    <UAlert
-      v-if="error"
-      color="red"
-      variant="soft"
-      icon="i-heroicons-exclamation-triangle-16-solid"
-    >
-      <template #title>Ingestion Error</template>
-      <template #description>{{ error }}</template>
-    </UAlert>
-
-    <UAlert
-      v-if="success"
-      color="green"
-      variant="soft"
-      icon="i-heroicons-check-circle-16-solid"
-    >
-      <template #title>Ingestion Started</template>
-      <template #description>
+    <Alert v-if="error" variant="destructive">
+      <AlertCircle class="h-4 w-4" />
+      <AlertTitle>Ingestion Error</AlertTitle>
+      <AlertDescription>{{ error }}</AlertDescription>
+    </Alert>
+
+    <Alert v-if="success">
+      <CheckCircle class="h-4 w-4" />
+      <AlertTitle>Ingestion Started</AlertTitle>
+      <AlertDescription>
         Repository ingestion has started successfully. It will appear in your knowledge base once completed.
-      </template>
-    </UAlert>
+      </AlertDescription>
+    </Alert>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { GitHubIngestionRequest } from '~/types/github'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { AlertCircle, CheckCircle } from 'lucide-vue-next'
 
 interface Props {
   loading?: boolean
diff --git a/frontend/pages/applications/[appId]/github/[repositoryId].vue b/frontend/pages/applications/[appId]/github/[repositoryId].vue
deleted file mode 100644
index 2201c72..0000000
--- a/frontend/pages/applications/[appId]/github/[repositoryId].vue
+++ /dev/null
@@ -1,434 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <UButton
-          icon="i-heroicons-arrow-left-16-solid"
-          variant="ghost"
-          color="gray"
-          :to="`/applications/${appId}/github`"
-        >
-          Back to Repositories
-        </UButton>
-
-        <div>
-          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-            {{ repository?.full_name }}
-          </h1>
-          <p class="text-gray-600 dark:text-gray-300">
-            Repository details and data management
-          </p>
-        </div>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <UButton
-          icon="i-heroicons-arrow-path-16-solid"
-          variant="outline"
-          :loading="refreshing"
-          @click="refreshRepository"
-        >
-          Refresh
-        </UButton>
-
-        <UDropdown
-          :items="actionItems"
-          :popper="{ placement: 'bottom-end' }"
-        >
-          <UButton
-            icon="i-heroicons-ellipsis-horizontal-20-solid"
-            variant="outline"
-          />
-        </UDropdown>
-      </div>
-    </div>
-
-    <div v-if="loading" class="flex justify-center py-8">
-      <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin text-2xl text-blue-600" />
-    </div>
-
-    <UAlert
-      v-else-if="error"
-      color="red"
-      variant="soft"
-      icon="i-heroicons-exclamation-triangle-16-solid"
-    >
-      <template #title>Error Loading Repository</template>
-      <template #description>{{ error }}</template>
-      <template #actions>
-        <UButton @click="loadRepository" variant="solid" color="red" size="xs">
-          Retry
-        </UButton>
-      </template>
-    </UAlert>
-
-    <div v-else-if="repository" class="space-y-6">
-      <UCard>
-        <template #header>
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-            Repository Information
-          </h2>
-        </template>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <div class="space-y-3">
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Repository</h3>
-              <p class="text-gray-900 dark:text-white">{{ repository.full_name }}</p>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</h3>
-              <UBadge
-                :color="statusColor"
-                :variant="statusVariant"
-                class="mt-1"
-              >
-                {{ statusText }}
-              </UBadge>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Visibility</h3>
-              <p class="text-gray-900 dark:text-white">
-                {{ repository.is_private ? 'Private' : 'Public' }}
-              </p>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Issues</h3>
-              <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                {{ repository.issue_count || 0 }}
-              </p>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Pull Requests</h3>
-              <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                {{ repository.pr_count || 0 }}
-              </p>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Discussions</h3>
-              <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                {{ repository.discussion_count || 0 }}
-              </p>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Default Branch</h3>
-              <p class="text-gray-900 dark:text-white">{{ repository.default_branch }}</p>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Wiki Pages</h3>
-              <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                {{ repository.wiki_page_count || 0 }}
-              </p>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Files</h3>
-              <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                {{ repository.file_count || 0 }}
-              </p>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Created</h3>
-              <p class="text-gray-900 dark:text-white">
-                {{ formatDate(repository.created_at) }}
-              </p>
-            </div>
-            <div>
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Updated</h3>
-              <p class="text-gray-900 dark:text-white">
-                {{ formatDate(repository.updated_at) }}
-              </p>
-            </div>
-            <div v-if="repository.last_ingested_at">
-              <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Ingested</h3>
-              <p class="text-gray-900 dark:text-white">
-                {{ formatDate(repository.last_ingested_at) }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </UCard>
-
-      <UTabs v-model="activeTab" :items="tabItems">
-        <template #issues>
-          <GitHubIssuesList
-            :repository-id="repository.id"
-            :issues="issues"
-            :loading="issuesLoading"
-            :error="issuesError"
-            @refresh="loadIssues"
-          />
-        </template>
-
-        <template #pull-requests>
-          <GitHubPullRequestsList
-            :repository-id="repository.id"
-            :pull-requests="pullRequests"
-            :loading="pullRequestsLoading"
-            :error="pullRequestsError"
-            @refresh="loadPullRequests"
-          />
-        </template>
-
-        <template #statistics>
-          <div class="space-y-6">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-              <UCard class="text-center">
-                <div class="text-2xl font-bold text-gray-900 dark:text-white">
-                  {{ stats.totalIssues }}
-                </div>
-                <div class="text-sm text-gray-500 dark:text-gray-400">Total Issues</div>
-              </UCard>
-              <UCard class="text-center">
-                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
-                  {{ stats.openIssues }}
-                </div>
-                <div class="text-sm text-gray-500 dark:text-gray-400">Open Issues</div>
-              </UCard>
-              <UCard class="text-center">
-                <div class="text-2xl font-bold text-gray-900 dark:text-white">
-                  {{ stats.totalPRs }}
-                </div>
-                <div class="text-sm text-gray-500 dark:text-gray-400">Total PRs</div>
-              </UCard>
-              <UCard class="text-center">
-                <div class="text-2xl font-bold text-green-600 dark:text-green-400">
-                  {{ stats.mergedPRs }}
-                </div>
-                <div class="text-sm text-gray-500 dark:text-gray-400">Merged PRs</div>
-              </UCard>
-            </div>
-
-            <UCard>
-              <template #header>
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-                  Repository Activity
-                </h3>
-              </template>
-              <div class="h-64 flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded-lg">
-                <div class="text-center">
-                  <UIcon name="i-heroicons-chart-bar-16-solid" class="mx-auto text-4xl text-gray-400 mb-2" />
-                  <p class="text-gray-500 dark:text-gray-400">
-                    Activity charts coming soon
-                  </p>
-                </div>
-              </div>
-            </UCard>
-          </div>
-        </template>
-      </UTabs>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-definePageMeta({
-  layout: 'application'
-})
-
-const route = useRoute()
-const appId = route.params.appId as string
-const repositoryId = parseInt(route.params.repositoryId as string)
-
-const githubStore = useGitHubStore()
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-const refreshing = ref(false)
-const activeTab = ref('issues')
-
-const issuesLoading = ref(false)
-const issuesError = ref<string | null>(null)
-const pullRequestsLoading = ref(false)
-const pullRequestsError = ref<string | null>(null)
-
-const repository = computed(() => githubStore.currentRepository)
-const issues = computed(() => githubStore.issues)
-const pullRequests = computed(() => githubStore.pullRequests)
-const stats = computed(() => githubStore.stats)
-
-const statusColor = computed(() => {
-  switch (repository.value?.ingestion_status) {
-    case 'completed':
-      return 'green'
-    case 'running':
-      return 'blue'
-    case 'failed':
-      return 'red'
-    default:
-      return 'gray'
-  }
-})
-
-const statusVariant = computed(() => {
-  switch (repository.value?.ingestion_status) {
-    case 'completed':
-      return 'solid'
-    case 'running':
-      return 'soft'
-    case 'failed':
-      return 'solid'
-    default:
-      return 'outline'
-  }
-})
-
-const statusText = computed(() => {
-  switch (repository.value?.ingestion_status) {
-    case 'completed':
-      return 'Ready'
-    case 'running':
-      return 'Ingesting'
-    case 'failed':
-      return 'Failed'
-    default:
-      return 'Pending'
-  }
-})
-
-const tabItems = [
-  {
-    key: 'issues',
-    label: 'Issues',
-    icon: 'i-heroicons-chat-bubble-left-right-16-solid'
-  },
-  {
-    key: 'pull-requests',
-    label: 'Pull Requests',
-    icon: 'i-heroicons-code-bracket-square-16-solid'
-  },
-  {
-    key: 'statistics',
-    label: 'Statistics',
-    icon: 'i-heroicons-chart-bar-16-solid'
-  }
-]
-
-const actionItems = computed(() => [
-  [
-    {
-      label: 'View on GitHub',
-      icon: 'i-heroicons-arrow-top-right-on-square-16-solid',
-      click: () => window.open(repository.value?.url, '_blank')
-    },
-    {
-      label: 'Re-ingest Repository',
-      icon: 'i-heroicons-arrow-down-tray-16-solid',
-      click: handleReIngest
-    }
-  ],
-  [
-    {
-      label: 'Delete Repository',
-      icon: 'i-heroicons-trash-16-solid',
-      click: handleDelete
-    }
-  ]
-])
-
-const loadRepository = async () => {
-  try {
-    loading.value = true
-    error.value = null
-
-    const repo = githubStore.getRepositoryById(repositoryId)
-    if (repo) {
-      githubStore.setCurrentRepository(repo)
-    } else {
-      error.value = 'Repository not found'
-    }
-  } catch (err: any) {
-    error.value = err.message || 'Failed to load repository'
-  } finally {
-    loading.value = false
-  }
-}
-
-const refreshRepository = async () => {
-  try {
-    refreshing.value = true
-    await githubStore.reIngestRepository(repositoryId)
-
-    const toast = useToast()
-    toast.add({
-      title: 'Repository Refreshed',
-      description: 'Repository data has been refreshed.',
-      color: 'green'
-    })
-  } catch (err: any) {
-    const toast = useToast()
-    toast.add({
-      title: 'Refresh Failed',
-      description: err.message || 'Failed to refresh repository.',
-      color: 'red'
-    })
-  } finally {
-    refreshing.value = false
-  }
-}
-
-const loadIssues = async () => {
-  try {
-    issuesLoading.value = true
-    issuesError.value = null
-    await githubStore.fetchIssues(repositoryId)
-  } catch (err: any) {
-    issuesError.value = err.message || 'Failed to load issues'
-  } finally {
-    issuesLoading.value = false
-  }
-}
-
-const loadPullRequests = async () => {
-  try {
-    pullRequestsLoading.value = true
-    pullRequestsError.value = null
-    await githubStore.fetchPullRequests(repositoryId)
-  } catch (err: any) {
-    pullRequestsError.value = err.message || 'Failed to load pull requests'
-  } finally {
-    pullRequestsLoading.value = false
-  }
-}
-
-const handleReIngest = () => {
-  navigateTo(`/applications/${appId}/github`)
-}
-
-const handleDelete = () => {
-  navigateTo(`/applications/${appId}/github`)
-}
-
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString()
-}
-
-onMounted(() => {
-  loadRepository()
-})
-
-watch(activeTab, (newTab) => {
-  if (newTab === 'issues' && issues.value.length === 0) {
-    loadIssues()
-  } else if (newTab === 'pull-requests' && pullRequests.value.length === 0) {
-    loadPullRequests()
-  }
-})
-
-watch([repository, activeTab], () => {
-  if (repository.value && activeTab.value === 'issues' && issues.value.length === 0) {
-    loadIssues()
-  } else if (repository.value && activeTab.value === 'pull-requests' && pullRequests.value.length === 0) {
-    loadPullRequests()
-  }
-}, { immediate: true })
-</script>
diff --git a/frontend/pages/applications/[appId]/github/index.vue b/frontend/pages/applications/[appId]/github/index.vue
deleted file mode 100644
index d3332f9..0000000
--- a/frontend/pages/applications/[appId]/github/index.vue
+++ /dev/null
@@ -1,399 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-          GitHub Repositories
-        </h1>
-        <p class="text-gray-600 dark:text-gray-300">
-          Manage and ingest GitHub repository data
-        </p>
-      </div>
-
-      <UButton
-        icon="i-heroicons-plus-16-solid"
-        @click="showIngestionForm = true"
-      >
-        Ingest Repository
-      </UButton>
-    </div>
-
-    <UCard v-if="!hasGitHubIntegration">
-      <div class="text-center py-8">
-        <UIcon name="i-heroicons-link-16-solid" class="mx-auto text-4xl text-gray-400 mb-4" />
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
-          No GitHub Integration Found
-        </h3>
-        <p class="text-gray-500 dark:text-gray-400 mb-4">
-          You need to set up a GitHub integration before ingesting repositories.
-        </p>
-        <UButton
-          :to="`/applications/${appId}/integrations`"
-          icon="i-heroicons-cog-6-tooth-16-solid"
-        >
-          Configure Integration
-        </UButton>
-      </div>
-    </UCard>
-
-    <div v-else>
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <UCard class="text-center">
-          <div class="text-2xl font-bold text-gray-900 dark:text-white">
-            {{ repositories.length }}
-          </div>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Total Repositories</div>
-        </UCard>
-        <UCard class="text-center">
-          <div class="text-2xl font-bold text-green-600 dark:text-green-400">
-            {{ completedRepositories.length }}
-          </div>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Successfully Ingested</div>
-        </UCard>
-        <UCard class="text-center">
-          <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
-            {{ runningRepositories.length }}
-          </div>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Currently Ingesting</div>
-        </UCard>
-        <UCard class="text-center">
-          <div class="text-2xl font-bold text-red-600 dark:text-red-400">
-            {{ failedRepositories.length }}
-          </div>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Failed Ingestions</div>
-        </UCard>
-      </div>
-
-      <div v-if="loading && repositories.length === 0" class="flex justify-center py-8">
-        <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin text-2xl text-blue-600" />
-      </div>
-
-      <UAlert
-        v-else-if="error"
-        color="red"
-        variant="soft"
-        icon="i-heroicons-exclamation-triangle-16-solid"
-      >
-        <template #title>Error Loading Repositories</template>
-        <template #description>{{ error }}</template>
-        <template #actions>
-          <UButton @click="refreshRepositories" variant="solid" color="red" size="xs">
-            Retry
-          </UButton>
-        </template>
-      </UAlert>
-
-      <UCard
-        v-else-if="repositories.length === 0 && !loading"
-        class="text-center py-8"
-      >
-        <UIcon name="i-heroicons-inbox-16-solid" class="mx-auto text-4xl text-gray-400 mb-4" />
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
-          No repositories ingested yet
-        </h3>
-        <p class="text-gray-500 dark:text-gray-400 mb-4">
-          Start by ingesting your first GitHub repository.
-        </p>
-        <UButton
-          icon="i-heroicons-plus-16-solid"
-          @click="showIngestionForm = true"
-        >
-          Ingest Repository
-        </UButton>
-      </UCard>
-
-      <div v-else class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
-        <GitHubRepositoryCard
-          v-for="repository in repositories"
-          :key="repository.id"
-          :repository="repository"
-          :app-id="appId"
-          @delete="handleDeleteRepository"
-          @re-ingest="handleReIngestRepository"
-          @refresh="handleRefreshRepository"
-        />
-      </div>
-    </div>
-
-    <UModal v-model="showIngestionForm" :ui="{ width: 'sm:max-w-2xl' }">
-      <GitHubIngestionForm
-        :integrations="integrations"
-        @close="showIngestionForm = false"
-        @success="handleIngestionSuccess"
-        @error="handleIngestionError"
-      />
-    </UModal>
-
-    <UModal v-model="showDeleteModal">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            Delete Repository
-          </h3>
-        </template>
-
-        <div class="space-y-4">
-          <p class="text-gray-600 dark:text-gray-300">
-            Are you sure you want to delete the repository
-            <span class="font-semibold">{{ repositoryToDelete?.full_name }}</span>?
-          </p>
-          <p class="text-sm text-red-600 dark:text-red-400">
-            This action cannot be undone. All ingested data will be permanently deleted.
-          </p>
-        </div>
-
-        <template #footer>
-          <div class="flex justify-end gap-3">
-            <UButton
-              variant="ghost"
-              color="gray"
-              @click="showDeleteModal = false"
-            >
-              Cancel
-            </UButton>
-            <UButton
-              color="red"
-              :loading="deleteLoading"
-              @click="confirmDelete"
-            >
-              Delete Repository
-            </UButton>
-          </div>
-        </template>
-      </UCard>
-    </UModal>
-
-    <UModal v-model="showReIngestModal">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            Re-ingest Repository
-          </h3>
-        </template>
-
-        <div class="space-y-4">
-          <p class="text-gray-600 dark:text-gray-300">
-            Re-ingest repository
-            <span class="font-semibold">{{ repositoryToReIngest?.full_name }}</span>?
-          </p>
-
-          <div class="space-y-2">
-            <C8Label for="since-date">Ingest Since (Optional)</C8Label>
-            <C8Input
-              id="since-date"
-              v-model="reIngestSince"
-              type="datetime-local"
-              placeholder="Only ingest data since this date"
-            />
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-              Leave empty to re-ingest all data. Use this to only ingest recent changes.
-            </p>
-          </div>
-        </div>
-
-        <template #footer>
-          <div class="flex justify-end gap-3">
-            <UButton
-              variant="ghost"
-              color="gray"
-              @click="showReIngestModal = false"
-            >
-              Cancel
-            </UButton>
-            <UButton
-              :loading="reIngestLoading"
-              @click="confirmReIngest"
-            >
-              Re-ingest Repository
-            </UButton>
-          </div>
-        </template>
-      </UCard>
-    </UModal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { GitHubRepository } from '~/types/github'
-
-definePageMeta({
-  layout: 'application'
-})
-
-const route = useRoute()
-const appId = route.params.appId as string
-
-const githubStore = useGitHubStore()
-const applicationStore = useApplicationStore()
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-const showIngestionForm = ref(false)
-const showDeleteModal = ref(false)
-const showReIngestModal = ref(false)
-const deleteLoading = ref(false)
-const reIngestLoading = ref(false)
-const repositoryToDelete = ref<GitHubRepository | null>(null)
-const repositoryToReIngest = ref<GitHubRepository | null>(null)
-const reIngestSince = ref('')
-
-const repositories = computed(() => githubStore.repositories)
-const integrations = computed(() => applicationStore.integrations || [])
-
-const hasGitHubIntegration = computed(() => {
-  return integrations.value.some(integration => integration.provider === 'github')
-})
-
-const completedRepositories = computed(() =>
-  repositories.value.filter(repo => repo.ingestion_status === 'completed')
-)
-
-const runningRepositories = computed(() =>
-  repositories.value.filter(repo => repo.ingestion_status === 'running')
-)
-
-const failedRepositories = computed(() =>
-  repositories.value.filter(repo => repo.ingestion_status === 'failed')
-)
-
-const loadRepositories = async () => {
-  if (!hasGitHubIntegration.value) return
-
-  try {
-    loading.value = true
-    error.value = null
-
-    const githubIntegration = integrations.value.find(i => i.provider === 'github')
-    if (githubIntegration) {
-      await githubStore.fetchRepositories(githubIntegration.id)
-    }
-  } catch (err: any) {
-    error.value = err.message || 'Failed to load repositories'
-  } finally {
-    loading.value = false
-  }
-}
-
-const refreshRepositories = () => {
-  loadRepositories()
-}
-
-const handleDeleteRepository = (repository: GitHubRepository) => {
-  repositoryToDelete.value = repository
-  showDeleteModal.value = true
-}
-
-const handleReIngestRepository = (repository: GitHubRepository) => {
-  repositoryToReIngest.value = repository
-  showReIngestModal.value = true
-}
-
-const handleRefreshRepository = async (repository: GitHubRepository) => {
-  try {
-    await githubStore.reIngestRepository(repository.id)
-
-    const toast = useToast()
-    toast.add({
-      title: 'Repository Refreshed',
-      description: `${repository.full_name} has been refreshed successfully.`,
-      color: 'green'
-    })
-  } catch (err: any) {
-    const toast = useToast()
-    toast.add({
-      title: 'Refresh Failed',
-      description: err.message || 'Failed to refresh repository.',
-      color: 'red'
-    })
-  }
-}
-
-const confirmDelete = async () => {
-  if (!repositoryToDelete.value) return
-
-  try {
-    deleteLoading.value = true
-    await githubStore.deleteRepository(repositoryToDelete.value.id)
-
-    showDeleteModal.value = false
-    repositoryToDelete.value = null
-
-    const toast = useToast()
-    toast.add({
-      title: 'Repository Deleted',
-      description: 'Repository and all its data have been deleted.',
-      color: 'green'
-    })
-  } catch (err: any) {
-    const toast = useToast()
-    toast.add({
-      title: 'Delete Failed',
-      description: err.message || 'Failed to delete repository.',
-      color: 'red'
-    })
-  } finally {
-    deleteLoading.value = false
-  }
-}
-
-const confirmReIngest = async () => {
-  if (!repositoryToReIngest.value) return
-
-  try {
-    reIngestLoading.value = true
-
-    const since = reIngestSince.value ? new Date(reIngestSince.value).toISOString() : undefined
-    await githubStore.reIngestRepository(repositoryToReIngest.value.id, since)
-
-    showReIngestModal.value = false
-    repositoryToReIngest.value = null
-    reIngestSince.value = ''
-
-    const toast = useToast()
-    toast.add({
-      title: 'Re-ingestion Started',
-      description: 'Repository re-ingestion has been started.',
-      color: 'green'
-    })
-  } catch (err: any) {
-    const toast = useToast()
-    toast.add({
-      title: 'Re-ingestion Failed',
-      description: err.message || 'Failed to start re-ingestion.',
-      color: 'red'
-    })
-  } finally {
-    reIngestLoading.value = false
-  }
-}
-
-const handleIngestionSuccess = (data: any) => {
-  const toast = useToast()
-  toast.add({
-    title: 'Ingestion Started',
-    description: `Repository ${data.owner}/${data.repo} ingestion has started.`,
-    color: 'green'
-  })
-
-  loadRepositories()
-}
-
-const handleIngestionError = (errorMessage: string) => {
-  const toast = useToast()
-  toast.add({
-    title: 'Ingestion Failed',
-    description: errorMessage,
-    color: 'red'
-  })
-}
-
-onMounted(() => {
-  loadRepositories()
-})
-
-watch(integrations, () => {
-  if (hasGitHubIntegration.value) {
-    loadRepositories()
-  }
-}, { immediate: true })
-</script>
diff --git a/frontend/pages/applications/[appId]/integrations/github-setup.vue b/frontend/pages/applications/[appId]/integrations/github-setup.vue
deleted file mode 100644
index 15a9f32..0000000
--- a/frontend/pages/applications/[appId]/integrations/github-setup.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
-    <div class="container mx-auto px-4 py-8">
-      <GitHubIntegrationSetup
-        :app-id="appId"
-        @success="handleSuccess"
-        @cancel="handleCancel"
-        @integration-created="handleIntegrationCreated"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: 'minimal'
-})
-
-const route = useRoute()
-const appId = route.params.appId as string
-
-const handleSuccess = () => {
-  navigateTo(`/applications/${appId}/integrations`)
-}
-
-const handleCancel = () => {
-  navigateTo(`/applications/${appId}/integrations`)
-}
-
-const handleIntegrationCreated = (integration: any) => {
-  const toast = useToast()
-  toast.add({
-    title: 'GitHub Integration Created',
-    description: 'Your GitHub integration has been set up successfully.',
-    color: 'green'
-  })
-}
-</script>
diff --git a/frontend/pages/applications/[appId]/integrations/index.vue b/frontend/pages/applications/[appId]/integrations/index.vue
deleted file mode 100644
index f24011c..0000000
--- a/frontend/pages/applications/[appId]/integrations/index.vue
+++ /dev/null
@@ -1,345 +0,0 @@
-<script setup lang="ts">
-import type { ColumnDef } from '@tanstack/vue-table'
-import { ref, computed, onMounted, h } from 'vue'
-import { useIntegrationStore } from '~/stores/integration'
-import { useApplicationStore } from '~/stores/application'
-import type { Integration, AppIntegration } from '~/types/integration'
-import GitHubIcon from '~/components/icons/GitHubIcon.vue'
-
-const integrationStore = useIntegrationStore()
-const applicationStore = useApplicationStore()
-
-const route = useRoute()
-const appId = route.params.appId as string
-
-const isLoading = ref(false)
-const showGitHubSetup = ref(false)
-const showIntegrationDetails = ref(false)
-const selectedIntegration = ref<Integration | null>(null)
-const selectedAppIntegration = ref<AppIntegration | null>(null)
-
-const integrations = computed(() => integrationStore.integrations)
-const appIntegrations = computed(() => integrationStore.appIntegrations)
-
-const data = computed(() => {
-  return appIntegrations.value.map((appInt: AppIntegration) => ({
-    id: appInt.id,
-    name: appInt.integration.name,
-    provider: appInt.integration.provider,
-    type: appInt.integration.type,
-    status: 'connected', // TODO: Add actual status tracking
-    configured: true,
-    created_at: appInt.created_at
-  }))
-})
-
-const getProviderIcon = (provider: string) => {
-  switch (provider) {
-    case 'github':
-      return GitHubIcon
-    default:
-      return null
-  }
-}
-
-const columns: ColumnDef<unknown, string | number>[] = [
-  {
-    id: 'expander',
-    header: '',
-    cell: () => '',
-  },
-  {
-    accessorKey: 'name',
-    header: 'Integration Name',
-    cell: (info) => {
-      const row = info.row.original as any
-      const IconComponent = getProviderIcon(row.provider)
-      
-      return h('div', { class: 'flex items-center gap-2' }, [
-        IconComponent ? h(IconComponent, { class: 'h-4 w-4' }) : null,
-        h('span', {}, info.getValue())
-      ])
-    },
-  },
-  {
-    accessorKey: 'provider',
-    header: 'Provider',
-    cell: (info) => {
-      const provider = info.getValue() as string
-      const IconComponent = getProviderIcon(provider)
-      
-      return h('div', { class: 'flex items-center gap-2' }, [
-        IconComponent ? h(IconComponent, { class: 'h-4 w-4' }) : null,
-        h('span', {}, provider.charAt(0).toUpperCase() + provider.slice(1))
-      ])
-    },
-  },
-  {
-    accessorKey: 'type',
-    header: 'Type',
-    cell: (info) => {
-      const type = info.getValue() as string
-      return type === 'pms' ? 'Project Management' : type.charAt(0).toUpperCase() + type.slice(1)
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: (info) => {
-      const status = info.getValue() as string
-      return status.charAt(0).toUpperCase() + status.slice(1)
-    },
-  },
-  {
-    id: 'actions',
-    header: 'Actions',
-    cell: ({ row }) => {
-      const integration = row.original as any
-      return h('div', { class: 'flex gap-2' }, [
-        h('button', {
-          class: 'px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700',
-          onClick: () => openIntegrationDetails(integration)
-        }, 'Configure'),
-        h('button', {
-          class: 'px-2 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700',
-          onClick: () => deleteIntegration(integration.id)
-        }, 'Delete')
-      ])
-    },
-  },
-]
-
-const loadIntegrations = async () => {
-  try {
-    isLoading.value = true
-    await Promise.all([
-      integrationStore.loadIntegrations(),
-      integrationStore.loadAppIntegrations(appId)
-    ])
-  } catch (error) {
-    console.error('Failed to load integrations:', error)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const openIntegrationDetails = (integration: any) => {
-  selectedIntegration.value = integration
-  selectedAppIntegration.value = appIntegrations.value.find(
-    (appInt: AppIntegration) => appInt.id === integration.id
-  )
-  showIntegrationDetails.value = true
-}
-
-const deleteIntegration = async (id: number) => {
-  if (!confirm('Are you sure you want to delete this integration?')) return
-
-  try {
-    await integrationStore.deleteAppIntegration(id)
-    await loadIntegrations()
-
-    const toast = useToast()
-    toast.add({
-      title: 'Integration Deleted',
-      description: 'The integration has been deleted successfully.',
-      color: 'green'
-    })
-  } catch (error) {
-    const toast = useToast()
-    toast.add({
-      title: 'Delete Failed',
-      description: 'Failed to delete the integration.',
-      color: 'red'
-    })
-  }
-}
-
-const handleGitHubSetupSuccess = () => {
-  showGitHubSetup.value = false
-  loadIntegrations()
-}
-
-const handleIntegrationUpdated = () => {
-  showIntegrationDetails.value = false
-  loadIntegrations()
-}
-
-onMounted(() => {
-  loadIntegrations()
-})
-</script>
-
-<template>
-  <div class="flex flex-col h-screen p-4 pt-[72px] pb-[120px] overflow-y-auto">
-    <div class="w-full space-y-4">
-      <!-- Header -->
-      <div class="flex justify-between items-center py-4">
-        <div>
-          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-            Integrations
-          </h1>
-          <p class="text-gray-600 dark:text-gray-300">
-            Manage external integrations for your application
-          </p>
-        </div>
-
-        <div class="flex gap-2">
-          <UButton
-            icon="i-simple-icons-github"
-            @click="showGitHubSetup = true"
-          >
-            Add GitHub Integration
-          </UButton>
-        </div>
-      </div>
-
-      <div v-if="isLoading" class="text-center py-8">
-        <UIcon name="i-heroicons-arrow-path-16-solid" class="animate-spin text-2xl text-blue-600" />
-        <p class="mt-2 text-gray-600 dark:text-gray-300">Loading integrations...</p>
-      </div>
-
-      <div
-        v-else-if="data.length === 0"
-        class="text-center py-8"
-      >
-        <UIcon name="i-heroicons-link-16-solid" class="mx-auto text-4xl text-gray-400 mb-4" />
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
-          No integrations configured
-        </h3>
-        <p class="text-gray-500 dark:text-gray-400 mb-4">
-          Connect external services to enhance your application capabilities.
-        </p>
-        <UButton
-          icon="i-simple-icons-github"
-          @click="showGitHubSetup = true"
-        >
-          Add GitHub Integration
-        </UButton>
-      </div>
-
-      <C8Table
-        v-else
-        :data="data"
-        :columns="columns"
-        :expandable="true"
-      />
-    </div>
-
-    <UModal v-model="showGitHubSetup" :ui="{ width: 'sm:max-w-4xl' }">
-      <div class="p-6">
-        <div class="flex justify-between items-center mb-6">
-          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-            GitHub Integration Setup
-          </h2>
-          <UButton
-            icon="i-heroicons-x-mark-20-solid"
-            variant="ghost"
-            color="gray"
-            size="sm"
-            square
-            @click="showGitHubSetup = false"
-          />
-        </div>
-
-        <GitHubIntegrationSetup
-          :app-id="appId"
-          @success="handleGitHubSetupSuccess"
-          @cancel="showGitHubSetup = false"
-          @integration-created="handleIntegrationUpdated"
-        />
-      </div>
-    </UModal>
-
-    <UModal v-model="showIntegrationDetails" :ui="{ width: 'sm:max-w-2xl' }">
-      <UCard>
-        <template #header>
-          <div class="flex justify-between items-center">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-              Integration Configuration
-            </h3>
-            <UButton
-              icon="i-heroicons-x-mark-20-solid"
-              variant="ghost"
-              color="gray"
-              size="sm"
-              square
-              @click="showIntegrationDetails = false"
-            />
-          </div>
-        </template>
-
-        <div v-if="selectedIntegration" class="space-y-6">
-          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
-            <h4 class="font-medium text-gray-900 dark:text-white mb-2">
-              {{ selectedIntegration.name }}
-            </h4>
-            <div class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
-              <p><strong>Provider:</strong> {{ selectedIntegration.provider }}</p>
-              <p><strong>Type:</strong> {{ selectedIntegration.type }}</p>
-              <p><strong>Status:</strong> {{ selectedIntegration.status }}</p>
-            </div>
-          </div>
-
-          <div v-if="selectedIntegration.provider === 'github'" class="space-y-4">
-            <h4 class="font-medium text-gray-900 dark:text-white">
-              GitHub Configuration
-            </h4>
-
-            <div class="space-y-3">
-              <div>
-                <C8Label for="github-token">GitHub Token</C8Label>
-                <div class="relative">
-                  <C8Input
-                    id="github-token"
-                    type="password"
-                    placeholder="Enter your GitHub token"
-                    class="pr-20"
-                  />
-                  <UButton
-                    icon="i-heroicons-arrow-top-right-on-square-16-solid"
-                    variant="outline"
-                    size="xs"
-                    class="absolute right-2 top-1/2 transform -translate-y-1/2"
-                    @click="window.open('https://github.com/settings/tokens', '_blank')"
-                  >
-                    Get Token
-                  </UButton>
-                </div>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  Your GitHub Personal Access Token will be encrypted and stored securely.
-                </p>
-              </div>
-
-              <div>
-                <C8Label for="github-repos">Repositories</C8Label>
-                <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
-                  Select repositories to ingest data from:
-                </p>
-                <div class="space-y-2 max-h-40 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
-                    Repository selection will be available after token validation.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-            <UButton
-              variant="ghost"
-              color="gray"
-              @click="showIntegrationDetails = false"
-            >
-              Cancel
-            </UButton>
-            <UButton
-              @click="handleIntegrationUpdated"
-            >
-              Save Configuration
-            </UButton>
-          </div>
-        </div>
-      </UCard>
-    </UModal>
-  </div>
-</template>
diff --git a/frontend/pages/applications/[appId]/knowledge-base-backup.vue b/frontend/pages/applications/[appId]/knowledge-base-backup.vue
deleted file mode 100644
index db8a125..0000000
--- a/frontend/pages/applications/[appId]/knowledge-base-backup.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { ColumnDef } from '@tanstack/vue-table';
-import { ref, computed, onMounted } from 'vue'
-import NewKnowledgeBase from '~/components/KnowledgeBase/NewKnowledgeBase.vue'
-import UpdateKnowledgeBase from '~/components/KnowledgeBase/UpdateKnowledgeBase.vue'
-import { KB_UPDATE  } from '~/lib/consts'
-import type { KBTableRow } from '~/lib/types'
-
-const updateKBRef = ref<InstanceType<typeof UpdateKnowledgeBase> | null>(null)
-
-const liveUpdateStore = useLiveUpdateStore()
-const kbStore = useKnowledgeBaseStore()
-
-const kbs = computed(() => kbStore.kbs)
-const isLoading = ref(false)
-
-const data = computed(() => {
-  return (kbs.value || []).map((item: KnowledgeBaseItem) => {
-    return {
-      uuid: item.uuid,
-      sourceType: item.source_type,
-      path: item.path,
-      content: item.metadata?.content ?? '',
-      status: item.status,
-    }
-  })
-})
-
-const columns: ColumnDef<unknown, string | number>[] = [
-  {
-    id: 'expander',
-    header: '',
-    cell: () => '',
-  },
-  {
-    accessorKey: 'path',
-    header: 'File',
-    cell: (info) => info.getValue(),
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: (info) => info.getValue(),
-  },
-  {
-    id: 'actions',
-    header: 'Actions',
-    cell: () => '',
-  },
-]
-
-const unsubscribe = liveUpdateStore.subscribe((msg) => {
-  if (msg.type === KB_UPDATE) {
-    const { uuid, status } = msg.data
-    kbStore.updateStatus(uuid, status)
-  }
-})
-
-function openUpdateKB(kb: KBTableRow) {
-  updateKBRef.value?.openSlide(kb)
-}
-
-onMounted(() => { 
-  kbStore.load()
-})
-
-onBeforeUnmount(() => {
-  unsubscribe()
-})
-
-function deleteRow(uuid: string) {
-  kbStore.delete(uuid)
-}
-</script>
-
-<template>
-  <div class="flex flex-col h-screen p-4 pt-[72px] pb-[120px] overflow-y-auto">
-    <div class="w-full space-y-4">
-      <div class="flex gap-2 items-center py-4">
-        <div class="ml-auto">
-          <NewKnowledgeBase />
-        </div>
-      </div>
-
-      <div v-if="isLoading" class="text-center py-8">Loading...</div>
-
-      <div
-        v-if="data.length === 0"
-        class="text-center py-8"
-      >
-        Your knowledge base is empty.
-      </div>
-      <C8Table
-        v-else
-        :data="data"
-        :columns="columns"
-        :update-fn="openUpdateKB"
-        :delete-fn="deleteRow"
-        :expandable="true"
-      />
-    </div>
-    <UpdateKnowledgeBase ref="updateKBRef" />
-  </div>
-</template>