diff --git a/website/app.js b/website/app.js
new file mode 100644
index 0000000..477bb99
--- /dev/null
+++ b/website/app.js
@@ -0,0 +1,392 @@
+/**
+ * LoopCode High-Fidelity TUI Simulator
+ * Replicates the exact state-machine loop, console transcripts,
+ * and interactive overlays from the actual Ink codebase.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  // --- Copy Installation script ---
+  const copyBtn = document.getElementById('copy-cmd-btn');
+  if (copyBtn) {
+    copyBtn.addEventListener('click', () => {
+      const textToCopy = 'curl -fsSL https://raw.githubusercontent.com/arjun-vegeta/loopCode/main/install.sh | bash';
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#39d353" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`;
+        setTimeout(() => {
+          copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+        }, 2000);
+      });
+    });
+  }
+
+  // --- TUI Spinner Tokens ---
+  const spinnerChars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  let spinnerIdx = 0;
+  let spinnerTimer = null;
+
+  const spinnerEl = document.getElementById('tui-spinner-char');
+
+  function startSpinner() {
+    if (spinnerTimer) clearInterval(spinnerTimer);
+    spinnerTimer = setInterval(() => {
+      spinnerIdx = (spinnerIdx + 1) % spinnerChars.length;
+      spinnerEl.innerText = spinnerChars[spinnerIdx];
+    }, 80);
+  }
+
+  function stopSpinner() {
+    clearInterval(spinnerTimer);
+    spinnerEl.innerText = '·';
+  }
+
+  // --- TUI Interactive Overlays ---
+  const overlays = {
+    tasks: document.getElementById('overlay-tasks'),
+    verify: document.getElementById('overlay-verify'),
+    budget: document.getElementById('overlay-budget'),
+    help: document.getElementById('overlay-help'),
+  };
+
+  const hintItems = {
+    tasks: document.getElementById('hint-tasks'),
+    verify: document.getElementById('hint-verify'),
+    budget: document.getElementById('hint-budget'),
+    help: document.getElementById('hint-help'),
+  };
+
+  function closeAllOverlays() {
+    Object.values(overlays).forEach((el) => el.classList.remove('active'));
+    Object.values(hintItems).forEach((el) => el.classList.remove('active'));
+  }
+
+  function toggleOverlay(name) {
+    const isAlreadyActive = overlays[name].classList.contains('active');
+    closeAllOverlays();
+    if (!isAlreadyActive) {
+      overlays[name].classList.add('active');
+      hintItems[name].classList.add('active');
+    }
+  }
+
+  // Mouse clicks for hint bar buttons
+  Object.keys(overlays).forEach((name) => {
+    hintItems[name].addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleOverlay(name);
+    });
+    // Click overlay itself to close
+    overlays[name].addEventListener('click', (e) => {
+      e.stopPropagation();
+      closeAllOverlays();
+    });
+  });
+
+  // Global keyboard listener to match TUI hotkeys
+  document.addEventListener('keydown', (e) => {
+    // Disable hotkeys if user is typing in standard browser forms (if any)
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+    const key = e.key.toLowerCase();
+
+    if (e.key === 'Escape') {
+      closeAllOverlays();
+    } else if (key === 't') {
+      toggleOverlay('tasks');
+    } else if (key === 'v') {
+      toggleOverlay('verify');
+    } else if (key === 'b') {
+      toggleOverlay('budget');
+    } else if (key === 'h') {
+      toggleOverlay('help');
+    } else if (e.key === ' ') {
+      e.preventDefault();
+      toggleSim();
+    } else if (key === 'r') {
+      restartSim();
+    }
+  });
+
+  // Close overlays clicking anywhere else inside showcase
+  document.getElementById('tui-showcase').addEventListener('click', (e) => {
+    // Only close if click wasn't on overlay or hints
+    if (!e.target.closest('.tui-overlay-container') && !e.target.closest('.tui-hints')) {
+      closeAllOverlays();
+    }
+  });
+
+  // --- TUI Transcript Event logs ---
+  const tuiEvents = [
+    {
+      type: 'info',
+      text: '⏺ Initializing LoopCode session context...',
+      phase: 'init',
+      detail: 'loading services',
+      cost: '$0.00',
+    },
+    { type: 'dim', text: '⎿ SQLite local codebase indexing active.', phase: 'indexing', detail: 'parsing file trees' },
+    {
+      type: 'success',
+      text: '⎿ parsed 48 classes, 129 functions via tree-sitter.',
+      phase: 'indexing',
+      detail: 'database synced',
+    },
+    {
+      type: 'info',
+      text: '⏺ planning: goal IR mapping generated',
+      phase: 'planning',
+      detail: 'analyzing dependencies',
+      cost: '$0.02',
+    },
+    {
+      type: 'success',
+      text: '⎿ budget verified: monthly: $32.40, goal: $0.00',
+      phase: 'planning',
+      detail: 'goal limits audited',
+    },
+    {
+      type: 'info',
+      text: '⏺ scheduling: topologically sorting tasks...',
+      phase: 'scheduling',
+      detail: 'batching queues',
+    },
+    { type: 'dim', text: '  ├─ task 1: fetch db schema (Readonly)' },
+    { type: 'dim', text: '  ├─ task 2: write routes/user.ts (writeAllowlist)' },
+    { type: 'dim', text: '  ├─ task 3: write controllers/user.ts (writeAllowlist)' },
+    { type: 'dim', text: '  └─ task 4: write tests/user.test.ts (writeAllowlist)' },
+    {
+      type: 'info',
+      text: '◐ executing Task 2 & Task 3 in parallel...',
+      phase: 'execution',
+      detail: 'running batches',
+      cost: '$0.08',
+    },
+    { type: 'success', text: '  ├─ checked out worktree: temp_wt_route', phase: 'execution', detail: 'route appended' },
+    {
+      type: 'success',
+      text: '  ├─ checked out worktree: temp_wt_controller',
+      phase: 'execution',
+      detail: 'implementing services',
+    },
+    {
+      type: 'error',
+      text: '✗ L1 verification failed: compile error in user.ts:14',
+      phase: 'verification',
+      detail: 'compilation fail',
+    },
+    {
+      type: 'warning',
+      text: '⚠ feedback loop: re-injecting diagnostics...',
+      phase: 'replanning',
+      detail: 'adjusting AST changes',
+      cost: '$0.12',
+    },
+    { type: 'success', text: '✓ compile check retry 1: PASS', phase: 'execution', detail: 'retry verify passing' },
+    {
+      type: 'info',
+      text: '◐ executing Task 4 (integration test)...',
+      phase: 'execution',
+      detail: 'running test suite',
+      cost: '$0.15',
+    },
+    {
+      type: 'success',
+      text: '✓ Bun test suite verified: 3 assertions passed',
+      phase: 'verification',
+      detail: 'tests passing',
+    },
+    { type: 'info', text: '⏺ AI review: peer analysis passed', phase: 'verification', detail: 'peer reviewing' },
+    {
+      type: 'success',
+      text: '✓ session merged successfully to main branch. cost $0.18',
+      phase: 'done',
+      detail: 'completed',
+      cost: '$0.18',
+    },
+  ];
+
+  const transcriptStream = document.getElementById('tui-transcript-stream');
+  const phaseTxt = document.getElementById('tui-phase-txt');
+  const detailTxt = document.getElementById('tui-detail-txt');
+  const costTxt = document.getElementById('tui-cost-txt');
+  const composerInput = document.getElementById('tui-composer-input');
+
+  const simIndicator = document.getElementById('tui-sim-indicator');
+  const ctrlSimToggle = document.getElementById('ctrl-sim-toggle');
+  const ctrlSimReset = document.getElementById('ctrl-sim-reset');
+
+  // Overlay nodes snapshot statuses
+  const taskSnaps = {
+    1: document.getElementById('task-snap-1'),
+    2: document.getElementById('task-snap-2'),
+    3: document.getElementById('task-snap-3'),
+    4: document.getElementById('task-snap-4'),
+    5: document.getElementById('task-snap-5'),
+  };
+
+  const verifyLayers = {
+    1: document.getElementById('v-layer-1'),
+    2: document.getElementById('v-layer-2'),
+    3: document.getElementById('v-layer-3'),
+    4: document.getElementById('v-layer-4'),
+    5: document.getElementById('v-layer-5'),
+  };
+
+  let simIdx = 0;
+  let isSimRunning = false;
+  let simTimeoutId = null;
+
+  function renderTuiLine(lineObj) {
+    const lineEl = document.createElement('div');
+    lineEl.classList.add('tui-line');
+
+    const bulletEl = document.createElement('span');
+    bulletEl.classList.add('tui-bullet');
+    bulletEl.innerText = '·';
+    lineEl.appendChild(bulletEl);
+
+    const contentEl = document.createElement('span');
+    contentEl.className = `tui-content ${lineObj.type}`;
+    contentEl.innerText = lineObj.text;
+    lineEl.appendChild(contentEl);
+
+    transcriptStream.appendChild(lineEl);
+    transcriptStream.scrollTop = transcriptStream.scrollHeight;
+
+    // Update Status Indicators
+    if (lineObj.phase) phaseTxt.innerText = lineObj.phase;
+    if (lineObj.detail) detailTxt.innerText = lineObj.detail;
+    if (lineObj.cost) costTxt.innerText = lineObj.cost;
+  }
+
+  function updateOverlayStates(idx) {
+    // Task Overlay state updates
+    if (idx >= 2) taskSnaps[1].innerText = '✓ completed';
+    else if (idx >= 0) taskSnaps[1].innerText = '◐ running';
+
+    if (idx >= 12) taskSnaps[2].innerText = '✓ completed';
+    else if (idx >= 10) taskSnaps[2].innerText = '◐ running';
+
+    if (idx >= 15) taskSnaps[3].innerText = '✓ completed';
+    else if (idx === 13) taskSnaps[3].innerText = '✗ failed';
+    else if (idx >= 10) taskSnaps[3].innerText = '◐ running';
+
+    if (idx >= 17) taskSnaps[4].innerText = '✓ completed';
+    else if (idx >= 16) taskSnaps[4].innerText = '◐ running';
+
+    if (idx >= 19) taskSnaps[5].innerText = '✓ completed';
+    else if (idx >= 18) taskSnaps[5].innerText = '◐ running';
+
+    // Verification layers updates
+    if (idx >= 15) {
+      verifyLayers[1].className = 'tui-verify-layer passed';
+      verifyLayers[1].innerText = '✓ Layer 1: Compilation (compile)';
+    } else if (idx >= 13) {
+      verifyLayers[1].className = 'tui-verify-layer failed';
+      verifyLayers[1].innerText = '✗ Layer 1: Compilation (compile)';
+    } else if (idx >= 11) {
+      verifyLayers[1].className = 'tui-verify-layer pending';
+      verifyLayers[1].innerText = '◐ Layer 1: Compilation (compile)';
+    }
+
+    if (idx >= 12) verifyLayers[2].className = 'tui-verify-layer passed';
+    else if (idx >= 10) verifyLayers[2].className = 'tui-verify-layer pending';
+
+    if (idx >= 17) verifyLayers[3].className = 'tui-verify-layer passed';
+    else if (idx >= 16) verifyLayers[3].className = 'tui-verify-layer pending';
+
+    if (idx >= 18) verifyLayers[4].className = 'tui-verify-layer passed';
+    else if (idx >= 17) verifyLayers[4].className = 'tui-verify-layer pending';
+
+    if (idx >= 19) verifyLayers[5].className = 'tui-verify-layer passed';
+    else if (idx >= 18) verifyLayers[5].className = 'tui-verify-layer pending';
+  }
+
+  function runSimLoop() {
+    if (!isSimRunning) return;
+
+    if (simIdx < tuiEvents.length) {
+      renderTuiLine(tuiEvents[simIdx]);
+      updateOverlayStates(simIdx);
+      simIdx++;
+      simTimeoutId = setTimeout(runSimLoop, 1200);
+    } else {
+      // Completed TUI simulation
+      isSimRunning = false;
+      stopSpinner();
+      simIndicator.innerText = 'simulation finished';
+      ctrlSimToggle.innerHTML = '<span>[space]</span> restart';
+    }
+  }
+
+  function startSim() {
+    isSimRunning = true;
+    startSpinner();
+    simIndicator.innerText = 'simulation running';
+    ctrlSimToggle.innerHTML = '<span>[space]</span> pause';
+    runSimLoop();
+  }
+
+  function pauseSim() {
+    isSimRunning = false;
+    clearTimeout(simTimeoutId);
+    stopSpinner();
+    simIndicator.innerText = 'simulation paused';
+    ctrlSimToggle.innerHTML = '<span>[space]</span> resume';
+  }
+
+  function toggleSim() {
+    if (simIdx >= tuiEvents.length) {
+      restartSim();
+    } else if (isSimRunning) {
+      pauseSim();
+    } else {
+      startSim();
+    }
+  }
+
+  function restartSim() {
+    clearTimeout(simTimeoutId);
+    transcriptStream.innerHTML = '';
+    simIdx = 0;
+    phaseTxt.innerText = 'init';
+    detailTxt.innerText = 'loading services';
+    costTxt.innerText = '$0.00';
+
+    // reset overlay mock text/classes
+    Object.values(taskSnaps).forEach((el) => {
+      el.className = 'tui-task-state pending';
+      el.innerText = '○ pending';
+    });
+    Object.values(verifyLayers).forEach((el, index) => {
+      el.className = 'tui-verify-layer pending';
+      el.innerText = `○ Layer ${index + 1}: ${getLayerName(index + 1)}`;
+    });
+
+    startSim();
+  }
+
+  function getLayerName(layerNum) {
+    const names = {
+      1: 'Compilation (compile)',
+      2: 'Formatting & Linters (lint)',
+      3: 'Integration test execution (tests)',
+      4: 'Static security analysis (semgrep)',
+      5: 'Peer review assessment (ai-review)',
+    };
+    return names[layerNum];
+  }
+
+  // Bind simulation controls
+  ctrlSimToggle.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleSim();
+  });
+
+  ctrlSimReset.addEventListener('click', (e) => {
+    e.stopPropagation();
+    restartSim();
+  });
+
+  // Start automatically
+  startSim();
+});
diff --git a/website/index.html b/website/index.html
new file mode 100644
index 0000000..8cb0fb3
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,348 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LoopCode — Autonomous Software Orchestrator</title>
+    <meta
+      name="description"
+      content="A CLI and Ink-based TUI software orchestrator built on OpenCode to run code modifications safely via parallel git worktrees and 5-layer verifications."
+    />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="bg-grid"></div>
+
+    <!-- Header -->
+    <header>
+      <div class="container header-inner">
+        <a href="#" class="logo">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+            <path d="M2 12h20"></path>
+          </svg>
+          <span>loopcode</span>
+        </a>
+        <nav class="header-nav">
+          <a href="#tui-showcase">tui interface</a>
+          <a href="#features">mechanics</a>
+          <a href="#cli-reference">cli reference</a>
+          <a href="#config-reference">configuration</a>
+          <a href="https://github.com/arjun-vegeta/loopCode" target="_blank">github</a>
+        </nav>
+      </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="container hero">
+      <div style="margin-bottom: 20px">
+        <span
+          style="
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            border: 1px solid var(--border-tui);
+            padding: 4px 10px;
+            border-radius: 100px;
+            color: var(--tui-cyan);
+          "
+          >built on top of opencode</span
+        >
+      </div>
+
+      <h1>Autonomous software engineering</h1>
+      <p>
+        A headless CLI orchestrator built on OpenCode that decomposes natural language goals into a task DAG, executing
+        branches concurrently in isolated Git worktrees with strict 5-layer verification.
+      </p>
+
+      <div class="cmd-badge">
+        <span>curl -fsSL https://raw.githubusercontent.com/arjun-vegeta/loopCode/main/install.sh | bash</span>
+        <button id="copy-cmd-btn" aria-label="Copy Install Command">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+          </svg>
+        </button>
+      </div>
+
+      <!-- TUI Showcase component -->
+      <div class="tui-container" id="tui-showcase">
+        <!-- TUI Header -->
+        <div class="tui-header">
+          <div class="tui-title-group">
+            <span class="tui-title">LoopCode v2.0.0</span>
+            <span class="tui-meta">· loopcode · main · claude-3-5-sonnet</span>
+          </div>
+          <span class="tui-status-tag" id="tui-sim-indicator">simulation running</span>
+        </div>
+
+        <!-- TUI Workspace Body -->
+        <div class="tui-body">
+          <!-- Live Transcript Scroll area -->
+          <div class="tui-transcript" id="tui-transcript-stream">
+            <!-- Populated dynamically by app.js -->
+          </div>
+
+          <!-- Inline TUI Overlays (Matching actual ink component structures) -->
+
+          <!-- 1. Tasks Overlay -->
+          <div class="tui-overlay-container" id="overlay-tasks">
+            <div class="tui-overlay-title">
+              <span class="title-text">Task Execution Graph</span>
+              <span class="close-hint">esc / click to close</span>
+            </div>
+            <div class="tui-overlay-content">
+              <div class="tui-task-row">
+                <span>1. Index codebase workspace</span>
+                <span class="tui-task-state success" id="task-snap-1">✓ completed</span>
+              </div>
+              <div class="tui-task-row">
+                <span>2. Write profile route configs</span>
+                <span class="tui-task-state success" id="task-snap-2">✓ completed</span>
+              </div>
+              <div class="tui-task-row">
+                <span>3. Write profile controller implementation</span>
+                <span class="tui-task-state success" id="task-snap-3">✓ completed</span>
+              </div>
+              <div class="tui-task-row">
+                <span>4. Write profile endpoint integrations</span>
+                <span class="tui-task-state success" id="task-snap-4">✓ completed</span>
+              </div>
+              <div class="tui-task-row">
+                <span>5. Validate code & review merge</span>
+                <span class="tui-task-state success" id="task-snap-5">✓ completed</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 2. Verification Overlay -->
+          <div class="tui-overlay-container" id="overlay-verify">
+            <div class="tui-overlay-title">
+              <span class="title-text">Verification Detail (5-Layer Gauntlet)</span>
+              <span class="close-hint">esc / click to close</span>
+            </div>
+            <div class="tui-overlay-content">
+              <div class="tui-verify-layer passed" id="v-layer-1">✓ Layer 1: Compilation (compile)</div>
+              <div class="tui-verify-layer passed" id="v-layer-2">✓ Layer 2: Formatting &amp; Linters (lint)</div>
+              <div class="tui-verify-layer passed" id="v-layer-3">✓ Layer 3: Integration test execution (tests)</div>
+              <div class="tui-verify-layer passed" id="v-layer-4">✓ Layer 4: Static security analysis (semgrep)</div>
+              <div class="tui-verify-layer passed" id="v-layer-5">✓ Layer 5: Peer review assessment (ai-review)</div>
+            </div>
+          </div>
+
+          <!-- 3. Budget Overlay -->
+          <div class="tui-overlay-container" id="overlay-budget">
+            <div class="tui-overlay-title">
+              <span class="title-text">Quota Spend Control</span>
+              <span class="close-hint">esc / click to close</span>
+            </div>
+            <div class="tui-overlay-content" style="gap: 16px">
+              <div>
+                <div style="color: var(--tui-white); margin-bottom: 4px">Goal cost audit</div>
+                <div>spend: $0.18 / limit: $10.00</div>
+                <div style="color: var(--text-muted); font-size: 0.7rem; margin-top: 4px">
+                  [████░░░░░░░░░░░░░░░░░░░░░] 1.8%
+                </div>
+              </div>
+              <div>
+                <div style="color: var(--tui-white); margin-bottom: 4px">Monthly cost audit</div>
+                <div>spend: $32.40 / limit: $100.00</div>
+                <div style="color: var(--text-muted); font-size: 0.7rem; margin-top: 4px">
+                  [████████░░░░░░░░░░░░░░░░░] 32.4%
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 4. Help Overlay -->
+          <div class="tui-overlay-container" id="overlay-help">
+            <div class="tui-overlay-title">
+              <span class="title-text">Keyboard Shortcuts</span>
+              <span class="close-hint">esc / click to close</span>
+            </div>
+            <div class="tui-overlay-content" style="gap: 12px">
+              <div style="display: flex; justify-content: space-between">
+                <span>t / Tab</span><span style="color: var(--tui-white)">open task list</span>
+              </div>
+              <div style="display: flex; justify-content: space-between">
+                <span>v</span><span style="color: var(--tui-white)">open verification details</span>
+              </div>
+              <div style="display: flex; justify-content: space-between">
+                <span>b</span><span style="color: var(--tui-white)">open spend limits</span>
+              </div>
+              <div style="display: flex; justify-content: space-between">
+                <span>ctrl+c</span><span style="color: var(--tui-white)">interrupt task execution</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- TUI LiveStatus row -->
+          <div class="tui-livestatus">
+            <div class="tui-status-left">
+              <span class="tui-spinner" id="tui-spinner-char">⠋</span>
+              <span class="tui-phase-value" id="tui-phase-txt">idle</span>
+              <span style="color: var(--text-dim)">·</span>
+              <span class="tui-detail-value" id="tui-detail-txt">waiting for input</span>
+            </div>
+            <div class="tui-status-right">
+              <span>spent: <span class="tui-cost-value" id="tui-cost-txt">$0.00</span> / $10.00</span>
+            </div>
+          </div>
+
+          <!-- TUI Composer/Prompt line -->
+          <div class="tui-composer">
+            <span class="tui-prompt-symbol">&gt;</span>
+            <span class="tui-composer-text" id="tui-composer-input"
+              >"Add a new endpoint for user profile retrieval"</span
+            >
+            <span class="tui-cursor" id="tui-cursor-indicator"></span>
+          </div>
+        </div>
+
+        <!-- TUI Bottom Hints / interactive controls -->
+        <div class="tui-hints">
+          <div class="tui-hint-item" data-overlay="tasks" id="hint-tasks"><span>[t]</span> tasks</div>
+          <div class="tui-hint-item" data-overlay="verify" id="hint-verify"><span>[v]</span> verify</div>
+          <div class="tui-hint-item" data-overlay="budget" id="hint-budget"><span>[b]</span> budget</div>
+          <div class="tui-hint-item" data-overlay="help" id="hint-help"><span>[h]</span> help</div>
+          <div style="margin-left: auto; display: flex; gap: 16px">
+            <div class="tui-hint-item" id="ctrl-sim-toggle"><span>[space]</span> pause</div>
+            <div class="tui-hint-item" id="ctrl-sim-reset"><span>[r]</span> restart</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Core product breakdown (Words less, TUI elements more) -->
+    <section class="container" id="features">
+      <h2 class="section-title">engine mechanics</h2>
+      <div class="features-grid">
+        <div class="feature-card">
+          <h3>shared sqlite memory</h3>
+          <p>
+            Central structured persistence decouples agents. Communication happens asynchronously via data contracts,
+            avoiding direct process dependencies.
+          </p>
+        </div>
+        <div class="feature-card">
+          <h3>topological schedules</h3>
+          <p>
+            Sorts task DAGs based on resource allowlists. Spawns independent subtasks in parallel, executing changes in
+            isolated Git worktrees.
+          </p>
+        </div>
+        <div class="feature-card">
+          <h3>5-layer verification</h3>
+          <p>
+            Integrates compilation audits, linter scans, Bun unit testing checks, Semgrep code security patterns, and AI
+            review loops before merging.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- CLI options reference -->
+    <section class="container" id="cli-reference">
+      <h2 class="section-title">cli runtime parameters</h2>
+      <div class="cli-options">
+        <div class="cli-option-row">
+          <div class="cli-option-name">loopcode "&lt;goal&gt;"</div>
+          <div class="cli-option-desc">
+            Accepts a natural language instruction to plan, construct worktrees, and verify code blocks.
+          </div>
+        </div>
+        <div class="cli-option-row">
+          <div class="cli-option-name">-d, --db &lt;path&gt;</div>
+          <div class="cli-option-desc">
+            Specifies the path to the SQLite persistence database (defaults to loopcode.db).
+          </div>
+        </div>
+        <div class="cli-option-row">
+          <div class="cli-option-name">-r, --resume &lt;id&gt;</div>
+          <div class="cli-option-desc">Resumes execution from a previously interrupted Session ID or Task ID.</div>
+        </div>
+        <div class="cli-option-row">
+          <div class="cli-option-name">--login</div>
+          <div class="cli-option-desc">
+            Launches the in-terminal interactive authentication workflow for platform providers.
+          </div>
+        </div>
+        <div class="cli-option-row">
+          <div class="cli-option-name">--headless</div>
+          <div class="cli-option-desc">Forces non-interactive execution suite mode (ideal for CI/CD environments).</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Toml config details -->
+    <section class="container" id="config-reference" style="text-align: center; margin: 80px auto 100px auto">
+      <h2 class="section-title">controlled configuration</h2>
+      <div style="max-width: 600px; margin: 0 auto 32px auto">
+        <p style="margin-bottom: 12px">
+          Configure parameters inside ~/.loopcode/config.toml to restrict model routing definitions, set maximum spend
+          ceilings, and establish validation protocols.
+        </p>
+        <p style="font-size: 0.85rem; color: var(--text-muted)">
+          Compatible with all 100+ OpenCode model routers. Route subtasks dynamically to the optimal model based on
+          prompt complexity, cost thresholds, and cached instructions.
+        </p>
+      </div>
+      <div style="display: flex; justify-content: center; width: 100%">
+        <pre class="config-code-block" style="text-align: left; width: 100%; max-width: 540px; margin: 0 auto">
+[model]
+default      = "anthropic/claude-sonnet-4-6"
+planning     = "anthropic/claude-opus-4-6"
+
+[budget]
+maxMonthlyCostUsd = 100.0
+maxGoalCostUsd    = 10.0
+maxTaskCostUsd    = 2.0
+
+[safety]
+permissionMode           = "acceptEdits"
+allowDestructiveRollback = false
+maxParallelAgents        = 5</pre>
+      </div>
+    </section>
+
+    <!-- Setup section with gradient -->
+    <section class="container" id="setup">
+      <div class="setup-box">
+        <h2 style="font-size: 1.6rem; font-weight: 300; margin-bottom: 8px">Install LoopCode CLI Now</h2>
+        <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 24px">
+          Run standalone binary anywhere in seconds. Built on top of OpenCode with support for 100+ AI models.
+        </p>
+        <div class="cmd-badge" style="margin-bottom: 0">
+          <span>curl -fsSL https://raw.githubusercontent.com/arjun-vegeta/loopCode/main/install.sh | bash</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer>
+      <div class="container footer-inner">
+        <span>loopcode orchestrator. built on top of opencode. released under mit license.</span>
+        <span>github.com/arjun-vegeta/loopCode</span>
+      </div>
+    </footer>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/website/style.css b/website/style.css
new file mode 100644
index 0000000..fb20b86
--- /dev/null
+++ b/website/style.css
@@ -0,0 +1,633 @@
+/* 
+  LoopCode Clean Monospace TUI Design System
+  Replicates the exact terminal experience of LoopCode in a premium browser asset.
+  Focuses on thin lines, box borders, high-contrast monospace typography, and zero slop.
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@200;300;400;500&family=Geist:wght@200;300;400;500&display=swap');
+
+:root {
+  --bg-page: #000000;
+  --bg-tui: #050507;
+  --bg-overlay: #0a0a0d;
+
+  --border-tui: rgba(255, 255, 255, 0.08);
+  --border-active: rgba(255, 255, 255, 0.25);
+
+  --text-primary: #f5f5f7;
+  --text-muted: #6e6e73;
+  --text-dim: #3a3a3c;
+
+  /* TUI Theme Colors */
+  --tui-cyan: #00f0ff;
+  --tui-cyan-dim: #0088cc;
+  --tui-green: #39d353;
+  --tui-yellow: #f1e05a;
+  --tui-red: #ff453a;
+  --tui-gray: #8e8e93;
+  --tui-white: #ffffff;
+
+  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;
+  --font-sans: 'Geist', sans-serif;
+
+  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background-color: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  overflow-x: hidden;
+  padding-bottom: 80px;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 300;
+  letter-spacing: -0.02em;
+  color: var(--tui-white);
+}
+
+p {
+  color: var(--text-muted);
+  font-weight: 300;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* Header */
+header {
+  height: 64px;
+  border-bottom: 1px solid var(--border-tui);
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(12px);
+  z-index: 100;
+}
+
+.header-inner {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  font-family: var(--font-mono);
+}
+
+.logo svg {
+  width: 16px;
+  height: 16px;
+  color: var(--tui-cyan);
+}
+
+.header-nav {
+  display: flex;
+  gap: 24px;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.header-nav a:hover {
+  color: var(--text-primary);
+}
+
+/* Hero */
+.hero {
+  padding: 60px 0 30px 0;
+  text-align: center;
+}
+
+.hero h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
+  margin-bottom: 12px;
+}
+
+.hero p {
+  max-width: 540px;
+  margin: 0 auto 24px auto;
+  font-size: 0.95rem;
+}
+
+/* Copyable installation badge */
+.cmd-badge {
+  display: inline-flex;
+  align-items: center;
+  background: var(--bg-tui);
+  border: 1px solid var(--border-tui);
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  margin-bottom: 40px;
+}
+
+.cmd-badge span {
+  opacity: 0.8;
+}
+
+.cmd-badge button {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  margin-left: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.cmd-badge button:hover {
+  color: var(--tui-white);
+}
+
+/* High Fidelity TUI Component Shell */
+.tui-container {
+  background: var(--bg-tui);
+  border: 1px solid var(--border-tui);
+  border-radius: 8px;
+  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9);
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  margin-bottom: 60px;
+}
+
+/* Header line in TUI */
+.tui-header {
+  height: 32px;
+  border-bottom: 1px dashed var(--border-tui);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  user-select: none;
+}
+
+.tui-title-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.tui-title {
+  color: var(--tui-cyan);
+}
+
+.tui-meta {
+  color: var(--text-muted);
+}
+
+.tui-status-tag {
+  color: var(--text-muted);
+}
+
+/* Workspace Panels */
+.tui-body {
+  height: 440px;
+  padding: 16px;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  line-height: 1.45;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+/* Scrolling transcript list */
+.tui-transcript {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+  padding-right: 8px;
+}
+
+/* Custom Scrollbar for Transcript */
+.tui-transcript::-webkit-scrollbar {
+  width: 4px;
+}
+.tui-transcript::-webkit-scrollbar-track {
+  background: transparent;
+}
+.tui-transcript::-webkit-scrollbar-thumb {
+  background: var(--border-tui);
+  border-radius: 2px;
+}
+
+.tui-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.tui-bullet {
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.tui-content {
+  color: var(--text-primary);
+  white-space: pre-wrap;
+}
+
+.tui-content.success {
+  color: var(--tui-green);
+}
+.tui-content.error {
+  color: var(--tui-red);
+}
+.tui-content.warning {
+  color: var(--tui-yellow);
+}
+.tui-content.info {
+  color: var(--tui-cyan);
+}
+.tui-content.dim {
+  color: var(--text-muted);
+}
+
+/* Live Status indicator row */
+.tui-livestatus {
+  border-top: 1px dashed var(--border-tui);
+  border-bottom: 1px dashed var(--border-tui);
+  padding: 10px 0;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  user-select: none;
+}
+
+.tui-status-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tui-spinner {
+  color: var(--tui-cyan);
+}
+
+.tui-phase-value {
+  color: var(--tui-cyan);
+}
+
+.tui-detail-value {
+  color: var(--tui-white);
+}
+
+.tui-status-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.tui-cost-value {
+  color: var(--tui-green);
+}
+
+/* Composer / Input line */
+.tui-composer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  font-size: 0.8rem;
+}
+
+.tui-prompt-symbol {
+  color: var(--tui-cyan);
+  user-select: none;
+}
+
+.tui-composer-text {
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.tui-composer-text.working {
+  color: var(--text-muted);
+}
+
+.tui-cursor {
+  display: inline-block;
+  width: 7px;
+  height: 14px;
+  background: var(--tui-white);
+  vertical-align: middle;
+  animation: tuiBlink 1s step-end infinite;
+}
+
+@keyframes tuiBlink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Hint Bar / Controls at bottom */
+.tui-hints {
+  background: rgba(255, 255, 255, 0.01);
+  border-top: 1px solid var(--border-tui);
+  height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  gap: 16px;
+  user-select: none;
+}
+
+.tui-hint-item {
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: var(--transition-smooth);
+}
+
+.tui-hint-item span {
+  color: var(--tui-cyan);
+}
+
+.tui-hint-item:hover {
+  color: var(--text-primary);
+}
+
+.tui-hint-item.active {
+  color: var(--tui-cyan);
+}
+
+/* TUI Inline Overlays (Box drawing style) */
+.tui-overlay-container {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  right: 16px;
+  bottom: 84px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--tui-cyan);
+  border-radius: 4px;
+  z-index: 10;
+  display: none; /* controlled by JS */
+  flex-direction: column;
+  padding: 12px 16px;
+  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9);
+}
+
+.tui-overlay-container.active {
+  display: flex;
+}
+
+.tui-overlay-title {
+  color: var(--tui-cyan);
+  font-size: 0.8rem;
+  border-bottom: 1px dashed var(--border-tui);
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tui-overlay-title span.title-text {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.tui-overlay-title span.close-hint {
+  color: var(--text-muted);
+  font-size: 0.65rem;
+}
+
+.tui-overlay-content {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tui-task-row {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+  padding-bottom: 4px;
+}
+
+.tui-task-name {
+  color: var(--tui-white);
+}
+
+.tui-task-state {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+
+.tui-task-state.success {
+  color: var(--tui-green);
+}
+.tui-task-state.failed {
+  color: var(--tui-red);
+}
+.tui-task-state.running {
+  color: var(--purple);
+}
+.tui-task-state.pending {
+  color: var(--text-muted);
+}
+
+/* Verification Overlay layers */
+.tui-verify-layer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+}
+
+.tui-verify-layer.passed {
+  color: var(--tui-green);
+}
+.tui-verify-layer.failed {
+  color: var(--tui-red);
+}
+.tui-verify-layer.pending {
+  color: var(--text-dim);
+}
+
+/* Minimal project breakdown section */
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 40px;
+  border-bottom: 1px solid var(--border-tui);
+  padding-bottom: 12px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+  margin-bottom: 80px;
+}
+
+.feature-card {
+  border: 1px solid var(--border-tui);
+  background: var(--bg-tui);
+  border-radius: 4px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: var(--transition-smooth);
+}
+
+.feature-card:hover {
+  border-color: var(--border-active);
+}
+
+.feature-card h3 {
+  font-size: 1rem;
+  font-family: var(--font-mono);
+  color: var(--tui-cyan);
+}
+
+.feature-card p {
+  font-size: 0.85rem;
+}
+
+/* CLI Options block */
+.cli-options {
+  margin-bottom: 8px;
+}
+
+.cli-option-row {
+  display: flex;
+  border-bottom: 1px solid var(--border-tui);
+  padding: 12px 0;
+  font-size: 0.85rem;
+}
+
+.cli-option-name {
+  width: 240px;
+  font-family: var(--font-mono);
+  color: var(--tui-cyan-dim);
+}
+
+.cli-option-desc {
+  flex: 1;
+  color: var(--text-muted);
+}
+
+/* Monospace toml config layout */
+.config-layout {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 40px;
+  margin: 60px 0 80px 0;
+  align-items: center;
+}
+
+.config-code-block {
+  background: var(--bg-tui);
+  border: 1px solid var(--border-tui);
+  border-radius: 4px;
+  padding: 20px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--tui-white);
+  overflow-x: auto;
+}
+
+.config-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+}
+
+/* Setup Section */
+.setup-box {
+  background: radial-gradient(circle at top, rgba(0, 240, 255, 0.04) 0%, rgba(5, 5, 7, 0.95) 100%), var(--bg-tui);
+  border: 1px solid var(--border-tui);
+  border-radius: 6px;
+  padding: 56px 48px;
+  text-align: center;
+  margin-bottom: 100px;
+  box-shadow: 0 20px 80px rgba(0, 240, 255, 0.02);
+}
+
+/* Footer styling */
+footer {
+  border-top: 1px dashed var(--border-tui);
+  padding: 40px 0;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.footer-inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 900px) {
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+  .config-layout {
+    grid-template-columns: 1fr;
+  }
+  .tui-livestatus {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .cli-option-row {
+    flex-direction: column;
+    gap: 4px;
+  }
+  .cli-option-name {
+    width: 100%;
+  }
+}