From 9a12b0c328ee941330eef718180a4e62776b59b4 Mon Sep 17 00:00:00 2001
From: Le-Caignec <robinlecaignec@yahoo.fr>
Date: Mon, 11 Aug 2025 10:24:26 +0200
Subject: [PATCH 1/6] feat: update sidebar and enhance documentation for iApp
 setup

---
 .vitepress/sidebar.ts                   |   2 +-
 src/build-iapp/guides/build-&-deploy.md |  60 +++++-
 src/components/CLIDemo.vue              | 236 ++++++++++++++++++++++++
 src/overview/welcome.md                 |   2 +-
 4 files changed, 294 insertions(+), 6 deletions(-)
 create mode 100644 src/components/CLIDemo.vue

diff --git a/.vitepress/sidebar.ts b/.vitepress/sidebar.ts
index 61ac6b43..88f4601c 100644
--- a/.vitepress/sidebar.ts
+++ b/.vitepress/sidebar.ts
@@ -479,7 +479,7 @@ export function getSidebar() {
             ],
           },
           {
-            text: '💬 Web3Telegram <span class="VPBadge warning" style="margin-left: 8px; margin-bottom: -1px; transform: translateY(-1px);">alpha</span>',
+            text: '💬 Web3Telegram',
             link: '/use-iapp/web3telegram',
             collapsed: true,
             items: [
diff --git a/src/build-iapp/guides/build-&-deploy.md b/src/build-iapp/guides/build-&-deploy.md
index 1b1def7c..0840a72e 100644
--- a/src/build-iapp/guides/build-&-deploy.md
+++ b/src/build-iapp/guides/build-&-deploy.md
@@ -6,6 +6,12 @@ description:
 
 # Create and Deploy an iApp
 
+iApps (iExec Applications) are decentralized applications that run on the iExec
+network. They leverage confidential computing to ensure data privacy and
+security while providing scalable off-chain computation.
+
+## About iApp Generator
+
 Bootstrap TEE-compatible applications in minutes without any hardcoding skills,
 iApp Generator handles all the low-level complexity for you.
 
@@ -20,13 +26,59 @@ iApp Generator handles all the low-level complexity for you.
 - **Check and deploy iApps quickly** - iApp Generator checks that your iApp
   complies with the iExec Framework and streamlines its deployment.
 
+## Prerequisites
+
+Before getting started, make sure you have the following installed:
+
+- **Node.js** (version 18 or higher) - [Download here](https://nodejs.org/)
+- **Docker** - [Download here](https://www.docker.com/get-started)
+- **Docker Hub account** - [Sign up here](https://hub.docker.com/) (required for
+  deployment)
+
+## Installation
+
+First, install the iApp Generator CLI tool using your preferred package manager:
+
+::: code-group
+
+```sh [npm]
+npm install -g @iexec/iapp
+```
+
+```sh [yarn]
+yarn global add @iexec/iapp
+```
+
+```sh [pnpm]
+pnpm add -g @iexec/iapp
+```
+
+```sh [bun]
+bun add -g @iexec/iapp
+```
+
+:::
+
+<script setup>
+import CLIDemo from '../../components/CLIDemo.vue';
+</script>
+
+## Quick Start
+
+Once installed, you can create and deploy your first iApp. The CLI will guide
+you through an interactive setup process:
+
+<CLIDemo />
+
+After the interactive setup, continue with development and deployment:
+
 ```bash
-# Create your iApp (Python or Node.js supported)
-iapp init my-privacy-app
-cd my-privacy-app
+# Navigate to your project
+cd hello-world
 
 # Develop and test locally (simulates TEE environment)
 iapp test
+
 # Deploy to the network
 iapp deploy
 ```
@@ -91,7 +143,7 @@ update_oracle_contract(average_price)
 
 :::
 
-**Automated Transactions iApp**
+### Automated Transactions iApp
 
 This iApp automates monthly payments using protected payment details, so
 financial information remains private.
diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
new file mode 100644
index 00000000..fbc20d0a
--- /dev/null
+++ b/src/components/CLIDemo.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="my-8">
+    <div class="overflow-hidden rounded-lg bg-gray-900 font-mono shadow-2xl">
+      <!-- Terminal Header -->
+      <div class="flex items-center gap-3 bg-gray-800 px-4 py-3">
+        <div class="flex gap-2">
+          <div class="h-3 w-3 rounded-full bg-red-500"></div>
+          <div class="h-3 w-3 rounded-full bg-yellow-500"></div>
+          <div class="h-3 w-3 rounded-full bg-green-400"></div>
+        </div>
+        <div class="text-sm font-medium text-gray-400">Terminal</div>
+      </div>
+
+      <!-- Terminal Content -->
+      <div
+        class="max-h-96 overflow-y-auto p-5 text-sm leading-relaxed text-white"
+        ref="terminalContent"
+      >
+        <!-- Initial Command -->
+        <div class="mb-2">
+          <span class="font-bold text-green-400">$ </span>
+          <span class="ml-1 text-white">iapp init</span>
+        </div>
+
+        <!-- ASCII Art -->
+        <div v-if="showStep >= 1" class="my-4 font-mono text-xs text-blue-400">
+          <pre>{{ asciiArt }}</pre>
+        </div>
+
+        <!-- Project Name Question -->
+        <div
+          v-if="showStep >= 2"
+          class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
+        >
+          <span class="font-bold text-green-400">✔</span>
+          <span class="text-white"
+            >What's your project name? (A folder with this name will be
+            created)</span
+          >
+          <span class="text-gray-500">…</span>
+          <span
+            v-if="showStep >= 3"
+            class="font-medium text-yellow-400"
+            >{{ typedProjectName }}</span
+          >
+          <span
+            v-if="showStep >= 3 && typedProjectName.length < 'hello-world'.length"
+            class="animate-blink inline-block h-4 w-0.5 bg-yellow-400 ml-0.5"
+          ></span>
+        </div>
+
+        <!-- Language Question -->
+        <div
+          v-if="showStep >= 4"
+          class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
+        >
+          <span class="font-bold" :class="showStep >= 6 ? 'text-green-400' : 'text-blue-400'">
+            {{ showStep >= 6 ? '✔' : '?' }}
+          </span>
+          <span class="text-white">Which language do you want to use?</span>
+          <span v-if="showStep >= 6" class="font-medium text-yellow-400 ml-2">JavaScript</span>
+        </div>
+
+        <div v-if="showStep >= 4 && showStep < 6" class="animate-fade-in mb-2 ml-5">
+          <div
+            class="flex items-center gap-1 py-0.5 transition-all duration-200"
+            :class="{
+              '-mx-2 animate-pulse rounded bg-blue-400/10 px-2':
+                showStep >= 5 && selectedLanguage === 'JavaScript',
+            }"
+          >
+            <span class="w-3 font-bold text-blue-400">❯</span>
+            <span class="text-white">JavaScript</span>
+          </div>
+          <div class="flex items-center gap-1 py-0.5">
+            <span class="w-3 font-bold text-blue-400">&nbsp;</span>
+            <span class="text-white">Python</span>
+          </div>
+        </div>
+
+        <!-- Project Type Question -->
+        <div
+          v-if="showStep >= 6"
+          class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
+        >
+          <span class="font-bold" :class="showStep >= 8 ? 'text-green-400' : 'text-blue-400'">
+            {{ showStep >= 8 ? '✔' : '?' }}
+          </span>
+          <span class="text-white"
+            >What kind of project do you want to init?</span
+          >
+          <span v-if="showStep >= 8" class="font-medium text-yellow-400 ml-2">Hello World</span>
+        </div>
+
+        <div v-if="showStep >= 6 && showStep < 8" class="animate-fade-in mb-4 ml-5">
+          <div
+            class="flex items-center gap-1 py-0.5 transition-all duration-200"
+            :class="{
+              '-mx-2 animate-pulse rounded bg-blue-400/10 px-2': showStep >= 7,
+            }"
+          >
+            <span class="w-3 font-bold text-blue-400">❯</span>
+            <span class="text-white">Hello World - iapp quick start</span>
+          </div>
+          <div class="flex items-center gap-1 py-0.5">
+            <span class="w-3 font-bold text-blue-400">&nbsp;</span>
+            <span class="text-white">advanced</span>
+          </div>
+        </div>
+
+        <!-- Completion Message -->
+        <div
+          v-if="showStep >= 8"
+          class="animate-fade-in mt-4 border-t border-gray-700 pt-3"
+        >
+          <div class="mb-2 flex items-center gap-2">
+            <span class="font-bold text-green-400">✨</span>
+            <span class="font-medium text-green-400"
+              >Generating your iApp...</span
+            >
+          </div>
+          <div class="ml-5 space-y-1 text-xs text-gray-400">
+            <div>📁 Created hello-world/</div>
+            <div>📄 Added package.json</div>
+            <div>🐳 Added Dockerfile</div>
+            <div>⚙️ Added iExec configuration</div>
+          </div>
+          <div class="mt-2 flex items-center gap-2">
+            <span class="font-bold text-green-400">✅</span>
+            <span class="font-medium text-green-400">Your iApp is ready!</span>
+          </div>
+        </div>
+
+        <!-- Cursor -->
+        <div
+          v-if="showStep < TOTAL_STEPS"
+          class="animate-blink ml-1 inline-block h-4 w-2 bg-green-400"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// Constants
+const STEP_DELAY = 1200;
+const TOTAL_STEPS = 9;
+const RESTART_DELAY = 3000;
+const TYPING_SPEED = 120;
+
+const asciiArt = `
+  ___    _    ____  ____
+ |_ _|  / \  |  _ \|  _ \\
+  | |  / _ \ | |_) | |_) |
+  | | / ___ \|  __/|  __/
+ |___/_/   \_\\_|   |_|`;
+
+// Reactive state
+const showStep = ref(0);
+const selectedLanguage = ref('JavaScript');
+const terminalContent = ref<HTMLElement | null>(null);
+const typedProjectName = ref('');
+
+// Timers
+let animationTimer: NodeJS.Timeout | null = null;
+let typingTimer: NodeJS.Timeout | null = null;
+
+// Typing animation for project name
+const typeProjectName = () => {
+  const fullName = 'hello-world';
+  let currentIndex = 0;
+  
+  const typeNextChar = () => {
+    if (currentIndex < fullName.length) {
+      typedProjectName.value = fullName.substring(0, currentIndex + 1);
+      currentIndex++;
+      typingTimer = setTimeout(typeNextChar, TYPING_SPEED);
+    }
+  };
+  
+  typeNextChar();
+};
+
+// Auto-scroll to bottom
+const scrollToBottom = () => {
+  if (terminalContent.value) {
+    terminalContent.value.scrollTop = terminalContent.value.scrollHeight;
+  }
+};
+
+// Main animation loop
+const animate = () => {
+  let currentStep = 0;
+
+  const nextStep = () => {
+    if (currentStep < TOTAL_STEPS) {
+      showStep.value = currentStep + 1;
+      currentStep++;
+
+      // Start typing animation at step 3
+      if (currentStep === 3) {
+        typeProjectName();
+      }
+
+      scrollToBottom();
+
+      if (currentStep < TOTAL_STEPS) {
+        animationTimer = setTimeout(nextStep, STEP_DELAY);
+      } else {
+        // Auto-restart after completion
+        animationTimer = setTimeout(() => {
+          showStep.value = 0;
+          typedProjectName.value = '';
+          animate();
+        }, RESTART_DELAY);
+      }
+    }
+  };
+
+  animationTimer = setTimeout(nextStep, STEP_DELAY);
+};
+
+// Cleanup timers
+const cleanup = () => {
+  if (animationTimer) clearTimeout(animationTimer);
+  if (typingTimer) clearTimeout(typingTimer);
+};
+
+onMounted(() => {
+  animate();
+});
+
+onUnmounted(cleanup);
+</script>
diff --git a/src/overview/welcome.md b/src/overview/welcome.md
index f6bb652b..351f64ed 100644
--- a/src/overview/welcome.md
+++ b/src/overview/welcome.md
@@ -4,7 +4,7 @@ description:
   Discover how iExec empowers developers to build privacy-first applications
 ---
 
-# 💡 The Privacy Toolkit
+# 💡 Privacy Made Easy
 
 <div class="bg-gradient-to-r from-[#fcd15a] to-[#ffad4d] rounded-[6px] px-8 pb-4 text-gray-800 max-w-3xl mx-auto mb-6">
   <h2 class="text-2xl font-bold mt-0 !border-none">Welcome to iExec</h2>

From c7d124323f2331bc0f7e20d95c62c061562d36fd Mon Sep 17 00:00:00 2001
From: Le-Caignec <robinlecaignec@yahoo.fr>
Date: Mon, 11 Aug 2025 11:45:55 +0200
Subject: [PATCH 2/6] feat: add figlet dependency and enhance CLI demo with
 dynamic steps and ASCII art

---
 package-lock.json                       |  21 ++
 package.json                            |   2 +
 src/build-iapp/guides/build-&-deploy.md | 135 ++++++++--
 src/components/CLIDemo.vue              | 315 +++++++++++++++---------
 4 files changed, 337 insertions(+), 136 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2dccf20b..fabb7040 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@vueuse/core": "^13.6.0",
         "@wagmi/vue": "^0.1.24",
         "clsx": "^2.1.1",
+        "figlet": "^1.8.2",
         "pinia": "^3.0.3",
         "reka-ui": "^2.4.1",
         "tailwind-merge": "^3.3.1",
@@ -32,6 +33,7 @@
       "devDependencies": {
         "@iconify/vue": "^5.0.0",
         "@shikijs/vitepress-twoslash": "^3.8.0",
+        "@types/figlet": "^1.7.0",
         "@types/prop-types": "^15.7.15",
         "@types/react": "^18.3.23",
         "prettier": "^3.6.2",
@@ -2736,6 +2738,13 @@
       "version": "1.0.8",
       "license": "MIT"
     },
+    "node_modules/@types/figlet": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@types/figlet/-/figlet-1.7.0.tgz",
+      "integrity": "sha512-KwrT7p/8Eo3Op/HBSIwGXOsTZKYiM9NpWRBJ5sVjWP/SmlS+oxxRvJht/FNAtliJvja44N3ul1yATgohnVBV0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "dev": true,
@@ -7462,6 +7471,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/figlet": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/figlet/-/figlet-1.8.2.tgz",
+      "integrity": "sha512-iPCpE9B/rOcjewIzDnagP9F2eySzGeHReX8WlrZQJkqFBk2wvq8gY0c6U6Hd2y9HnX1LQcYSeP7aEHoPt6sVKQ==",
+      "license": "MIT",
+      "bin": {
+        "figlet": "bin/index.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index ac5df8b1..e805e9b9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@vueuse/core": "^13.6.0",
     "@wagmi/vue": "^0.1.24",
     "clsx": "^2.1.1",
+    "figlet": "^1.8.2",
     "pinia": "^3.0.3",
     "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
     "@shikijs/vitepress-twoslash": "^3.8.0",
+    "@types/figlet": "^1.7.0",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^18.3.23",
     "prettier": "^3.6.2",
diff --git a/src/build-iapp/guides/build-&-deploy.md b/src/build-iapp/guides/build-&-deploy.md
index 0840a72e..af6c4990 100644
--- a/src/build-iapp/guides/build-&-deploy.md
+++ b/src/build-iapp/guides/build-&-deploy.md
@@ -59,29 +59,130 @@ bun add -g @iexec/iapp
 
 :::
 
-<script setup>
-import CLIDemo from '../../components/CLIDemo.vue';
-</script>
-
 ## Quick Start
 
 Once installed, you can create and deploy your first iApp. The CLI will guide
 you through an interactive setup process:
 
-<CLIDemo />
+<CLIDemo
+  initialCommand="iapp init"
+  asciiText="iApp"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'What is your project name? (A folder with this name will be created)',
+      answer: 'hello-world',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'Which language do you want to use?',
+      answer: 'JavaScript',
+      options: [
+        { label: 'JavaScript', selected: true },
+        { label: 'Python', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What kind of project do you want to init?',
+      answer: 'Hello World',
+      options: [
+        { label: 'Hello World - iapp quick start', selected: true },
+        { label: 'advanced', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="8"
+  :completionMessage="'Generating your iApp...'"
+  :completionItems="[
+    '📁 Created hello-world/',
+    '📄 Added package.json',
+    '🐳 Added Dockerfile',
+    '⚙️ Added iExec configuration'
+  ]"
+  :successMessage="'Your iApp is ready!'"
+/>
 
 After the interactive setup, continue with development and deployment:
 
-```bash
-# Navigate to your project
-cd hello-world
-
-# Develop and test locally (simulates TEE environment)
-iapp test
-
-# Deploy to the network
-iapp deploy
-```
+## Development and Testing
+
+Navigate to your project and run tests locally to simulate the TEE environment:
+
+<CLIDemo
+  :initialCommand="'iapp test'"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'Running tests in simulated TEE environment...',
+      answer: '✅ All tests passed',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      question: 'Building package...',
+      answer: '📦 Package built successfully',
+      showTyping: true,
+      isComplete: false
+    }
+  ]"
+  :completionStep="6"
+  :completionMessage="'Running tests and building package...'"
+  :completionItems="[
+    '🧪 Running unit tests...',
+    '✅ All tests passed',
+    '📦 Building package...',
+    '🔍 Code analysis complete',
+    '🚀 Ready for deployment'
+  ]"
+  :successMessage="'Build successful! Ready for deployment.'"
+  :autoRestart="false"
+/>
+
+## Deployment
+
+Once your tests pass and the package is built, deploy your iApp to the iExec
+network:
+
+<CLIDemo
+  initialCommand="iapp deploy"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'Connecting to iExec network...',
+      answer: '🌐 Connected to Arbitrum',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      question: 'Uploading package...',
+      answer: '📤 Package uploaded',
+      showTyping: true,
+      isComplete: false
+    }
+  ]"
+  :completionStep="5"
+  :completionMessage="'Deploying to iExec network...'"
+  :completionItems="[
+    '🌐 Connecting to network...',
+    '🔐 Authenticating...',
+    '📤 Uploading package...',
+    '🔍 Verifying deployment...',
+    '📋 Contract deployed'
+  ]"
+  :successMessage="'Successfully deployed to iExec network!'"
+  :autoRestart="false"
+/>
 
 <div class="bg-gradient-to-r from-blue-400/10 to-blue-400/5 rounded-[6px] p-4 border-l-4 border-blue-600 mb-6">
   <p class="m-0! text-sm"><strong>Note:</strong> iApp Generator currently supports Python and Node.js, but iApps can be built in any language that runs in Docker.</p>
@@ -168,3 +269,7 @@ for month in range(12):
 ```
 
 :::
+
+<script setup>
+import CLIDemo from '../../components/CLIDemo.vue';
+</script>
diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
index fbc20d0a..c8827331 100644
--- a/src/components/CLIDemo.vue
+++ b/src/components/CLIDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="my-8">
-    <div class="overflow-hidden rounded-lg bg-gray-900 font-mono shadow-2xl">
+    <div
+      class="h-96 w-full overflow-hidden rounded-lg bg-gray-900 font-mono shadow-2xl"
+    >
       <!-- Terminal Header -->
-      <div class="flex items-center gap-3 bg-gray-800 px-4 py-3">
+      <div
+        class="flex items-center gap-3 border-b border-gray-700 bg-gray-800 px-4 py-3"
+      >
         <div class="flex gap-2">
           <div class="h-3 w-3 rounded-full bg-red-500"></div>
           <div class="h-3 w-3 rounded-full bg-yellow-500"></div>
@@ -13,127 +17,111 @@
 
       <!-- Terminal Content -->
       <div
-        class="max-h-96 overflow-y-auto p-5 text-sm leading-relaxed text-white"
+        class="h-80 overflow-x-hidden overflow-y-auto p-5 text-sm leading-relaxed text-white"
         ref="terminalContent"
       >
         <!-- Initial Command -->
         <div class="mb-2">
           <span class="font-bold text-green-400">$ </span>
-          <span class="ml-1 text-white">iapp init</span>
+          <span class="ml-1 text-white">{{ initialCommand }}</span>
         </div>
 
         <!-- ASCII Art -->
-        <div v-if="showStep >= 1" class="my-4 font-mono text-xs text-blue-400">
-          <pre>{{ asciiArt }}</pre>
-        </div>
-
-        <!-- Project Name Question -->
         <div
-          v-if="showStep >= 2"
-          class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
+          v-if="displayAsciiArt"
+          class="my-2 font-mono text-xs text-blue-400"
         >
-          <span class="font-bold text-green-400">✔</span>
-          <span class="text-white"
-            >What's your project name? (A folder with this name will be
-            created)</span
-          >
-          <span class="text-gray-500">…</span>
-          <span
-            v-if="showStep >= 3"
-            class="font-medium text-yellow-400"
-            >{{ typedProjectName }}</span
-          >
-          <span
-            v-if="showStep >= 3 && typedProjectName.length < 'hello-world'.length"
-            class="animate-blink inline-block h-4 w-0.5 bg-yellow-400 ml-0.5"
-          ></span>
+          <pre>{{ displayAsciiArt }}</pre>
         </div>
 
-        <!-- Language Question -->
-        <div
-          v-if="showStep >= 4"
-          class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
-        >
-          <span class="font-bold" :class="showStep >= 6 ? 'text-green-400' : 'text-blue-400'">
-            {{ showStep >= 6 ? '✔' : '?' }}
-          </span>
-          <span class="text-white">Which language do you want to use?</span>
-          <span v-if="showStep >= 6" class="font-medium text-yellow-400 ml-2">JavaScript</span>
-        </div>
-
-        <div v-if="showStep >= 4 && showStep < 6" class="animate-fade-in mb-2 ml-5">
+        <!-- Dynamic Steps -->
+        <template v-for="(step, index) in steps" :key="index">
+          <!-- Question/Step -->
           <div
-            class="flex items-center gap-1 py-0.5 transition-all duration-200"
-            :class="{
-              '-mx-2 animate-pulse rounded bg-blue-400/10 px-2':
-                showStep >= 5 && selectedLanguage === 'JavaScript',
-            }"
+            v-if="showStep >= step.showAt"
+            class="animate-fade-in my-2 flex flex-wrap items-center gap-2"
           >
-            <span class="w-3 font-bold text-blue-400">❯</span>
-            <span class="text-white">JavaScript</span>
-          </div>
-          <div class="flex items-center gap-1 py-0.5">
-            <span class="w-3 font-bold text-blue-400">&nbsp;</span>
-            <span class="text-white">Python</span>
+            <span
+              class="font-bold"
+              :class="step.isComplete ? 'text-green-400' : 'text-blue-400'"
+            >
+              {{ step.isComplete ? '✔' : '?' }}
+            </span>
+            <span class="text-white">{{ step.question }}</span>
+            <!-- Show typed text if currently typing -->
+            <span 
+              v-if="step.answer && step.showTyping && showStep > step.showAt && typedText.length < step.answer.length" 
+              class="ml-2 font-medium text-yellow-400"
+            >{{ typedText }}</span>
+            <!-- Show full answer if typing is done or no typing animation -->
+            <span 
+              v-else-if="step.answer && showStep > step.showAt && (!step.showTyping || typedText.length >= step.answer.length)" 
+              class="ml-2 font-medium text-yellow-400"
+            >{{ step.answer }}</span>
+            <!-- Typing cursor -->
+            <span
+              v-if="
+                step.showTyping &&
+                step.answer &&
+                showStep > step.showAt &&
+                typedText.length < step.answer.length
+              "
+              class="animate-blink ml-0.5 inline-block h-4 w-0.5 bg-yellow-400"
+            ></span>
           </div>
-        </div>
 
-        <!-- Project Type Question -->
-        <div
-          v-if="showStep >= 6"
-          class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
-        >
-          <span class="font-bold" :class="showStep >= 8 ? 'text-green-400' : 'text-blue-400'">
-            {{ showStep >= 8 ? '✔' : '?' }}
-          </span>
-          <span class="text-white"
-            >What kind of project do you want to init?</span
-          >
-          <span v-if="showStep >= 8" class="font-medium text-yellow-400 ml-2">Hello World</span>
-        </div>
-
-        <div v-if="showStep >= 6 && showStep < 8" class="animate-fade-in mb-4 ml-5">
+          <!-- Options for selection steps -->
           <div
-            class="flex items-center gap-1 py-0.5 transition-all duration-200"
-            :class="{
-              '-mx-2 animate-pulse rounded bg-blue-400/10 px-2': showStep >= 7,
-            }"
+            v-if="
+              step.options &&
+              showStep >= step.showAt &&
+              step.completeAt &&
+              showStep < step.completeAt
+            "
+            class="animate-fade-in mb-1 ml-5"
           >
-            <span class="w-3 font-bold text-blue-400">❯</span>
-            <span class="text-white">Hello World - iapp quick start</span>
-          </div>
-          <div class="flex items-center gap-1 py-0.5">
-            <span class="w-3 font-bold text-blue-400">&nbsp;</span>
-            <span class="text-white">advanced</span>
+            <div
+              v-for="(option, optIndex) in step.options"
+              :key="optIndex"
+              class="flex items-center gap-1 py-0.5 transition-all duration-200"
+              :class="{
+                '-mx-2 animate-pulse rounded bg-blue-400/10 px-2':
+                  step.highlighted && option.selected,
+              }"
+            >
+              <span class="w-3 font-bold text-blue-400">{{
+                option.selected ? '❯' : '\u00A0'
+              }}</span>
+              <span class="text-white">{{ option.label }}</span>
+            </div>
           </div>
-        </div>
+        </template>
 
         <!-- Completion Message -->
         <div
-          v-if="showStep >= 8"
-          class="animate-fade-in mt-4 border-t border-gray-700 pt-3"
+          v-if="showStep >= completionStep"
+          class="animate-fade-in mt-2 border-t border-gray-700 pt-2 mb-4"
         >
           <div class="mb-2 flex items-center gap-2">
             <span class="font-bold text-green-400">✨</span>
-            <span class="font-medium text-green-400"
-              >Generating your iApp...</span
-            >
+            <span class="font-medium text-green-400">{{
+              completionMessage
+            }}</span>
           </div>
-          <div class="ml-5 space-y-1 text-xs text-gray-400">
-            <div>📁 Created hello-world/</div>
-            <div>📄 Added package.json</div>
-            <div>🐳 Added Dockerfile</div>
-            <div>⚙️ Added iExec configuration</div>
+          <div class="ml-5 space-y-0.5 text-xs text-gray-400">
+            <div v-for="(item, index) in completionItems" :key="index">
+              {{ item }}
+            </div>
           </div>
           <div class="mt-2 flex items-center gap-2">
             <span class="font-bold text-green-400">✅</span>
-            <span class="font-medium text-green-400">Your iApp is ready!</span>
+            <span class="font-medium text-green-400">{{ successMessage }}</span>
           </div>
         </div>
 
-        <!-- Cursor -->
+        <!-- Cursor (only show if not completed) -->
         <div
-          v-if="showStep < TOTAL_STEPS"
+          v-if="showStep < totalSteps && showStep < completionStep"
           class="animate-blink ml-1 inline-block h-4 w-2 bg-green-400"
         ></div>
       </div>
@@ -142,84 +130,154 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import figlet from 'figlet';
+
+// Props interface
+interface CLIProps {
+  initialCommand?: string;
+  asciiText?: string;
+  steps?: CLIStep[];
+  completionStep?: number;
+  completionMessage?: string;
+  completionItems?: string[];
+  successMessage?: string;
+  autoStart?: boolean;
+  autoRestart?: boolean;
+}
+
+interface CLIStep {
+  showAt: number;
+  completeAt?: number;
+  question: string;
+  answer?: string;
+  options?: CLIOption[];
+  highlighted?: boolean;
+  showTyping?: boolean;
+  isComplete?: boolean;
+}
+
+interface CLIOption {
+  label: string;
+  selected: boolean;
+}
+
+// Props with defaults
+const props = withDefaults(defineProps<CLIProps>(), {
+  initialCommand: 'iapp init',
+  steps: () => [],
+  completionStep: 8,
+  completionMessage: 'Process completed',
+  completionItems: () => [],
+  successMessage: 'Ready!',
+  autoStart: true,
+  autoRestart: true
+});
 
 // Constants
-const STEP_DELAY = 1200;
-const TOTAL_STEPS = 9;
-const RESTART_DELAY = 3000;
 const TYPING_SPEED = 120;
+const RESTART_DELAY = 3000;
+
+// Computed values
+const totalSteps = computed(
+  () => Math.max(...props.steps.map((s) => s.showAt), props.completionStep) + 1
+);
 
-const asciiArt = `
-  ___    _    ____  ____
- |_ _|  / \  |  _ \|  _ \\
-  | |  / _ \ | |_) | |_) |
-  | | / ___ \|  __/|  __/
- |___/_/   \_\\_|   |_|`;
+// Generate ASCII art using figlet
+const displayAsciiArt = computed(() => {
+  // Only generate ASCII art if asciiText prop is provided and not empty
+  if (props.asciiText && props.asciiText.trim()) {
+    try {
+      return figlet.textSync(props.asciiText.trim(), { font: 'Standard' });
+    } catch (error) {
+      console.warn('Figlet error:', error);
+      return ''; // Return empty string on error
+    }
+  }
+  return ''; // Return empty string if no asciiText provided
+});
 
 // Reactive state
 const showStep = ref(0);
-const selectedLanguage = ref('JavaScript');
 const terminalContent = ref<HTMLElement | null>(null);
-const typedProjectName = ref('');
+const typedText = ref('');
 
 // Timers
 let animationTimer: NodeJS.Timeout | null = null;
 let typingTimer: NodeJS.Timeout | null = null;
 
-// Typing animation for project name
-const typeProjectName = () => {
-  const fullName = 'hello-world';
+// Typing animation
+const typeText = (text: string) => {
   let currentIndex = 0;
-  
+  typedText.value = '';
+
   const typeNextChar = () => {
-    if (currentIndex < fullName.length) {
-      typedProjectName.value = fullName.substring(0, currentIndex + 1);
+    if (currentIndex < text.length) {
+      typedText.value = text.substring(0, currentIndex + 1);
       currentIndex++;
       typingTimer = setTimeout(typeNextChar, TYPING_SPEED);
     }
   };
-  
+
   typeNextChar();
 };
 
-// Auto-scroll to bottom
+// Auto-scroll to bottom (only if not at completion)
 const scrollToBottom = () => {
-  if (terminalContent.value) {
+  if (terminalContent.value && showStep.value < totalSteps.value) {
     terminalContent.value.scrollTop = terminalContent.value.scrollHeight;
   }
 };
 
+// Update step completion status
+const updateStepCompletion = () => {
+  props.steps.forEach((step) => {
+    if (step.completeAt && showStep.value >= step.completeAt) {
+      step.isComplete = true;
+    }
+    if (step.highlighted !== undefined && step.options && step.completeAt) {
+      step.highlighted = showStep.value >= step.completeAt - 1;
+    }
+  });
+};
+
 // Main animation loop
 const animate = () => {
   let currentStep = 0;
 
   const nextStep = () => {
-    if (currentStep < TOTAL_STEPS) {
+    if (currentStep < totalSteps.value) {
       showStep.value = currentStep + 1;
       currentStep++;
 
-      // Start typing animation at step 3
-      if (currentStep === 3) {
-        typeProjectName();
+      // Start typing animation for steps that need it
+      const typingStep = props.steps.find(
+        (s) => s.showTyping && s.answer && showStep.value === s.showAt + 1
+      );
+      if (typingStep && typingStep.answer) {
+        setTimeout(() => {
+          typeText(typingStep.answer!);
+        }, 200);
       }
 
+      updateStepCompletion();
       scrollToBottom();
 
-      if (currentStep < TOTAL_STEPS) {
-        animationTimer = setTimeout(nextStep, STEP_DELAY);
-      } else {
+      if (currentStep < totalSteps.value) {
+        // Simple fixed delay for all steps
+        animationTimer = setTimeout(nextStep, 2000);
+      } else if (props.autoRestart) {
         // Auto-restart after completion
         animationTimer = setTimeout(() => {
           showStep.value = 0;
-          typedProjectName.value = '';
+          typedText.value = '';
           animate();
         }, RESTART_DELAY);
       }
     }
   };
 
-  animationTimer = setTimeout(nextStep, STEP_DELAY);
+  animationTimer = setTimeout(nextStep, 1000);
 };
 
 // Cleanup timers
@@ -228,8 +286,23 @@ const cleanup = () => {
   if (typingTimer) clearTimeout(typingTimer);
 };
 
+// Watch for prop changes to restart animation
+watch(
+  () => props.initialCommand,
+  () => {
+    if (props.autoStart) {
+      cleanup();
+      showStep.value = 0;
+      typedText.value = '';
+      animate();
+    }
+  }
+);
+
 onMounted(() => {
-  animate();
+  if (props.autoStart) {
+    animate();
+  }
 });
 
 onUnmounted(cleanup);

From 7cf38f4f6d41646fd1a865a74ad23d3abe865aa1 Mon Sep 17 00:00:00 2001
From: Le-Caignec <robinlecaignec@yahoo.fr>
Date: Mon, 11 Aug 2025 13:13:57 +0200
Subject: [PATCH 3/6] feat: enhance CLI demo with interactive project setup and
 improved typing animation

---
 src/build-iapp/guides/build-&-deploy.md       | 165 +++++++++++++-----
 src/build-iapp/guides/manage-access.md        |   2 +-
 .../iapp-generator/building-your-iexec-app.md |  56 +++++-
 src/components/CLIDemo.vue                    | 157 +++++++++++------
 4 files changed, 284 insertions(+), 96 deletions(-)

diff --git a/src/build-iapp/guides/build-&-deploy.md b/src/build-iapp/guides/build-&-deploy.md
index af6c4990..b5106cba 100644
--- a/src/build-iapp/guides/build-&-deploy.md
+++ b/src/build-iapp/guides/build-&-deploy.md
@@ -62,7 +62,8 @@ bun add -g @iexec/iapp
 ## Quick Start
 
 Once installed, you can create and deploy your first iApp. The CLI will guide
-you through an interactive setup process:
+you through an interactive setup process to configure your project name,
+programming language, and template:
 
 <CLIDemo
   initialCommand="iapp init"
@@ -70,6 +71,7 @@ you through an interactive setup process:
   :steps="[
     {
       showAt: 2,
+      completeAt: 4,
       question: 'What is your project name? (A folder with this name will be created)',
       answer: 'hello-world',
       showTyping: true,
@@ -115,79 +117,164 @@ After the interactive setup, continue with development and deployment:
 
 ## Development and Testing
 
-Navigate to your project and run tests locally to simulate the TEE environment:
+Navigate to your project and run tests locally to simulate the TEE environment.
+The CLI will build a Docker image, run your app, and show you the results:
 
 <CLIDemo
-  :initialCommand="'iapp test'"
+  initialCommand="iapp test"
   :steps="[
     {
       showAt: 2,
-      question: 'Running tests in simulated TEE environment...',
-      answer: '✅ All tests passed',
-      showTyping: true,
-      isComplete: false
+      question: 'No app secret is configured (from iapp.config.json)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 3,
+      question: 'App docker image built (sha256:9cc0de820aaaf8f86700a3ec4082fe69b9e9a48a117ebb0ade0d82d0879cbe41)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
     },
     {
       showAt: 4,
-      question: 'Building package...',
-      answer: '📦 Package built successfully',
-      showTyping: true,
+      question: 'App docker image ran and exited successfully.',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 5,
+      completeAt: 6,
+      question: 'Would you like to see the app logs? (12 lines)',
+      answer: 'no',
+      options: [
+        { label: 'yes', selected: false },
+        { label: 'no', selected: true }
+      ],
+      highlighted: false,
+      showTyping: false,
+      isComplete: false
+    },
+    {
+      showAt: 7,
+      question: 'Checked app output',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 8,
+      completeAt: 10,
+      question: 'Would you like to see the result? (View ./output/)',
+      answer: 'yes',
+      options: [
+        { label: 'yes', selected: true },
+        { label: 'no', selected: false }
+      ],
+      highlighted: false,
+      showTyping: false,
       isComplete: false
     }
   ]"
-  :completionStep="6"
-  :completionMessage="'Running tests and building package...'"
+  :completionStep="11"
+  :completionMessage="'📁 output directory content:'"
   :completionItems="[
-    '🧪 Running unit tests...',
-    '✅ All tests passed',
-    '📦 Building package...',
-    '🔍 Code analysis complete',
-    '🚀 Ready for deployment'
+    '└ computed.json',
+    '└ result.txt'
   ]"
-  :successMessage="'Build successful! Ready for deployment.'"
-  :autoRestart="false"
+  :successMessage="'hello world'"
+  :autoRestart="true"
 />
 
 ## Deployment
 
-Once your tests pass and the package is built, deploy your iApp to the iExec
-network:
+After your tests pass and the package is built, you can deploy your iApp to a
+supported network. During deployment, you'll enter your DockerHub credentials,
+specify your app version, and push both standard and TEE-compatible images:
 
 <CLIDemo
   initialCommand="iapp deploy"
+  asciiText="Deploy"
   :steps="[
     {
       showAt: 2,
-      question: 'Connecting to iExec network...',
-      answer: '🌐 Connected to Arbitrum',
+      question: 'Using chain bellecour',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 3,
+      question: 'Using saved walletPrivateKey (from iapp.config.json)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'What is your username on DockerHub? (It will be used to properly tag the Docker image)',
+      answer: 'bob',
       showTyping: true,
       isComplete: false
     },
     {
-      showAt: 4,
-      question: 'Uploading package...',
-      answer: '📤 Package uploaded',
+      showAt: 6,
+      completeAt: 8,
+      question: 'What is your DockerHub access token?',
+      answer: '**********************',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 8,
+      completeAt: 10,
+      question: 'What is the version of your iApp?',
+      answer: '0.0.1',
       showTyping: true,
       isComplete: false
+    },
+    {
+      showAt: 10,
+      question: 'Docker image built (sha256:a53fc4c480f482c384a13266ea2cb6cc5572733c866c44a5f604f4bfab3a744a) and tagged bob/hello-world:0.0.1',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 11,
+      question: 'Pushed image bob/hello-world:0.0.1 on dockerhub',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 12,
+      question: 'Pushed TEE image bob/hello-world:0.0.1-tee-scone-5.9.1-v16-debug-ce3a01d9c5d7 on dockerhub',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 13,
+      question: 'TEE app deployed',
+      answer: '',
+      showTyping: false,
+      isComplete: true
     }
   ]"
-  :completionStep="5"
-  :completionMessage="'Deploying to iExec network...'"
+  :completionStep="14"
+  :completionMessage="'Deployment of your iApp completed successfully:'"
   :completionItems="[
-    '🌐 Connecting to network...',
-    '🔐 Authenticating...',
-    '📤 Uploading package...',
-    '🔍 Verifying deployment...',
-    '📋 Contract deployed'
+    '└ Docker image: bob/hello-world:0.0.1-tee-scone-5.9.1-v16-debug-ce3a01d9c5d7',
+    '└ iApp address: 0x1f80DCebc2EAAff0Db7156413C43B7e88D189923'
   ]"
-  :successMessage="'Successfully deployed to iExec network!'"
-  :autoRestart="false"
+  :successMessage="'Run iapp run 0x1f80DCebc2EAAff0Db7156413C43B7e88D189923 to execute your iApp on an iExec TEE worker'"
+  :autoRestart="true"
 />
 
-<div class="bg-gradient-to-r from-blue-400/10 to-blue-400/5 rounded-[6px] p-4 border-l-4 border-blue-600 mb-6">
-  <p class="m-0! text-sm"><strong>Note:</strong> iApp Generator currently supports Python and Node.js, but iApps can be built in any language that runs in Docker.</p>
-</div>
-
 ## Real Examples
 
 Here are some real-world examples of iApps to help you understand how they work
diff --git a/src/build-iapp/guides/manage-access.md b/src/build-iapp/guides/manage-access.md
index c121ca1e..fad6bb19 100644
--- a/src/build-iapp/guides/manage-access.md
+++ b/src/build-iapp/guides/manage-access.md
@@ -62,7 +62,7 @@ Here's an example app order for a sentiment analysis iApp:
 }
 ```
 
-## Creating an App Order from an iApp Generator Project
+## Creating an App Order
 
 ### Step 1: Install the iExec SDK
 
diff --git a/src/build-iapp/iapp-generator/building-your-iexec-app.md b/src/build-iapp/iapp-generator/building-your-iexec-app.md
index bfcc03bf..d59293d8 100644
--- a/src/build-iapp/iapp-generator/building-your-iexec-app.md
+++ b/src/build-iapp/iapp-generator/building-your-iexec-app.md
@@ -16,11 +16,53 @@ environment.
 
 ### 🏗 Define your Project
 
-Run:
-
-```sh
-iapp init
-```
+<CLIDemo
+  initialCommand="iapp init"
+  asciiText="iApp"
+  :steps="[
+    {
+      showAt: 2,
+      completeAt: 4,
+      question: 'What is your project name? (A folder with this name will be created)',
+      answer: 'hello-world',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'Which language do you want to use?',
+      answer: 'JavaScript',
+      options: [
+        { label: 'JavaScript', selected: true },
+        { label: 'Python', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What kind of project do you want to init?',
+      answer: 'Hello World',
+      options: [
+        { label: 'Hello World - iapp quick start', selected: true },
+        { label: 'advanced', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="8"
+  :completionMessage="'Generating your iApp...'"
+  :completionItems="[
+    '📁 Created hello-world/',
+    '📄 Added package.json',
+    '🐳 Added Dockerfile',
+    '⚙️ Added iExec configuration'
+  ]"
+  :successMessage="'Your iApp is ready!'"
+/>
 
 Follow the prompts to specify:
 
@@ -156,3 +198,7 @@ Once your application is **stable** and **functional**, you can:
 - 🔗
   [Order Management](https://protocol.docs.iex.ec/for-developers/advanced/manage-your-apporders)
 - 🔗 [iExec Protocol Documentation](https://protocol.docs.iex.ec/)
+
+<script setup>
+import CLIDemo from '../../components/CLIDemo.vue';
+</script>
diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
index c8827331..d83aa7b7 100644
--- a/src/components/CLIDemo.vue
+++ b/src/components/CLIDemo.vue
@@ -39,35 +39,49 @@
           <!-- Question/Step -->
           <div
             v-if="showStep >= step.showAt"
-            class="animate-fade-in my-2 flex flex-wrap items-center gap-2"
+            class="animate-fade-in my-2 flex items-start gap-2"
           >
             <span
-              class="font-bold"
+              class="mt-0.5 flex-shrink-0 font-bold"
               :class="step.isComplete ? 'text-green-400' : 'text-blue-400'"
             >
               {{ step.isComplete ? '✔' : '?' }}
             </span>
-            <span class="text-white">{{ step.question }}</span>
-            <!-- Show typed text if currently typing -->
-            <span 
-              v-if="step.answer && step.showTyping && showStep > step.showAt && typedText.length < step.answer.length" 
-              class="ml-2 font-medium text-yellow-400"
-            >{{ typedText }}</span>
-            <!-- Show full answer if typing is done or no typing animation -->
-            <span 
-              v-else-if="step.answer && showStep > step.showAt && (!step.showTyping || typedText.length >= step.answer.length)" 
-              class="ml-2 font-medium text-yellow-400"
-            >{{ step.answer }}</span>
-            <!-- Typing cursor -->
-            <span
-              v-if="
-                step.showTyping &&
-                step.answer &&
-                showStep > step.showAt &&
-                typedText.length < step.answer.length
-              "
-              class="animate-blink ml-0.5 inline-block h-4 w-0.5 bg-yellow-400"
-            ></span>
+            <div class="flex-1">
+              <span class="text-white">{{ step.question }}</span>
+              <!-- Show typed text if currently typing -->
+              <span
+                v-if="
+                  step.answer &&
+                  step.showTyping &&
+                  showStep > step.showAt &&
+                  (typedAnswers[index] || '').length < step.answer.length
+                "
+                class="ml-2 font-medium text-yellow-400"
+                >{{ typedAnswers[index] || '' }}</span
+              >
+              <!-- Show full answer if typing is done or no typing animation -->
+              <span
+                v-else-if="
+                  step.answer &&
+                  showStep > step.showAt &&
+                  (!step.showTyping ||
+                    (typedAnswers[index] || '').length >= step.answer.length)
+                "
+                class="ml-2 font-medium text-yellow-400"
+                >{{ step.answer }}</span
+              >
+              <!-- Typing cursor -->
+              <span
+                v-if="
+                  step.showTyping &&
+                  step.answer &&
+                  showStep > step.showAt &&
+                  (typedAnswers[index] || '').length < step.answer.length
+                "
+                class="animate-blink ml-0.5 inline-block h-4 w-0.5 bg-yellow-400"
+              ></span>
+            </div>
           </div>
 
           <!-- Options for selection steps -->
@@ -100,7 +114,7 @@
         <!-- Completion Message -->
         <div
           v-if="showStep >= completionStep"
-          class="animate-fade-in mt-2 border-t border-gray-700 pt-2 mb-4"
+          class="animate-fade-in mt-2 mb-4 border-t border-gray-700 pt-2"
         >
           <div class="mb-2 flex items-center gap-2">
             <span class="font-bold text-green-400">✨</span>
@@ -130,7 +144,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
 import figlet from 'figlet';
 
 // Props interface
@@ -171,7 +185,7 @@ const props = withDefaults(defineProps<CLIProps>(), {
   completionItems: () => [],
   successMessage: 'Ready!',
   autoStart: true,
-  autoRestart: true
+  autoRestart: true,
 });
 
 // Constants
@@ -200,40 +214,62 @@ const displayAsciiArt = computed(() => {
 // Reactive state
 const showStep = ref(0);
 const terminalContent = ref<HTMLElement | null>(null);
-const typedText = ref('');
+const typedAnswers = ref<Record<number, string>>({});
 
 // Timers
 let animationTimer: NodeJS.Timeout | null = null;
 let typingTimer: NodeJS.Timeout | null = null;
 
 // Typing animation
-const typeText = (text: string) => {
+const typeText = (text: string, stepIndex: number, onComplete?: () => void) => {
   let currentIndex = 0;
-  typedText.value = '';
+  typedAnswers.value[stepIndex] = '';
 
   const typeNextChar = () => {
     if (currentIndex < text.length) {
-      typedText.value = text.substring(0, currentIndex + 1);
+      typedAnswers.value[stepIndex] = text.substring(0, currentIndex + 1);
       currentIndex++;
+      scrollToBottom(); // Scroll after each character
       typingTimer = setTimeout(typeNextChar, TYPING_SPEED);
+    } else {
+      // Typing finished, update completion status and call callback
+      updateStepCompletion();
+      scrollToBottom(); // Scroll after typing completion
+      if (onComplete) {
+        setTimeout(onComplete, 500); // Small delay before next step
+      }
     }
   };
 
   typeNextChar();
 };
 
-// Auto-scroll to bottom (only if not at completion)
+// Auto-scroll to bottom (always scroll when content changes)
 const scrollToBottom = () => {
-  if (terminalContent.value && showStep.value < totalSteps.value) {
-    terminalContent.value.scrollTop = terminalContent.value.scrollHeight;
+  if (terminalContent.value) {
+    // Use nextTick to ensure DOM is updated before scrolling
+    nextTick(() => {
+      if (terminalContent.value) {
+        terminalContent.value.scrollTop = terminalContent.value.scrollHeight;
+      }
+    });
   }
 };
 
 // Update step completion status
 const updateStepCompletion = () => {
-  props.steps.forEach((step) => {
+  props.steps.forEach((step, index) => {
+    // For typing steps, only mark complete when typing is finished
     if (step.completeAt && showStep.value >= step.completeAt) {
-      step.isComplete = true;
+      if (step.showTyping && step.answer) {
+        // Only mark complete if typing is finished
+        const typedAnswer = typedAnswers.value[index] || '';
+        if (typedAnswer.length >= step.answer.length) {
+          step.isComplete = true;
+        }
+      } else {
+        step.isComplete = true;
+      }
     }
     if (step.highlighted !== undefined && step.options && step.completeAt) {
       step.highlighted = showStep.value >= step.completeAt - 1;
@@ -249,31 +285,50 @@ const animate = () => {
     if (currentStep < totalSteps.value) {
       showStep.value = currentStep + 1;
       currentStep++;
+      scrollToBottom(); // Scroll when new step is shown
 
-      // Start typing animation for steps that need it
+      // Find if this step needs typing animation
       const typingStep = props.steps.find(
         (s) => s.showTyping && s.answer && showStep.value === s.showAt + 1
       );
+
       if (typingStep && typingStep.answer) {
+        // Start typing animation with callback for next step
+        const stepIndex = props.steps.findIndex((s) => s === typingStep);
         setTimeout(() => {
-          typeText(typingStep.answer!);
+          typeText(typingStep.answer!, stepIndex, () => {
+            // Continue to next step after typing is complete
+            if (currentStep < totalSteps.value) {
+              animationTimer = setTimeout(nextStep, 1000);
+            } else if (props.autoRestart) {
+              // Auto-restart after completion
+              animationTimer = setTimeout(() => {
+                showStep.value = 0;
+                typedAnswers.value = {};
+                animate();
+              }, RESTART_DELAY);
+            }
+          });
         }, 200);
+      } else {
+        // No typing, just update completion and continue
+        updateStepCompletion();
+        scrollToBottom();
+
+        if (currentStep < totalSteps.value) {
+          // Fixed delay for non-typing steps
+          animationTimer = setTimeout(nextStep, 2000);
+        } else if (props.autoRestart) {
+          // Auto-restart after completion
+          animationTimer = setTimeout(() => {
+            showStep.value = 0;
+            typedAnswers.value = {};
+            animate();
+          }, RESTART_DELAY);
+        }
       }
 
-      updateStepCompletion();
       scrollToBottom();
-
-      if (currentStep < totalSteps.value) {
-        // Simple fixed delay for all steps
-        animationTimer = setTimeout(nextStep, 2000);
-      } else if (props.autoRestart) {
-        // Auto-restart after completion
-        animationTimer = setTimeout(() => {
-          showStep.value = 0;
-          typedText.value = '';
-          animate();
-        }, RESTART_DELAY);
-      }
     }
   };
 
@@ -293,7 +348,7 @@ watch(
     if (props.autoStart) {
       cleanup();
       showStep.value = 0;
-      typedText.value = '';
+      typedAnswers.value = {};
       animate();
     }
   }

From d473d60f161f6334cd2bb67f0a8cfa8967601112 Mon Sep 17 00:00:00 2001
From: Robin Le Caignec <72495599+Le-Caignec@users.noreply.github.com>
Date: Mon, 11 Aug 2025 13:17:24 +0200
Subject: [PATCH 4/6] Update src/components/CLIDemo.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/CLIDemo.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
index d83aa7b7..e72ab56f 100644
--- a/src/components/CLIDemo.vue
+++ b/src/components/CLIDemo.vue
@@ -218,7 +218,8 @@ const typedAnswers = ref<Record<number, string>>({});
 
 // Timers
 let animationTimer: NodeJS.Timeout | null = null;
-let typingTimer: NodeJS.Timeout | null = null;
+let animationTimer: number | null = null;
+let typingTimer: number | null = null;
 
 // Typing animation
 const typeText = (text: string, stepIndex: number, onComplete?: () => void) => {

From 7f36b610aa36a5971167e5ee0861c8df2fa79a85 Mon Sep 17 00:00:00 2001
From: Le-Caignec <robinlecaignec@yahoo.fr>
Date: Mon, 11 Aug 2025 13:19:40 +0200
Subject: [PATCH 5/6] fix: remove unnecessary type for animationTimer in
 CLIDemo.vue

---
 src/components/CLIDemo.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
index e72ab56f..26589d48 100644
--- a/src/components/CLIDemo.vue
+++ b/src/components/CLIDemo.vue
@@ -217,7 +217,6 @@ const terminalContent = ref<HTMLElement | null>(null);
 const typedAnswers = ref<Record<number, string>>({});
 
 // Timers
-let animationTimer: NodeJS.Timeout | null = null;
 let animationTimer: number | null = null;
 let typingTimer: number | null = null;
 
@@ -314,7 +313,6 @@ const animate = () => {
       } else {
         // No typing, just update completion and continue
         updateStepCompletion();
-        scrollToBottom();
 
         if (currentStep < totalSteps.value) {
           // Fixed delay for non-typing steps

From b9a0319cf99312b923f19defc80e6570d2f7bf8d Mon Sep 17 00:00:00 2001
From: Le-Caignec <robinlecaignec@yahoo.fr>
Date: Mon, 11 Aug 2025 13:20:58 +0200
Subject: [PATCH 6/6] fix: update timer types to NodeJS.Timeout for better type
 safety

---
 src/components/CLIDemo.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
index 26589d48..e30d2c8a 100644
--- a/src/components/CLIDemo.vue
+++ b/src/components/CLIDemo.vue
@@ -217,8 +217,8 @@ const terminalContent = ref<HTMLElement | null>(null);
 const typedAnswers = ref<Record<number, string>>({});
 
 // Timers
-let animationTimer: number | null = null;
-let typingTimer: number | null = null;
+let animationTimer: NodeJS.Timeout | null = null;
+let typingTimer: NodeJS.Timeout | null = null;
 
 // Typing animation
 const typeText = (text: string, stepIndex: number, onComplete?: () => void) => {