diff --git a/index.html b/index.html
index 43b008d..1b8cb8d 100644
--- a/index.html
+++ b/index.html
@@ -13,18 +13,19 @@
-
-
$█
-
diff --git a/src/main.ts b/src/main.ts
index 8f0f130..1042c9c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,26 +1,64 @@
import './style.css';
const COMMAND = 'ssh portfolio@keshavanand.net';
+const PROMPT_TAIL = ' '; // single space between prefix and user input
const typedEl = document.getElementById('typed') as HTMLSpanElement;
+const userEl = document.getElementById('userInput') as HTMLSpanElement;
const caretEl = document.getElementById('caret') as HTMLSpanElement;
const commandBox = document.getElementById('commandBox') as HTMLDivElement;
-const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement;
-const copyIcon = document.getElementById('copyIcon') as unknown as SVGSVGElement;
+const actionBtn = document.getElementById('actionBtn') as HTMLButtonElement;
+const iconPath = document.getElementById('iconPath') as unknown as SVGPathElement;
+const docsLink = document.getElementById('docsLink') as HTMLAnchorElement;
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-/* ---------- Typewriter with a small "decoder" scramble ---------- */
+/* ---------- icons ---------- */
+
+const COPY_PATH =
+ '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';
+// "↵" return arrow — a hooked left arrow (very recognizable as Enter)
+const ENTER_PATH = 'M9 10l-5 5m0 0l5 5m-5-5h12a4 4 0 004-4V5';
+const CHECK_PATH = 'M5 13l4 4L19 7';
+
+function setIcon(d: string) {
+ iconPath.setAttribute('d', d);
+}
+
+/* ---------- state ---------- */
+
+let userInput = '';
+let inputEnabled = false; // true once typewriter completes
+let isAutoTyping = false; // true while clicking-how-it-works animation runs
+
+function refreshUI() {
+ userEl.textContent = userInput;
+ if (userInput.length > 0) {
+ setIcon(ENTER_PATH);
+ actionBtn.setAttribute('aria-label', 'Run command');
+ commandBox.classList.add('armed');
+ } else {
+ setIcon(COPY_PATH);
+ actionBtn.setAttribute('aria-label', 'Copy command');
+ commandBox.classList.remove('armed');
+ }
+}
+
+/* ---------- typewriter intro (with scramble) ---------- */
const SCRAMBLE = '!<>-_\\/[]{}—=+*^?#abcdef0123456789';
-function typeWithScramble(target: string, onDone?: () => void) {
+function sleep(ms: number) {
+ return new Promise