feat(website): add file selection checkboxes for selective re-packing

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>

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,

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>

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],