From 0982c6e856faa3e50b035dc3ebee8664b65f755c Mon Sep 17 00:00:00 2001
From: Kazuki Yamada <koukun0120@gmail.com>
Date: Mon, 6 Apr 2026 22:23:37 +0900
Subject: [PATCH] style(website): Keep main message fixed, show progress as
 subtitle

Main text stays as "Processing repository..." (same as main branch).
Stage and detailed messages (e.g., "Cloning repository...",
"Searching for files...") are shown below in smaller gray text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 website/client/components/Home/TryItLoading.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/website/client/components/Home/TryItLoading.vue b/website/client/components/Home/TryItLoading.vue
index 64a4c02a..a0dfa3fc 100644
--- a/website/client/components/Home/TryItLoading.vue
+++ b/website/client/components/Home/TryItLoading.vue
@@ -17,19 +17,14 @@ const stageMessages: Record<PackProgressStage, string> = {
   processing: 'Processing files...',
 };
 
-const displayMessage = computed(() => {
-  if (props.stage && stageMessages[props.stage]) {
-    return stageMessages[props.stage];
-  }
-  return 'Processing repository...';
-});
-
 const MAX_DETAIL_LENGTH = 60;
 
 const detailMessage = computed(() => {
-  if (!props.message) return null;
-  if (props.message.length <= MAX_DETAIL_LENGTH) return props.message;
-  return `${props.message.slice(0, MAX_DETAIL_LENGTH)}...`;
+  // Show detailed message from pack() if available, otherwise show stage message
+  const text = props.message || (props.stage && stageMessages[props.stage]) || null;
+  if (!text) return null;
+  if (text.length <= MAX_DETAIL_LENGTH) return text;
+  return `${text.slice(0, MAX_DETAIL_LENGTH)}...`;
 });
 </script>
 
@@ -37,7 +32,7 @@ const detailMessage = computed(() => {
   <div class="loading">
     <div class="loading-header">
       <div class="spinner"></div>
-      <p>{{ displayMessage }}</p>
+      <p>Processing repository...</p>
     </div>
     <p v-if="detailMessage" class="loading-detail">{{ detailMessage }}</p>
     <div class="sponsor-section">