Adjust typing animation and command display spacing

Refactor HTML structure for command input to use a single inline container with `white-space: pre` to precisely control spacing, and adjust JavaScript to add a trailing space to the typed text and increase the pause before the enter key press in the auto-type animation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6def8112-39d2-4641-b93b-f39108179f33
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3f816ee5-1289-41ac-aa73-2bd1494876d3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/42ae33dd-8759-4196-85a5-434465c72ece/6def8112-39d2-4641-b93b-f39108179f33/roUqm0y
Replit-Helium-Checkpoint-Created: true

index.html

@@ -14,7 +14,7 @@
 
     <main class="stage">
       <div class="command-box" id="commandBox">
-        <span class="dollar">$</span><span class="typed" id="typed"></span><span class="prompt-space" aria-hidden="true"> </span><span class="user-input" id="userInput"></span><span class="caret" id="caret" aria-hidden="true"></span>
+        <span class="line"><span class="dollar">$ </span><span class="typed" id="typed"></span><span class="user-input" id="userInput"></span><span class="caret" id="caret" aria-hidden="true"></span></span>
         <button class="action-btn" id="actionBtn" aria-label="Copy to clipboard">
           <svg id="actionIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path id="iconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />

src/main.ts

@@ -57,7 +57,8 @@ function typeIntro(target: string, onDone?: () => void) {
 
   function nextChar() {
     if (i >= target.length) {
-      typedEl.textContent = resolved;
+      // append a trailing space so the caret rests one char past the prompt
+      typedEl.textContent = resolved + ' ';
       onDone?.();
       return;
     }
@@ -81,7 +82,7 @@ function typeIntro(target: string, onDone?: () => void) {
 }
 
 if (reduceMotion) {
-  typedEl.textContent = COMMAND;
+  typedEl.textContent = COMMAND + ' ';
   inputEnabled = true;
 } else {
   setTimeout(() => typeIntro(COMMAND, () => {
@@ -254,8 +255,8 @@ async function autoTypeHelp() {
     await sleep(60);
   }
 
-  // PHASE 3 — quick read pause + ripple from the box itself
-  await sleep(220);
+  // PHASE 3 — let the user read "-h" before it fires, then ripple from the box
+  await sleep(850);
   const boxRect = commandBox.getBoundingClientRect();
   spawnRipple(boxRect.right - 24, boxRect.top + boxRect.height / 2);
 

src/style.css

@@ -71,15 +71,24 @@ body {
   color: var(--fg);
   display: flex;
   align-items: center;
-  gap: 0.6rem;
+  gap: 0;
   cursor: text;
   user-select: none;
   transition: border-color 200ms ease, box-shadow 200ms ease;
   position: relative;
-  white-space: nowrap;
   overflow: hidden;
 }
 
+/* one inline container for all the prompt text — keeps spacing exact */
+.line {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: clip;
+  display: block;
+}
+
 .command-box:hover {
   border-color: var(--accent-soft);
 }
@@ -126,21 +135,14 @@ body {
 .dollar {
   color: var(--accent);
   font-weight: 600;
-  flex-shrink: 0;
 }
 
 .typed {
   color: var(--fg);
-  white-space: pre;
-}
-
-.prompt-space {
-  white-space: pre;
 }
 
 .user-input {
   color: var(--fg);
-  white-space: pre;
 }
 
 /* a real terminal block caret — exactly one monospace char wide, no offset */
@@ -160,7 +162,7 @@ body {
 }
 
 .action-btn {
-  margin-left: auto;
+  margin-left: 0.6rem;
   background: none;
   border: none;
   color: var(--dim);
@@ -169,7 +171,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  flex: 0 0 auto;
   transition: color 180ms ease, transform 180ms ease;
 }