yamadashy · yamadashy · Apr 6, 2026 · Apr 6, 2026 · Apr 6, 2026 · Apr 6, 2026
@@ -96,6 +96,8 @@
           :error-type="errorType"
           :repository-url="inputRepositoryUrl"
           :pack-options="packOptions"
+          :progress-stage="progressStage"
+          :progress-message="progressMessage"
           @repack="handleRepack"
         />
       </div>
@@ -136,6 +138,8 @@ const {
   errorType,
   result,
   hasExecuted,
+  progressStage,
+  progressMessage,
 
   // Computed
   isSubmitValid,

@@ -1,9 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PackProgressStage } from '../api/client';
+
+interface Props {
+  stage?: PackProgressStage | null;
+  message?: string | null;
+}
+
+const props = defineProps<Props>();
+
+const stageMessages: Record<PackProgressStage, string> = {
+  'cache-check': 'Checking cache...',
+  cloning: 'Cloning repository...',
+  'repository-fetch': 'Fetching repository...',
+  extracting: 'Extracting files...',
+  processing: 'Processing files...',
+};
+
+const MAX_DETAIL_LENGTH = 60;
+
+const detailMessage = computed(() => {
+  const text = props.message || (props.stage && stageMessages[props.stage]) || '...';
+  if (text.length <= MAX_DETAIL_LENGTH) return text;
+  return `${text.slice(0, MAX_DETAIL_LENGTH)}...`;
+});
+</script>
+
 <template>
   <div class="loading">
     <div class="loading-header">
       <div class="spinner"></div>
       <p>Processing repository...</p>
     </div>
+    <p class="loading-detail">{{ detailMessage }}</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">
@@ -40,6 +69,12 @@
   margin: 0;
 }
 
+.loading-detail {
+  margin: 4px 0 0;
+  font-size: 0.8em;
+  color: var(--vp-c-text-3);
+}
+
 .spinner {
   flex-shrink: 0;
   width: 20px;

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import type { PackOptions } from '../../composables/usePackOptions';
 import type { TabType } from '../../types/ui';
-import type { FileInfo, PackResult } from '../api/client';
+import type { FileInfo, PackProgressStage, PackResult } from '../api/client';
 import SupportMessage from './SupportMessage.vue';
 import TryItFileSelection from './TryItFileSelection.vue';
 import TryItLoading from './TryItLoading.vue';
@@ -16,6 +16,8 @@ interface Props {
   errorType?: 'error' | 'warning';
   repositoryUrl?: string;
   packOptions?: PackOptions;
+  progressStage?: PackProgressStage | null;
+  progressMessage?: string | null;
 }
 
 interface Emits {
@@ -51,7 +53,7 @@ const handleRepack = (selectedFiles: FileInfo[]) => {
 <template>
   <div class="result-viewer">
     <template v-if="loading && !result">
-      <TryItLoading />
+      <TryItLoading :stage="progressStage" :message="progressMessage" />
       <SupportMessage />
     </template>
     <TryItResultErrorContent

@@ -20,7 +20,6 @@ export interface PackRequest {
   url: string;
   format: 'xml' | 'markdown' | 'plain';
   options: PackOptions;
-  signal?: AbortSignal;
   file?: File;
 }
 
@@ -61,9 +60,35 @@ export class ApiError extends Error {
   }
 }
 
+export type PackProgressStage = 'cache-check' | 'cloning' | 'repository-fetch' | 'extracting' | 'processing';
+
+export interface PackStreamCallbacks {
+  onProgress?: (stage: PackProgressStage, message?: string) => void;
+  signal?: AbortSignal;
+}
+
 const API_BASE_URL = import.meta.env.PROD ? 'https://api.repomix.com' : 'http://localhost:8080';
 
-export async function packRepository(request: PackRequest): Promise<PackResult> {
+// NDJSON stream event types
+interface ProgressEvent {
+  type: 'progress';
+  stage: PackProgressStage;
+  message?: string;
+}
+
+interface ResultEvent {
+  type: 'result';
+  data: PackResult;
+}
+
+interface StreamErrorEvent {
+  type: 'error';
+  message: string;
+}
+
+type StreamEvent = ProgressEvent | ResultEvent | StreamErrorEvent;
+
+export async function packRepository(request: PackRequest, callbacks?: PackStreamCallbacks): Promise<PackResult> {
   const formData = new FormData();
 
   if (request.file) {
@@ -77,14 +102,56 @@ export async function packRepository(request: PackRequest): Promise<PackResult>
   const response = await fetch(`${API_BASE_URL}/api/pack`, {
     method: 'POST',
     body: formData,
-    signal: request.signal,
+    signal: callbacks?.signal,
   });
 
-  const data = await response.json();
-
+  // Handle non-streaming error responses (validation errors return JSON)
   if (!response.ok) {
+    const data = await response.json();
     throw new ApiError((data as ErrorResponse).error);
   }
 
-  return data as PackResult;
+  // Handle NDJSON stream
+  if (!response.body) {
+    throw new ApiError('No response body received');
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+  let result: PackResult | null = null;
+
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+
+      // Parse complete lines from buffer
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+
+        const event = JSON.parse(line) as StreamEvent;
+        if (event.type === 'progress') {
+          callbacks?.onProgress?.(event.stage, event.message);
+        } else if (event.type === 'result') {
+          result = event.data;
+        } else if (event.type === 'error') {
+          throw new ApiError(event.message);
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+
+  if (!result) {
+    throw new ApiError('No result received from server');
+  }
+
+  return result;
 }
@@ -1,11 +1,12 @@
-import type { PackOptions, PackRequest, PackResult } from '../api/client';
+import type { PackOptions, PackProgressStage, PackRequest, PackResult } from '../api/client';
 import { packRepository } from '../api/client';
 import { type AnalyticsActionType, analyticsUtils } from './analytics';
 
 interface RequestHandlerOptions {
   onSuccess?: (result: PackResult) => void;
   onError?: (error: string) => void;
   onAbort?: (message: string) => void;
+  onProgress?: (stage: PackProgressStage, message?: string) => void;
   signal?: AbortSignal;
   file?: File;
 }
@@ -19,7 +20,7 @@ export async function handlePackRequest(
   options: PackOptions,
   handlerOptions: RequestHandlerOptions = {},
 ): Promise<void> {
-  const { onSuccess, onError, onAbort, signal, file } = handlerOptions;
+  const { onSuccess, onError, onAbort, onProgress, signal, file } = handlerOptions;
   const processedUrl = url.trim();
 
   // Track pack start
@@ -30,11 +31,13 @@ export async function handlePackRequest(
       url: processedUrl,
       format,
       options,
-      signal,
       file,
     };
 
-    const response = await packRepository(request);
+    const response = await packRepository(request, {
+      onProgress,
+      signal,
+    });
 
     // Track successful pack
     if (response.metadata.summary) {

@@ -1,5 +1,5 @@
 import { computed, onMounted, ref } from 'vue';
-import type { FileInfo, PackResult } from '../components/api/client';
+import type { FileInfo, PackProgressStage, PackResult } from '../components/api/client';
 import { handlePackRequest } from '../components/utils/requestHandlers';
 import { isValidRemoteValue } from '../components/utils/validation';
 import { parseUrlParameters } from '../utils/urlParams';
@@ -24,6 +24,8 @@ export function usePackRequest() {
   const errorType = ref<'error' | 'warning'>('error');
   const result = ref<PackResult | null>(null);
   const hasExecuted = ref(false);
+  const progressStage = ref<PackProgressStage | null>(null);
+  const progressMessage = ref<string | null>(null);
 
   // Request controller for cancellation
   let requestController: AbortController | null = null;
@@ -71,6 +73,8 @@ export function usePackRequest() {
     errorType.value = 'error';
     result.value = null;
     hasExecuted.value = true;
+    progressStage.value = null;
+    progressMessage.value = null;
     inputRepositoryUrl.value = inputUrl.value;
 
     // Set up automatic timeout
@@ -93,6 +97,10 @@ export function usePackRequest() {
             error.value = message;
             errorType.value = 'warning';
           },
+          onProgress: (stage, message) => {
+            progressStage.value = stage;
+            progressMessage.value = message ?? null;
+          },
           signal: requestController.signal,
           file: mode.value === 'file' || mode.value === 'folder' ? uploadedFile.value || undefined : undefined,
         },
@@ -175,6 +183,8 @@ export function usePackRequest() {
     errorType,
     result,
     hasExecuted,
+    progressStage,
+    progressMessage,
 
     // Computed
     isSubmitValid,