diff --git a/website/client/components/Home/FileSelectionWarning.vue b/website/client/components/Home/FileSelectionWarning.vue
new file mode 100644
index 000000000..f4b134def
--- /dev/null
+++ b/website/client/components/Home/FileSelectionWarning.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="warning-message">
+    <div class="warning-icon">⚠️</div>
+    <div class="warning-text">
+      <slot>
+        Selecting more than {{ threshold }} files may cause processing issues or timeouts. Consider reducing your selection for better performance.
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  threshold: number;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+.warning-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--vp-c-warning-soft);
+  border: 1px solid var(--vp-c-warning);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.warning-icon {
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.warning-text {
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  line-height: 1.4;
+}
+</style>
\ No newline at end of file
diff --git a/website/client/components/Home/PackButton.vue b/website/client/components/Home/PackButton.vue
index ab4690c51..53ee00583 100644
--- a/website/client/components/Home/PackButton.vue
+++ b/website/client/components/Home/PackButton.vue
@@ -6,24 +6,13 @@
     type="submit"
   >
     {{ loading ? 'Processing...' : 'Pack' }}
-    <svg
-      v-if="!loading"
-      class="pack-button-icon"
-      width="20"
-      height="20"
-      viewBox="96.259 93.171 300 300"
-    >
-      <g transform="matrix(1.160932, 0, 0, 1.160932, 97.635941, 94.725143)">
-        <path
-          fill="currentColor"
-          d="M 128.03 -1.486 L 21.879 65.349 L 21.848 190.25 L 127.979 256.927 L 234.2 190.27 L 234.197 65.463 L 128.03 -1.486 Z M 208.832 70.323 L 127.984 121.129 L 47.173 70.323 L 128.144 19.57 L 208.832 70.323 Z M 39.669 86.367 L 119.188 136.415 L 119.255 230.529 L 39.637 180.386 L 39.669 86.367 Z M 136.896 230.506 L 136.887 136.575 L 216.469 86.192 L 216.417 180.46 L 136.896 230.506 Z M 136.622 230.849"
-        />
-      </g>
-    </svg>
+    <PackIcon v-if="!loading" :size="20" />
   </button>
 </template>
 
 <script setup>
+import PackIcon from './PackIcon.vue';
+
 defineProps({
   loading: Boolean,
   isValid: Boolean,
diff --git a/website/client/components/Home/PackIcon.vue b/website/client/components/Home/PackIcon.vue
new file mode 100644
index 000000000..c38bf795e
--- /dev/null
+++ b/website/client/components/Home/PackIcon.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    class="pack-icon"
+    :width="size"
+    :height="size"
+    viewBox="96.259 93.171 300 300"
+  >
+    <g transform="matrix(1.160932, 0, 0, 1.160932, 97.635941, 94.725143)">
+      <path
+        fill="currentColor"
+        d="M 128.03 -1.486 L 21.879 65.349 L 21.848 190.25 L 127.979 256.927 L 234.2 190.27 L 234.197 65.463 L 128.03 -1.486 Z M 208.832 70.323 L 127.984 121.129 L 47.173 70.323 L 128.144 19.57 L 208.832 70.323 Z M 39.669 86.367 L 119.188 136.415 L 119.255 230.529 L 39.637 180.386 L 39.669 86.367 Z M 136.896 230.506 L 136.887 136.575 L 216.469 86.192 L 216.417 180.46 L 136.896 230.506 Z M 136.622 230.849"
+      />
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: number | string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 16,
+});
+</script>
+
+<style scoped>
+.pack-icon {
+  flex-shrink: 0;
+}
+</style>
\ No newline at end of file
diff --git a/website/client/components/Home/TryIt.vue b/website/client/components/Home/TryIt.vue
index d0d1155f8..d143bec27 100644
--- a/website/client/components/Home/TryIt.vue
+++ b/website/client/components/Home/TryIt.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <form class="try-it-container" @submit.prevent="handleSubmit">
+    <form class="try-it-container" @submit.prevent="handleSubmit($event)">
       <div class="input-row">
         <div class="tab-container">
           <button
@@ -93,6 +93,7 @@
           :loading="loading"
           :error="error"
           :repository-url="inputRepositoryUrl"
+          @repack="handleRepack"
         />
       </div>
     </form>
@@ -104,6 +105,7 @@ import { FolderArchive, FolderOpen, Link2, RotateCcw } from 'lucide-vue-next';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { usePackRequest } from '../../composables/usePackRequest';
 import { hasNonDefaultValues, parseUrlParameters, updateUrlParameters } from '../../utils/urlParams';
+import type { FileInfo } from '../api/client';
 import { isValidRemoteValue } from '../utils/validation';
 import PackButton from './PackButton.vue';
 import TryItFileUpload from './TryItFileUpload.vue';
@@ -137,6 +139,7 @@ const {
   setMode,
   handleFileUpload,
   submitRequest,
+  repackWithSelectedFiles,
   resetOptions,
 } = usePackRequest();
 
@@ -175,7 +178,20 @@ function updateUrlFromCurrentState() {
   updateUrlParameters(urlParamsToUpdate);
 }
 
-async function handleSubmit() {
+async function handleSubmit(event?: SubmitEvent) {
+  // Prevent accidental form submissions from unintended buttons
+  if (event?.submitter && !isSubmitValid.value) {
+    const submitter = event.submitter as HTMLElement;
+    if (!submitter.matches('.pack-button, [type="submit"]')) {
+      return; // Ignore submission from non-pack buttons when form is invalid
+    }
+  }
+
+  // Only proceed if form is valid
+  if (!isSubmitValid.value) {
+    return;
+  }
+
   await submitRequest();
 }
 
@@ -193,6 +209,10 @@ function handleReset() {
   updateUrlParameters({});
 }
 
+function handleRepack(selectedFiles: FileInfo[]) {
+  repackWithSelectedFiles(selectedFiles);
+}
+
 // Watch for changes in packOptions and inputUrl to update URL in real-time
 watch(
   [packOptions, inputUrl],
diff --git a/website/client/components/Home/TryItFileSelection.vue b/website/client/components/Home/TryItFileSelection.vue
new file mode 100644
index 000000000..2de0ef3f9
--- /dev/null
+++ b/website/client/components/Home/TryItFileSelection.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="file-selection-container">
+    <div class="file-selection-header">
+      <h3 class="file-selection-title">
+        <FileText :size="16" class="title-icon" />
+        File Selection
+      </h3>
+      <div class="file-selection-actions">
+        <button
+          type="button"
+          class="action-btn select-all"
+          @click="selectAll"
+          :disabled="!hasFiles"
+          aria-label="Select all files"
+        >
+          Select All
+        </button>
+        <button
+          type="button"
+          class="action-btn deselect-all"
+          @click="deselectAll"
+          :disabled="!hasFiles"
+          aria-label="Deselect all files"
+        >
+          Deselect All
+        </button>
+        <button
+          type="button"
+          class="action-btn repack"
+          @click="handleRepack"
+          :disabled="!hasSelectedFiles || loading"
+          :aria-label="loading ? 'Re-packing selected files' : `Re-pack ${selectedFiles.length} selected files`"
+        >
+          {{ loading ? 'Re-packing...' : 'Re-pack Selected' }}
+          <PackIcon v-if="!loading" :size="14" />
+        </button>
+      </div>
+    </div>
+
+    <div class="file-selection-stats">
+      <span class="stat-item">
+        {{ selectedFiles.length }} of {{ allFiles.length }} files selected
+      </span>
+      <span class="stat-separator">|</span>
+      <span class="stat-item">
+        {{ selectedTokens.toLocaleString() }} tokens
+        ({{ totalTokens > 0 ? ((selectedTokens / totalTokens) * 100).toFixed(1) : '0.0' }}%)
+      </span>
+    </div>
+
+    <div class="file-list-container">
+      <div class="file-list-scroll">
+        <table class="file-table" aria-label="File selection table">
+          <thead>
+            <tr>
+              <th class="checkbox-column">
+                <input
+                  type="checkbox"
+                  :checked="selectedFiles.length === allFiles.length && allFiles.length > 0"
+                  :indeterminate="selectedFiles.length > 0 && selectedFiles.length < allFiles.length"
+                  @change="($event.target as HTMLInputElement).checked ? selectAll() : deselectAll()"
+                  class="header-checkbox"
+                  aria-label="Select or deselect all files"
+                />
+              </th>
+              <th class="file-path-column">File Path</th>
+              <th class="tokens-column">Tokens</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="file in sortedFiles"
+              :key="file.path"
+              class="file-row"
+              :class="{ 'file-row-selected': file.selected }"
+              @click="toggleFileSelection(file, $event)"
+            >
+              <td class="checkbox-cell">
+                <input
+                  type="checkbox"
+                  v-model="file.selected"
+                  class="file-checkbox"
+                  :aria-label="`Select file ${file.path}`"
+                />
+              </td>
+              <td class="file-path-cell">
+                <span class="file-path">{{ file.path }}</span>
+              </td>
+              <td class="tokens-cell">
+                <span class="file-tokens">{{ file.tokenCount.toLocaleString() }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+
+    <FileSelectionWarning
+      v-if="selectedFiles.length > FILE_SELECTION_WARNING_THRESHOLD"
+      :threshold="FILE_SELECTION_WARNING_THRESHOLD"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileText } from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import { FILE_SELECTION_WARNING_THRESHOLD } from '../../constants/fileSelection';
+import type { FileInfo } from '../api/client';
+import FileSelectionWarning from './FileSelectionWarning.vue';
+import PackIcon from './PackIcon.vue';
+
+interface Props {
+  allFiles: FileInfo[];
+  loading?: boolean;
+}
+
+type Emits = (e: 'repack', selectedFiles: FileInfo[]) => void;
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+});
+
+const emit = defineEmits<Emits>();
+
+// Local reactive state to avoid mutating props directly (Vue one-way data flow)
+const localFiles = ref<FileInfo[]>([]);
+
+// Sync props.allFiles to localFiles with deep copying to maintain reactivity
+watch(
+  () => props.allFiles,
+  (newFiles) => {
+    // Deep clone to avoid mutating props - fallback to JSON method for compatibility
+    try {
+      localFiles.value = structuredClone(newFiles || []);
+    } catch {
+      localFiles.value = JSON.parse(JSON.stringify(newFiles || []));
+    }
+  },
+  { immediate: true },
+);
+
+const hasFiles = computed(() => localFiles.value.length > 0);
+
+const selectedFiles = computed(() => localFiles.value.filter((file) => file.selected));
+
+const hasSelectedFiles = computed(() => selectedFiles.value.length > 0);
+
+const totalTokens = computed(() => localFiles.value.reduce((sum, file) => sum + file.tokenCount, 0));
+
+const selectedTokens = computed(() => selectedFiles.value.reduce((sum, file) => sum + file.tokenCount, 0));
+
+const sortedFiles = computed(() => [...localFiles.value].sort((a, b) => b.tokenCount - a.tokenCount));
+
+const selectAll = () => {
+  for (const file of localFiles.value) {
+    file.selected = true;
+  }
+};
+
+const deselectAll = () => {
+  for (const file of localFiles.value) {
+    file.selected = false;
+  }
+};
+
+const handleRepack = () => {
+  if (hasSelectedFiles.value) {
+    emit('repack', selectedFiles.value);
+  }
+};
+
+const toggleFileSelection = (file: FileInfo, event?: Event) => {
+  // Prevent double-toggling when clicking directly on checkbox
+  if (event?.target && (event.target as HTMLInputElement).type === 'checkbox') {
+    return;
+  }
+
+  file.selected = !file.selected;
+};
+</script>
+
+<style scoped>
+.file-selection-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid var(--vp-c-border);
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px 8px 0 0;
+}
+
+.file-selection-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-icon {
+  color: var(--vp-c-text-2);
+}
+
+.file-selection-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.action-btn:hover:not(:disabled) {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand-1);
+}
+
+.action-btn.repack {
+  background: var(--vp-c-brand-1);
+  color: white;
+  border-color: var(--vp-c-brand-1);
+}
+
+.action-btn.repack:hover:not(:disabled) {
+  background: var(--vp-c-brand-2);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.file-selection-stats {
+  padding: 12px 16px;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-border);
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.stat-item {
+  color: var(--vp-c-text-1);
+}
+
+.stat-separator {
+  margin: 0 8px;
+  color: var(--vp-c-text-3);
+}
+
+.file-list-container {
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--vp-c-bg);
+}
+
+.file-list-scroll {
+  padding: 0;
+}
+
+.file-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.file-table th {
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-border);
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  position: sticky;
+  top: 0;
+}
+
+.checkbox-column {
+  width: 40px;
+  text-align: center;
+}
+
+.file-path-column {
+  width: 70%;
+}
+
+.file-table .tokens-column {
+  width: 30%;
+  text-align: left;
+  padding-right: 2rem;
+}
+
+.file-row {
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+
+.file-row:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.file-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vp-c-border-soft);
+}
+
+.checkbox-cell {
+  text-align: center;
+}
+
+.file-path-cell {
+  max-width: 0;
+  width: 100%;
+}
+
+.file-path {
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+}
+
+.file-table .tokens-cell {
+  text-align: left;
+  padding-right: 2rem;
+}
+
+.file-tokens {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+}
+
+.header-checkbox {
+  cursor: pointer;
+}
+
+.file-checkbox {
+  cursor: pointer;
+}
+
+
+@media (max-width: 768px) {
+  .file-selection-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .file-selection-actions {
+    justify-content: space-between;
+  }
+
+  .action-btn {
+    flex: 1;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/website/client/components/Home/TryItLoading.vue b/website/client/components/Home/TryItLoading.vue
new file mode 100644
index 000000000..a13a082c1
--- /dev/null
+++ b/website/client/components/Home/TryItLoading.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="loading">
+    <div class="spinner"></div>
+    <p>Processing repository...</p>
+    <div class="sponsor-section">
+      <p class="sponsor-header">Special thanks to:</p>
+      <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
+        <img alt="Warp sponsorship" width="400" src="https://raw.githubusercontent.com/warpdotdev/brand-assets/main/Github/Sponsor/Warp-Github-LG-01.png">
+      </a>
+      <p class="sponsor-title">
+        <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
+          Warp, built for coding with multiple AI agents
+        </a>
+      </p>
+      <p class="sponsor-subtitle">
+        <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
+          Available for MacOS, Linux, & Windows
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading {
+  padding: 36px;
+  text-align: center;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 3px solid var(--vp-c-brand-1);
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+.sponsor-section {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sponsor-section p {
+  margin: 8px 0;
+}
+
+.sponsor-section .sponsor-header {
+  font-size: 0.9em;
+}
+
+.sponsor-section img {
+  max-width: 100%;
+  height: auto;
+  margin: 12px 0;
+}
+
+.sponsor-section .sponsor-title {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+
+.sponsor-section .sponsor-subtitle {
+  font-size: 0.9em;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
\ No newline at end of file
diff --git a/website/client/components/Home/TryItResult.vue b/website/client/components/Home/TryItResult.vue
index 08b0a66e4..9e3fd8c6d 100644
--- a/website/client/components/Home/TryItResult.vue
+++ b/website/client/components/Home/TryItResult.vue
@@ -1,50 +1,91 @@
 <script setup lang="ts">
-import type { PackResult } from '../api/client';
+import { computed, ref } from 'vue';
+import type { TabType } from '../../types/ui';
+import type { FileInfo, PackResult } from '../api/client';
+import TryItFileSelection from './TryItFileSelection.vue';
+import TryItLoading from './TryItLoading.vue';
 import TryItResultContent from './TryItResultContent.vue';
 import TryItResultErrorContent from './TryItResultErrorContent.vue';
 
-defineProps<{
-  result: PackResult | null;
-  loading: boolean;
-  error: string | null;
+interface Props {
+  result?: PackResult | null;
+  loading?: boolean;
+  error?: string | null;
   repositoryUrl?: string;
-}>();
+}
+
+interface Emits {
+  (e: 'repack', selectedFiles: FileInfo[]): void;
+  (e: 'repack-completed'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// Tab management
+const activeTab = ref<TabType>('result');
+
+const hasFileSelection = computed(() => props.result?.metadata?.allFiles && props.result.metadata.allFiles.length > 0);
+
+const handleTabClick = (tab: TabType) => {
+  activeTab.value = tab;
+};
+
+const handleRepack = (selectedFiles: FileInfo[]) => {
+  // Only proceed if we have selected files
+  if (!selectedFiles || selectedFiles.length === 0) {
+    return;
+  }
+
+  // Switch to result tab immediately when re-pack starts
+  activeTab.value = 'result';
+
+  emit('repack', selectedFiles);
+};
 </script>
 
 <template>
   <div class="result-viewer">
-    <div v-if="loading" class="loading">
-      <div class="spinner"></div>
-      <p>Processing repository...</p>
-
-      <div class="sponsor-section">
-        <p class="sponsor-header">Special thanks to:</p>
-        <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
-          <img alt="Warp sponsorship" width="400" src="https://raw.githubusercontent.com/warpdotdev/brand-assets/main/Github/Sponsor/Warp-Github-LG-01.png">
-        </a>
-        <p class="sponsor-title">
-          <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
-            Warp, built for coding with multiple AI agents
-          </a>
-        </p>
-        <p class="sponsor-subtitle">
-          <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
-            Available for MacOS, Linux, & Windows
-          </a>
-        </p>
-      </div>
-    </div>
-
+    <TryItLoading v-if="loading && !result" />
     <TryItResultErrorContent
       v-else-if="error"
       :message="error"
       :repository-url="repositoryUrl"
     />
+    <div v-else-if="result" class="result-content">
+      <!-- Tab Navigation -->
+      <div v-if="hasFileSelection" class="tab-navigation">
+        <button 
+          type="button"
+          class="tab-button"
+          :class="{ active: activeTab === 'result' }"
+          @click="handleTabClick('result')"
+        >
+          Result
+        </button>
+        <button 
+          type="button"
+          class="tab-button"
+          :class="{ active: activeTab === 'files' }"
+          @click="handleTabClick('files')"
+        >
+          File Selection
+        </button>
+      </div>
 
-    <TryItResultContent
-      v-else-if="result"
-      :result="result"
-    />
+      <!-- Tab Content -->
+      <div v-show="activeTab === 'result' || !hasFileSelection">
+        <TryItResultContent :result="result" />
+      </div>
+      <div v-show="activeTab === 'files' && hasFileSelection">
+        <TryItFileSelection
+          v-if="hasFileSelection"
+          :all-files="result.metadata!.allFiles!"
+          :loading="loading"
+          @repack="handleRepack"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -56,56 +97,39 @@ defineProps<{
   overflow: hidden;
 }
 
-.loading {
-  padding: 36px;
-  text-align: center;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  margin: 0 auto 16px;
-  border: 3px solid var(--vp-c-brand-1);
-  border-radius: 50%;
-  border-top-color: transparent;
-  animation: spin 1s linear infinite;
-}
-
-.sponsor-section {
-  margin-top: 16px;
+.result-content {
   display: flex;
   flex-direction: column;
-  align-items: center;
-}
-
-.sponsor-section p {
-  margin: 8px 0;
 }
 
-.sponsor-section .sponsor-header {
-  font-size: 0.9em;
+.tab-navigation {
+  display: flex;
+  border-bottom: 1px solid var(--vp-c-border);
+  background: var(--vp-c-bg-soft);
 }
 
-.sponsor-section img {
-  max-width: 100%;
-  height: auto;
-  margin: 12px 0;
+.tab-button {
+  flex: 1;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-bottom: 2px solid transparent;
 }
 
-.sponsor-section .sponsor-title {
-  font-weight: bold;
-  font-size: 1.1em;
-  color: var(--vp-c-brand-1);
-  text-decoration: underline;
+.tab-button:hover {
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
 }
 
-.sponsor-section .sponsor-subtitle {
-  font-size: 0.9em;
+.tab-button.active {
   color: var(--vp-c-brand-1);
-  text-decoration: underline;
+  border-bottom-color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg);
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
 </style>
diff --git a/website/client/components/api/client.ts b/website/client/components/api/client.ts
index 3c8a6f92e..f2e3f3fde 100644
--- a/website/client/components/api/client.ts
+++ b/website/client/components/api/client.ts
@@ -10,6 +10,13 @@ export interface PackOptions {
   compress?: boolean;
 }
 
+export interface FileInfo {
+  path: string;
+  charCount: number;
+  tokenCount: number;
+  selected?: boolean;
+}
+
 export interface PackRequest {
   url: string;
   format: 'xml' | 'markdown' | 'plain';
@@ -32,7 +39,9 @@ export interface PackResult {
     topFiles: {
       path: string;
       charCount: number;
+      tokenCount: number;
     }[];
+    allFiles?: FileInfo[];
   };
 }
 
diff --git a/website/client/composables/usePackOptions.ts b/website/client/composables/usePackOptions.ts
index b9f39f824..c7292fa79 100644
--- a/website/client/composables/usePackOptions.ts
+++ b/website/client/composables/usePackOptions.ts
@@ -35,7 +35,8 @@ export function usePackOptions() {
     for (const key of Object.keys(packOptions) as Array<keyof PackOptions>) {
       if (key in urlParams && urlParams[key] !== undefined) {
         // Type-safe assignment: only assign if the key is a valid PackOptions key
-        packOptions[key] = urlParams[key] as PackOptions[typeof key];
+        // @ts-expect-error
+        packOptions[key] = urlParams[key];
       }
     }
   }
diff --git a/website/client/composables/usePackRequest.ts b/website/client/composables/usePackRequest.ts
index 3eb8a9174..36e084d75 100644
--- a/website/client/composables/usePackRequest.ts
+++ b/website/client/composables/usePackRequest.ts
@@ -1,5 +1,5 @@
 import { computed, onMounted, ref } from 'vue';
-import type { PackResult } from '../components/api/client';
+import type { FileInfo, PackResult } from '../components/api/client';
 import { handlePackRequest } from '../components/utils/requestHandlers';
 import { isValidRemoteValue } from '../components/utils/validation';
 import { parseUrlParameters } from '../utils/urlParams';
@@ -99,6 +99,37 @@ export function usePackRequest() {
     }
   }
 
+  async function repackWithSelectedFiles(selectedFiles: FileInfo[]) {
+    if (!result.value || selectedFiles.length === 0) return;
+
+    // Generate include patterns from selected files
+    const selectedPaths = selectedFiles.map((file) => file.path);
+    const includePatterns = selectedPaths.join(',');
+
+    // Temporarily update pack options with include patterns
+    const originalIncludePatterns = packOptions.includePatterns;
+    const originalIgnorePatterns = packOptions.ignorePatterns;
+
+    packOptions.includePatterns = includePatterns;
+    packOptions.ignorePatterns = ''; // Clear ignore patterns to ensure selected files are included
+
+    try {
+      // Use the same loading state as normal pack processing
+      await submitRequest();
+
+      // Update file selection state in the new result
+      if (result.value?.metadata?.allFiles) {
+        for (const file of result.value.metadata.allFiles) {
+          file.selected = selectedPaths.includes(file.path);
+        }
+      }
+    } finally {
+      // Restore original pack options
+      packOptions.includePatterns = originalIncludePatterns;
+      packOptions.ignorePatterns = originalIgnorePatterns;
+    }
+  }
+
   function cancelRequest() {
     if (requestController) {
       requestController.abort();
@@ -147,6 +178,7 @@ export function usePackRequest() {
     handleFileUpload,
     resetRequest,
     submitRequest,
+    repackWithSelectedFiles,
     cancelRequest,
 
     // Pack option actions
diff --git a/website/client/composables/useZipProcessor.ts b/website/client/composables/useZipProcessor.ts
index 64a3104b3..23d127747 100644
--- a/website/client/composables/useZipProcessor.ts
+++ b/website/client/composables/useZipProcessor.ts
@@ -16,7 +16,7 @@ export function useZipProcessor() {
           if (err) {
             reject(new Error(`Failed to create ZIP file: ${err.message}`));
           } else {
-            const zipBlob = new Blob([data], { type: 'application/zip' });
+            const zipBlob = new Blob([data as BlobPart], { type: 'application/zip' });
             resolve(new File([zipBlob], `${folderName}.zip`, { type: 'application/zip' }));
           }
         });
diff --git a/website/client/constants/fileSelection.ts b/website/client/constants/fileSelection.ts
new file mode 100644
index 000000000..bf6d2f4fb
--- /dev/null
+++ b/website/client/constants/fileSelection.ts
@@ -0,0 +1 @@
+export const FILE_SELECTION_WARNING_THRESHOLD = 500;
diff --git a/website/client/tsconfig.json b/website/client/tsconfig.json
index fc72973a9..109f524b5 100644
--- a/website/client/tsconfig.json
+++ b/website/client/tsconfig.json
@@ -16,6 +16,16 @@
     "baseUrl": ".",
     "types": ["vite/client", "vitepress/client"]
   },
-  "include": [".vitepress/**/*.ts", ".vitepress/**/*.d.ts", ".vitepress/**/*.tsx", ".vitepress/**/*.vue"],
+  "include": [
+    ".vitepress/**/*.ts", 
+    ".vitepress/**/*.d.ts", 
+    ".vitepress/**/*.tsx", 
+    ".vitepress/**/*.vue",
+    "components/**/*.ts",
+    "components/**/*.vue",
+    "composables/**/*.ts",
+    "utils/**/*.ts",
+    "constants/**/*.ts"
+  ],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/website/client/types/ui.ts b/website/client/types/ui.ts
new file mode 100644
index 000000000..fa4e9b9c1
--- /dev/null
+++ b/website/client/types/ui.ts
@@ -0,0 +1 @@
+export type TabType = 'result' | 'files';
diff --git a/website/server/package-lock.json b/website/server/package-lock.json
index a34d620eb..0b31601f8 100644
--- a/website/server/package-lock.json
+++ b/website/server/package-lock.json
@@ -10,7 +10,7 @@
         "@hono/node-server": "^1.16.0",
         "fflate": "^0.8.2",
         "hono": "^4.8.5",
-        "repomix": "^1.2.0",
+        "repomix": "^1.4.0",
         "winston": "^3.17.0",
         "zod": "^3.24.1"
       },
@@ -3380,9 +3380,9 @@
       }
     },
     "node_modules/repomix": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/repomix/-/repomix-1.2.0.tgz",
-      "integrity": "sha512-rPUE73lQOAFu32O+rT6rFHxQlfwKJJF9JrQh+aOeSBSfWwu52l/+q/Qj25x2S3TVaWK+3j/FeVyFs6hoCjsOhw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/repomix/-/repomix-1.4.0.tgz",
+      "integrity": "sha512-n3Yzmbh4AonDIJ6eRjySIJ5fnUD5LxmgAMqB6B2UWsfhzuZbNS8/LwhcgUtMEREmJlUjifQWTPJ+6x27lMorJQ==",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.10.1",
diff --git a/website/server/package.json b/website/server/package.json
index 2791f3b23..c56d6749a 100644
--- a/website/server/package.json
+++ b/website/server/package.json
@@ -16,7 +16,7 @@
     "@hono/node-server": "^1.16.0",
     "fflate": "^0.8.2",
     "hono": "^4.8.5",
-    "repomix": "^1.2.0",
+    "repomix": "^1.4.0",
     "winston": "^3.17.0",
     "zod": "^3.24.1"
   },
diff --git a/website/server/src/remoteRepo.ts b/website/server/src/remoteRepo.ts
index 90b2140be..fbb84d2cb 100644
--- a/website/server/src/remoteRepo.ts
+++ b/website/server/src/remoteRepo.ts
@@ -63,6 +63,7 @@ export async function processRemoteRepo(
     topFilesLen: 10,
     include: sanitizedIncludePatterns,
     ignore: sanitizedIgnorePatterns,
+    tokenCountTree: true, // Required to generate token counts for all files in the repository
     quiet: true, // Enable quiet mode to suppress output
   } as CliOptions;
 
@@ -98,11 +99,18 @@ export async function processRemoteRepo(
         topFiles: Object.entries(packResult.fileCharCounts)
           .map(([path, charCount]) => ({
             path,
-            charCount,
+            charCount: charCount as number,
             tokenCount: packResult.fileTokenCounts[path] || 0,
           }))
-          .sort((a, b) => b.charCount - a.charCount)
+          .sort((a, b) => b.tokenCount - a.tokenCount)
           .slice(0, cliOptions.topFilesLen),
+        allFiles: Object.entries(packResult.fileTokenCounts)
+          .map(([path]) => ({
+            path,
+            tokenCount: packResult.fileTokenCounts[path] || 0,
+            selected: true, // Default to selected for initial packing
+          }))
+          .sort((a, b) => b.tokenCount - a.tokenCount),
       },
     };
 
diff --git a/website/server/src/schemas/request.ts b/website/server/src/schemas/request.ts
index 1ef57fdfd..5e4bda35d 100644
--- a/website/server/src/schemas/request.ts
+++ b/website/server/src/schemas/request.ts
@@ -14,7 +14,7 @@ export const packOptionsSchema = z
     directoryStructure: z.boolean().optional(),
     includePatterns: z
       .string()
-      .max(1000, 'Include patterns too long')
+      .max(100_000, 'Include patterns too long')
       .optional()
       .transform((val) => val?.trim()),
     ignorePatterns: z
diff --git a/website/server/src/types.ts b/website/server/src/types.ts
index 066dc8750..e376e7008 100644
--- a/website/server/src/types.ts
+++ b/website/server/src/types.ts
@@ -16,6 +16,12 @@ interface TopFile {
   tokenCount: number;
 }
 
+interface FileInfo {
+  path: string;
+  tokenCount: number;
+  selected?: boolean;
+}
+
 interface PackSummary {
   totalFiles: number;
   totalCharacters: number;
@@ -30,6 +36,7 @@ export interface PackResult {
     timestamp: string;
     summary?: PackSummary;
     topFiles?: TopFile[];
+    allFiles?: FileInfo[];
   };
 }
 
diff --git a/website/server/src/utils/sharedInstance.ts b/website/server/src/utils/sharedInstance.ts
index bd07da9d4..463b16b05 100644
--- a/website/server/src/utils/sharedInstance.ts
+++ b/website/server/src/utils/sharedInstance.ts
@@ -4,4 +4,4 @@ import { RateLimiter } from './rateLimit.js';
 
 // Create shared instances
 export const cache = new RequestCache<PackResult>(180); // 3 minutes cache
-export const rateLimiter = new RateLimiter(60_000, 3); // 3 requests per minute
+export const rateLimiter = new RateLimiter(60_000, process.env.NODE_ENV === 'development' ? 10 : 3); // 10 requests per minute in dev, 3 in production