From 0d645e0543b1507c278e6a17b69a7f38be21f835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 03:25:05 +0300
Subject: [PATCH 01/24] feat: redesign UI as a classic Windows wizard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the flat material card layout with a Windows-style wizard
shell while keeping the existing navy/green brand palette.

Layout changes:
- New WizardLayout.vue: navy header, dark step-sidebar (1→2→3→4 with
  dot/check indicators), white content pane, classic grey footer bar
- routes.js switched from MainLayout to WizardLayout

Page changes (all use new .wiz-page chrome — header band + scrollable
body + sticky Back/Next nav bar):
- LoginPage: provider-row cards (GitHub / GitLab) with hover highlight
- ReposPage: flat bordered list rows replacing the card grid
- ExtractPage: two-panel config layout (folder tree | destination),
  separate "Extracting…" state with StatusPoller, reset flow
- app.scss: shared .wiz-page utility classes
---
 frontend/src/css/app.scss             |  59 ++++++
 frontend/src/layouts/WizardLayout.vue | 255 ++++++++++++++++++++++++++
 frontend/src/pages/ExtractPage.vue    | 237 +++++++++++++++++-------
 frontend/src/pages/LoginPage.vue      | 144 +++++++++++----
 frontend/src/pages/ReposPage.vue      | 150 +++++++++++----
 frontend/src/router/routes.js         |   2 +-
 6 files changed, 706 insertions(+), 141 deletions(-)
 create mode 100644 frontend/src/layouts/WizardLayout.vue

diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index 5da4a0f..e5fea7a 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -1 +1,60 @@
 // app global css / scss goes here
+
+// ── Shared wizard page chrome ──────────────────────────────────────
+// Every page inside WizardLayout uses these classes for a consistent
+// header / scrollable-body / footer-nav structure.
+
+.wiz-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  // Step label + title + description banner at the top of the content pane
+  &__head {
+    flex-shrink: 0;
+    padding: 32px 40px 24px;
+    border-bottom: 1px solid #e0e0e0;
+    background: #fafafa;
+  }
+
+  &__step-label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: #888;
+    margin-bottom: 6px;
+  }
+
+  &__title {
+    font-size: 22px;
+    font-weight: 700;
+    color: $primary;
+    margin: 0 0 6px;
+  }
+
+  &__desc {
+    font-size: 13px;
+    color: #555;
+    margin: 0;
+    max-width: 560px;
+  }
+
+  // Scrollable content area
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 28px 40px;
+  }
+
+  // Back / Next navigation bar pinned to the bottom of the content pane
+  &__nav {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 40px;
+    border-top: 1px solid #e0e0e0;
+    background: #f5f5f5;
+  }
+}
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
new file mode 100644
index 0000000..3139054
--- /dev/null
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="wiz-shell">
+    <!-- ── Header ─────────────────────────────────────────────────── -->
+    <header class="wiz-header">
+      <div class="wiz-header__brand">
+        <q-icon name="merge_type" size="28px" class="q-mr-sm" />
+        <div>
+          <div class="wiz-header__title">git-extract</div>
+          <div class="wiz-header__sub">Extract any path. Keep all history.</div>
+        </div>
+      </div>
+
+      <div v-if="auth.isLoggedIn" class="wiz-header__user">
+        <img
+          v-if="auth.user?.avatar_url"
+          :src="auth.user.avatar_url"
+          class="wiz-header__avatar"
+        />
+        <q-icon v-else name="person" color="white" size="20px" />
+        <span class="q-mx-sm">{{ auth.user?.login || auth.user?.username }}</span>
+        <q-badge :label="auth.provider" color="secondary" class="q-mr-sm" />
+        <q-btn
+          flat
+          dense
+          size="sm"
+          color="white"
+          label="Sign out"
+          @click="logout"
+        />
+      </div>
+    </header>
+
+    <!-- ── Body ──────────────────────────────────────────────────── -->
+    <div class="wiz-body">
+      <!-- Left step panel -->
+      <nav class="wiz-nav">
+        <div class="wiz-nav__label">Steps</div>
+
+        <div
+          v-for="step in steps"
+          :key="step.id"
+          class="wiz-step"
+          :class="{
+            'wiz-step--active': currentStep === step.id,
+            'wiz-step--done': currentStep > step.id,
+          }"
+        >
+          <div class="wiz-step__icon">
+            <q-icon
+              v-if="currentStep > step.id"
+              name="check_circle"
+              size="18px"
+              color="secondary"
+            />
+            <div v-else-if="currentStep === step.id" class="wiz-dot wiz-dot--active" />
+            <div v-else class="wiz-dot wiz-dot--idle" />
+          </div>
+          <div class="wiz-step__text">{{ step.label }}</div>
+        </div>
+      </nav>
+
+      <!-- Content pane -->
+      <main class="wiz-content">
+        <router-view />
+      </main>
+    </div>
+
+    <!-- ── Footer ─────────────────────────────────────────────────── -->
+    <footer class="wiz-footer">
+      git-extract &copy; {{ year }}
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+
+const auth = useAuthStore()
+const route = useRoute()
+const router = useRouter()
+const year = new Date().getFullYear()
+
+const steps = [
+  { id: 1, label: 'Sign In' },
+  { id: 2, label: 'Select Repository' },
+  { id: 3, label: 'Configure' },
+  { id: 4, label: 'Extract' },
+]
+
+const currentStep = computed(() => {
+  const p = route.path
+  if (p === '/login' || p.startsWith('/auth')) return 1
+  if (p === '/repos') return 2
+  if (p === '/extract') return route.query.done ? 4 : 3
+  return 1
+})
+
+function logout() {
+  auth.logout()
+  router.push('/login')
+}
+</script>
+
+<style lang="scss">
+/* ── Shell ─────────────────────────────────────────────────────── */
+.wiz-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  font-family: 'Segoe UI', Roboto, sans-serif;
+}
+
+/* ── Header ────────────────────────────────────────────────────── */
+.wiz-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 64px;
+  background: $primary;
+  color: #fff;
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  z-index: 10;
+
+  &__brand {
+    display: flex;
+    align-items: center;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+  }
+
+  &__sub {
+    font-size: 11px;
+    opacity: 0.65;
+    margin-top: 1px;
+  }
+
+  &__user {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    color: #fff;
+  }
+
+  &__avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+/* ── Body ──────────────────────────────────────────────────────── */
+.wiz-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ── Step nav ──────────────────────────────────────────────────── */
+.wiz-nav {
+  width: 200px;
+  flex-shrink: 0;
+  background: $dark;
+  padding: 24px 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+
+  &__label {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.35);
+    padding: 0 20px 12px;
+  }
+}
+
+.wiz-step {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  gap: 12px;
+  transition: background 0.15s;
+
+  &--active {
+    background: rgba(255, 255, 255, 0.07);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.45);
+    white-space: nowrap;
+
+    .wiz-step--active & {
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .wiz-step--done & {
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+}
+
+.wiz-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &--active {
+    background: $secondary;
+    box-shadow: 0 0 0 3px rgba(46, 168, 78, 0.25);
+  }
+
+  &--idle {
+    border: 2px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+/* ── Content ───────────────────────────────────────────────────── */
+.wiz-content {
+  flex: 1;
+  overflow-y: auto;
+  background: #fff;
+}
+
+/* ── Footer ────────────────────────────────────────────────────── */
+.wiz-footer {
+  flex-shrink: 0;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 24px;
+  background: #e4e4e4;
+  border-top: 1px solid #c0c0c0;
+  font-size: 11px;
+  color: #666;
+}
+</style>
diff --git a/frontend/src/pages/ExtractPage.vue b/frontend/src/pages/ExtractPage.vue
index 600f925..ebd6423 100644
--- a/frontend/src/pages/ExtractPage.vue
+++ b/frontend/src/pages/ExtractPage.vue
@@ -1,44 +1,108 @@
 <template>
-  <q-page padding>
-    <div v-if="!source" class="text-center q-mt-xl">
-      <q-btn label="Pick a repository" color="primary" to="/repos" />
-    </div>
+  <div class="wiz-page">
+    <!-- ── No source selected ──────────────────────────────────── -->
+    <template v-if="!source">
+      <div class="wiz-page__head">
+        <div class="wiz-page__step-label">Step 3 of 3</div>
+        <h1 class="wiz-page__title">Configure Extraction</h1>
+        <p class="wiz-page__desc">No repository selected yet.</p>
+      </div>
+      <div class="wiz-page__body">
+        <q-btn flat icon="arrow_back" label="Go back and pick a repository" color="primary" to="/repos" />
+      </div>
+    </template>
 
-    <template v-else>
-      <!-- Source header -->
-      <div class="row items-center q-gutter-sm q-mb-md">
-        <div class="text-h6">{{ source.fullName }}</div>
-        <q-select
-          v-model="sourceBranch"
-          :options="sourceBranches"
-          dense outlined
-          style="min-width: 160px"
-          @update:model-value="loadTree"
+    <!-- ── Post-submit: Extraction running ───────────────────────── -->
+    <template v-else-if="submitted">
+      <div class="wiz-page__head">
+        <div class="wiz-page__step-label">Step 3 of 3</div>
+        <h1 class="wiz-page__title">Extracting…</h1>
+        <p class="wiz-page__desc">
+          <strong>{{ source.fullName }}</strong> &rarr;
+          <strong>{{ store.selectedTarget?.fullName }}</strong>
+        </p>
+      </div>
+      <div class="wiz-page__body">
+        <StatusPoller
+          v-if="runId"
+          :run-id="runId"
+          :run-url="runUrl"
+          :target-repo-url="targetRepoUrl"
         />
+        <q-banner v-else rounded class="bg-positive text-white">
+          <template #avatar><q-icon name="check_circle" /></template>
+          Extraction job submitted.
+        </q-banner>
+
+        <div class="q-mt-lg">
+          <q-btn flat icon="arrow_back" label="Start a new extraction" color="primary" @click="reset" />
+        </div>
+      </div>
+    </template>
+
+    <!-- ── Configure ──────────────────────────────────────────────── -->
+    <template v-else>
+      <div class="wiz-page__head">
+        <div class="wiz-page__step-label">Step 3 of 3</div>
+        <h1 class="wiz-page__title">Configure Extraction</h1>
+        <p class="wiz-page__desc">
+          Pick a source folder, choose the target repository and branch, then click
+          <strong>Extract &amp; Push</strong>.
+        </p>
       </div>
 
-      <div v-if="!submitted" class="row q-col-gutter-md">
-        <!-- Source folder tree -->
-        <div class="col-12 col-md-5">
-          <q-card flat bordered>
-            <q-card-section class="text-subtitle2">Source folder</q-card-section>
-            <q-card-section>
-              <q-spinner v-if="treeLoading" />
-              <FolderTree v-else v-model="store.sourcePath" :items="store.sourceTree" />
-            </q-card-section>
-          </q-card>
+      <div class="wiz-page__body">
+        <!-- Source repo + branch row -->
+        <div class="cfg-group q-mb-lg">
+          <div class="cfg-group__label">Source</div>
+          <div class="row items-center q-gutter-sm">
+            <div class="text-weight-medium text-primary">{{ source.fullName }}</div>
+            <q-select
+              v-model="sourceBranch"
+              :options="sourceBranches"
+              dense
+              outlined
+              style="min-width: 160px"
+              @update:model-value="loadTree"
+            />
+          </div>
         </div>
 
-        <!-- Target options -->
-        <div class="col-12 col-md-7">
-          <q-card flat bordered>
-            <q-card-section class="q-gutter-md">
+        <div class="cfg-columns">
+          <!-- Left: folder tree -->
+          <div class="cfg-panel">
+            <div class="cfg-panel__head">
+              <q-icon name="folder_open" size="16px" class="q-mr-xs" />
+              Source folder
+            </div>
+            <div class="cfg-panel__body">
+              <div v-if="treeLoading" class="flex flex-center q-py-md">
+                <q-spinner color="primary" size="32px" />
+              </div>
+              <FolderTree
+                v-else
+                v-model="store.sourcePath"
+                :items="store.sourceTree"
+              />
+              <div v-if="!treeLoading && !store.sourceTree.length" class="text-caption text-grey q-pa-sm">
+                No directories found in this branch.
+              </div>
+            </div>
+          </div>
+
+          <!-- Right: target options -->
+          <div class="cfg-panel">
+            <div class="cfg-panel__head">
+              <q-icon name="drive_file_move" size="16px" class="q-mr-xs" />
+              Destination
+            </div>
+            <div class="cfg-panel__body q-gutter-md column">
               <q-select
                 v-model="store.selectedTarget"
                 :options="store.list"
                 option-label="fullName"
                 option-value="id"
-                label="Target repo"
+                label="Target repository"
                 outlined
                 use-input
                 input-debounce="300"
@@ -48,52 +112,43 @@
               <q-select
                 v-model="targetBranch"
                 :options="targetBranches"
-                label="Branch"
+                label="Target branch"
                 outlined
                 dense
               />
-              <q-input v-model="store.targetPath" label="Target path" outlined dense />
-              <q-btn
-                label="Extract → Push"
-                color="primary"
-                :disable="!canSubmit"
-                :loading="submitting"
-                @click="submit"
+              <q-input
+                v-model="store.targetPath"
+                label="Destination path inside target repo"
+                outlined
+                dense
               />
-            </q-card-section>
-          </q-card>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Post-submit status -->
-      <div v-else class="q-mt-lg">
-        <StatusPoller
-          v-if="runId"
-          :run-id="runId"
-          :run-url="runUrl"
-          :target-repo-url="targetRepoUrl"
+      <!-- Nav bar -->
+      <div class="wiz-page__nav">
+        <q-btn flat label="‹ Back" @click="$router.push('/repos')" />
+        <q-btn
+          color="primary"
+          icon-right="send"
+          label="Extract & Push"
+          :disable="!canSubmit"
+          :loading="submitting"
+          @click="submit"
         />
-        <q-banner v-else rounded class="bg-positive text-white">
-          <template #avatar><q-icon name="check_circle" /></template>
-          Extraction job submitted.
-        </q-banner>
       </div>
     </template>
-  </q-page>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useReposStore } from '../stores/repos.js'
 import { useAuthStore } from '../stores/auth.js'
-import {
-  getBranches as getGhBranches,
-  getTree as getGhTree,
-} from '../services/github.js'
-import {
-  getBranches as getGlBranches,
-  getTree as getGlTree,
-} from '../services/gitlab.js'
+import { getBranches as getGhBranches, getTree as getGhTree } from '../services/github.js'
+import { getBranches as getGlBranches, getTree as getGlTree } from '../services/gitlab.js'
 import FolderTree from '../components/FolderTree.vue'
 import StatusPoller from '../components/StatusPoller.vue'
 
@@ -173,14 +228,15 @@ async function loadTargetBranches() {
 }
 
 function filterRepos(val, update) {
-  update(() => { store.search = val })
+  update(() => {
+    store.search = val
+  })
 }
 
 async function submit() {
   submitting.value = true
-  const ghBase = 'https://github.com'
-  const glBase = `https://${auth.gitlabHost}`
-  const base = auth.provider === 'github' ? ghBase : glBase
+  const base =
+    auth.provider === 'github' ? 'https://github.com' : `https://${auth.gitlabHost}`
   const res = await fetch(`${process.env.WORKER_URL}/extract`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -200,4 +256,59 @@ async function submit() {
   submitting.value = false
   submitted.value = true
 }
+
+function reset() {
+  submitted.value = false
+  runId.value = ''
+  runUrl.value = ''
+  store.sourcePath = ''
+  store.selectedTarget = null
+}
 </script>
+
+<style lang="scss" scoped>
+.cfg-group {
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    color: #888;
+    margin-bottom: 6px;
+  }
+}
+
+.cfg-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+
+  @media (max-width: 680px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.cfg-panel {
+  border: 1px solid #d8d8d8;
+  border-radius: 3px;
+  overflow: hidden;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    padding: 8px 14px;
+    background: #f0f0f0;
+    border-bottom: 1px solid #d8d8d8;
+    font-size: 12px;
+    font-weight: 600;
+    color: $primary;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+  }
+
+  &__body {
+    padding: 12px 14px;
+    min-height: 120px;
+  }
+}
+</style>
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index fd4ae6d..c7d3161 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -1,40 +1,56 @@
 <template>
-  <q-page class="flex flex-center">
-    <q-card style="min-width: 360px">
-      <q-card-section>
-        <div class="text-h6">Sign in</div>
-      </q-card-section>
-
-      <q-card-section v-if="errorMessage">
-        <q-banner class="bg-negative text-white" rounded>
-          {{ errorMessage }}
-        </q-banner>
-      </q-card-section>
-
-      <q-card-section class="q-gutter-md">
-        <q-btn
-          color="dark"
-          icon="fab fa-github"
-          label="Login with GitHub"
-          class="full-width"
-          @click="loginGithub"
-        />
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-section class="q-gutter-md">
-        <q-input v-model="gitlabHost" label="GitLab host" outlined dense />
-        <q-btn
-          color="orange"
-          icon="fab fa-gitlab"
-          label="Login with GitLab"
-          class="full-width"
-          @click="loginGitlab"
-        />
-      </q-card-section>
-    </q-card>
-  </q-page>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__step-label">Step 1 of 3</div>
+      <h1 class="wiz-page__title">Sign In</h1>
+      <p class="wiz-page__desc">
+        Connect your account to browse repositories and run extractions.
+      </p>
+    </div>
+
+    <div class="wiz-page__body">
+      <q-banner v-if="errorMessage" rounded class="bg-negative text-white q-mb-lg">
+        {{ errorMessage }}
+      </q-banner>
+
+      <div class="login-providers">
+        <!-- GitHub -->
+        <div class="provider-row" @click="loginGithub">
+          <q-icon name="fab fa-github" size="32px" class="provider-row__icon" />
+          <div class="provider-row__body">
+            <div class="provider-row__name">Sign in with GitHub</div>
+            <div class="provider-row__hint">OAuth — public &amp; private repos</div>
+          </div>
+          <q-icon name="chevron_right" size="20px" color="grey-5" />
+        </div>
+
+        <div class="provider-sep">or</div>
+
+        <!-- GitLab host input -->
+        <div class="q-mb-sm">
+          <q-input
+            v-model="gitlabHost"
+            outlined
+            dense
+            label="GitLab host"
+            prefix="https://"
+            hint="Change only for self-hosted GitLab instances"
+          />
+        </div>
+
+        <!-- GitLab -->
+        <div class="provider-row" @click="loginGitlab">
+          <q-icon name="fab fa-gitlab" size="32px" color="orange" class="provider-row__icon" />
+          <div class="provider-row__body">
+            <div class="provider-row__name">Sign in with GitLab</div>
+            <div class="provider-row__hint">PKCE — gitlab.com or self-hosted</div>
+          </div>
+          <q-icon name="chevron_right" size="20px" color="grey-5" />
+        </div>
+      </div>
+    </div>
+    <!-- no footer nav: user advances by authenticating -->
+  </div>
 </template>
 
 <script setup>
@@ -43,16 +59,15 @@ import { useRoute } from 'vue-router'
 import { startGitlabLogin } from '../services/gitlab.js'
 
 const route = useRoute()
-
 const gitlabHost = ref('gitlab.com')
 
 const errorMessage = computed(() => {
   if (!route.query.error) return null
-  const messages = {
+  const map = {
     no_token: 'Authentication failed: no token received.',
     no_code: 'Authentication failed: no code received.',
   }
-  return messages[route.query.error] ?? `Authentication error: ${route.query.error}`
+  return map[route.query.error] ?? `Authentication error: ${route.query.error}`
 })
 
 function loginGithub() {
@@ -67,3 +82,54 @@ async function loginGitlab() {
   await startGitlabLogin(gitlabHost.value, process.env.GITLAB_CLIENT_ID)
 }
 </script>
+
+<style lang="scss" scoped>
+.login-providers {
+  max-width: 460px;
+}
+
+.provider-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  border: 1px solid #d4d4d4;
+  border-radius: 3px;
+  cursor: pointer;
+  background: #fff;
+  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
+
+  &:hover {
+    border-color: $primary;
+    background: #f0f4fa;
+    box-shadow: 0 1px 4px rgba(30, 46, 74, 0.12);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__body {
+    flex: 1;
+  }
+
+  &__name {
+    font-size: 14px;
+    font-weight: 600;
+    color: $primary;
+  }
+
+  &__hint {
+    font-size: 12px;
+    color: #777;
+    margin-top: 2px;
+  }
+}
+
+.provider-sep {
+  text-align: center;
+  color: #bbb;
+  font-size: 12px;
+  margin: 10px 0;
+}
+</style>
diff --git a/frontend/src/pages/ReposPage.vue b/frontend/src/pages/ReposPage.vue
index 94dbb4e..fca7f68 100644
--- a/frontend/src/pages/ReposPage.vue
+++ b/frontend/src/pages/ReposPage.vue
@@ -1,45 +1,67 @@
 <template>
-  <q-page padding>
-    <q-input
-      v-model="store.search"
-      placeholder="Filter repositories…"
-      outlined
-      dense
-      clearable
-      class="q-mb-md"
-    >
-      <template #prepend><q-icon name="search" /></template>
-    </q-input>
-
-    <q-infinite-scroll @load="onLoad" :offset="200">
-      <div class="row q-gutter-md">
-        <q-card
-          v-for="repo in store.filtered"
-          :key="repo.id"
-          class="col-12 col-sm-5 col-md-3 cursor-pointer"
-          @click="selectRepo(repo)"
-        >
-          <q-card-section>
-            <div class="row items-center q-gutter-sm">
-              <q-icon
-                :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
-                size="sm"
-              />
-              <div class="text-subtitle1 text-weight-medium">{{ repo.name }}</div>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__step-label">Step 2 of 3</div>
+      <h1 class="wiz-page__title">Select Source Repository</h1>
+      <p class="wiz-page__desc">
+        Choose the repository that contains the path you want to extract.
+        Click a row to proceed.
+      </p>
+    </div>
+
+    <div class="wiz-page__body">
+      <!-- Filter -->
+      <q-input
+        v-model="store.search"
+        placeholder="Filter repositories…"
+        outlined
+        dense
+        clearable
+        class="q-mb-md"
+        style="max-width: 420px"
+      >
+        <template #prepend><q-icon name="search" /></template>
+      </q-input>
+
+      <!-- Repo list -->
+      <q-infinite-scroll @load="onLoad" :offset="200">
+        <div class="repo-list">
+          <div
+            v-for="repo in store.filtered"
+            :key="repo.id"
+            class="repo-row"
+            @click="selectRepo(repo)"
+          >
+            <q-icon
+              :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
+              :color="repo.provider === 'github' ? 'grey-8' : 'orange'"
+              size="20px"
+              class="repo-row__icon"
+            />
+            <div class="repo-row__body">
+              <div class="repo-row__name">{{ repo.fullName }}</div>
+              <div class="repo-row__meta">Updated {{ formatDate(repo.updatedAt) }}</div>
             </div>
-            <div class="text-caption text-grey">{{ repo.fullName }}</div>
-            <div class="text-caption text-grey">Updated {{ formatDate(repo.updatedAt) }}</div>
-          </q-card-section>
-        </q-card>
+            <q-icon name="chevron_right" size="18px" color="grey-4" />
+          </div>
+        </div>
+
+        <template #loading>
+          <div class="row justify-center q-my-md">
+            <q-spinner-dots size="36px" color="primary" />
+          </div>
+        </template>
+      </q-infinite-scroll>
+
+      <div v-if="store.loading && !store.list.length" class="row justify-center q-mt-xl">
+        <q-spinner-dots size="48px" color="primary" />
       </div>
 
-      <template #loading>
-        <div class="row justify-center q-my-md">
-          <q-spinner-dots size="40px" />
-        </div>
-      </template>
-    </q-infinite-scroll>
-  </q-page>
+      <div v-if="!store.loading && !store.filtered.length" class="text-center text-grey q-mt-xl">
+        No repositories found.
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -66,3 +88,55 @@ function formatDate(iso) {
   return new Date(iso).toLocaleDateString()
 }
 </script>
+
+<style lang="scss" scoped>
+.repo-list {
+  max-width: 640px;
+  border: 1px solid #d8d8d8;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.repo-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 16px;
+  border-bottom: 1px solid #ebebeb;
+  cursor: pointer;
+  background: #fff;
+  transition: background 0.1s;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: #f0f4fa;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 14px;
+    font-weight: 500;
+    color: $primary;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__meta {
+    font-size: 11px;
+    color: #999;
+    margin-top: 1px;
+  }
+}
+</style>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 91043bb..eecf909 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -1,7 +1,7 @@
 const routes = [
   {
     path: '/',
-    component: () => import('layouts/MainLayout.vue'),
+    component: () => import('layouts/WizardLayout.vue'),
     children: [
       { path: '', redirect: '/repos' },
       { path: '/login', component: () => import('pages/LoginPage.vue') },

From 268b53c80de3b445d49ebd73ea8af950d7fcf4c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 04:27:00 +0300
Subject: [PATCH 02/24] feat: add tool description panel to the welcome/sign-in
 step

Adds a bordered intro box above the provider buttons on step 1 that
explains what git-extract does and outlines the three-step flow, so
first-time visitors immediately understand the tool's purpose.
---
 frontend/src/pages/LoginPage.vue | 102 +++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index c7d3161..de50743 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -9,6 +9,43 @@
     </div>
 
     <div class="wiz-page__body">
+      <!-- Tool description -->
+      <div class="tool-intro q-mb-xl">
+        <div class="tool-intro__headline">What is git-extract?</div>
+        <p class="tool-intro__text">
+          <strong>git-extract</strong> splits a subdirectory out of any Git repository into a
+          brand-new repository — keeping the <em>complete commit history</em> for that path.
+          No manual rebasing, no lost commits.
+        </p>
+        <div class="tool-intro__steps">
+          <div class="tool-intro__step">
+            <div class="tool-intro__step-num">1</div>
+            <div>
+              <div class="tool-intro__step-title">Sign in</div>
+              <div class="tool-intro__step-desc">Connect your GitHub or GitLab account.</div>
+            </div>
+          </div>
+          <div class="tool-intro__step">
+            <div class="tool-intro__step-num">2</div>
+            <div>
+              <div class="tool-intro__step-title">Select a source repository</div>
+              <div class="tool-intro__step-desc">Pick the repo that contains the path you want to extract.</div>
+            </div>
+          </div>
+          <div class="tool-intro__step">
+            <div class="tool-intro__step-num">3</div>
+            <div>
+              <div class="tool-intro__step-title">Configure &amp; extract</div>
+              <div class="tool-intro__step-desc">
+                Choose the source folder, the target repository and branch, then click
+                <strong>Extract &amp; Push</strong>. A GitHub Actions job rewrites history and
+                pushes the result.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <q-banner v-if="errorMessage" rounded class="bg-negative text-white q-mb-lg">
         {{ errorMessage }}
       </q-banner>
@@ -84,6 +121,71 @@ async function loginGitlab() {
 </script>
 
 <style lang="scss" scoped>
+.tool-intro {
+  max-width: 560px;
+  padding: 20px 24px;
+  border: 1px solid #d8d8d8;
+  border-left: 4px solid $secondary;
+  border-radius: 3px;
+  background: #f8fdf9;
+
+  &__headline {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: $primary;
+    margin-bottom: 8px;
+  }
+
+  &__text {
+    font-size: 13px;
+    color: #444;
+    margin: 0 0 16px;
+    line-height: 1.6;
+  }
+
+  &__steps {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__step {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  &__step-num {
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: $secondary;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+  }
+
+  &__step-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: $primary;
+  }
+
+  &__step-desc {
+    font-size: 12px;
+    color: #666;
+    margin-top: 1px;
+    line-height: 1.5;
+  }
+}
+
 .login-providers {
   max-width: 460px;
 }

From eec4fb73352503f39fb42cb999ffe5cd6fce2588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 19:01:12 +0300
Subject: [PATCH 03/24] feat: restyle wizard as a Windows 98 Setup dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Full Win98 aesthetic overhaul while keeping the navy/green palette:

Shell
- Classic #008080 teal desktop background
- Centered window with Win98 3D raised box-shadow border
- Title bar: navy gradient with ⎇ icon + cosmetic _□✕ controls
- Left sidebar: brand navy with ► / ✔ / ○ step indicators
- Content pane: inset Win98 border
- Footer: two-line separator + status text + Back/Next/Cancel buttons
- All buttons use the authentic 4-layer inset box-shadow (raised/sunken)
- Font: Tahoma / MS Sans Serif throughout

composables/useWizardNav.js (new)
- provide/inject channel so each page registers its Back/Next
  handlers and the layout renders them in the window footer

Pages
- LoginPage: Win98 list-view rows for provider selection, inset
  text input for GitLab host, yellow info box for tool description
- ReposPage: Explorer-style list view with column headers
  (Name / Provider / Last updated), click to select + double-click
  or Next button to confirm
- ExtractPage: native <select> and <input> fields with Win98 inset
  style; nav buttons wired through useWizardNav
---
 frontend/src/composables/useWizardNav.js |  26 ++
 frontend/src/css/app.scss                | 134 ++++--
 frontend/src/layouts/WizardLayout.vue    | 503 ++++++++++++++++-------
 frontend/src/pages/ExtractPage.vue       | 329 +++++++--------
 frontend/src/pages/LoginPage.vue         | 266 +++++-------
 frontend/src/pages/ReposPage.vue         | 227 ++++++----
 6 files changed, 892 insertions(+), 593 deletions(-)
 create mode 100644 frontend/src/composables/useWizardNav.js

diff --git a/frontend/src/composables/useWizardNav.js b/frontend/src/composables/useWizardNav.js
new file mode 100644
index 0000000..663e55d
--- /dev/null
+++ b/frontend/src/composables/useWizardNav.js
@@ -0,0 +1,26 @@
+import { inject, provide, ref } from 'vue'
+
+const KEY = Symbol('wizardNav')
+
+/**
+ * Called once in WizardLayout to create the shared nav state.
+ */
+export function provideWizardNav() {
+  const nav = ref({
+    backLabel: '< Back',
+    nextLabel: 'Next >',
+    nextDisabled: false,
+    onBack: null, // null = hidden
+    onNext: null, // null = hidden
+  })
+  provide(KEY, nav)
+  return nav
+}
+
+/**
+ * Called in each page component to register its Back / Next handlers.
+ * Pass null for onBack / onNext to hide that button.
+ */
+export function useWizardNav() {
+  return inject(KEY)
+}
diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index e5fea7a..ad7956e 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -1,60 +1,142 @@
 // app global css / scss goes here
 
-// ── Shared wizard page chrome ──────────────────────────────────────
-// Every page inside WizardLayout uses these classes for a consistent
-// header / scrollable-body / footer-nav structure.
+// ── Shared page chrome (used by every page inside WizardLayout) ────
 
 .wiz-page {
   display: flex;
   flex-direction: column;
   height: 100%;
+  font-size: 12px;
 
-  // Step label + title + description banner at the top of the content pane
+  // Step title banner — matches Win98 dialog header style
   &__head {
     flex-shrink: 0;
-    padding: 32px 40px 24px;
-    border-bottom: 1px solid #e0e0e0;
-    background: #fafafa;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 18px 12px;
+    background: #fff;
+    border-bottom: 2px solid;
+    border-color: #808080 #fff #fff #808080; // inset separator
   }
 
+  &__head-icon {
+    font-size: 28px;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  &__head-text { flex: 1; }
+
   &__step-label {
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 1px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.8px;
     text-transform: uppercase;
-    color: #888;
-    margin-bottom: 6px;
+    color: #808080;
+    margin-bottom: 3px;
   }
 
   &__title {
-    font-size: 22px;
+    font-size: 15px;
     font-weight: 700;
     color: $primary;
-    margin: 0 0 6px;
+    margin: 0 0 3px;
+    line-height: 1.2;
   }
 
   &__desc {
-    font-size: 13px;
-    color: #555;
+    font-size: 11px;
+    color: #444;
     margin: 0;
-    max-width: 560px;
+    line-height: 1.5;
   }
 
-  // Scrollable content area
+  // Scrollable content
   &__body {
     flex: 1;
     overflow-y: auto;
-    padding: 28px 40px;
+    padding: 14px 18px;
   }
 
-  // Back / Next navigation bar pinned to the bottom of the content pane
+  // Back / Next bar — Win98 buttons rendered by layout, this is a
+  // per-page override area for extra actions inside the content pane
   &__nav {
-    flex-shrink: 0;
+    display: none; // nav is in the window footer, not here
+  }
+}
+
+// ── Win98 inset panel (used inside pages) ─────────────────────────
+.w98-panel {
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  background: #fff;
+
+  &__head {
+    padding: 3px 8px;
+    background: #c0c0c0;
+    font-size: 11px;
+    font-weight: 700;
+    color: #000;
+    border-bottom: 1px solid #808080;
     display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 40px;
-    border-top: 1px solid #e0e0e0;
-    background: #f5f5f5;
+    align-items: center;
+    gap: 5px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &__body {
+    padding: 10px;
+  }
+}
+
+// ── Win98-style list rows (repos list, provider list) ─────────────
+.w98-list {
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  background: #fff;
+}
+
+.w98-list-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 8px;
+  border-bottom: 1px solid #ececec;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:last-child { border-bottom: none; }
+
+  &:hover {
+    background: $primary;
+    color: #fff;
+
+    .w98-list-row__meta { color: rgba(255,255,255,0.7); }
   }
+
+  &__name {
+    flex: 1;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  &__meta {
+    font-size: 11px;
+    color: #808080;
+    flex-shrink: 0;
+  }
+}
+
+// ── Win98 field group label ────────────────────────────────────────
+.w98-field-label {
+  font-size: 11px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  color: #000;
 }
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index 3139054..153936b 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -1,74 +1,102 @@
 <template>
-  <div class="wiz-shell">
-    <!-- ── Header ─────────────────────────────────────────────────── -->
-    <header class="wiz-header">
-      <div class="wiz-header__brand">
-        <q-icon name="merge_type" size="28px" class="q-mr-sm" />
-        <div>
-          <div class="wiz-header__title">git-extract</div>
-          <div class="wiz-header__sub">Extract any path. Keep all history.</div>
+  <!-- Classic Win98 desktop background -->
+  <div class="w98-desktop">
+    <!-- The "window" -->
+    <div class="w98-window">
+
+      <!-- ── Title bar ──────────────────────────────────────────── -->
+      <div class="w98-titlebar">
+        <span class="w98-titlebar__icon">⎇</span>
+        <span class="w98-titlebar__text">git-extract Setup</span>
+        <div class="w98-titlebar__controls">
+          <div class="w98-chrome-btn">_</div>
+          <div class="w98-chrome-btn">□</div>
+          <div class="w98-chrome-btn w98-chrome-btn--close">✕</div>
         </div>
       </div>
 
-      <div v-if="auth.isLoggedIn" class="wiz-header__user">
-        <img
-          v-if="auth.user?.avatar_url"
-          :src="auth.user.avatar_url"
-          class="wiz-header__avatar"
-        />
-        <q-icon v-else name="person" color="white" size="20px" />
-        <span class="q-mx-sm">{{ auth.user?.login || auth.user?.username }}</span>
-        <q-badge :label="auth.provider" color="secondary" class="q-mr-sm" />
-        <q-btn
-          flat
-          dense
-          size="sm"
-          color="white"
-          label="Sign out"
-          @click="logout"
-        />
-      </div>
-    </header>
-
-    <!-- ── Body ──────────────────────────────────────────────────── -->
-    <div class="wiz-body">
-      <!-- Left step panel -->
-      <nav class="wiz-nav">
-        <div class="wiz-nav__label">Steps</div>
-
-        <div
-          v-for="step in steps"
-          :key="step.id"
-          class="wiz-step"
-          :class="{
-            'wiz-step--active': currentStep === step.id,
-            'wiz-step--done': currentStep > step.id,
-          }"
-        >
-          <div class="wiz-step__icon">
-            <q-icon
-              v-if="currentStep > step.id"
-              name="check_circle"
-              size="18px"
-              color="secondary"
+      <!-- ── Body ──────────────────────────────────────────────── -->
+      <div class="w98-body">
+
+        <!-- Left product panel -->
+        <div class="w98-sidebar">
+          <div class="w98-sidebar__logo">⎇</div>
+          <div class="w98-sidebar__product">git-extract</div>
+          <div class="w98-sidebar__tagline">Setup Wizard</div>
+
+          <div class="w98-sidebar__divider" />
+
+          <div
+            v-for="step in steps"
+            :key="step.id"
+            class="w98-sidebar__step"
+            :class="{
+              'w98-sidebar__step--active': currentStep === step.id,
+              'w98-sidebar__step--done':   currentStep > step.id,
+            }"
+          >
+            <span class="w98-sidebar__arrow">
+              {{ currentStep > step.id ? '✔' : currentStep === step.id ? '►' : '○' }}
+            </span>
+            <span>{{ step.label }}</span>
+          </div>
+
+          <!-- user chip at bottom of sidebar -->
+          <div v-if="auth.isLoggedIn" class="w98-sidebar__user">
+            <img
+              v-if="auth.user?.avatar_url"
+              :src="auth.user.avatar_url"
+              class="w98-sidebar__avatar"
             />
-            <div v-else-if="currentStep === step.id" class="wiz-dot wiz-dot--active" />
-            <div v-else class="wiz-dot wiz-dot--idle" />
+            <span class="w98-sidebar__username">
+              {{ auth.user?.login || auth.user?.username }}
+            </span>
           </div>
-          <div class="wiz-step__text">{{ step.label }}</div>
         </div>
-      </nav>
 
-      <!-- Content pane -->
-      <main class="wiz-content">
-        <router-view />
-      </main>
-    </div>
+        <!-- Right content pane -->
+        <div class="w98-content">
+          <router-view />
+        </div>
+
+      </div>
+
+      <!-- ── Footer / button bar ───────────────────────────────── -->
+      <div class="w98-footer">
+        <!-- classic Win98 two-line separator -->
+        <div class="w98-sep" />
+
+        <div class="w98-footer__inner">
+          <div class="w98-footer__status">
+            Step {{ currentStep }} of {{ steps.length }}
+            <template v-if="auth.isLoggedIn">
+              &nbsp;·&nbsp;
+              <button class="w98-link-btn" @click="logout">Sign out</button>
+            </template>
+          </div>
+
+          <div class="w98-footer__nav">
+            <button
+              v-if="nav.onBack"
+              class="w98-btn"
+              @click="nav.onBack"
+            >{{ nav.backLabel }}</button>
+
+            <button
+              v-if="nav.onNext"
+              class="w98-btn w98-btn--primary"
+              :disabled="nav.nextDisabled"
+              @click="nav.onNext"
+            >{{ nav.nextLabel }}</button>
 
-    <!-- ── Footer ─────────────────────────────────────────────────── -->
-    <footer class="wiz-footer">
-      git-extract &copy; {{ year }}
-    </footer>
+            <div class="w98-btn-sep" />
+
+            <button class="w98-btn" @click="logout">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
   </div>
 </template>
 
@@ -76,14 +104,15 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth.js'
+import { provideWizardNav } from '../composables/useWizardNav.js'
 
-const auth = useAuthStore()
+const auth  = useAuthStore()
 const route = useRoute()
 const router = useRouter()
-const year = new Date().getFullYear()
+const nav   = provideWizardNav()
 
 const steps = [
-  { id: 1, label: 'Sign In' },
+  { id: 1, label: 'Welcome' },
   { id: 2, label: 'Select Repository' },
   { id: 3, label: 'Configure' },
   { id: 4, label: 'Extract' },
@@ -104,152 +133,306 @@ function logout() {
 </script>
 
 <style lang="scss">
-/* ── Shell ─────────────────────────────────────────────────────── */
-.wiz-shell {
+/* ── Fonts ────────────────────────────────────────────────────── */
+* { font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif; }
+
+/* ── Desktop ──────────────────────────────────────────────────── */
+.w98-desktop {
+  position: fixed;
+  inset: 0;
+  background: #008080;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Window ───────────────────────────────────────────────────── */
+.w98-window {
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-  font-family: 'Segoe UI', Roboto, sans-serif;
+  width: min(860px, 98vw);
+  height: min(560px, 96vh);
+  background: #c0c0c0;
+
+  /* classic Win98 raised window border */
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #dfdfdf;
 }
 
-/* ── Header ────────────────────────────────────────────────────── */
-.wiz-header {
+/* ── Title bar ────────────────────────────────────────────────── */
+.w98-titlebar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 64px;
-  background: $primary;
-  color: #fff;
+  gap: 4px;
+  padding: 3px 4px 3px 6px;
+  background: linear-gradient(to right, $primary 0%, lighten($primary, 18%) 100%);
   flex-shrink: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-  z-index: 10;
+  user-select: none;
 
-  &__brand {
-    display: flex;
-    align-items: center;
-  }
-
-  &__title {
-    font-size: 18px;
-    font-weight: 700;
-    letter-spacing: 0.3px;
+  &__icon {
+    font-size: 12px;
+    color: #fff;
   }
 
-  &__sub {
+  &__text {
+    flex: 1;
     font-size: 11px;
-    opacity: 0.65;
-    margin-top: 1px;
+    font-weight: 700;
+    color: #fff;
   }
 
-  &__user {
+  &__controls {
     display: flex;
-    align-items: center;
-    font-size: 13px;
-    color: #fff;
+    gap: 2px;
   }
+}
 
-  &__avatar {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
+.w98-chrome-btn {
+  width: 16px;
+  height: 14px;
+  background: #c0c0c0;
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  color: #000;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #dfdfdf;
+
+  &--close { margin-left: 2px; }
 }
 
-/* ── Body ──────────────────────────────────────────────────────── */
-.wiz-body {
+/* ── Body ─────────────────────────────────────────────────────── */
+.w98-body {
   display: flex;
   flex: 1;
   min-height: 0;
+  margin: 3px;
+  gap: 3px;
 }
 
-/* ── Step nav ──────────────────────────────────────────────────── */
-.wiz-nav {
-  width: 200px;
+/* ── Sidebar ──────────────────────────────────────────────────── */
+.w98-sidebar {
+  width: 176px;
   flex-shrink: 0;
-  background: $dark;
-  padding: 24px 0;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  background: $primary;
+  padding: 20px 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
 
-  &__label {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 1.2px;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.35);
-    padding: 0 20px 12px;
+  /* inset border on right side */
+  box-shadow:
+    inset  1px  1px #ffffff44,
+    inset -1px -1px #00000044;
+
+  &__logo {
+    text-align: center;
+    font-size: 32px;
+    color: $secondary;
+    margin-bottom: 6px;
   }
-}
 
-.wiz-step {
-  display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  gap: 12px;
-  transition: background 0.15s;
+  &__product {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.5px;
+  }
 
-  &--active {
-    background: rgba(255, 255, 255, 0.07);
+  &__tagline {
+    text-align: center;
+    font-size: 10px;
+    color: rgba(255,255,255,0.55);
+    margin-top: 2px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
   }
 
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    flex-shrink: 0;
+  &__divider {
+    margin: 14px 16px;
+    border: none;
+    border-top: 1px solid rgba(255,255,255,0.15);
+    border-bottom: 1px solid rgba(0,0,0,0.3);
   }
 
-  &__text {
-    font-size: 13px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 0.45);
-    white-space: nowrap;
+  &__step {
+    display: flex;
+    align-items: flex-start;
+    gap: 7px;
+    padding: 5px 14px;
+    font-size: 11px;
+    color: rgba(255,255,255,0.45);
+    line-height: 1.3;
 
-    .wiz-step--active & {
+    &--active {
       color: #fff;
-      font-weight: 600;
+      font-weight: 700;
+      background: rgba(255,255,255,0.08);
     }
 
-    .wiz-step--done & {
-      color: rgba(255, 255, 255, 0.6);
+    &--done {
+      color: $secondary;
     }
   }
-}
 
-.wiz-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+  &__arrow {
+    flex-shrink: 0;
+    font-size: 10px;
+    margin-top: 1px;
+  }
 
-  &--active {
-    background: $secondary;
-    box-shadow: 0 0 0 3px rgba(46, 168, 78, 0.25);
+  &__user {
+    margin-top: auto;
+    padding: 10px 14px 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border-top: 1px solid rgba(255,255,255,0.12);
   }
 
-  &--idle {
-    border: 2px solid rgba(255, 255, 255, 0.2);
+  &__avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    object-fit: cover;
+  }
+
+  &__username {
+    font-size: 10px;
+    color: rgba(255,255,255,0.6);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
-/* ── Content ───────────────────────────────────────────────────── */
-.wiz-content {
+/* ── Content pane ─────────────────────────────────────────────── */
+.w98-content {
   flex: 1;
   overflow-y: auto;
   background: #fff;
+  /* inset border */
+  box-shadow:
+    inset  1px  1px #808080,
+    inset -1px -1px #dfdfdf,
+    inset  2px  2px #0a0a0a,
+    inset -2px -2px #ffffff;
 }
 
-/* ── Footer ────────────────────────────────────────────────────── */
-.wiz-footer {
+/* ── Footer ───────────────────────────────────────────────────── */
+.w98-footer {
   flex-shrink: 0;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 24px;
-  background: #e4e4e4;
-  border-top: 1px solid #c0c0c0;
+  padding: 0 4px 4px;
+}
+
+.w98-sep {
+  height: 0;
+  margin: 0 0 4px;
+  border-top: 1px solid #808080;
+  border-bottom: 1px solid #fff;
+}
+
+.w98-footer__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.w98-footer__status {
+  font-size: 11px;
+  color: #444;
+  padding-left: 4px;
+}
+
+.w98-footer__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.w98-btn-sep {
+  width: 1px;
+  height: 20px;
+  background: #808080;
+  margin: 0 4px;
+  box-shadow: 1px 0 #fff;
+}
+
+/* ── Win98 buttons ────────────────────────────────────────────── */
+.w98-btn {
+  min-width: 75px;
+  height: 23px;
+  padding: 0 10px;
+  background: #c0c0c0;
+  color: #000;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 11px;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #dfdfdf;
+
+  &:active:not(:disabled) {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #dfdfdf,
+      inset  2px  2px #808080;
+    padding: 1px 9px 0 11px;
+  }
+
+  &:disabled {
+    color: #808080;
+    cursor: default;
+    text-shadow: 1px 1px #fff;
+  }
+
+  &--primary {
+    /* keep Win98 shape but brand color */
+    background: $primary;
+    color: #fff;
+    font-weight: 700;
+    box-shadow:
+      inset -1px -1px #000,
+      inset  1px  1px lighten($primary, 30%),
+      inset -2px -2px darken($primary, 10%),
+      inset  2px  2px lighten($primary, 15%);
+
+    &:active:not(:disabled) {
+      box-shadow:
+        inset -1px -1px lighten($primary, 30%),
+        inset  1px  1px #000,
+        inset -2px -2px lighten($primary, 15%),
+        inset  2px  2px darken($primary, 10%);
+      padding: 1px 9px 0 11px;
+    }
+  }
+}
+
+.w98-link-btn {
+  background: none;
+  border: none;
+  color: $secondary;
   font-size: 11px;
-  color: #666;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  font-family: inherit;
 }
 </style>
diff --git a/frontend/src/pages/ExtractPage.vue b/frontend/src/pages/ExtractPage.vue
index ebd6423..3812bd1 100644
--- a/frontend/src/pages/ExtractPage.vue
+++ b/frontend/src/pages/ExtractPage.vue
@@ -1,26 +1,32 @@
 <template>
   <div class="wiz-page">
-    <!-- ── No source selected ──────────────────────────────────── -->
+
+    <!-- ── No source ──────────────────────────────────────────── -->
     <template v-if="!source">
       <div class="wiz-page__head">
-        <div class="wiz-page__step-label">Step 3 of 3</div>
-        <h1 class="wiz-page__title">Configure Extraction</h1>
-        <p class="wiz-page__desc">No repository selected yet.</p>
+        <div class="wiz-page__head-icon">⚙</div>
+        <div class="wiz-page__head-text">
+          <div class="wiz-page__step-label">Step 3 of 3</div>
+          <h1 class="wiz-page__title">Configure Extraction</h1>
+          <p class="wiz-page__desc">No repository selected.</p>
+        </div>
       </div>
       <div class="wiz-page__body">
-        <q-btn flat icon="arrow_back" label="Go back and pick a repository" color="primary" to="/repos" />
+        <p style="font-size:12px">Please go back and select a source repository first.</p>
       </div>
     </template>
 
-    <!-- ── Post-submit: Extraction running ───────────────────────── -->
+    <!-- ── Extracting ────────────────────────────────────────── -->
     <template v-else-if="submitted">
       <div class="wiz-page__head">
-        <div class="wiz-page__step-label">Step 3 of 3</div>
-        <h1 class="wiz-page__title">Extracting…</h1>
-        <p class="wiz-page__desc">
-          <strong>{{ source.fullName }}</strong> &rarr;
-          <strong>{{ store.selectedTarget?.fullName }}</strong>
-        </p>
+        <div class="wiz-page__head-icon">🚀</div>
+        <div class="wiz-page__head-text">
+          <div class="wiz-page__step-label">Step 4 of 3</div>
+          <h1 class="wiz-page__title">Extracting…</h1>
+          <p class="wiz-page__desc">
+            {{ source.fullName }} → {{ store.selectedTarget?.fullName }}
+          </p>
+        </div>
       </div>
       <div class="wiz-page__body">
         <StatusPoller
@@ -29,142 +35,116 @@
           :run-url="runUrl"
           :target-repo-url="targetRepoUrl"
         />
-        <q-banner v-else rounded class="bg-positive text-white">
-          <template #avatar><q-icon name="check_circle" /></template>
-          Extraction job submitted.
-        </q-banner>
-
-        <div class="q-mt-lg">
-          <q-btn flat icon="arrow_back" label="Start a new extraction" color="primary" @click="reset" />
+        <div v-else class="w98-panel" style="max-width:400px">
+          <div class="w98-panel__body" style="font-size:12px">
+            ✔ Extraction job submitted.
+          </div>
         </div>
       </div>
     </template>
 
-    <!-- ── Configure ──────────────────────────────────────────────── -->
+    <!-- ── Configure ─────────────────────────────────────────── -->
     <template v-else>
       <div class="wiz-page__head">
-        <div class="wiz-page__step-label">Step 3 of 3</div>
-        <h1 class="wiz-page__title">Configure Extraction</h1>
-        <p class="wiz-page__desc">
-          Pick a source folder, choose the target repository and branch, then click
-          <strong>Extract &amp; Push</strong>.
-        </p>
+        <div class="wiz-page__head-icon">⚙</div>
+        <div class="wiz-page__head-text">
+          <div class="wiz-page__step-label">Step 3 of 3</div>
+          <h1 class="wiz-page__title">Configure Extraction</h1>
+          <p class="wiz-page__desc">
+            Select a source folder, choose the destination, then click
+            <strong>Extract &amp; Push</strong>.
+          </p>
+        </div>
       </div>
 
       <div class="wiz-page__body">
-        <!-- Source repo + branch row -->
-        <div class="cfg-group q-mb-lg">
-          <div class="cfg-group__label">Source</div>
-          <div class="row items-center q-gutter-sm">
-            <div class="text-weight-medium text-primary">{{ source.fullName }}</div>
-            <q-select
-              v-model="sourceBranch"
-              :options="sourceBranches"
-              dense
-              outlined
-              style="min-width: 160px"
-              @update:model-value="loadTree"
-            />
-          </div>
+        <!-- Source repo + branch -->
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+          <span class="w98-field-label" style="margin:0">Source:</span>
+          <span style="font-size:12px;font-weight:700;color:#1e2e4a">{{ source.fullName }}</span>
+          <select v-model="sourceBranch" class="w98-select" @change="loadTree">
+            <option v-for="b in sourceBranches" :key="b" :value="b">{{ b }}</option>
+          </select>
         </div>
 
-        <div class="cfg-columns">
-          <!-- Left: folder tree -->
-          <div class="cfg-panel">
-            <div class="cfg-panel__head">
-              <q-icon name="folder_open" size="16px" class="q-mr-xs" />
-              Source folder
-            </div>
-            <div class="cfg-panel__body">
-              <div v-if="treeLoading" class="flex flex-center q-py-md">
-                <q-spinner color="primary" size="32px" />
-              </div>
-              <FolderTree
-                v-else
-                v-model="store.sourcePath"
-                :items="store.sourceTree"
-              />
-              <div v-if="!treeLoading && !store.sourceTree.length" class="text-caption text-grey q-pa-sm">
-                No directories found in this branch.
+        <!-- Two-panel grid -->
+        <div class="cfg-grid">
+          <!-- Folder tree -->
+          <div class="w98-panel">
+            <div class="w98-panel__head">📁 Source Folder</div>
+            <div class="w98-panel__body" style="min-height:180px;overflow-y:auto">
+              <div v-if="treeLoading" style="font-size:11px;color:#808080;padding:4px">Loading…</div>
+              <FolderTree v-else v-model="store.sourcePath" :items="store.sourceTree" />
+              <div v-if="!treeLoading && !store.sourceTree.length" style="font-size:11px;color:#808080">
+                No directories found.
               </div>
             </div>
           </div>
 
-          <!-- Right: target options -->
-          <div class="cfg-panel">
-            <div class="cfg-panel__head">
-              <q-icon name="drive_file_move" size="16px" class="q-mr-xs" />
-              Destination
-            </div>
-            <div class="cfg-panel__body q-gutter-md column">
-              <q-select
-                v-model="store.selectedTarget"
-                :options="store.list"
-                option-label="fullName"
-                option-value="id"
-                label="Target repository"
-                outlined
-                use-input
-                input-debounce="300"
-                @filter="filterRepos"
-                @update:model-value="loadTargetBranches"
-              />
-              <q-select
-                v-model="targetBranch"
-                :options="targetBranches"
-                label="Target branch"
-                outlined
-                dense
-              />
-              <q-input
-                v-model="store.targetPath"
-                label="Destination path inside target repo"
-                outlined
-                dense
-              />
+          <!-- Destination -->
+          <div class="w98-panel">
+            <div class="w98-panel__head">📂 Destination</div>
+            <div class="w98-panel__body">
+              <div class="cfg-field">
+                <label class="w98-field-label">Target repository:</label>
+                <q-select
+                  v-model="store.selectedTarget"
+                  :options="store.list"
+                  option-label="fullName"
+                  option-value="id"
+                  outlined
+                  dense
+                  use-input
+                  input-debounce="300"
+                  @filter="filterRepos"
+                  @update:model-value="loadTargetBranches"
+                />
+              </div>
+              <div class="cfg-field">
+                <label class="w98-field-label">Target branch:</label>
+                <select v-model="targetBranch" class="w98-select w98-select--full">
+                  <option v-for="b in targetBranches" :key="b" :value="b">{{ b }}</option>
+                </select>
+              </div>
+              <div class="cfg-field">
+                <label class="w98-field-label">Destination path:</label>
+                <input v-model="store.targetPath" class="w98-input-full" />
+              </div>
             </div>
           </div>
         </div>
       </div>
-
-      <!-- Nav bar -->
-      <div class="wiz-page__nav">
-        <q-btn flat label="‹ Back" @click="$router.push('/repos')" />
-        <q-btn
-          color="primary"
-          icon-right="send"
-          label="Extract & Push"
-          :disable="!canSubmit"
-          :loading="submitting"
-          @click="submit"
-        />
-      </div>
     </template>
+
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useReposStore } from '../stores/repos.js'
 import { useAuthStore } from '../stores/auth.js'
 import { getBranches as getGhBranches, getTree as getGhTree } from '../services/github.js'
 import { getBranches as getGlBranches, getTree as getGlTree } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
 import FolderTree from '../components/FolderTree.vue'
 import StatusPoller from '../components/StatusPoller.vue'
 
-const store = useReposStore()
-const auth = useAuthStore()
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
 
-const source = computed(() => store.selectedSource)
-const sourceBranch = ref(source.value?.defaultBranch || '')
+const source        = computed(() => store.selectedSource)
+const sourceBranch  = ref(source.value?.defaultBranch || '')
 const sourceBranches = ref([])
-const targetBranch = ref('')
+const targetBranch  = ref('')
 const targetBranches = ref([])
-const treeLoading = ref(false)
-const submitting = ref(false)
-const submitted = ref(false)
-const runId = ref('')
-const runUrl = ref('')
+const treeLoading   = ref(false)
+const submitting    = ref(false)
+const submitted     = ref(false)
+const runId         = ref('')
+const runUrl        = ref('')
 
 const canSubmit = computed(
   () => !!store.sourcePath && !!store.selectedTarget && !!targetBranch.value,
@@ -177,16 +157,42 @@ const targetRepoUrl = computed(() => {
 })
 
 onMounted(async () => {
+  updateNav()
   if (!source.value) return
   await loadSourceBranches()
   await loadTree()
 })
 
+watch([canSubmit, submitted, source], updateNav)
+
+function updateNav() {
+  if (!source.value) {
+    nav.value = {
+      backLabel: '< Back', nextLabel: 'Next >', nextDisabled: true,
+      onBack: () => router.push('/repos'), onNext: null,
+    }
+    return
+  }
+  if (submitted.value) {
+    nav.value = {
+      backLabel: '← Start over', nextLabel: 'Finish', nextDisabled: false,
+      onBack: () => reset(), onNext: () => router.push('/repos'),
+    }
+    return
+  }
+  nav.value = {
+    backLabel: '< Back',
+    nextLabel: submitting.value ? 'Extracting…' : 'Extract && Push',
+    nextDisabled: !canSubmit.value || submitting.value,
+    onBack: () => router.push('/repos'),
+    onNext: () => submit(),
+  }
+}
+
 async function loadSourceBranches() {
-  const data =
-    auth.provider === 'github'
-      ? await getGhBranches(auth.token, source.value.owner, source.value.name)
-      : await getGlBranches(auth.token, auth.gitlabHost, source.value.id)
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, source.value.owner, source.value.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, source.value.id)
   if (!data.error) {
     sourceBranches.value = data.map((b) => b.name)
     if (!sourceBranch.value) sourceBranch.value = sourceBranches.value[0] || ''
@@ -217,10 +223,9 @@ async function loadTargetBranches() {
   if (!store.selectedTarget) return
   targetBranch.value = ''
   targetBranches.value = []
-  const data =
-    auth.provider === 'github'
-      ? await getGhBranches(auth.token, store.selectedTarget.owner, store.selectedTarget.name)
-      : await getGlBranches(auth.token, auth.gitlabHost, store.selectedTarget.id)
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, store.selectedTarget.owner, store.selectedTarget.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, store.selectedTarget.id)
   if (!data.error) {
     targetBranches.value = data.map((b) => b.name)
     targetBranch.value = store.selectedTarget.defaultBranch || targetBranches.value[0] || 'main'
@@ -228,15 +233,13 @@ async function loadTargetBranches() {
 }
 
 function filterRepos(val, update) {
-  update(() => {
-    store.search = val
-  })
+  update(() => { store.search = val })
 }
 
 async function submit() {
   submitting.value = true
-  const base =
-    auth.provider === 'github' ? 'https://github.com' : `https://${auth.gitlabHost}`
+  updateNav()
+  const base = auth.provider === 'github' ? 'https://github.com' : `https://${auth.gitlabHost}`
   const res = await fetch(`${process.env.WORKER_URL}/extract`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -263,52 +266,56 @@ function reset() {
   runUrl.value = ''
   store.sourcePath = ''
   store.selectedTarget = null
+  router.push('/repos')
 }
 </script>
 
 <style lang="scss" scoped>
-.cfg-group {
-  &__label {
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.8px;
-    text-transform: uppercase;
-    color: #888;
-    margin-bottom: 6px;
-  }
-}
-
-.cfg-columns {
+.cfg-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  gap: 8px;
 
-  @media (max-width: 680px) {
+  @media (max-width: 600px) {
     grid-template-columns: 1fr;
   }
 }
 
-.cfg-panel {
-  border: 1px solid #d8d8d8;
-  border-radius: 3px;
-  overflow: hidden;
+.cfg-field {
+  margin-bottom: 10px;
+  &:last-child { margin-bottom: 0; }
+}
+
+.w98-select {
+  height: 21px;
+  padding: 0 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #dfdfdf;
+  background: #fff;
+  cursor: pointer;
 
-  &__head {
-    display: flex;
-    align-items: center;
-    padding: 8px 14px;
-    background: #f0f0f0;
-    border-bottom: 1px solid #d8d8d8;
-    font-size: 12px;
-    font-weight: 600;
-    color: $primary;
-    text-transform: uppercase;
-    letter-spacing: 0.6px;
-  }
+  &--full { width: 100%; }
+}
 
-  &__body {
-    padding: 12px 14px;
-    min-height: 120px;
-  }
+.w98-input-full {
+  width: 100%;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #dfdfdf;
+  background: #fff;
+  box-sizing: border-box;
 }
 </style>
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index de50743..e5e06ff 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -1,103 +1,89 @@
 <template>
   <div class="wiz-page">
     <div class="wiz-page__head">
-      <div class="wiz-page__step-label">Step 1 of 3</div>
-      <h1 class="wiz-page__title">Sign In</h1>
-      <p class="wiz-page__desc">
-        Connect your account to browse repositories and run extractions.
-      </p>
+      <div class="wiz-page__head-icon">⎇</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 1 of 3</div>
+        <h1 class="wiz-page__title">Welcome to git-extract Setup</h1>
+        <p class="wiz-page__desc">Sign in to get started.</p>
+      </div>
     </div>
 
     <div class="wiz-page__body">
-      <!-- Tool description -->
-      <div class="tool-intro q-mb-xl">
-        <div class="tool-intro__headline">What is git-extract?</div>
-        <p class="tool-intro__text">
+      <!-- What is this tool? -->
+      <div class="intro-box q-mb-md">
+        <div class="intro-box__title">What does git-extract do?</div>
+        <p class="intro-box__text">
           <strong>git-extract</strong> splits a subdirectory out of any Git repository into a
           brand-new repository — keeping the <em>complete commit history</em> for that path.
           No manual rebasing, no lost commits.
         </p>
-        <div class="tool-intro__steps">
-          <div class="tool-intro__step">
-            <div class="tool-intro__step-num">1</div>
-            <div>
-              <div class="tool-intro__step-title">Sign in</div>
-              <div class="tool-intro__step-desc">Connect your GitHub or GitLab account.</div>
-            </div>
-          </div>
-          <div class="tool-intro__step">
-            <div class="tool-intro__step-num">2</div>
-            <div>
-              <div class="tool-intro__step-title">Select a source repository</div>
-              <div class="tool-intro__step-desc">Pick the repo that contains the path you want to extract.</div>
-            </div>
-          </div>
-          <div class="tool-intro__step">
-            <div class="tool-intro__step-num">3</div>
-            <div>
-              <div class="tool-intro__step-title">Configure &amp; extract</div>
-              <div class="tool-intro__step-desc">
-                Choose the source folder, the target repository and branch, then click
-                <strong>Extract &amp; Push</strong>. A GitHub Actions job rewrites history and
-                pushes the result.
-              </div>
-            </div>
-          </div>
-        </div>
+        <table class="intro-steps">
+          <tr>
+            <td class="intro-steps__num">1.</td>
+            <td><strong>Sign in</strong> — connect your GitHub or GitLab account.</td>
+          </tr>
+          <tr>
+            <td class="intro-steps__num">2.</td>
+            <td><strong>Select a source repository</strong> — pick the repo containing the path to extract.</td>
+          </tr>
+          <tr>
+            <td class="intro-steps__num">3.</td>
+            <td><strong>Configure &amp; extract</strong> — choose the source folder, target repo and branch, then click <strong>Extract &amp; Push</strong>. A GitHub Actions job rewrites history and pushes the result.</td>
+          </tr>
+        </table>
       </div>
 
-      <q-banner v-if="errorMessage" rounded class="bg-negative text-white q-mb-lg">
+      <q-banner v-if="errorMessage" class="w98-banner w98-banner--error q-mb-sm">
         {{ errorMessage }}
       </q-banner>
 
-      <div class="login-providers">
-        <!-- GitHub -->
-        <div class="provider-row" @click="loginGithub">
-          <q-icon name="fab fa-github" size="32px" class="provider-row__icon" />
-          <div class="provider-row__body">
-            <div class="provider-row__name">Sign in with GitHub</div>
-            <div class="provider-row__hint">OAuth — public &amp; private repos</div>
-          </div>
-          <q-icon name="chevron_right" size="20px" color="grey-5" />
-        </div>
+      <!-- Provider buttons -->
+      <div class="w98-field-label">Sign in with:</div>
 
-        <div class="provider-sep">or</div>
-
-        <!-- GitLab host input -->
-        <div class="q-mb-sm">
-          <q-input
-            v-model="gitlabHost"
-            outlined
-            dense
-            label="GitLab host"
-            prefix="https://"
-            hint="Change only for self-hosted GitLab instances"
-          />
+      <div class="w98-list" style="max-width: 400px">
+        <div class="w98-list-row" @click="loginGithub">
+          <q-icon name="fab fa-github" size="18px" />
+          <span class="w98-list-row__name">GitHub</span>
+          <span class="w98-list-row__meta">OAuth · public &amp; private repos</span>
         </div>
+        <div class="w98-list-row" @click="loginGitlab">
+          <q-icon name="fab fa-gitlab" size="18px" color="orange" />
+          <span class="w98-list-row__name">GitLab</span>
+          <span class="w98-list-row__meta">PKCE · gitlab.com or self-hosted</span>
+        </div>
+      </div>
 
-        <!-- GitLab -->
-        <div class="provider-row" @click="loginGitlab">
-          <q-icon name="fab fa-gitlab" size="32px" color="orange" class="provider-row__icon" />
-          <div class="provider-row__body">
-            <div class="provider-row__name">Sign in with GitLab</div>
-            <div class="provider-row__hint">PKCE — gitlab.com or self-hosted</div>
-          </div>
-          <q-icon name="chevron_right" size="20px" color="grey-5" />
+      <div class="q-mt-sm" style="max-width: 400px">
+        <div class="w98-field-label">GitLab host:</div>
+        <input
+          v-model="gitlabHost"
+          class="w98-input"
+          placeholder="gitlab.com"
+        />
+        <div style="font-size:10px;color:#808080;margin-top:2px">
+          Change only for self-hosted GitLab instances.
         </div>
       </div>
     </div>
-    <!-- no footer nav: user advances by authenticating -->
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { startGitlabLogin } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
 
 const route = useRoute()
+const nav = useWizardNav()
 const gitlabHost = ref('gitlab.com')
 
+// No Back/Next on welcome — user advances by authenticating
+onMounted(() => {
+  nav.value = { onBack: null, onNext: null, backLabel: '< Back', nextLabel: 'Next >', nextDisabled: false }
+})
+
 const errorMessage = computed(() => {
   if (!route.query.error) return null
   const map = {
@@ -121,117 +107,69 @@ async function loginGitlab() {
 </script>
 
 <style lang="scss" scoped>
-.tool-intro {
-  max-width: 560px;
-  padding: 20px 24px;
-  border: 1px solid #d8d8d8;
-  border-left: 4px solid $secondary;
-  border-radius: 3px;
-  background: #f8fdf9;
-
-  &__headline {
-    font-size: 13px;
+.intro-box {
+  max-width: 500px;
+  padding: 10px 12px;
+  background: #fffff0;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+
+  &__title {
+    font-size: 12px;
     font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
     color: $primary;
-    margin-bottom: 8px;
+    margin-bottom: 5px;
   }
 
   &__text {
-    font-size: 13px;
-    color: #444;
-    margin: 0 0 16px;
-    line-height: 1.6;
+    font-size: 11px;
+    color: #333;
+    margin: 0 0 8px;
+    line-height: 1.5;
   }
+}
 
-  &__steps {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+.intro-steps {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 11px;
 
-  &__step {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-  }
+  td { padding: 2px 4px; vertical-align: top; }
 
-  &__step-num {
-    flex-shrink: 0;
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background: $secondary;
-    color: #fff;
-    font-size: 12px;
+  &__num {
     font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 1px;
-  }
-
-  &__step-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: $primary;
-  }
-
-  &__step-desc {
-    font-size: 12px;
-    color: #666;
-    margin-top: 1px;
-    line-height: 1.5;
+    color: $secondary;
+    white-space: nowrap;
+    padding-right: 6px;
   }
 }
 
-.login-providers {
-  max-width: 460px;
-}
-
-.provider-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 14px 18px;
-  border: 1px solid #d4d4d4;
-  border-radius: 3px;
-  cursor: pointer;
+.w98-input {
+  width: 100%;
+  max-width: 400px;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #dfdfdf;
   background: #fff;
-  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
-
-  &:hover {
-    border-color: $primary;
-    background: #f0f4fa;
-    box-shadow: 0 1px 4px rgba(30, 46, 74, 0.12);
-  }
-
-  &__icon {
-    flex-shrink: 0;
-  }
+  box-sizing: border-box;
+}
 
-  &__body {
-    flex: 1;
-  }
+.w98-banner {
+  font-size: 11px;
+  padding: 6px 10px;
+  border: 2px solid;
 
-  &__name {
-    font-size: 14px;
-    font-weight: 600;
-    color: $primary;
+  &--error {
+    background: #ffeeee;
+    border-color: #c10015;
+    color: #c10015;
   }
-
-  &__hint {
-    font-size: 12px;
-    color: #777;
-    margin-top: 2px;
-  }
-}
-
-.provider-sep {
-  text-align: center;
-  color: #bbb;
-  font-size: 12px;
-  margin: 10px 0;
 }
 </style>
diff --git a/frontend/src/pages/ReposPage.vue b/frontend/src/pages/ReposPage.vue
index fca7f68..714dab4 100644
--- a/frontend/src/pages/ReposPage.vue
+++ b/frontend/src/pages/ReposPage.vue
@@ -1,85 +1,122 @@
 <template>
   <div class="wiz-page">
     <div class="wiz-page__head">
-      <div class="wiz-page__step-label">Step 2 of 3</div>
-      <h1 class="wiz-page__title">Select Source Repository</h1>
-      <p class="wiz-page__desc">
-        Choose the repository that contains the path you want to extract.
-        Click a row to proceed.
-      </p>
+      <div class="wiz-page__head-icon">🗄</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 2 of 3</div>
+        <h1 class="wiz-page__title">Select Source Repository</h1>
+        <p class="wiz-page__desc">
+          Double-click (or click) a repository to select it and proceed to configuration.
+        </p>
+      </div>
     </div>
 
     <div class="wiz-page__body">
       <!-- Filter -->
-      <q-input
-        v-model="store.search"
-        placeholder="Filter repositories…"
-        outlined
-        dense
-        clearable
-        class="q-mb-md"
-        style="max-width: 420px"
-      >
-        <template #prepend><q-icon name="search" /></template>
-      </q-input>
-
-      <!-- Repo list -->
-      <q-infinite-scroll @load="onLoad" :offset="200">
-        <div class="repo-list">
-          <div
-            v-for="repo in store.filtered"
-            :key="repo.id"
-            class="repo-row"
-            @click="selectRepo(repo)"
-          >
-            <q-icon
-              :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
-              :color="repo.provider === 'github' ? 'grey-8' : 'orange'"
-              size="20px"
-              class="repo-row__icon"
-            />
-            <div class="repo-row__body">
-              <div class="repo-row__name">{{ repo.fullName }}</div>
-              <div class="repo-row__meta">Updated {{ formatDate(repo.updatedAt) }}</div>
-            </div>
-            <q-icon name="chevron_right" size="18px" color="grey-4" />
-          </div>
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
+        <label class="w98-field-label" style="margin:0;white-space:nowrap">Filter:</label>
+        <input
+          v-model="store.search"
+          class="w98-filter-input"
+          placeholder="type to filter…"
+        />
+        <button v-if="store.search" class="w98-btn" style="min-width:auto;padding:0 8px" @click="store.search = ''">✕</button>
+      </div>
+
+      <!-- List view -->
+      <div class="repo-listview">
+        <!-- Header -->
+        <div class="repo-listview__header">
+          <div class="repo-listview__col repo-listview__col--icon" />
+          <div class="repo-listview__col repo-listview__col--name">Name</div>
+          <div class="repo-listview__col repo-listview__col--provider">Provider</div>
+          <div class="repo-listview__col repo-listview__col--updated">Last updated</div>
         </div>
 
-        <template #loading>
-          <div class="row justify-center q-my-md">
-            <q-spinner-dots size="36px" color="primary" />
+        <!-- Rows -->
+        <div class="repo-listview__body">
+          <q-infinite-scroll @load="onLoad" :offset="100">
+            <div
+              v-for="repo in store.filtered"
+              :key="repo.id"
+              class="repo-row"
+              :class="{ 'repo-row--selected': selected === repo.id }"
+              @click="selected = repo.id"
+              @dblclick="confirm(repo)"
+            >
+              <div class="repo-listview__col repo-listview__col--icon">
+                <q-icon
+                  :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
+                  size="14px"
+                />
+              </div>
+              <div class="repo-listview__col repo-listview__col--name">{{ repo.fullName }}</div>
+              <div class="repo-listview__col repo-listview__col--provider">{{ repo.provider }}</div>
+              <div class="repo-listview__col repo-listview__col--updated">{{ formatDate(repo.updatedAt) }}</div>
+            </div>
+
+            <template #loading>
+              <div style="text-align:center;padding:8px;font-size:11px;color:#808080">
+                Loading…
+              </div>
+            </template>
+          </q-infinite-scroll>
+
+          <div v-if="store.loading && !store.list.length" style="text-align:center;padding:16px;font-size:11px;color:#808080">
+            Loading repositories…
           </div>
-        </template>
-      </q-infinite-scroll>
 
-      <div v-if="store.loading && !store.list.length" class="row justify-center q-mt-xl">
-        <q-spinner-dots size="48px" color="primary" />
+          <div v-if="!store.loading && !store.filtered.length" style="text-align:center;padding:16px;font-size:11px;color:#808080">
+            No repositories found.
+          </div>
+        </div>
       </div>
 
-      <div v-if="!store.loading && !store.filtered.length" class="text-center text-grey q-mt-xl">
-        No repositories found.
+      <div style="font-size:10px;color:#808080;margin-top:4px">
+        {{ store.filtered.length }} item(s)
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useReposStore } from '../stores/repos.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
 
 const store = useReposStore()
 const router = useRouter()
-
-onMounted(() => store.loadRepos())
+const nav = useWizardNav()
+const selected = ref(null)
+
+onMounted(() => {
+  store.loadRepos()
+  updateNav()
+})
+
+watch(selected, updateNav)
+
+function updateNav() {
+  const repo = store.list.find((r) => r.id === selected.value) || null
+  nav.value = {
+    backLabel: '< Back',
+    nextLabel: 'Next >',
+    nextDisabled: !selected.value,
+    onBack: () => router.push('/login'),
+    onNext: selected.value
+      ? () => confirm(repo)
+      : null,
+  }
+}
 
 async function onLoad(index, done) {
   await store.loadMore()
   done(!store.hasMore)
 }
 
-function selectRepo(repo) {
+function confirm(repo) {
+  if (!repo) return
   store.selectSource(repo)
   router.push('/extract')
 }
@@ -90,53 +127,79 @@ function formatDate(iso) {
 </script>
 
 <style lang="scss" scoped>
-.repo-list {
-  max-width: 640px;
-  border: 1px solid #d8d8d8;
-  border-radius: 3px;
-  overflow: hidden;
+.w98-filter-input {
+  flex: 1;
+  max-width: 300px;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #dfdfdf;
+  background: #fff;
 }
 
-.repo-row {
+/* Win98 Explorer-style list view */
+.repo-listview {
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  height: 320px;
   display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 10px 16px;
-  border-bottom: 1px solid #ebebeb;
-  cursor: pointer;
+  flex-direction: column;
   background: #fff;
-  transition: background 0.1s;
-
-  &:last-child {
-    border-bottom: none;
-  }
 
-  &:hover {
-    background: #f0f4fa;
-  }
-
-  &__icon {
+  &__header {
+    display: flex;
+    background: #c0c0c0;
+    border-bottom: 1px solid #808080;
     flex-shrink: 0;
+
+    .repo-listview__col {
+      padding: 2px 6px;
+      font-size: 11px;
+      font-weight: 700;
+      border-right: 2px solid;
+      border-color: #fff #808080 #808080 #fff;
+      white-space: nowrap;
+    }
   }
 
   &__body {
     flex: 1;
-    min-width: 0;
+    overflow-y: auto;
   }
 
-  &__name {
-    font-size: 14px;
-    font-weight: 500;
-    color: $primary;
+  &__col {
+    padding: 3px 6px;
+    font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &--icon    { width: 24px; flex-shrink: 0; text-align: center; }
+    &--name    { flex: 1; min-width: 0; }
+    &--provider{ width: 72px; flex-shrink: 0; }
+    &--updated { width: 100px; flex-shrink: 0; }
   }
+}
 
-  &__meta {
-    font-size: 11px;
-    color: #999;
-    margin-top: 1px;
+.repo-row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #efefef;
+  cursor: default;
+
+  &:hover { background: #dde8f8; }
+
+  &--selected {
+    background: $primary !important;
+    color: #fff;
   }
+
+  &:last-child { border-bottom: none; }
 }
 </style>

From a5bda2489a0899d7df67b46daa45b2e0927dffb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 19:07:36 +0300
Subject: [PATCH 04/24] feat: new color palette + Welcome as step 1, Login as
 step 2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color palette (#011826 / #168C40 / #6BBF89 / #A7D9B8 / #F2F2F2):
- $primary   #011826  darkest navy  — desktop, title bar, sidebar, headings
- $secondary #168C40  forest green  — active step arrow, primary buttons, hover bg
- $accent    #6BBF89  sage green    — done-step checkmarks, link buttons
- $positive  #168C40  (same as secondary)
- $info      #6BBF89  (same as accent)
- Win98 chrome: #F2F2F2 replaces old #c0c0c0; hover highlight uses #A7D9B8

Step restructure (4 steps instead of 3):
- Step 1  /welcome  WelcomePage (new) — intro + overview, no auth required
- Step 2  /login    LoginPage — sign-in only, Back → /welcome
- Step 3  /repos    ReposPage — repository picker, Back → /login
- Step 4  /extract  ExtractPage — configure & extract, Back → /repos

Root / now redirects to /welcome; WelcomePage Next button skips to
/repos when already authenticated.
---
 frontend/src/css/app.scss              |  55 +++------
 frontend/src/css/quasar.variables.scss |  27 +++--
 frontend/src/layouts/WizardLayout.vue  | 162 ++++++++++---------------
 frontend/src/pages/ExtractPage.vue     |  12 +-
 frontend/src/pages/LoginPage.vue       | 122 +++++--------------
 frontend/src/pages/ReposPage.vue       |   8 +-
 frontend/src/pages/WelcomePage.vue     | 159 ++++++++++++++++++++++++
 frontend/src/router/routes.js          |   3 +-
 8 files changed, 292 insertions(+), 256 deletions(-)
 create mode 100644 frontend/src/pages/WelcomePage.vue

diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index ad7956e..dac10bd 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -1,6 +1,6 @@
 // app global css / scss goes here
 
-// ── Shared page chrome (used by every page inside WizardLayout) ────
+// ── Shared page chrome (inside WizardLayout) ───────────────────────
 
 .wiz-page {
   display: flex;
@@ -8,7 +8,7 @@
   height: 100%;
   font-size: 12px;
 
-  // Step title banner — matches Win98 dialog header style
+  // Header banner — Win98 dialog title area
   &__head {
     flex-shrink: 0;
     display: flex;
@@ -17,15 +17,10 @@
     padding: 14px 18px 12px;
     background: #fff;
     border-bottom: 2px solid;
-    border-color: #808080 #fff #fff #808080; // inset separator
-  }
-
-  &__head-icon {
-    font-size: 28px;
-    flex-shrink: 0;
-    margin-top: 2px;
+    border-color: #808080 #fff #fff #808080;
   }
 
+  &__head-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
   &__head-text { flex: 1; }
 
   &__step-label {
@@ -40,7 +35,7 @@
   &__title {
     font-size: 15px;
     font-weight: 700;
-    color: $primary;
+    color: $primary;     // #011826
     margin: 0 0 3px;
     line-height: 1.2;
   }
@@ -52,21 +47,16 @@
     line-height: 1.5;
   }
 
-  // Scrollable content
   &__body {
     flex: 1;
     overflow-y: auto;
     padding: 14px 18px;
   }
 
-  // Back / Next bar — Win98 buttons rendered by layout, this is a
-  // per-page override area for extra actions inside the content pane
-  &__nav {
-    display: none; // nav is in the window footer, not here
-  }
+  &__nav { display: none; } // nav lives in the window footer
 }
 
-// ── Win98 inset panel (used inside pages) ─────────────────────────
+// ── Win98 inset panel ─────────────────────────────────────────────
 .w98-panel {
   border: 2px solid;
   border-color: #808080 #fff #fff #808080;
@@ -74,10 +64,10 @@
 
   &__head {
     padding: 3px 8px;
-    background: #c0c0c0;
+    background: #F2F2F2;
     font-size: 11px;
     font-weight: 700;
-    color: #000;
+    color: $primary;
     border-bottom: 1px solid #808080;
     display: flex;
     align-items: center;
@@ -86,12 +76,10 @@
     letter-spacing: 0.5px;
   }
 
-  &__body {
-    padding: 10px;
-  }
+  &__body { padding: 10px; }
 }
 
-// ── Win98-style list rows (repos list, provider list) ─────────────
+// ── Win98 Explorer list ───────────────────────────────────────────
 .w98-list {
   border: 2px solid;
   border-color: #808080 #fff #fff #808080;
@@ -110,30 +98,17 @@
   &:last-child { border-bottom: none; }
 
   &:hover {
-    background: $primary;
+    background: $secondary; // #168C40
     color: #fff;
 
     .w98-list-row__meta { color: rgba(255,255,255,0.7); }
   }
 
-  &__name {
-    flex: 1;
-    font-size: 12px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-  }
-
-  &__meta {
-    font-size: 11px;
-    color: #808080;
-    flex-shrink: 0;
-  }
+  &__name  { flex: 1; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  &__meta  { font-size: 11px; color: #808080; flex-shrink: 0; }
 }
 
-// ── Win98 field group label ────────────────────────────────────────
+// ── Field label ───────────────────────────────────────────────────
 .w98-field-label {
   font-size: 11px;
   font-weight: 700;
diff --git a/frontend/src/css/quasar.variables.scss b/frontend/src/css/quasar.variables.scss
index 39df4d1..298c365 100644
--- a/frontend/src/css/quasar.variables.scss
+++ b/frontend/src/css/quasar.variables.scss
@@ -12,18 +12,21 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-// Brand colors derived from the git-extract organization logo:
-//   Navy  #1e2e4a  — browser window, git graph, wordmark
-//   Green #2ea84e  — arrow and folder icon
+// Brand palette
+//   #011826  darkest navy  — primary surfaces, title bar, sidebar
+//   #168C40  forest green  — actions, active step, success
+//   #6BBF89  sage green    — accent, hover, done steps
+//   #A7D9B8  pale green    — subtle highlights
+//   #F2F2F2  off-white     — window chrome, panel backgrounds
 
-$primary: #1e2e4a; // brand navy
-$secondary: #2ea84e; // brand green
-$accent: #4cc474; // lighter green (hover / highlight)
+$primary:   #011826; // darkest navy
+$secondary: #168C40; // forest green
+$accent:    #6BBF89; // sage green
 
-$dark: #1a2540; // deep navy for dark-mode surfaces
-$dark-page: #111b30; // near-black navy for dark-mode page background
+$dark:      #011826; // same as primary
+$dark-page: #010f18; // near-black for dark mode
 
-$positive: #28a745; // green — success (same family as brand green)
-$negative: #c10015; // red — error
-$info: #1799b5; // blue-teal — informational
-$warning: #f2c037; // amber — warning
+$positive:  #168C40; // green — success
+$negative:  #c10015; // red   — error
+$info:      #6BBF89; // sage  — informational
+$warning:   #f2c037; // amber — warning
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index 153936b..f67acab 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -1,7 +1,6 @@
 <template>
-  <!-- Classic Win98 desktop background -->
+  <!-- Win98-style desktop — dark navy instead of teal -->
   <div class="w98-desktop">
-    <!-- The "window" -->
     <div class="w98-window">
 
       <!-- ── Title bar ──────────────────────────────────────────── -->
@@ -41,7 +40,6 @@
             <span>{{ step.label }}</span>
           </div>
 
-          <!-- user chip at bottom of sidebar -->
           <div v-if="auth.isLoggedIn" class="w98-sidebar__user">
             <img
               v-if="auth.user?.avatar_url"
@@ -63,9 +61,7 @@
 
       <!-- ── Footer / button bar ───────────────────────────────── -->
       <div class="w98-footer">
-        <!-- classic Win98 two-line separator -->
         <div class="w98-sep" />
-
         <div class="w98-footer__inner">
           <div class="w98-footer__status">
             Step {{ currentStep }} of {{ steps.length }}
@@ -106,94 +102,84 @@ import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth.js'
 import { provideWizardNav } from '../composables/useWizardNav.js'
 
-const auth  = useAuthStore()
-const route = useRoute()
+const auth   = useAuthStore()
+const route  = useRoute()
 const router = useRouter()
-const nav   = provideWizardNav()
+const nav    = provideWizardNav()
 
 const steps = [
   { id: 1, label: 'Welcome' },
-  { id: 2, label: 'Select Repository' },
-  { id: 3, label: 'Configure' },
-  { id: 4, label: 'Extract' },
+  { id: 2, label: 'Sign In' },
+  { id: 3, label: 'Select Repository' },
+  { id: 4, label: 'Configure & Extract' },
 ]
 
 const currentStep = computed(() => {
   const p = route.path
-  if (p === '/login' || p.startsWith('/auth')) return 1
-  if (p === '/repos') return 2
-  if (p === '/extract') return route.query.done ? 4 : 3
+  if (p === '/' || p === '/welcome')      return 1
+  if (p === '/login' || p.startsWith('/auth')) return 2
+  if (p === '/repos')                     return 3
+  if (p === '/extract')                   return 4
   return 1
 })
 
 function logout() {
   auth.logout()
-  router.push('/login')
+  router.push('/welcome')
 }
 </script>
 
 <style lang="scss">
-/* ── Fonts ────────────────────────────────────────────────────── */
 * { font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif; }
 
-/* ── Desktop ──────────────────────────────────────────────────── */
+// ── Desktop ────────────────────────────────────────────────────
 .w98-desktop {
   position: fixed;
   inset: 0;
-  background: #008080;
+  background: $primary; // #011826 dark navy desktop
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/* ── Window ───────────────────────────────────────────────────── */
+// ── Window ─────────────────────────────────────────────────────
 .w98-window {
   display: flex;
   flex-direction: column;
   width: min(860px, 98vw);
   height: min(560px, 96vh);
-  background: #c0c0c0;
-
-  /* classic Win98 raised window border */
+  background: #F2F2F2;
   box-shadow:
     inset -1px -1px #0a0a0a,
     inset  1px  1px #ffffff,
     inset -2px -2px #808080,
-    inset  2px  2px #dfdfdf;
+    inset  2px  2px #e8e8e8;
 }
 
-/* ── Title bar ────────────────────────────────────────────────── */
+// ── Title bar ──────────────────────────────────────────────────
 .w98-titlebar {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 3px 4px 3px 6px;
-  background: linear-gradient(to right, $primary 0%, lighten($primary, 18%) 100%);
+  background: linear-gradient(to right, $primary 0%, #0d3a5c 100%);
   flex-shrink: 0;
   user-select: none;
 
-  &__icon {
-    font-size: 12px;
-    color: #fff;
-  }
-
+  &__icon { font-size: 12px; color: $accent; }
   &__text {
     flex: 1;
     font-size: 11px;
     font-weight: 700;
     color: #fff;
   }
-
-  &__controls {
-    display: flex;
-    gap: 2px;
-  }
+  &__controls { display: flex; gap: 2px; }
 }
 
 .w98-chrome-btn {
   width: 16px;
   height: 14px;
-  background: #c0c0c0;
+  background: #F2F2F2;
   font-size: 9px;
   font-weight: 700;
   display: flex;
@@ -205,12 +191,12 @@ function logout() {
     inset -1px -1px #0a0a0a,
     inset  1px  1px #ffffff,
     inset -2px -2px #808080,
-    inset  2px  2px #dfdfdf;
+    inset  2px  2px #e8e8e8;
 
   &--close { margin-left: 2px; }
 }
 
-/* ── Body ─────────────────────────────────────────────────────── */
+// ── Body ───────────────────────────────────────────────────────
 .w98-body {
   display: flex;
   flex: 1;
@@ -219,7 +205,7 @@ function logout() {
   gap: 3px;
 }
 
-/* ── Sidebar ──────────────────────────────────────────────────── */
+// ── Sidebar ────────────────────────────────────────────────────
 .w98-sidebar {
   width: 176px;
   flex-shrink: 0;
@@ -228,32 +214,16 @@ function logout() {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  position: relative;
-
-  /* inset border on right side */
   box-shadow:
-    inset  1px  1px #ffffff44,
-    inset -1px -1px #00000044;
-
-  &__logo {
-    text-align: center;
-    font-size: 32px;
-    color: $secondary;
-    margin-bottom: 6px;
-  }
-
-  &__product {
-    text-align: center;
-    font-size: 16px;
-    font-weight: 700;
-    color: #fff;
-    letter-spacing: 0.5px;
-  }
+    inset  1px  1px rgba(255,255,255,0.08),
+    inset -1px -1px rgba(0,0,0,0.3);
 
+  &__logo    { text-align: center; font-size: 32px; color: $secondary; margin-bottom: 6px; }
+  &__product { text-align: center; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
   &__tagline {
     text-align: center;
     font-size: 10px;
-    color: rgba(255,255,255,0.55);
+    color: rgba(255,255,255,0.45);
     margin-top: 2px;
     letter-spacing: 1px;
     text-transform: uppercase;
@@ -262,8 +232,8 @@ function logout() {
   &__divider {
     margin: 14px 16px;
     border: none;
-    border-top: 1px solid rgba(255,255,255,0.15);
-    border-bottom: 1px solid rgba(0,0,0,0.3);
+    border-top: 1px solid rgba(255,255,255,0.1);
+    border-bottom: 1px solid rgba(0,0,0,0.4);
   }
 
   &__step {
@@ -272,25 +242,18 @@ function logout() {
     gap: 7px;
     padding: 5px 14px;
     font-size: 11px;
-    color: rgba(255,255,255,0.45);
+    color: rgba(255,255,255,0.35);
     line-height: 1.3;
 
     &--active {
       color: #fff;
       font-weight: 700;
-      background: rgba(255,255,255,0.08);
-    }
-
-    &--done {
-      color: $secondary;
+      background: rgba(255,255,255,0.07);
     }
+    &--done { color: $accent; } // #6BBF89 sage green for done steps
   }
 
-  &__arrow {
-    flex-shrink: 0;
-    font-size: 10px;
-    margin-top: 1px;
-  }
+  &__arrow { flex-shrink: 0; font-size: 10px; margin-top: 1px; }
 
   &__user {
     margin-top: auto;
@@ -298,7 +261,7 @@ function logout() {
     display: flex;
     align-items: center;
     gap: 6px;
-    border-top: 1px solid rgba(255,255,255,0.12);
+    border-top: 1px solid rgba(255,255,255,0.1);
   }
 
   &__avatar {
@@ -310,31 +273,27 @@ function logout() {
 
   &__username {
     font-size: 10px;
-    color: rgba(255,255,255,0.6);
+    color: rgba(255,255,255,0.5);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 }
 
-/* ── Content pane ─────────────────────────────────────────────── */
+// ── Content pane ───────────────────────────────────────────────
 .w98-content {
   flex: 1;
   overflow-y: auto;
   background: #fff;
-  /* inset border */
   box-shadow:
     inset  1px  1px #808080,
-    inset -1px -1px #dfdfdf,
+    inset -1px -1px #e8e8e8,
     inset  2px  2px #0a0a0a,
     inset -2px -2px #ffffff;
 }
 
-/* ── Footer ───────────────────────────────────────────────────── */
-.w98-footer {
-  flex-shrink: 0;
-  padding: 0 4px 4px;
-}
+// ── Footer ─────────────────────────────────────────────────────
+.w98-footer { flex-shrink: 0; padding: 0 4px 4px; }
 
 .w98-sep {
   height: 0;
@@ -356,11 +315,7 @@ function logout() {
   padding-left: 4px;
 }
 
-.w98-footer__nav {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
+.w98-footer__nav { display: flex; align-items: center; gap: 4px; }
 
 .w98-btn-sep {
   width: 1px;
@@ -370,12 +325,12 @@ function logout() {
   box-shadow: 1px 0 #fff;
 }
 
-/* ── Win98 buttons ────────────────────────────────────────────── */
+// ── Win98 buttons ──────────────────────────────────────────────
 .w98-btn {
   min-width: 75px;
   height: 23px;
   padding: 0 10px;
-  background: #c0c0c0;
+  background: #F2F2F2;
   color: #000;
   font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
   font-size: 11px;
@@ -386,13 +341,13 @@ function logout() {
     inset -1px -1px #0a0a0a,
     inset  1px  1px #ffffff,
     inset -2px -2px #808080,
-    inset  2px  2px #dfdfdf;
+    inset  2px  2px #e8e8e8;
 
   &:active:not(:disabled) {
     box-shadow:
       inset -1px -1px #ffffff,
       inset  1px  1px #0a0a0a,
-      inset -2px -2px #dfdfdf,
+      inset -2px -2px #e8e8e8,
       inset  2px  2px #808080;
     padding: 1px 9px 0 11px;
   }
@@ -404,31 +359,36 @@ function logout() {
   }
 
   &--primary {
-    /* keep Win98 shape but brand color */
-    background: $primary;
+    background: $secondary; // #168C40 forest green
     color: #fff;
     font-weight: 700;
     box-shadow:
       inset -1px -1px #000,
-      inset  1px  1px lighten($primary, 30%),
-      inset -2px -2px darken($primary, 10%),
-      inset  2px  2px lighten($primary, 15%);
+      inset  1px  1px #6BBF89,
+      inset -2px -2px #0d5a28,
+      inset  2px  2px #2db85a;
 
     &:active:not(:disabled) {
       box-shadow:
-        inset -1px -1px lighten($primary, 30%),
+        inset -1px -1px #6BBF89,
         inset  1px  1px #000,
-        inset -2px -2px lighten($primary, 15%),
-        inset  2px  2px darken($primary, 10%);
+        inset -2px -2px #2db85a,
+        inset  2px  2px #0d5a28;
       padding: 1px 9px 0 11px;
     }
+
+    &:disabled {
+      background: #A7D9B8;
+      color: #6BBF89;
+      text-shadow: none;
+    }
   }
 }
 
 .w98-link-btn {
   background: none;
   border: none;
-  color: $secondary;
+  color: $accent; // #6BBF89
   font-size: 11px;
   cursor: pointer;
   padding: 0;
diff --git a/frontend/src/pages/ExtractPage.vue b/frontend/src/pages/ExtractPage.vue
index 3812bd1..9a73e4d 100644
--- a/frontend/src/pages/ExtractPage.vue
+++ b/frontend/src/pages/ExtractPage.vue
@@ -6,7 +6,7 @@
       <div class="wiz-page__head">
         <div class="wiz-page__head-icon">⚙</div>
         <div class="wiz-page__head-text">
-          <div class="wiz-page__step-label">Step 3 of 3</div>
+          <div class="wiz-page__step-label">Step 4 of 4</div>
           <h1 class="wiz-page__title">Configure Extraction</h1>
           <p class="wiz-page__desc">No repository selected.</p>
         </div>
@@ -21,7 +21,7 @@
       <div class="wiz-page__head">
         <div class="wiz-page__head-icon">🚀</div>
         <div class="wiz-page__head-text">
-          <div class="wiz-page__step-label">Step 4 of 3</div>
+          <div class="wiz-page__step-label">Step 4 of 4</div>
           <h1 class="wiz-page__title">Extracting…</h1>
           <p class="wiz-page__desc">
             {{ source.fullName }} → {{ store.selectedTarget?.fullName }}
@@ -48,7 +48,7 @@
       <div class="wiz-page__head">
         <div class="wiz-page__head-icon">⚙</div>
         <div class="wiz-page__head-text">
-          <div class="wiz-page__step-label">Step 3 of 3</div>
+          <div class="wiz-page__step-label">Step 4 of 4</div>
           <h1 class="wiz-page__title">Configure Extraction</h1>
           <p class="wiz-page__desc">
             Select a source folder, choose the destination, then click
@@ -61,7 +61,7 @@
         <!-- Source repo + branch -->
         <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
           <span class="w98-field-label" style="margin:0">Source:</span>
-          <span style="font-size:12px;font-weight:700;color:#1e2e4a">{{ source.fullName }}</span>
+          <span style="font-size:12px;font-weight:700;color:$primary">{{ source.fullName }}</span>
           <select v-model="sourceBranch" class="w98-select" @change="loadTree">
             <option v-for="b in sourceBranches" :key="b" :value="b">{{ b }}</option>
           </select>
@@ -296,7 +296,7 @@ function reset() {
     inset  1px  1px #0a0a0a,
     inset -1px -1px #ffffff,
     inset  2px  2px #808080,
-    inset -2px -2px #dfdfdf;
+    inset -2px -2px #e8e8e8;
   background: #fff;
   cursor: pointer;
 
@@ -314,7 +314,7 @@ function reset() {
     inset  1px  1px #0a0a0a,
     inset -1px -1px #ffffff,
     inset  2px  2px #808080,
-    inset -2px -2px #dfdfdf;
+    inset -2px -2px #e8e8e8;
   background: #fff;
   box-sizing: border-box;
 }
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index e5e06ff..b61d2be 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -1,54 +1,31 @@
 <template>
   <div class="wiz-page">
     <div class="wiz-page__head">
-      <div class="wiz-page__head-icon">⎇</div>
+      <div class="wiz-page__head-icon">🔑</div>
       <div class="wiz-page__head-text">
-        <div class="wiz-page__step-label">Step 1 of 3</div>
-        <h1 class="wiz-page__title">Welcome to git-extract Setup</h1>
-        <p class="wiz-page__desc">Sign in to get started.</p>
+        <div class="wiz-page__step-label">Step 2 of 4</div>
+        <h1 class="wiz-page__title">Sign In</h1>
+        <p class="wiz-page__desc">
+          Connect your account to browse repositories and run extractions.
+        </p>
       </div>
     </div>
 
     <div class="wiz-page__body">
-      <!-- What is this tool? -->
-      <div class="intro-box q-mb-md">
-        <div class="intro-box__title">What does git-extract do?</div>
-        <p class="intro-box__text">
-          <strong>git-extract</strong> splits a subdirectory out of any Git repository into a
-          brand-new repository — keeping the <em>complete commit history</em> for that path.
-          No manual rebasing, no lost commits.
-        </p>
-        <table class="intro-steps">
-          <tr>
-            <td class="intro-steps__num">1.</td>
-            <td><strong>Sign in</strong> — connect your GitHub or GitLab account.</td>
-          </tr>
-          <tr>
-            <td class="intro-steps__num">2.</td>
-            <td><strong>Select a source repository</strong> — pick the repo containing the path to extract.</td>
-          </tr>
-          <tr>
-            <td class="intro-steps__num">3.</td>
-            <td><strong>Configure &amp; extract</strong> — choose the source folder, target repo and branch, then click <strong>Extract &amp; Push</strong>. A GitHub Actions job rewrites history and pushes the result.</td>
-          </tr>
-        </table>
-      </div>
-
-      <q-banner v-if="errorMessage" class="w98-banner w98-banner--error q-mb-sm">
+      <q-banner v-if="errorMessage" class="login-error q-mb-sm">
         {{ errorMessage }}
       </q-banner>
 
-      <!-- Provider buttons -->
-      <div class="w98-field-label">Sign in with:</div>
+      <div class="w98-field-label">Select a provider:</div>
 
       <div class="w98-list" style="max-width: 400px">
         <div class="w98-list-row" @click="loginGithub">
-          <q-icon name="fab fa-github" size="18px" />
+          <q-icon name="fab fa-github" size="16px" />
           <span class="w98-list-row__name">GitHub</span>
           <span class="w98-list-row__meta">OAuth · public &amp; private repos</span>
         </div>
         <div class="w98-list-row" @click="loginGitlab">
-          <q-icon name="fab fa-gitlab" size="18px" color="orange" />
+          <q-icon name="fab fa-gitlab" size="16px" color="orange" />
           <span class="w98-list-row__name">GitLab</span>
           <span class="w98-list-row__meta">PKCE · gitlab.com or self-hosted</span>
         </div>
@@ -56,11 +33,7 @@
 
       <div class="q-mt-sm" style="max-width: 400px">
         <div class="w98-field-label">GitLab host:</div>
-        <input
-          v-model="gitlabHost"
-          class="w98-input"
-          placeholder="gitlab.com"
-        />
+        <input v-model="gitlabHost" class="w98-input" placeholder="gitlab.com" />
         <div style="font-size:10px;color:#808080;margin-top:2px">
           Change only for self-hosted GitLab instances.
         </div>
@@ -71,31 +44,37 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { startGitlabLogin } from '../services/gitlab.js'
 import { useWizardNav } from '../composables/useWizardNav.js'
 
-const route = useRoute()
-const nav = useWizardNav()
+const route  = useRoute()
+const router = useRouter()
+const nav    = useWizardNav()
 const gitlabHost = ref('gitlab.com')
 
-// No Back/Next on welcome — user advances by authenticating
 onMounted(() => {
-  nav.value = { onBack: null, onNext: null, backLabel: '< Back', nextLabel: 'Next >', nextDisabled: false }
+  nav.value = {
+    backLabel: '< Back',
+    nextLabel: 'Next >',
+    nextDisabled: true,     // user advances by clicking a provider
+    onBack: () => router.push('/welcome'),
+    onNext: null,
+  }
 })
 
 const errorMessage = computed(() => {
   if (!route.query.error) return null
   const map = {
     no_token: 'Authentication failed: no token received.',
-    no_code: 'Authentication failed: no code received.',
+    no_code:  'Authentication failed: no code received.',
   }
   return map[route.query.error] ?? `Authentication error: ${route.query.error}`
 })
 
 function loginGithub() {
   const workerUrl = process.env.WORKER_URL
-  const clientId = process.env.GITHUB_CLIENT_ID
+  const clientId  = process.env.GITHUB_CLIENT_ID
   const redirectUri = `${workerUrl}/auth/github/callback`
   const params = new URLSearchParams({ client_id: clientId, scope: 'repo user', redirect_uri: redirectUri })
   window.location.href = `https://github.com/login/oauth/authorize?${params}`
@@ -107,41 +86,12 @@ async function loginGitlab() {
 </script>
 
 <style lang="scss" scoped>
-.intro-box {
-  max-width: 500px;
-  padding: 10px 12px;
-  background: #fffff0;
-  border: 2px solid;
-  border-color: #808080 #fff #fff #808080;
-
-  &__title {
-    font-size: 12px;
-    font-weight: 700;
-    color: $primary;
-    margin-bottom: 5px;
-  }
-
-  &__text {
-    font-size: 11px;
-    color: #333;
-    margin: 0 0 8px;
-    line-height: 1.5;
-  }
-}
-
-.intro-steps {
-  border-collapse: collapse;
-  width: 100%;
+.login-error {
   font-size: 11px;
-
-  td { padding: 2px 4px; vertical-align: top; }
-
-  &__num {
-    font-weight: 700;
-    color: $secondary;
-    white-space: nowrap;
-    padding-right: 6px;
-  }
+  padding: 6px 10px;
+  border: 2px solid #c10015;
+  background: #ffeeee;
+  color: #c10015;
 }
 
 .w98-input {
@@ -156,20 +106,8 @@ async function loginGitlab() {
     inset  1px  1px #0a0a0a,
     inset -1px -1px #ffffff,
     inset  2px  2px #808080,
-    inset -2px -2px #dfdfdf;
+    inset -2px -2px #e8e8e8;
   background: #fff;
   box-sizing: border-box;
 }
-
-.w98-banner {
-  font-size: 11px;
-  padding: 6px 10px;
-  border: 2px solid;
-
-  &--error {
-    background: #ffeeee;
-    border-color: #c10015;
-    color: #c10015;
-  }
-}
 </style>
diff --git a/frontend/src/pages/ReposPage.vue b/frontend/src/pages/ReposPage.vue
index 714dab4..401f660 100644
--- a/frontend/src/pages/ReposPage.vue
+++ b/frontend/src/pages/ReposPage.vue
@@ -3,7 +3,7 @@
     <div class="wiz-page__head">
       <div class="wiz-page__head-icon">🗄</div>
       <div class="wiz-page__head-text">
-        <div class="wiz-page__step-label">Step 2 of 3</div>
+        <div class="wiz-page__step-label">Step 3 of 4</div>
         <h1 class="wiz-page__title">Select Source Repository</h1>
         <p class="wiz-page__desc">
           Double-click (or click) a repository to select it and proceed to configuration.
@@ -139,7 +139,7 @@ function formatDate(iso) {
     inset  1px  1px #0a0a0a,
     inset -1px -1px #ffffff,
     inset  2px  2px #808080,
-    inset -2px -2px #dfdfdf;
+    inset -2px -2px #e8e8e8;
   background: #fff;
 }
 
@@ -154,7 +154,7 @@ function formatDate(iso) {
 
   &__header {
     display: flex;
-    background: #c0c0c0;
+    background: #F2F2F2;
     border-bottom: 1px solid #808080;
     flex-shrink: 0;
 
@@ -193,7 +193,7 @@ function formatDate(iso) {
   border-bottom: 1px solid #efefef;
   cursor: default;
 
-  &:hover { background: #dde8f8; }
+  &:hover { background: #A7D9B8; }
 
   &--selected {
     background: $primary !important;
diff --git a/frontend/src/pages/WelcomePage.vue b/frontend/src/pages/WelcomePage.vue
new file mode 100644
index 0000000..cf6046f
--- /dev/null
+++ b/frontend/src/pages/WelcomePage.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">⎇</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 1 of 4</div>
+        <h1 class="wiz-page__title">Welcome to git-extract Setup</h1>
+        <p class="wiz-page__desc">
+          This wizard will guide you through extracting a subdirectory from any Git repository
+          while preserving its full commit history.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <!-- What is this tool -->
+      <div class="welcome-box q-mb-md">
+        <div class="welcome-box__title">What does git-extract do?</div>
+        <p class="welcome-box__text">
+          <strong>git-extract</strong> splits a subdirectory out of a Git repository into a
+          brand-new repository — keeping the <em>complete commit history</em> for every file
+          in that path. No manual rebasing, no lost commits, no need to install anything locally.
+        </p>
+      </div>
+
+      <!-- Steps overview -->
+      <div class="welcome-steps">
+        <div class="welcome-step">
+          <div class="welcome-step__num">1</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Welcome</div>
+            <div class="welcome-step__desc">You are here. Read this overview, then click <strong>Next&nbsp;&gt;</strong>.</div>
+          </div>
+        </div>
+        <div class="welcome-step">
+          <div class="welcome-step__num">2</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Sign In</div>
+            <div class="welcome-step__desc">Connect your GitHub or GitLab account.</div>
+          </div>
+        </div>
+        <div class="welcome-step">
+          <div class="welcome-step__num">3</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Select Repository</div>
+            <div class="welcome-step__desc">Pick the repository that contains the path you want to extract.</div>
+          </div>
+        </div>
+        <div class="welcome-step">
+          <div class="welcome-step__num">4</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Configure &amp; Extract</div>
+            <div class="welcome-step__desc">
+              Choose the source folder, target repository and branch, then click
+              <strong>Extract &amp; Push</strong>. A GitHub Actions job rewrites history and
+              pushes the result automatically.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="welcome-note">
+        To continue, click <strong>Next &gt;</strong> below.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+const router = useRouter()
+const auth   = useAuthStore()
+const nav    = useWizardNav()
+
+onMounted(() => {
+  nav.value = {
+    backLabel: '< Back',
+    nextLabel: 'Next >',
+    nextDisabled: false,
+    onBack: null, // first step — no back
+    onNext: () => router.push(auth.isLoggedIn ? '/repos' : '/login'),
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.welcome-box {
+  max-width: 520px;
+  padding: 10px 12px;
+  background: #fffff0;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+
+  &__title {
+    font-size: 12px;
+    font-weight: 700;
+    color: $primary;
+    margin-bottom: 5px;
+  }
+
+  &__text {
+    font-size: 11px;
+    color: #333;
+    margin: 0;
+    line-height: 1.55;
+  }
+}
+
+.welcome-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 520px;
+  margin-bottom: 14px;
+}
+
+.welcome-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+
+  &__num {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    background: $secondary;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 700;
+    color: $primary;
+  }
+
+  &__desc {
+    font-size: 11px;
+    color: #444;
+    margin-top: 1px;
+    line-height: 1.4;
+  }
+}
+
+.welcome-note {
+  font-size: 11px;
+  color: #666;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index eecf909..6025bd3 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -3,7 +3,8 @@ const routes = [
     path: '/',
     component: () => import('layouts/WizardLayout.vue'),
     children: [
-      { path: '', redirect: '/repos' },
+      { path: '', redirect: '/welcome' },
+      { path: '/welcome', component: () => import('pages/WelcomePage.vue') },
       { path: '/login', component: () => import('pages/LoginPage.vue') },
       { path: '/auth/github', component: () => import('pages/AuthCallback.vue') },
       { path: '/auth/gitlab', component: () => import('pages/AuthCallback.vue') },

From 61e6d06eca0df688f639986cd96faa088a180174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 19:24:37 +0300
Subject: [PATCH 05/24] feat: extract Win98Window component; draggable +
 working title buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Win98Window.vue (new component):
- Draggable: mousedown on title bar records offset; mousemove/mouseup
  listeners on document track position and release; clamped to viewport
- Minimize: hides window body, shows a Win98 taskbar at the bottom;
  clicking taskbar button restores the window
- Maximize / Restore: toggles position:fixed inset:0 (double-click
  title bar also toggles); restore icon ❐ vs □
- Close ✕: opens a modal confirm dialog (Yes / No); on Yes emits
  'close' to parent (WizardLayout resets auth and routes to /welcome)
- Title bar gradient: #0d4a88 → #1a78cc (clear blue, visually
  distinct from the #011826 dark-navy desktop background)
- Window border: border 2px + outline 1px #000 + box-shadow for
  depth — ensures the window edge is always visible on the desktop
- Close button turns red on hover (classic Win98 UX hint)

WizardLayout.vue:
- Now just a thin shell that uses <Win98Window> and provides the
  sidebar + content + footer as slotted content
---
 frontend/src/components/Win98Window.vue | 453 ++++++++++++++++++++++++
 frontend/src/layouts/WizardLayout.vue   | 326 +++++------------
 2 files changed, 536 insertions(+), 243 deletions(-)
 create mode 100644 frontend/src/components/Win98Window.vue

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
new file mode 100644
index 0000000..d142734
--- /dev/null
+++ b/frontend/src/components/Win98Window.vue
@@ -0,0 +1,453 @@
+<template>
+  <!-- Desktop layer — fills the viewport, catches drag events globally -->
+  <div class="w98-desktop" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseUp">
+
+    <!-- ── Taskbar (visible only when minimized) ─────────────────── -->
+    <div v-if="minimized" class="w98-taskbar">
+      <button class="w98-taskbar-btn" @click="restore">
+        <span class="w98-taskbar-btn__icon">⎇</span>
+        <span>{{ title }}</span>
+      </button>
+    </div>
+
+    <!-- ── Window ────────────────────────────────────────────────── -->
+    <div
+      v-show="!minimized"
+      class="w98-window"
+      :class="{ 'w98-window--maximized': maximized, 'w98-window--dragging': dragging }"
+      :style="windowStyle"
+      ref="windowEl"
+    >
+      <!-- Title bar -->
+      <div
+        class="w98-titlebar"
+        @mousedown="onTitlebarMouseDown"
+        @dblclick="toggleMaximize"
+      >
+        <span class="w98-titlebar__icon">⎇</span>
+        <span class="w98-titlebar__text">{{ title }}</span>
+
+        <div class="w98-titlebar__controls" @mousedown.stop>
+          <button class="w98-chrome-btn" title="Minimize" @click.stop="minimize">_</button>
+          <button class="w98-chrome-btn" :title="maximized ? 'Restore' : 'Maximize'" @click.stop="toggleMaximize">
+            {{ maximized ? '❐' : '□' }}
+          </button>
+          <button class="w98-chrome-btn w98-chrome-btn--close" title="Close" @click.stop="openCloseDialog">✕</button>
+        </div>
+      </div>
+
+      <!-- Slot: body + footer provided by WizardLayout -->
+      <slot />
+    </div>
+
+    <!-- ── Close-confirm dialog ───────────────────────────────────── -->
+    <div v-if="showCloseConfirm" class="w98-overlay" @click.self="showCloseConfirm = false">
+      <div class="w98-dialog">
+        <div class="w98-dialog__titlebar">
+          <span class="w98-dialog__titlebar-icon">⎇</span>
+          git-extract Setup
+        </div>
+        <div class="w98-dialog__body">
+          <div class="w98-dialog__icon">⚠️</div>
+          <div class="w98-dialog__msg">
+            <p>Are you sure you want to exit Setup?</p>
+            <p style="color:#666">Your progress will be lost.</p>
+          </div>
+        </div>
+        <div class="w98-dialog__sep" />
+        <div class="w98-dialog__footer">
+          <button class="w98-btn" @click="confirmClose">Yes</button>
+          <button class="w98-btn" @click="showCloseConfirm = false">No</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  title: { type: String, default: 'Window' },
+  width: { type: Number, default: 860 },
+  height: { type: Number, default: 560 },
+})
+
+const emit = defineEmits(['close'])
+
+// ── State ───────────────────────────────────────────────────────
+const pos            = ref({ x: 0, y: 0 })
+const dragging       = ref(false)
+const dragOffset     = ref({ x: 0, y: 0 })
+const maximized      = ref(false)
+const minimized      = ref(false)
+const showCloseConfirm = ref(false)
+
+// ── Lifecycle ───────────────────────────────────────────────────
+onMounted(() => {
+  // Centre window on load
+  pos.value = {
+    x: Math.max(0, Math.round((window.innerWidth  - props.width)  / 2)),
+    y: Math.max(0, Math.round((window.innerHeight - props.height) / 2)),
+  }
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup',   onMouseUp)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup',   onMouseUp)
+})
+
+// ── Computed style ──────────────────────────────────────────────
+const windowStyle = computed(() => {
+  if (maximized.value) return {}          // CSS class handles full-screen
+  return {
+    position: 'absolute',
+    left:   pos.value.x + 'px',
+    top:    pos.value.y + 'px',
+    width:  props.width  + 'px',
+    height: props.height + 'px',
+  }
+})
+
+// ── Drag ────────────────────────────────────────────────────────
+function onTitlebarMouseDown(e) {
+  if (maximized.value || e.button !== 0) return
+  dragging.value = true
+  dragOffset.value = { x: e.clientX - pos.value.x, y: e.clientY - pos.value.y }
+  e.preventDefault()
+}
+
+function onMouseMove(e) {
+  if (!dragging.value) return
+  pos.value = {
+    x: Math.max(0, Math.min(e.clientX - dragOffset.value.x, window.innerWidth  - props.width)),
+    y: Math.max(0, Math.min(e.clientY - dragOffset.value.y, window.innerHeight - props.height)),
+  }
+}
+
+function onMouseUp() {
+  dragging.value = false
+}
+
+// ── Window controls ─────────────────────────────────────────────
+function minimize() {
+  minimized.value = true
+}
+
+function restore() {
+  minimized.value = false
+}
+
+function toggleMaximize() {
+  maximized.value = !maximized.value
+}
+
+function openCloseDialog() {
+  showCloseConfirm.value = true
+}
+
+function confirmClose() {
+  showCloseConfirm.value = false
+  emit('close')
+}
+</script>
+
+<style lang="scss">
+* { font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif; }
+
+// ── Desktop ────────────────────────────────────────────────────
+.w98-desktop {
+  position: fixed;
+  inset: 0;
+  background: $primary;      // #011826 dark navy
+  overflow: hidden;
+  user-select: none;         // prevent text-select while dragging
+
+  // subtle scanline texture so it reads as a "surface"
+  background-image: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(255,255,255,0.018) 2px,
+    rgba(255,255,255,0.018) 4px
+  );
+}
+
+// ── Window ─────────────────────────────────────────────────────
+.w98-window {
+  display: flex;
+  flex-direction: column;
+  background: #F2F2F2;
+
+  // Classic Win98 raised outer border — white top/left, grey bottom/right
+  // This is the KEY fix: visible contrast against the dark desktop
+  border: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline: 1px solid #000;
+
+  // Drop shadow for depth
+  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.7);
+
+  &--maximized {
+    position: fixed !important;
+    inset: 0 !important;
+    width:  100vw !important;
+    height: 100vh !important;
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &--dragging { cursor: grabbing; }
+}
+
+// ── Title bar ──────────────────────────────────────────────────
+// Gradient from a clear blue — NOT the same as the desktop navy
+// so the top edge of the window is always distinguishable.
+.w98-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px 3px 6px;
+  background: linear-gradient(to right, #0d4a88 0%, #1a78cc 100%);
+  flex-shrink: 0;
+  cursor: default;
+
+  &__icon { font-size: 13px; color: $accent; flex-shrink: 0; }
+
+  &__text {
+    flex: 1;
+    font-size: 11px;
+    font-weight: 700;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__controls { display: flex; gap: 2px; }
+}
+
+// ── Chrome buttons ─────────────────────────────────────────────
+.w98-chrome-btn {
+  width: 16px;
+  height: 14px;
+  background: #F2F2F2;
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #000;
+  border: none;
+  padding: 0;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:active {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    padding: 1px 0 0 1px;
+  }
+
+  &--close {
+    margin-left: 2px;
+    &:hover { background: #e04040; color: #fff; }
+  }
+}
+
+// ── Taskbar ────────────────────────────────────────────────────
+.w98-taskbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  background: #F2F2F2;
+  border-top: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline-top: 1px solid #000;
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  gap: 4px;
+}
+
+.w98-taskbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 22px;
+  padding: 0 8px;
+  font-size: 11px;
+  background: #F2F2F2;
+  border: none;
+  cursor: pointer;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:active {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    padding: 1px 7px 0 9px;
+  }
+
+  &__icon { color: $secondary; }
+}
+
+// ── Close-confirm overlay ──────────────────────────────────────
+.w98-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.w98-dialog {
+  background: #F2F2F2;
+  border: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline: 1px solid #000;
+  min-width: 300px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
+
+  &__titlebar {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 6px;
+    background: linear-gradient(to right, #0d4a88 0%, #1a78cc 100%);
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  &__titlebar-icon { color: $accent; }
+
+  &__body {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 20px 20px 14px;
+    user-select: text;
+  }
+
+  &__icon { font-size: 28px; flex-shrink: 0; }
+
+  &__msg {
+    p { margin: 0 0 4px; font-size: 12px; }
+  }
+
+  &__sep {
+    height: 0;
+    margin: 0 4px 8px;
+    border-top: 1px solid #808080;
+    border-bottom: 1px solid #fff;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    padding: 0 20px 14px;
+  }
+}
+
+// ── Win98 regular buttons (used in dialog + footer) ────────────
+.w98-btn {
+  min-width: 75px;
+  height: 23px;
+  padding: 0 10px;
+  background: #F2F2F2;
+  color: #000;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 11px;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:active:not(:disabled) {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    padding: 1px 9px 0 11px;
+  }
+
+  &:disabled {
+    color: #808080;
+    cursor: default;
+    text-shadow: 1px 1px #fff;
+  }
+
+  &--primary {
+    background: $secondary;
+    color: #fff;
+    font-weight: 700;
+    box-shadow:
+      inset -1px -1px #000,
+      inset  1px  1px #6BBF89,
+      inset -2px -2px #0d5a28,
+      inset  2px  2px #2db85a;
+
+    &:active:not(:disabled) {
+      box-shadow:
+        inset -1px -1px #6BBF89,
+        inset  1px  1px #000,
+        inset -2px -2px #2db85a,
+        inset  2px  2px #0d5a28;
+      padding: 1px 9px 0 11px;
+    }
+
+    &:disabled {
+      background: #A7D9B8;
+      color: #6BBF89;
+      text-shadow: none;
+    }
+  }
+}
+
+.w98-link-btn {
+  background: none;
+  border: none;
+  color: $accent;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  font-family: inherit;
+}
+
+.w98-btn-sep {
+  width: 1px;
+  height: 20px;
+  background: #808080;
+  margin: 0 4px;
+  box-shadow: 1px 0 #fff;
+}
+</style>
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index f67acab..152aae7 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -1,99 +1,85 @@
 <template>
-  <!-- Win98-style desktop — dark navy instead of teal -->
-  <div class="w98-desktop">
-    <div class="w98-window">
-
-      <!-- ── Title bar ──────────────────────────────────────────── -->
-      <div class="w98-titlebar">
-        <span class="w98-titlebar__icon">⎇</span>
-        <span class="w98-titlebar__text">git-extract Setup</span>
-        <div class="w98-titlebar__controls">
-          <div class="w98-chrome-btn">_</div>
-          <div class="w98-chrome-btn">□</div>
-          <div class="w98-chrome-btn w98-chrome-btn--close">✕</div>
+  <Win98Window title="git-extract Setup" :width="860" :height="560" @close="onWindowClose">
+
+    <!-- ── Body: sidebar + content ───────────────────────────── -->
+    <div class="w98-body">
+
+      <!-- Left step panel -->
+      <div class="w98-sidebar">
+        <div class="w98-sidebar__logo">⎇</div>
+        <div class="w98-sidebar__product">git-extract</div>
+        <div class="w98-sidebar__tagline">Setup Wizard</div>
+
+        <div class="w98-sidebar__divider" />
+
+        <div
+          v-for="step in steps"
+          :key="step.id"
+          class="w98-sidebar__step"
+          :class="{
+            'w98-sidebar__step--active': currentStep === step.id,
+            'w98-sidebar__step--done':   currentStep > step.id,
+          }"
+        >
+          <span class="w98-sidebar__arrow">
+            {{ currentStep > step.id ? '✔' : currentStep === step.id ? '►' : '○' }}
+          </span>
+          <span>{{ step.label }}</span>
         </div>
-      </div>
 
-      <!-- ── Body ──────────────────────────────────────────────── -->
-      <div class="w98-body">
-
-        <!-- Left product panel -->
-        <div class="w98-sidebar">
-          <div class="w98-sidebar__logo">⎇</div>
-          <div class="w98-sidebar__product">git-extract</div>
-          <div class="w98-sidebar__tagline">Setup Wizard</div>
-
-          <div class="w98-sidebar__divider" />
-
-          <div
-            v-for="step in steps"
-            :key="step.id"
-            class="w98-sidebar__step"
-            :class="{
-              'w98-sidebar__step--active': currentStep === step.id,
-              'w98-sidebar__step--done':   currentStep > step.id,
-            }"
-          >
-            <span class="w98-sidebar__arrow">
-              {{ currentStep > step.id ? '✔' : currentStep === step.id ? '►' : '○' }}
-            </span>
-            <span>{{ step.label }}</span>
-          </div>
-
-          <div v-if="auth.isLoggedIn" class="w98-sidebar__user">
-            <img
-              v-if="auth.user?.avatar_url"
-              :src="auth.user.avatar_url"
-              class="w98-sidebar__avatar"
-            />
-            <span class="w98-sidebar__username">
-              {{ auth.user?.login || auth.user?.username }}
-            </span>
-          </div>
+        <div v-if="auth.isLoggedIn" class="w98-sidebar__user">
+          <img
+            v-if="auth.user?.avatar_url"
+            :src="auth.user.avatar_url"
+            class="w98-sidebar__avatar"
+          />
+          <span class="w98-sidebar__username">
+            {{ auth.user?.login || auth.user?.username }}
+          </span>
         </div>
+      </div>
+
+      <!-- Right content pane -->
+      <div class="w98-content">
+        <router-view />
+      </div>
 
-        <!-- Right content pane -->
-        <div class="w98-content">
-          <router-view />
+    </div>
+
+    <!-- ── Footer / button bar ───────────────────────────────── -->
+    <div class="w98-footer">
+      <div class="w98-sep" />
+      <div class="w98-footer__inner">
+        <div class="w98-footer__status">
+          Step {{ currentStep }} of {{ steps.length }}
+          <template v-if="auth.isLoggedIn">
+            &nbsp;·&nbsp;
+            <button class="w98-link-btn" @click="logout">Sign out</button>
+          </template>
         </div>
 
-      </div>
+        <div class="w98-footer__nav">
+          <button
+            v-if="nav.onBack"
+            class="w98-btn"
+            @click="nav.onBack"
+          >{{ nav.backLabel }}</button>
+
+          <button
+            v-if="nav.onNext"
+            class="w98-btn w98-btn--primary"
+            :disabled="nav.nextDisabled"
+            @click="nav.onNext"
+          >{{ nav.nextLabel }}</button>
 
-      <!-- ── Footer / button bar ───────────────────────────────── -->
-      <div class="w98-footer">
-        <div class="w98-sep" />
-        <div class="w98-footer__inner">
-          <div class="w98-footer__status">
-            Step {{ currentStep }} of {{ steps.length }}
-            <template v-if="auth.isLoggedIn">
-              &nbsp;·&nbsp;
-              <button class="w98-link-btn" @click="logout">Sign out</button>
-            </template>
-          </div>
-
-          <div class="w98-footer__nav">
-            <button
-              v-if="nav.onBack"
-              class="w98-btn"
-              @click="nav.onBack"
-            >{{ nav.backLabel }}</button>
-
-            <button
-              v-if="nav.onNext"
-              class="w98-btn w98-btn--primary"
-              :disabled="nav.nextDisabled"
-              @click="nav.onNext"
-            >{{ nav.nextLabel }}</button>
-
-            <div class="w98-btn-sep" />
-
-            <button class="w98-btn" @click="logout">Cancel</button>
-          </div>
+          <div class="w98-btn-sep" />
+
+          <button class="w98-btn" @click="logout">Cancel</button>
         </div>
       </div>
-
     </div>
-  </div>
+
+  </Win98Window>
 </template>
 
 <script setup>
@@ -101,6 +87,7 @@ import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth.js'
 import { provideWizardNav } from '../composables/useWizardNav.js'
+import Win98Window from '../components/Win98Window.vue'
 
 const auth   = useAuthStore()
 const route  = useRoute()
@@ -116,10 +103,10 @@ const steps = [
 
 const currentStep = computed(() => {
   const p = route.path
-  if (p === '/' || p === '/welcome')      return 1
+  if (p === '/' || p === '/welcome')           return 1
   if (p === '/login' || p.startsWith('/auth')) return 2
-  if (p === '/repos')                     return 3
-  if (p === '/extract')                   return 4
+  if (p === '/repos')                          return 3
+  if (p === '/extract')                        return 4
   return 1
 })
 
@@ -127,75 +114,15 @@ function logout() {
   auth.logout()
   router.push('/welcome')
 }
-</script>
-
-<style lang="scss">
-* { font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif; }
-
-// ── Desktop ────────────────────────────────────────────────────
-.w98-desktop {
-  position: fixed;
-  inset: 0;
-  background: $primary; // #011826 dark navy desktop
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// ── Window ─────────────────────────────────────────────────────
-.w98-window {
-  display: flex;
-  flex-direction: column;
-  width: min(860px, 98vw);
-  height: min(560px, 96vh);
-  background: #F2F2F2;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset  1px  1px #ffffff,
-    inset -2px -2px #808080,
-    inset  2px  2px #e8e8e8;
-}
-
-// ── Title bar ──────────────────────────────────────────────────
-.w98-titlebar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 4px 3px 6px;
-  background: linear-gradient(to right, $primary 0%, #0d3a5c 100%);
-  flex-shrink: 0;
-  user-select: none;
-
-  &__icon { font-size: 12px; color: $accent; }
-  &__text {
-    flex: 1;
-    font-size: 11px;
-    font-weight: 700;
-    color: #fff;
-  }
-  &__controls { display: flex; gap: 2px; }
-}
-
-.w98-chrome-btn {
-  width: 16px;
-  height: 14px;
-  background: #F2F2F2;
-  font-size: 9px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: default;
-  color: #000;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset  1px  1px #ffffff,
-    inset -2px -2px #808080,
-    inset  2px  2px #e8e8e8;
 
-  &--close { margin-left: 2px; }
+function onWindowClose() {
+  // Window × button confirmed — reset auth and go to step 1
+  auth.logout()
+  router.push('/welcome')
 }
+</script>
 
+<style lang="scss">
 // ── Body ───────────────────────────────────────────────────────
 .w98-body {
   display: flex;
@@ -214,9 +141,6 @@ function logout() {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow:
-    inset  1px  1px rgba(255,255,255,0.08),
-    inset -1px -1px rgba(0,0,0,0.3);
 
   &__logo    { text-align: center; font-size: 32px; color: $secondary; margin-bottom: 6px; }
   &__product { text-align: center; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
@@ -250,7 +174,7 @@ function logout() {
       font-weight: 700;
       background: rgba(255,255,255,0.07);
     }
-    &--done { color: $accent; } // #6BBF89 sage green for done steps
+    &--done { color: $accent; }
   }
 
   &__arrow { flex-shrink: 0; font-size: 10px; margin-top: 1px; }
@@ -264,12 +188,7 @@ function logout() {
     border-top: 1px solid rgba(255,255,255,0.1);
   }
 
-  &__avatar {
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
-    object-fit: cover;
-  }
+  &__avatar { width: 20px; height: 20px; border-radius: 2px; object-fit: cover; }
 
   &__username {
     font-size: 10px;
@@ -316,83 +235,4 @@ function logout() {
 }
 
 .w98-footer__nav { display: flex; align-items: center; gap: 4px; }
-
-.w98-btn-sep {
-  width: 1px;
-  height: 20px;
-  background: #808080;
-  margin: 0 4px;
-  box-shadow: 1px 0 #fff;
-}
-
-// ── Win98 buttons ──────────────────────────────────────────────
-.w98-btn {
-  min-width: 75px;
-  height: 23px;
-  padding: 0 10px;
-  background: #F2F2F2;
-  color: #000;
-  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
-  font-size: 11px;
-  border: none;
-  cursor: pointer;
-  white-space: nowrap;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset  1px  1px #ffffff,
-    inset -2px -2px #808080,
-    inset  2px  2px #e8e8e8;
-
-  &:active:not(:disabled) {
-    box-shadow:
-      inset -1px -1px #ffffff,
-      inset  1px  1px #0a0a0a,
-      inset -2px -2px #e8e8e8,
-      inset  2px  2px #808080;
-    padding: 1px 9px 0 11px;
-  }
-
-  &:disabled {
-    color: #808080;
-    cursor: default;
-    text-shadow: 1px 1px #fff;
-  }
-
-  &--primary {
-    background: $secondary; // #168C40 forest green
-    color: #fff;
-    font-weight: 700;
-    box-shadow:
-      inset -1px -1px #000,
-      inset  1px  1px #6BBF89,
-      inset -2px -2px #0d5a28,
-      inset  2px  2px #2db85a;
-
-    &:active:not(:disabled) {
-      box-shadow:
-        inset -1px -1px #6BBF89,
-        inset  1px  1px #000,
-        inset -2px -2px #2db85a,
-        inset  2px  2px #0d5a28;
-      padding: 1px 9px 0 11px;
-    }
-
-    &:disabled {
-      background: #A7D9B8;
-      color: #6BBF89;
-      text-shadow: none;
-    }
-  }
-}
-
-.w98-link-btn {
-  background: none;
-  border: none;
-  color: $accent; // #6BBF89
-  font-size: 11px;
-  cursor: pointer;
-  padding: 0;
-  text-decoration: underline;
-  font-family: inherit;
-}
 </style>

From a544903ff80b125819ac68523738e4a9eeca2272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 19:48:35 +0300
Subject: [PATCH 06/24] fix: disable minimize and maximize title bar buttons

---
 frontend/src/components/Win98Window.vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index d142734..0011d06 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -28,10 +28,8 @@
         <span class="w98-titlebar__text">{{ title }}</span>
 
         <div class="w98-titlebar__controls" @mousedown.stop>
-          <button class="w98-chrome-btn" title="Minimize" @click.stop="minimize">_</button>
-          <button class="w98-chrome-btn" :title="maximized ? 'Restore' : 'Maximize'" @click.stop="toggleMaximize">
-            {{ maximized ? '❐' : '□' }}
-          </button>
+          <button class="w98-chrome-btn" title="Minimize" disabled>_</button>
+          <button class="w98-chrome-btn" title="Maximize" disabled>□</button>
           <button class="w98-chrome-btn w98-chrome-btn--close" title="Close" @click.stop="openCloseDialog">✕</button>
         </div>
       </div>
@@ -133,10 +131,6 @@ function onMouseUp() {
 }
 
 // ── Window controls ─────────────────────────────────────────────
-function minimize() {
-  minimized.value = true
-}
-
 function restore() {
   minimized.value = false
 }
@@ -260,9 +254,16 @@ function confirmClose() {
     padding: 1px 0 0 1px;
   }
 
+  &:disabled {
+    color: #808080;
+    cursor: default;
+    text-shadow: 1px 1px #fff;
+    &:active { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #e8e8e8; padding: 0; }
+  }
+
   &--close {
     margin-left: 2px;
-    &:hover { background: #e04040; color: #fff; }
+    &:hover:not(:disabled) { background: #e04040; color: #fff; }
   }
 }
 

From d717e9ddce0438a33a46312fd2664fb85caaa8d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 19:53:48 +0300
Subject: [PATCH 07/24] feat: always show Back/Next/Finish buttons, disable
 when not applicable

All three nav buttons are now permanently visible in the wizard footer.
Each page sets onFinish/finishDisabled so the primary action (Extract &
Push, Done) lives on the Finish button rather than overloading Next.
---
 frontend/src/composables/useWizardNav.js | 18 ++++++++++++++----
 frontend/src/layouts/WizardLayout.vue    | 17 +++++++++++------
 frontend/src/pages/ExtractPage.vue       | 22 ++++++++++++++--------
 frontend/src/pages/LoginPage.vue         |  6 +++++-
 frontend/src/pages/ReposPage.vue         | 10 ++++++----
 frontend/src/pages/WelcomePage.vue       |  6 +++++-
 6 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/frontend/src/composables/useWizardNav.js b/frontend/src/composables/useWizardNav.js
index 663e55d..73d2277 100644
--- a/frontend/src/composables/useWizardNav.js
+++ b/frontend/src/composables/useWizardNav.js
@@ -7,19 +7,29 @@ const KEY = Symbol('wizardNav')
  */
 export function provideWizardNav() {
   const nav = ref({
+    // ← Back
     backLabel: '< Back',
+    backDisabled: false,
+    onBack: null,         // null  = disabled
+
+    // Next →
     nextLabel: 'Next >',
     nextDisabled: false,
-    onBack: null, // null = hidden
-    onNext: null, // null = hidden
+    onNext: null,         // null  = disabled
+
+    // Finish (final action — Extract & Push, Done, etc.)
+    finishLabel: 'Finish',
+    finishDisabled: false,
+    onFinish: null,       // null  = disabled
   })
   provide(KEY, nav)
   return nav
 }
 
 /**
- * Called in each page component to register its Back / Next handlers.
- * Pass null for onBack / onNext to hide that button.
+ * Called in each page component to register its nav handlers.
+ * Any field omitted keeps its previous value; pass null for a
+ * handler to disable that button.
  */
 export function useWizardNav() {
   return inject(KEY)
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index 152aae7..d13c7eb 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -60,18 +60,23 @@
 
         <div class="w98-footer__nav">
           <button
-            v-if="nav.onBack"
             class="w98-btn"
-            @click="nav.onBack"
+            :disabled="!nav.onBack || nav.backDisabled"
+            @click="nav.onBack && nav.onBack()"
           >{{ nav.backLabel }}</button>
 
           <button
-            v-if="nav.onNext"
-            class="w98-btn w98-btn--primary"
-            :disabled="nav.nextDisabled"
-            @click="nav.onNext"
+            class="w98-btn"
+            :disabled="!nav.onNext || nav.nextDisabled"
+            @click="nav.onNext && nav.onNext()"
           >{{ nav.nextLabel }}</button>
 
+          <button
+            class="w98-btn w98-btn--primary"
+            :disabled="!nav.onFinish || nav.finishDisabled"
+            @click="nav.onFinish && nav.onFinish()"
+          >{{ nav.finishLabel }}</button>
+
           <div class="w98-btn-sep" />
 
           <button class="w98-btn" @click="logout">Cancel</button>
diff --git a/frontend/src/pages/ExtractPage.vue b/frontend/src/pages/ExtractPage.vue
index 9a73e4d..896690b 100644
--- a/frontend/src/pages/ExtractPage.vue
+++ b/frontend/src/pages/ExtractPage.vue
@@ -168,24 +168,30 @@ watch([canSubmit, submitted, source], updateNav)
 function updateNav() {
   if (!source.value) {
     nav.value = {
-      backLabel: '< Back', nextLabel: 'Next >', nextDisabled: true,
-      onBack: () => router.push('/repos'), onNext: null,
+      backLabel: '< Back', backDisabled: false,
+      onBack: () => router.push('/repos'),
+      nextLabel: 'Next >', nextDisabled: true, onNext: null,
+      finishLabel: 'Finish', finishDisabled: true, onFinish: null,
     }
     return
   }
   if (submitted.value) {
     nav.value = {
-      backLabel: '← Start over', nextLabel: 'Finish', nextDisabled: false,
-      onBack: () => reset(), onNext: () => router.push('/repos'),
+      backLabel: '← Start over', backDisabled: false,
+      onBack: () => reset(),
+      nextLabel: 'Next >', nextDisabled: true, onNext: null,
+      finishLabel: 'Done', finishDisabled: false,
+      onFinish: () => router.push('/repos'),
     }
     return
   }
   nav.value = {
-    backLabel: '< Back',
-    nextLabel: submitting.value ? 'Extracting…' : 'Extract && Push',
-    nextDisabled: !canSubmit.value || submitting.value,
+    backLabel: '< Back', backDisabled: false,
     onBack: () => router.push('/repos'),
-    onNext: () => submit(),
+    nextLabel: 'Next >', nextDisabled: true, onNext: null,
+    finishLabel: submitting.value ? 'Extracting…' : 'Extract && Push',
+    finishDisabled: !canSubmit.value || submitting.value,
+    onFinish: canSubmit.value && !submitting.value ? () => submit() : null,
   }
 }
 
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index b61d2be..61ec08e 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -56,10 +56,14 @@ const gitlabHost = ref('gitlab.com')
 onMounted(() => {
   nav.value = {
     backLabel: '< Back',
+    backDisabled: false,
+    onBack: () => router.push('/welcome'),
     nextLabel: 'Next >',
     nextDisabled: true,     // user advances by clicking a provider
-    onBack: () => router.push('/welcome'),
     onNext: null,
+    finishLabel: 'Finish',
+    finishDisabled: true,
+    onFinish: null,
   }
 })
 
diff --git a/frontend/src/pages/ReposPage.vue b/frontend/src/pages/ReposPage.vue
index 401f660..beb15d7 100644
--- a/frontend/src/pages/ReposPage.vue
+++ b/frontend/src/pages/ReposPage.vue
@@ -101,12 +101,14 @@ function updateNav() {
   const repo = store.list.find((r) => r.id === selected.value) || null
   nav.value = {
     backLabel: '< Back',
+    backDisabled: false,
+    onBack: () => router.push('/login'),
     nextLabel: 'Next >',
     nextDisabled: !selected.value,
-    onBack: () => router.push('/login'),
-    onNext: selected.value
-      ? () => confirm(repo)
-      : null,
+    onNext: selected.value ? () => confirm(repo) : null,
+    finishLabel: 'Finish',
+    finishDisabled: true,
+    onFinish: null,
   }
 }
 
diff --git a/frontend/src/pages/WelcomePage.vue b/frontend/src/pages/WelcomePage.vue
index cf6046f..dea5482 100644
--- a/frontend/src/pages/WelcomePage.vue
+++ b/frontend/src/pages/WelcomePage.vue
@@ -79,10 +79,14 @@ const nav    = useWizardNav()
 onMounted(() => {
   nav.value = {
     backLabel: '< Back',
+    backDisabled: true,
+    onBack: null,
     nextLabel: 'Next >',
     nextDisabled: false,
-    onBack: null, // first step — no back
     onNext: () => router.push(auth.isLoggedIn ? '/repos' : '/login'),
+    finishLabel: 'Finish',
+    finishDisabled: true,
+    onFinish: null,
   }
 })
 </script>

From ba60825a74fd577c9bdeeef308f5b7a14d9f0b83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:00:49 +0300
Subject: [PATCH 08/24] feat: Win98 provider tiles on Sign In; Finish button no
 longer green

LoginPage now shows two large selectable icon tiles (GitHub / GitLab)
with classic raised/sunken Win98 borders. Clicking a tile enables the
"Sign In >" Next button; double-click proceeds immediately. The GitLab
host group-box fades in only when GitLab is selected.

Finish button changed from green --primary to --default (grey with a
black outline ring), matching the Win98 default-button convention.
---
 frontend/src/components/Win98Window.vue |  29 +--
 frontend/src/layouts/WizardLayout.vue   |   2 +-
 frontend/src/pages/LoginPage.vue        | 236 ++++++++++++++++++++----
 3 files changed, 210 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index 0011d06..281e18d 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -406,29 +406,18 @@ function confirmClose() {
     text-shadow: 1px 1px #fff;
   }
 
-  &--primary {
-    background: $secondary;
-    color: #fff;
+  // Win98 "default" button — same grey but with a black focus border
+  // to indicate it's the recommended action (no green)
+  &--default {
+    outline: 2px solid #000;
+    outline-offset: -4px;
     font-weight: 700;
-    box-shadow:
-      inset -1px -1px #000,
-      inset  1px  1px #6BBF89,
-      inset -2px -2px #0d5a28,
-      inset  2px  2px #2db85a;
-
-    &:active:not(:disabled) {
-      box-shadow:
-        inset -1px -1px #6BBF89,
-        inset  1px  1px #000,
-        inset -2px -2px #2db85a,
-        inset  2px  2px #0d5a28;
-      padding: 1px 9px 0 11px;
-    }
 
     &:disabled {
-      background: #A7D9B8;
-      color: #6BBF89;
-      text-shadow: none;
+      outline-color: #808080;
+      color: #808080;
+      cursor: default;
+      text-shadow: 1px 1px #fff;
     }
   }
 }
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index d13c7eb..784f0aa 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -72,7 +72,7 @@
           >{{ nav.nextLabel }}</button>
 
           <button
-            class="w98-btn w98-btn--primary"
+            class="w98-btn w98-btn--default"
             :disabled="!nav.onFinish || nav.finishDisabled"
             @click="nav.onFinish && nav.onFinish()"
           >{{ nav.finishLabel }}</button>
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 61ec08e..2e0d0a0 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -6,66 +6,102 @@
         <div class="wiz-page__step-label">Step 2 of 4</div>
         <h1 class="wiz-page__title">Sign In</h1>
         <p class="wiz-page__desc">
-          Connect your account to browse repositories and run extractions.
+          Select a Git provider, then click <strong>Sign In &gt;</strong> to connect your account.
         </p>
       </div>
     </div>
 
     <div class="wiz-page__body">
-      <q-banner v-if="errorMessage" class="login-error q-mb-sm">
-        {{ errorMessage }}
-      </q-banner>
 
-      <div class="w98-field-label">Select a provider:</div>
+      <!-- Error banner -->
+      <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
 
-      <div class="w98-list" style="max-width: 400px">
-        <div class="w98-list-row" @click="loginGithub">
-          <q-icon name="fab fa-github" size="16px" />
-          <span class="w98-list-row__name">GitHub</span>
-          <span class="w98-list-row__meta">OAuth · public &amp; private repos</span>
-        </div>
-        <div class="w98-list-row" @click="loginGitlab">
-          <q-icon name="fab fa-gitlab" size="16px" color="orange" />
-          <span class="w98-list-row__name">GitLab</span>
-          <span class="w98-list-row__meta">PKCE · gitlab.com or self-hosted</span>
-        </div>
+      <div class="w98-field-label" style="margin-bottom:10px">
+        Which provider would you like to use?
       </div>
 
-      <div class="q-mt-sm" style="max-width: 400px">
-        <div class="w98-field-label">GitLab host:</div>
-        <input v-model="gitlabHost" class="w98-input" placeholder="gitlab.com" />
-        <div style="font-size:10px;color:#808080;margin-top:2px">
-          Change only for self-hosted GitLab instances.
-        </div>
+      <!-- ── Provider tiles ──────────────────────────────────────── -->
+      <div class="provider-tiles">
+
+        <button
+          class="provider-tile"
+          :class="{ 'provider-tile--selected': selected === 'github' }"
+          @click="selected = 'github'"
+          @dblclick="proceed"
+        >
+          <q-icon name="fab fa-github" class="provider-tile__icon" />
+          <div class="provider-tile__name">GitHub</div>
+          <div class="provider-tile__meta">OAuth&nbsp;·&nbsp;public &amp; private repos</div>
+        </button>
+
+        <button
+          class="provider-tile"
+          :class="{ 'provider-tile--selected': selected === 'gitlab' }"
+          @click="selected = 'gitlab'"
+          @dblclick="proceed"
+        >
+          <q-icon name="fab fa-gitlab" class="provider-tile__icon provider-tile__icon--gitlab" />
+          <div class="provider-tile__name">GitLab</div>
+          <div class="provider-tile__meta">PKCE&nbsp;·&nbsp;gitlab.com or self-hosted</div>
+        </button>
+
       </div>
+
+      <!-- ── GitLab host (only when GitLab selected) ─────────────── -->
+      <transition name="fade">
+        <div v-if="selected === 'gitlab'" class="gitlab-host-box">
+          <div class="w98-group-box">
+            <div class="w98-group-box__label">GitLab Instance</div>
+            <div class="w98-group-box__body">
+              <label class="w98-field-label" for="gl-host">Host:</label>
+              <input
+                id="gl-host"
+                v-model="gitlabHost"
+                class="w98-input-host"
+                placeholder="gitlab.com"
+                spellcheck="false"
+              />
+              <div class="host-hint">
+                Use <code>gitlab.com</code> for the public instance.
+                Change for a self-hosted GitLab server.
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { startGitlabLogin } from '../services/gitlab.js'
 import { useWizardNav } from '../composables/useWizardNav.js'
 
-const route  = useRoute()
-const router = useRouter()
-const nav    = useWizardNav()
+const route      = useRoute()
+const router     = useRouter()
+const nav        = useWizardNav()
+const selected   = ref(null)          // 'github' | 'gitlab' | null
 const gitlabHost = ref('gitlab.com')
 
-onMounted(() => {
+onMounted(updateNav)
+watch(selected, updateNav)
+
+function updateNav() {
   nav.value = {
     backLabel: '< Back',
     backDisabled: false,
     onBack: () => router.push('/welcome'),
-    nextLabel: 'Next >',
-    nextDisabled: true,     // user advances by clicking a provider
-    onNext: null,
+    nextLabel: selected.value ? 'Sign In >' : 'Next >',
+    nextDisabled: !selected.value,
+    onNext: selected.value ? () => proceed() : null,
     finishLabel: 'Finish',
     finishDisabled: true,
     onFinish: null,
   }
-})
+}
 
 const errorMessage = computed(() => {
   if (!route.query.error) return null
@@ -76,9 +112,14 @@ const errorMessage = computed(() => {
   return map[route.query.error] ?? `Authentication error: ${route.query.error}`
 })
 
+async function proceed() {
+  if (selected.value === 'github') loginGithub()
+  else if (selected.value === 'gitlab') await loginGitlab()
+}
+
 function loginGithub() {
-  const workerUrl = process.env.WORKER_URL
-  const clientId  = process.env.GITHUB_CLIENT_ID
+  const workerUrl   = process.env.WORKER_URL
+  const clientId    = process.env.GITHUB_CLIENT_ID
   const redirectUri = `${workerUrl}/auth/github/callback`
   const params = new URLSearchParams({ client_id: clientId, scope: 'repo user', redirect_uri: redirectUri })
   window.location.href = `https://github.com/login/oauth/authorize?${params}`
@@ -90,17 +131,120 @@ async function loginGitlab() {
 </script>
 
 <style lang="scss" scoped>
+// ── Error banner ───────────────────────────────────────────────────
 .login-error {
   font-size: 11px;
-  padding: 6px 10px;
+  padding: 5px 10px;
+  margin-bottom: 12px;
   border: 2px solid #c10015;
   background: #ffeeee;
   color: #c10015;
+  max-width: 420px;
+}
+
+// ── Provider tiles ─────────────────────────────────────────────────
+.provider-tiles {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 16px;
 }
 
-.w98-input {
+.provider-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 120px;
+  padding: 14px 10px 10px;
+  background: #F2F2F2;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  color: #000;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+
+  // Win98 raised button look
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:hover:not(.provider-tile--selected) {
+    background: #e4e4e4;
+  }
+
+  &:active:not(.provider-tile--selected) {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    padding-top: 15px;
+    padding-left: 11px;
+  }
+
+  // Selected: sunken + navy fill
+  &--selected {
+    background: $primary;
+    color: #fff;
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+
+    .provider-tile__icon      { color: #fff; }
+    .provider-tile__icon--gitlab { color: #fff; }
+    .provider-tile__meta      { color: rgba(255,255,255,0.65); }
+  }
+
+  &__icon {
+    font-size: 36px !important;
+    color: #333;
+
+    &--gitlab { color: #e24329; }
+  }
+
+  &__name {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__meta {
+    font-size: 10px;
+    color: #666;
+    line-height: 1.3;
+  }
+}
+
+// ── GitLab host group box ──────────────────────────────────────────
+.gitlab-host-box { max-width: 340px; }
+
+.w98-group-box {
+  border: 1px solid #808080;
+  box-shadow: 1px 1px 0 #fff;
+  padding: 0 10px 10px;
+  position: relative;
+  margin-top: 6px;
+
+  &__label {
+    position: absolute;
+    top: -8px;
+    left: 8px;
+    background: #fff;
+    padding: 0 3px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #000;
+  }
+
+  &__body { padding-top: 8px; }
+}
+
+.w98-input-host {
   width: 100%;
-  max-width: 400px;
   height: 21px;
   padding: 2px 4px;
   font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
@@ -113,5 +257,25 @@ async function loginGitlab() {
     inset -2px -2px #e8e8e8;
   background: #fff;
   box-sizing: border-box;
+  margin-bottom: 4px;
 }
+
+.host-hint {
+  font-size: 10px;
+  color: #808080;
+  line-height: 1.4;
+
+  code {
+    font-family: 'Courier New', monospace;
+    font-size: 10px;
+    background: #e8e8e8;
+    padding: 0 2px;
+  }
+}
+
+// ── Fade transition ────────────────────────────────────────────────
+.fade-enter-active,
+.fade-leave-active { transition: opacity 0.15s; }
+.fade-enter-from,
+.fade-leave-to     { opacity: 0; }
 </style>

From e5974b97a4b6d4ff7a5b2b52e8e34c586b6cfd5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:02:50 +0300
Subject: [PATCH 09/24] feat: replace provider tiles with Win98 listbox on Sign
 In

Classic sunken listbox (inset box-shadow border) with two rows.
Unfocused selection is grey; focused selection turns navy ($primary).
Arrow keys navigate, Enter proceeds. GitLab host group-box slides in
below the list when GitLab is selected.
---
 frontend/src/pages/LoginPage.vue | 185 +++++++++++++++++--------------
 1 file changed, 99 insertions(+), 86 deletions(-)

diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 2e0d0a0..4a7fc06 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -16,44 +16,37 @@
       <!-- Error banner -->
       <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
 
-      <div class="w98-field-label" style="margin-bottom:10px">
-        Which provider would you like to use?
-      </div>
-
-      <!-- ── Provider tiles ──────────────────────────────────────── -->
-      <div class="provider-tiles">
-
-        <button
-          class="provider-tile"
-          :class="{ 'provider-tile--selected': selected === 'github' }"
-          @click="selected = 'github'"
-          @dblclick="proceed"
-        >
-          <q-icon name="fab fa-github" class="provider-tile__icon" />
-          <div class="provider-tile__name">GitHub</div>
-          <div class="provider-tile__meta">OAuth&nbsp;·&nbsp;public &amp; private repos</div>
-        </button>
-
-        <button
-          class="provider-tile"
-          :class="{ 'provider-tile--selected': selected === 'gitlab' }"
-          @click="selected = 'gitlab'"
+      <label class="w98-field-label" style="margin-bottom:6px;display:block">
+        Select a provider:
+      </label>
+
+      <!-- ── Provider list ───────────────────────────────────────── -->
+      <div class="provider-listbox" @keydown="onKeyDown" tabindex="0">
+        <div
+          v-for="p in providers"
+          :key="p.id"
+          class="provider-row"
+          :class="{ 'provider-row--selected': selected === p.id }"
+          @click="selected = p.id"
           @dblclick="proceed"
         >
-          <q-icon name="fab fa-gitlab" class="provider-tile__icon provider-tile__icon--gitlab" />
-          <div class="provider-tile__name">GitLab</div>
-          <div class="provider-tile__meta">PKCE&nbsp;·&nbsp;gitlab.com or self-hosted</div>
-        </button>
-
+          <q-icon :name="p.icon" class="provider-row__icon" :class="`provider-row__icon--${p.id}`" />
+          <div class="provider-row__info">
+            <span class="provider-row__name">{{ p.name }}</span>
+            <span class="provider-row__meta">{{ p.meta }}</span>
+          </div>
+        </div>
       </div>
 
       <!-- ── GitLab host (only when GitLab selected) ─────────────── -->
-      <transition name="fade">
+      <transition name="slide">
         <div v-if="selected === 'gitlab'" class="gitlab-host-box">
           <div class="w98-group-box">
             <div class="w98-group-box__label">GitLab Instance</div>
             <div class="w98-group-box__body">
-              <label class="w98-field-label" for="gl-host">Host:</label>
+              <label class="w98-field-label" for="gl-host" style="display:block;margin-bottom:4px">
+                Host:
+              </label>
               <input
                 id="gl-host"
                 v-model="gitlabHost"
@@ -86,6 +79,11 @@ const nav        = useWizardNav()
 const selected   = ref(null)          // 'github' | 'gitlab' | null
 const gitlabHost = ref('gitlab.com')
 
+const providers = [
+  { id: 'github', name: 'GitHub',  icon: 'fab fa-github', meta: 'OAuth · public & private repos' },
+  { id: 'gitlab', name: 'GitLab',  icon: 'fab fa-gitlab', meta: 'PKCE · gitlab.com or self-hosted' },
+]
+
 onMounted(updateNav)
 watch(selected, updateNav)
 
@@ -112,6 +110,20 @@ const errorMessage = computed(() => {
   return map[route.query.error] ?? `Authentication error: ${route.query.error}`
 })
 
+function onKeyDown(e) {
+  const ids = providers.map((p) => p.id)
+  const idx = ids.indexOf(selected.value)
+  if (e.key === 'ArrowDown') {
+    selected.value = ids[Math.min(idx + 1, ids.length - 1)]
+    e.preventDefault()
+  } else if (e.key === 'ArrowUp') {
+    selected.value = ids[Math.max(idx - 1, 0)]
+    e.preventDefault()
+  } else if (e.key === 'Enter' && selected.value) {
+    proceed()
+  }
+}
+
 async function proceed() {
   if (selected.value === 'github') loginGithub()
   else if (selected.value === 'gitlab') await loginGitlab()
@@ -142,85 +154,86 @@ async function loginGitlab() {
   max-width: 420px;
 }
 
-// ── Provider tiles ─────────────────────────────────────────────────
-.provider-tiles {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 16px;
+// ── Provider list box ──────────────────────────────────────────────
+.provider-listbox {
+  max-width: 360px;
+  background: #fff;
+  margin-bottom: 14px;
+  outline: none;
+
+  // Classic Win98 sunken listbox border
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+
+  &:focus-within .provider-row--selected {
+    background: $primary;
+    color: #fff;
+
+    .provider-row__meta           { color: rgba(255,255,255,0.65); }
+    .provider-row__icon           { color: #fff; }
+    .provider-row__icon--gitlab   { color: #fff; }
+  }
 }
 
-.provider-tile {
+.provider-row {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  width: 120px;
-  padding: 14px 10px 10px;
-  background: #F2F2F2;
-  border: none;
-  cursor: pointer;
-  text-align: center;
-  color: #000;
-  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  gap: 10px;
+  padding: 7px 10px;
+  cursor: default;
+  border-bottom: 1px solid #ececec;
+  user-select: none;
 
-  // Win98 raised button look
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset  1px  1px #ffffff,
-    inset -2px -2px #808080,
-    inset  2px  2px #e8e8e8;
+  &:last-child { border-bottom: none; }
 
-  &:hover:not(.provider-tile--selected) {
-    background: #e4e4e4;
-  }
-
-  &:active:not(.provider-tile--selected) {
-    box-shadow:
-      inset -1px -1px #ffffff,
-      inset  1px  1px #0a0a0a,
-      inset -2px -2px #e8e8e8,
-      inset  2px  2px #808080;
-    padding-top: 15px;
-    padding-left: 11px;
+  &:hover:not(.provider-row--selected) {
+    background: $accent; // #6BBF89 — subtle hover
+    color: #000;
   }
 
-  // Selected: sunken + navy fill
+  // Unfocused selection (grey like Win98)
   &--selected {
-    background: $primary;
+    background: #808080;
     color: #fff;
-    box-shadow:
-      inset -1px -1px #ffffff,
-      inset  1px  1px #0a0a0a,
-      inset -2px -2px #e8e8e8,
-      inset  2px  2px #808080;
-
-    .provider-tile__icon      { color: #fff; }
-    .provider-tile__icon--gitlab { color: #fff; }
-    .provider-tile__meta      { color: rgba(255,255,255,0.65); }
+
+    .provider-row__meta         { color: rgba(255,255,255,0.7); }
+    .provider-row__icon         { color: #fff; }
+    .provider-row__icon--gitlab { color: #fff; }
   }
 
   &__icon {
-    font-size: 36px !important;
+    font-size: 18px !important;
+    flex-shrink: 0;
     color: #333;
 
     &--gitlab { color: #e24329; }
   }
 
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
   &__name {
     font-size: 12px;
     font-weight: 700;
-    line-height: 1;
+    white-space: nowrap;
   }
 
   &__meta {
     font-size: 10px;
-    color: #666;
-    line-height: 1.3;
+    color: #808080;
+    white-space: nowrap;
   }
 }
 
 // ── GitLab host group box ──────────────────────────────────────────
-.gitlab-host-box { max-width: 340px; }
+.gitlab-host-box { max-width: 360px; }
 
 .w98-group-box {
   border: 1px solid #808080;
@@ -240,7 +253,7 @@ async function loginGitlab() {
     color: #000;
   }
 
-  &__body { padding-top: 8px; }
+  &__body { padding-top: 10px; }
 }
 
 .w98-input-host {
@@ -257,7 +270,7 @@ async function loginGitlab() {
     inset -2px -2px #e8e8e8;
   background: #fff;
   box-sizing: border-box;
-  margin-bottom: 4px;
+  margin-bottom: 5px;
 }
 
 .host-hint {
@@ -273,9 +286,9 @@ async function loginGitlab() {
   }
 }
 
-// ── Fade transition ────────────────────────────────────────────────
-.fade-enter-active,
-.fade-leave-active { transition: opacity 0.15s; }
-.fade-enter-from,
-.fade-leave-to     { opacity: 0; }
+// ── Slide-down transition ──────────────────────────────────────────
+.slide-enter-active { transition: opacity 0.15s, transform 0.15s; }
+.slide-leave-active { transition: opacity 0.1s,  transform 0.1s; }
+.slide-enter-from   { opacity: 0; transform: translateY(-4px); }
+.slide-leave-to     { opacity: 0; transform: translateY(-4px); }
 </style>

From 78fab1953e28527ed60f8e149e181a7c42600268 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:04:36 +0300
Subject: [PATCH 10/24] feat: radio-button provider selection on Sign In; fix
 titlebar dblclick
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LoginPage now uses Win98-style radio option rows — each option has a
native radio button, provider icon, name and description. Selecting
one recesses the row (sunken inset) matching the Win98 dialog style.

Win98Window: dblclick on the title bar no longer maximises when the
Maximize button is disabled (new maximizable prop, default false).
---
 frontend/src/components/Win98Window.vue |  10 +-
 frontend/src/pages/LoginPage.vue        | 160 ++++++++++++------------
 2 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index 281e18d..0ef125e 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -29,7 +29,7 @@
 
         <div class="w98-titlebar__controls" @mousedown.stop>
           <button class="w98-chrome-btn" title="Minimize" disabled>_</button>
-          <button class="w98-chrome-btn" title="Maximize" disabled>□</button>
+          <button class="w98-chrome-btn" title="Maximize" :disabled="!maximizable">□</button>
           <button class="w98-chrome-btn w98-chrome-btn--close" title="Close" @click.stop="openCloseDialog">✕</button>
         </div>
       </div>
@@ -67,9 +67,10 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps({
-  title: { type: String, default: 'Window' },
-  width: { type: Number, default: 860 },
-  height: { type: Number, default: 560 },
+  title:       { type: String,  default: 'Window' },
+  width:       { type: Number,  default: 860 },
+  height:      { type: Number,  default: 560 },
+  maximizable: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['close'])
@@ -136,6 +137,7 @@ function restore() {
 }
 
 function toggleMaximize() {
+  if (!props.maximizable) return
   maximized.value = !maximized.value
 }
 
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 4a7fc06..60576c1 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -16,26 +16,34 @@
       <!-- Error banner -->
       <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
 
-      <label class="w98-field-label" style="margin-bottom:6px;display:block">
-        Select a provider:
-      </label>
+      <div class="w98-field-label" style="margin-bottom:10px">
+        How would you like to sign in?
+      </div>
 
-      <!-- ── Provider list ───────────────────────────────────────── -->
-      <div class="provider-listbox" @keydown="onKeyDown" tabindex="0">
-        <div
+      <!-- ── Provider radio options ──────────────────────────────── -->
+      <div class="provider-options">
+        <label
           v-for="p in providers"
           :key="p.id"
-          class="provider-row"
-          :class="{ 'provider-row--selected': selected === p.id }"
-          @click="selected = p.id"
-          @dblclick="proceed"
+          class="provider-option"
+          :class="{ 'provider-option--selected': selected === p.id }"
         >
-          <q-icon :name="p.icon" class="provider-row__icon" :class="`provider-row__icon--${p.id}`" />
-          <div class="provider-row__info">
-            <span class="provider-row__name">{{ p.name }}</span>
-            <span class="provider-row__meta">{{ p.meta }}</span>
+          <input
+            type="radio"
+            :value="p.id"
+            v-model="selected"
+            class="provider-option__radio"
+          />
+          <q-icon
+            :name="p.icon"
+            class="provider-option__icon"
+            :class="`provider-option__icon--${p.id}`"
+          />
+          <div class="provider-option__text">
+            <div class="provider-option__name">{{ p.name }}</div>
+            <div class="provider-option__desc">{{ p.desc }}</div>
           </div>
-        </div>
+        </label>
       </div>
 
       <!-- ── GitLab host (only when GitLab selected) ─────────────── -->
@@ -80,8 +88,18 @@ const selected   = ref(null)          // 'github' | 'gitlab' | null
 const gitlabHost = ref('gitlab.com')
 
 const providers = [
-  { id: 'github', name: 'GitHub',  icon: 'fab fa-github', meta: 'OAuth · public & private repos' },
-  { id: 'gitlab', name: 'GitLab',  icon: 'fab fa-gitlab', meta: 'PKCE · gitlab.com or self-hosted' },
+  {
+    id:   'github',
+    name: 'GitHub',
+    icon: 'fab fa-github',
+    desc: 'Sign in with GitHub via OAuth. Accesses public and private repositories.',
+  },
+  {
+    id:   'gitlab',
+    name: 'GitLab',
+    icon: 'fab fa-gitlab',
+    desc: 'Sign in with GitLab via PKCE. Works with gitlab.com or a self-hosted instance.',
+  },
 ]
 
 onMounted(updateNav)
@@ -110,20 +128,6 @@ const errorMessage = computed(() => {
   return map[route.query.error] ?? `Authentication error: ${route.query.error}`
 })
 
-function onKeyDown(e) {
-  const ids = providers.map((p) => p.id)
-  const idx = ids.indexOf(selected.value)
-  if (e.key === 'ArrowDown') {
-    selected.value = ids[Math.min(idx + 1, ids.length - 1)]
-    e.preventDefault()
-  } else if (e.key === 'ArrowUp') {
-    selected.value = ids[Math.max(idx - 1, 0)]
-    e.preventDefault()
-  } else if (e.key === 'Enter' && selected.value) {
-    proceed()
-  }
-}
-
 async function proceed() {
   if (selected.value === 'github') loginGithub()
   else if (selected.value === 'gitlab') await loginGitlab()
@@ -154,93 +158,93 @@ async function loginGitlab() {
   max-width: 420px;
 }
 
-// ── Provider list box ──────────────────────────────────────────────
-.provider-listbox {
-  max-width: 360px;
-  background: #fff;
-  margin-bottom: 14px;
-  outline: none;
-
-  // Classic Win98 sunken listbox border
-  box-shadow:
-    inset  1px  1px #0a0a0a,
-    inset -1px -1px #ffffff,
-    inset  2px  2px #808080,
-    inset -2px -2px #e8e8e8;
-
-  &:focus-within .provider-row--selected {
-    background: $primary;
-    color: #fff;
-
-    .provider-row__meta           { color: rgba(255,255,255,0.65); }
-    .provider-row__icon           { color: #fff; }
-    .provider-row__icon--gitlab   { color: #fff; }
-  }
+// ── Provider radio options ─────────────────────────────────────────
+.provider-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 420px;
+  margin-bottom: 16px;
 }
 
-.provider-row {
+.provider-option {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 7px 10px;
-  cursor: default;
-  border-bottom: 1px solid #ececec;
-  user-select: none;
+  padding: 9px 12px;
+  cursor: pointer;
+  background: #F2F2F2;
+  border: 2px solid transparent;
 
-  &:last-child { border-bottom: none; }
+  // Subtle raised surround
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
 
-  &:hover:not(.provider-row--selected) {
-    background: $accent; // #6BBF89 — subtle hover
-    color: #000;
+  &:hover:not(.provider-option--selected) {
+    background: #e8e8e8;
   }
 
-  // Unfocused selection (grey like Win98)
   &--selected {
-    background: #808080;
-    color: #fff;
+    background: #fff;
+    box-shadow:
+      inset  1px  1px #0a0a0a,
+      inset -1px -1px #ffffff,
+      inset  2px  2px #808080,
+      inset -2px -2px #e8e8e8;
+  }
 
-    .provider-row__meta         { color: rgba(255,255,255,0.7); }
-    .provider-row__icon         { color: #fff; }
-    .provider-row__icon--gitlab { color: #fff; }
+  &__radio {
+    flex-shrink: 0;
+    width: 13px;
+    height: 13px;
+    margin: 0;
+    cursor: pointer;
+    accent-color: $primary;
   }
 
   &__icon {
-    font-size: 18px !important;
+    font-size: 22px !important;
     flex-shrink: 0;
-    color: #333;
+    color: #444;
+    width: 26px;
+    text-align: center;
 
     &--gitlab { color: #e24329; }
   }
 
-  &__info {
+  &__text {
     display: flex;
     flex-direction: column;
-    gap: 1px;
+    gap: 2px;
     min-width: 0;
   }
 
   &__name {
     font-size: 12px;
     font-weight: 700;
-    white-space: nowrap;
+    color: #000;
+    line-height: 1;
   }
 
-  &__meta {
+  &__desc {
     font-size: 10px;
-    color: #808080;
-    white-space: nowrap;
+    color: #666;
+    line-height: 1.35;
   }
 }
 
 // ── GitLab host group box ──────────────────────────────────────────
-.gitlab-host-box { max-width: 360px; }
+.gitlab-host-box { max-width: 420px; }
 
 .w98-group-box {
   border: 1px solid #808080;
   box-shadow: 1px 1px 0 #fff;
   padding: 0 10px 10px;
   position: relative;
-  margin-top: 6px;
+  margin-top: 4px;
 
   &__label {
     position: absolute;

From b5ce1858f63d28016b50d3534190c9309d952076 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:07:01 +0300
Subject: [PATCH 11/24] feat: plain Win98-style radio options on Sign In page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed all raised/sunken panel borders from individual provider rows.
Options now sit flat on the white page background with a native radio
button, bold name + small icon, and indented description — matching
real Win98 wizard pages (Internet Connection Wizard style).
---
 frontend/src/pages/LoginPage.vue | 120 ++++++++++++++-----------------
 1 file changed, 52 insertions(+), 68 deletions(-)

diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 60576c1..73f1ac5 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -6,7 +6,7 @@
         <div class="wiz-page__step-label">Step 2 of 4</div>
         <h1 class="wiz-page__title">Sign In</h1>
         <p class="wiz-page__desc">
-          Select a Git provider, then click <strong>Sign In &gt;</strong> to connect your account.
+          Select a Git provider, then click <strong>Sign In &gt;</strong>.
         </p>
       </div>
     </div>
@@ -16,9 +16,7 @@
       <!-- Error banner -->
       <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
 
-      <div class="w98-field-label" style="margin-bottom:10px">
-        How would you like to sign in?
-      </div>
+      <p class="login-intro">How would you like to sign in?</p>
 
       <!-- ── Provider radio options ──────────────────────────────── -->
       <div class="provider-options">
@@ -26,22 +24,19 @@
           v-for="p in providers"
           :key="p.id"
           class="provider-option"
-          :class="{ 'provider-option--selected': selected === p.id }"
         >
           <input
             type="radio"
+            name="provider"
             :value="p.id"
             v-model="selected"
-            class="provider-option__radio"
-          />
-          <q-icon
-            :name="p.icon"
-            class="provider-option__icon"
-            :class="`provider-option__icon--${p.id}`"
           />
-          <div class="provider-option__text">
-            <div class="provider-option__name">{{ p.name }}</div>
-            <div class="provider-option__desc">{{ p.desc }}</div>
+          <div class="provider-option__body">
+            <span class="provider-option__name">
+              <q-icon :name="p.icon" class="provider-option__icon" :class="`provider-option__icon--${p.id}`" />
+              {{ p.name }}
+            </span>
+            <span class="provider-option__desc">{{ p.desc }}</span>
           </div>
         </label>
       </div>
@@ -64,7 +59,7 @@
               />
               <div class="host-hint">
                 Use <code>gitlab.com</code> for the public instance.
-                Change for a self-hosted GitLab server.
+                Change only for self-hosted GitLab servers.
               </div>
             </div>
           </div>
@@ -84,7 +79,7 @@ import { useWizardNav } from '../composables/useWizardNav.js'
 const route      = useRoute()
 const router     = useRouter()
 const nav        = useWizardNav()
-const selected   = ref(null)          // 'github' | 'gitlab' | null
+const selected   = ref(null)
 const gitlabHost = ref('gitlab.com')
 
 const providers = [
@@ -92,13 +87,13 @@ const providers = [
     id:   'github',
     name: 'GitHub',
     icon: 'fab fa-github',
-    desc: 'Sign in with GitHub via OAuth. Accesses public and private repositories.',
+    desc: 'Sign in with GitHub via OAuth — grants access to public and private repositories.',
   },
   {
     id:   'gitlab',
     name: 'GitLab',
     icon: 'fab fa-gitlab',
-    desc: 'Sign in with GitLab via PKCE. Works with gitlab.com or a self-hosted instance.',
+    desc: 'Sign in with GitLab via PKCE — works with gitlab.com or a self-hosted instance.',
   },
 ]
 
@@ -151,100 +146,89 @@ async function loginGitlab() {
 .login-error {
   font-size: 11px;
   padding: 5px 10px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   border: 2px solid #c10015;
   background: #ffeeee;
   color: #c10015;
   max-width: 420px;
 }
 
+// ── Intro text ─────────────────────────────────────────────────────
+.login-intro {
+  font-size: 12px;
+  color: #000;
+  margin: 0 0 10px;
+}
+
 // ── Provider radio options ─────────────────────────────────────────
+// Intentionally plain — no boxes, no raised borders.
+// This matches real Win98 wizard radio-button pages
+// (Internet Connection Wizard, Add Hardware Wizard, etc.)
 .provider-options {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  max-width: 420px;
-  margin-bottom: 16px;
+  gap: 2px;
+  max-width: 440px;
+  margin-bottom: 18px;
 }
 
 .provider-option {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 12px;
+  align-items: flex-start;
+  gap: 7px;
+  padding: 4px 2px;
   cursor: pointer;
-  background: #F2F2F2;
-  border: 2px solid transparent;
-
-  // Subtle raised surround
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset  1px  1px #ffffff,
-    inset -2px -2px #808080,
-    inset  2px  2px #e8e8e8;
+  user-select: none;
 
-  &:hover:not(.provider-option--selected) {
-    background: #e8e8e8;
-  }
-
-  &--selected {
-    background: #fff;
-    box-shadow:
-      inset  1px  1px #0a0a0a,
-      inset -1px -1px #ffffff,
-      inset  2px  2px #808080,
-      inset -2px -2px #e8e8e8;
-  }
+  // No background, no box-shadow — just the native radio + text on white
 
-  &__radio {
+  input[type='radio'] {
     flex-shrink: 0;
-    width: 13px;
-    height: 13px;
-    margin: 0;
+    margin: 3px 0 0;
     cursor: pointer;
     accent-color: $primary;
   }
 
-  &__icon {
-    font-size: 22px !important;
-    flex-shrink: 0;
-    color: #444;
-    width: 26px;
-    text-align: center;
-
-    &--gitlab { color: #e24329; }
-  }
-
-  &__text {
+  &__body {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    min-width: 0;
+    line-height: 1;
   }
 
   &__name {
+    display: flex;
+    align-items: center;
+    gap: 5px;
     font-size: 12px;
     font-weight: 700;
     color: #000;
-    line-height: 1;
+  }
+
+  &__icon {
+    font-size: 14px !important;
+    color: #333;
+
+    &--gitlab { color: #e24329; }
   }
 
   &__desc {
-    font-size: 10px;
-    color: #666;
-    line-height: 1.35;
+    font-size: 11px;
+    color: #444;
+    line-height: 1.45;
+    padding-left: 19px; // indent to align under the name text
   }
 }
 
 // ── GitLab host group box ──────────────────────────────────────────
-.gitlab-host-box { max-width: 420px; }
+.gitlab-host-box { max-width: 380px; }
 
 .w98-group-box {
   border: 1px solid #808080;
   box-shadow: 1px 1px 0 #fff;
   padding: 0 10px 10px;
   position: relative;
-  margin-top: 4px;
+  margin-top: 2px;
 
   &__label {
     position: absolute;

From f66e7eba12194889480416c60c40767ae0d096fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:10:48 +0300
Subject: [PATCH 12/24] fix: wizard window clamps to viewport on resize

Track vw/vh as reactive refs, updated via a window resize listener.
Effective window size is min(desired, viewport) so the window shrinks
to fit small screens. Position is re-clamped after every resize so the
window can never be dragged or pushed outside the visible area.
---
 frontend/src/components/Win98Window.vue | 54 ++++++++++++++++++-------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index 0ef125e..b81665b 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -76,27 +76,43 @@ const props = defineProps({
 const emit = defineEmits(['close'])
 
 // ── State ───────────────────────────────────────────────────────
-const pos            = ref({ x: 0, y: 0 })
-const dragging       = ref(false)
-const dragOffset     = ref({ x: 0, y: 0 })
-const maximized      = ref(false)
-const minimized      = ref(false)
+const pos              = ref({ x: 0, y: 0 })
+const dragging         = ref(false)
+const dragOffset       = ref({ x: 0, y: 0 })
+const maximized        = ref(false)
+const minimized        = ref(false)
 const showCloseConfirm = ref(false)
+const vw               = ref(window.innerWidth)
+const vh               = ref(window.innerHeight)
+
+// Effective dimensions — shrink to fit the viewport if needed
+const winW = computed(() => Math.min(props.width,  vw.value))
+const winH = computed(() => Math.min(props.height, vh.value))
+
+// ── Helpers ─────────────────────────────────────────────────────
+function clampPos(x, y) {
+  return {
+    x: Math.max(0, Math.min(x, vw.value - winW.value)),
+    y: Math.max(0, Math.min(y, vh.value - winH.value)),
+  }
+}
 
 // ── Lifecycle ───────────────────────────────────────────────────
 onMounted(() => {
   // Centre window on load
-  pos.value = {
-    x: Math.max(0, Math.round((window.innerWidth  - props.width)  / 2)),
-    y: Math.max(0, Math.round((window.innerHeight - props.height) / 2)),
-  }
+  pos.value = clampPos(
+    Math.round((vw.value - winW.value) / 2),
+    Math.round((vh.value - winH.value) / 2),
+  )
   document.addEventListener('mousemove', onMouseMove)
   document.addEventListener('mouseup',   onMouseUp)
+  window.addEventListener('resize', onViewportResize)
 })
 
 onUnmounted(() => {
   document.removeEventListener('mousemove', onMouseMove)
   document.removeEventListener('mouseup',   onMouseUp)
+  window.removeEventListener('resize', onViewportResize)
 })
 
 // ── Computed style ──────────────────────────────────────────────
@@ -106,8 +122,8 @@ const windowStyle = computed(() => {
     position: 'absolute',
     left:   pos.value.x + 'px',
     top:    pos.value.y + 'px',
-    width:  props.width  + 'px',
-    height: props.height + 'px',
+    width:  winW.value  + 'px',
+    height: winH.value  + 'px',
   }
 })
 
@@ -121,10 +137,18 @@ function onTitlebarMouseDown(e) {
 
 function onMouseMove(e) {
   if (!dragging.value) return
-  pos.value = {
-    x: Math.max(0, Math.min(e.clientX - dragOffset.value.x, window.innerWidth  - props.width)),
-    y: Math.max(0, Math.min(e.clientY - dragOffset.value.y, window.innerHeight - props.height)),
-  }
+  pos.value = clampPos(
+    e.clientX - dragOffset.value.x,
+    e.clientY - dragOffset.value.y,
+  )
+}
+
+// ── Viewport resize ─────────────────────────────────────────────
+function onViewportResize() {
+  vw.value = window.innerWidth
+  vh.value = window.innerHeight
+  // Re-clamp so the window never sits outside the new viewport
+  pos.value = clampPos(pos.value.x, pos.value.y)
 }
 
 function onMouseUp() {

From c5c64ea4fea640de8ee0e796cef07c872f3bb86c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:28:18 +0300
Subject: [PATCH 13/24] fix: Win98-authentic disabled button appearance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add opacity:1 to all :disabled rules to cancel the browser's built-in
opacity dimming (the main cause of the 'modern' look). Disabled buttons
now show grey text (#808080) with a 1px white emboss offset — the
classic Win98 engraved-text effect — while keeping their full raised
3D border unchanged.
---
 frontend/src/components/Win98Window.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index b81665b..fa07d07 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -281,9 +281,11 @@ function confirmClose() {
   }
 
   &:disabled {
-    color: #808080;
-    cursor: default;
-    text-shadow: 1px 1px #fff;
+    opacity: 1;              // cancel browser's built-in opacity dimming
+    color: #808080;          // grey text
+    text-shadow: 1px 1px 0 #fff; // white emboss offset — classic Win98 look
+    cursor: default;         // no "not-allowed" cursor
+    // raised 3D border stays exactly the same — Win98 never flattens it
     &:active { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #e8e8e8; padding: 0; }
   }
 
@@ -427,9 +429,10 @@ function confirmClose() {
   }
 
   &:disabled {
+    opacity: 1;
     color: #808080;
+    text-shadow: 1px 1px 0 #fff;
     cursor: default;
-    text-shadow: 1px 1px #fff;
   }
 
   // Win98 "default" button — same grey but with a black focus border
@@ -440,10 +443,11 @@ function confirmClose() {
     font-weight: 700;
 
     &:disabled {
+      opacity: 1;
       outline-color: #808080;
       color: #808080;
+      text-shadow: 1px 1px 0 #fff;
       cursor: default;
-      text-shadow: 1px 1px #fff;
     }
   }
 }

From 8c69d371fec5f82c10bbb42295b75dc837a81038 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:35:59 +0300
Subject: [PATCH 14/24] fix: replace Unicode chrome button glyphs with
 CSS-drawn Win98 icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The _ and □ Unicode characters rendered as font glyphs at 9px, which
never matched Win98's bitmap icons. Now using CSS ::before pseudo-
elements:
  - Minimize: 8×2px horizontal bar nudged toward the bottom
  - Maximize: 8×7px rectangle with a 2px top border (the title bar)
  - Close:    keeps the ✕ text (always enabled, renders fine)

Disabled state: icon shape turns grey (#808080) and gets a 1px white
drop-shadow via filter:drop-shadow — the authentic Win98 emboss effect
applied to the shape rather than to text.
---
 frontend/src/components/Win98Window.vue | 60 ++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index fa07d07..dd2b209 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -28,8 +28,8 @@
         <span class="w98-titlebar__text">{{ title }}</span>
 
         <div class="w98-titlebar__controls" @mousedown.stop>
-          <button class="w98-chrome-btn" title="Minimize" disabled>_</button>
-          <button class="w98-chrome-btn" title="Maximize" :disabled="!maximizable">□</button>
+          <button class="w98-chrome-btn w98-chrome-btn--minimize" title="Minimize" disabled></button>
+          <button class="w98-chrome-btn w98-chrome-btn--maximize" title="Maximize" :disabled="!maximizable"></button>
           <button class="w98-chrome-btn w98-chrome-btn--close" title="Close" @click.stop="openCloseDialog">✕</button>
         </div>
       </div>
@@ -256,8 +256,6 @@ function confirmClose() {
   width: 16px;
   height: 14px;
   background: #F2F2F2;
-  font-size: 9px;
-  font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -265,32 +263,70 @@ function confirmClose() {
   color: #000;
   border: none;
   padding: 0;
+  position: relative;   // anchor for ::before pseudo-element shapes
+  flex-shrink: 0;
   box-shadow:
     inset -1px -1px #0a0a0a,
     inset  1px  1px #ffffff,
     inset -2px -2px #808080,
     inset  2px  2px #e8e8e8;
 
-  &:active {
+  &:active:not(:disabled) {
     box-shadow:
       inset -1px -1px #ffffff,
       inset  1px  1px #0a0a0a,
       inset -2px -2px #e8e8e8,
       inset  2px  2px #808080;
-    padding: 1px 0 0 1px;
+    // shift icon 1px to give "pressed" feel
+    &::before { transform: translate(-50%, -50%) translate(1px, 1px); }
   }
 
   &:disabled {
-    opacity: 1;              // cancel browser's built-in opacity dimming
-    color: #808080;          // grey text
-    text-shadow: 1px 1px 0 #fff; // white emboss offset — classic Win98 look
-    cursor: default;         // no "not-allowed" cursor
-    // raised 3D border stays exactly the same — Win98 never flattens it
-    &:active { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #e8e8e8; padding: 0; }
+    opacity: 1;       // cancel browser opacity dimming
+    cursor: default;
+    // icon shape turns grey + gets a white emboss shadow via filter
+    &::before {
+      background: #808080;
+      border-color: #808080;
+      filter: drop-shadow(1px 1px 0 #fff);
+    }
+    &:active { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #e8e8e8; }
+    &:active::before { transform: translate(-50%, -50%); } // no press shift when disabled
   }
 
+  // ── Minimize icon: horizontal bar near bottom ─────────────────
+  &--minimize::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) translate(0, 2px); // nudge toward bottom
+    width: 8px;
+    height: 2px;
+    background: currentColor;
+  }
+
+  // ── Maximize icon: rectangle with thick top (Win98 style) ─────
+  &--maximize::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 7px;
+    background: transparent;
+    border: 1px solid currentColor;
+    border-top-width: 2px;  // thick top = title bar of a window
+  }
+
+  // ── Close button ──────────────────────────────────────────────
   &--close {
     margin-left: 2px;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1;
+
     &:hover:not(:disabled) { background: #e04040; color: #fff; }
   }
 }

From 21ec8a3c2c4fd5338abb8fad7a3eb5fb051952c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:47:13 +0300
Subject: [PATCH 15/24] feat: BSOD easter egg on wizard close confirmation

Confirming close (Yes in the dialog) now triggers:
  1. Instant monitor-flicker CSS animation into a full-screen BSOD
     (#0000AA) with authentic Win98 fatal-exception text and a live
     3-second countdown ("Restarting git-extract setup in N...")
  2. At 3.5 s the screen collapses to black (monitor off)
  3. At 4.2 s the BSOD is dismissed, 'close' is emitted, and the
     wizard reboots to the Welcome step
---
 frontend/src/components/Win98Window.vue | 91 ++++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index dd2b209..982e0d4 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -38,6 +38,13 @@
       <slot />
     </div>
 
+    <!-- ── BSOD easter egg ──────────────────────────────────────────── -->
+    <Transition name="bsod-flash">
+      <div v-if="showBSOD" class="w98-bsod" :class="{ 'w98-bsod--black': bsodBlack }">
+        <pre v-if="!bsodBlack" class="w98-bsod__text">{{ bsodText }}</pre>
+      </div>
+    </Transition>
+
     <!-- ── Close-confirm dialog ───────────────────────────────────── -->
     <div v-if="showCloseConfirm" class="w98-overlay" @click.self="showCloseConfirm = false">
       <div class="w98-dialog">
@@ -82,6 +89,9 @@ const dragOffset       = ref({ x: 0, y: 0 })
 const maximized        = ref(false)
 const minimized        = ref(false)
 const showCloseConfirm = ref(false)
+const showBSOD         = ref(false)
+const bsodBlack        = ref(false)
+const bsodCountdown    = ref(3)
 const vw               = ref(window.innerWidth)
 const vh               = ref(window.innerHeight)
 
@@ -171,8 +181,42 @@ function openCloseDialog() {
 
 function confirmClose() {
   showCloseConfirm.value = false
-  emit('close')
+  showBSOD.value      = true
+  bsodBlack.value     = false
+  bsodCountdown.value = 3
+
+  // Tick down the countdown every second
+  const ticker = setInterval(() => {
+    bsodCountdown.value--
+    if (bsodCountdown.value <= 0) clearInterval(ticker)
+  }, 1000)
+
+  // Screen goes black after 3.5 s
+  setTimeout(() => { bsodBlack.value = true }, 3500)
+
+  // "Reboot": hide BSOD and emit close after 4.2 s
+  setTimeout(() => {
+    showBSOD.value  = false
+    bsodBlack.value = false
+    emit('close')
+  }, 4200)
 }
+
+const bsodText = computed(() => `\
+Windows
+
+A fatal exception 0E has occurred at 0028:C061B3F7 in VxD git-
+extract(09) + 0000B3F7. The current application will be
+terminated.
+
+*  Press any key to terminate the current application.
+
+*  Press CTRL+ALT+DEL to restart your computer. You will
+   lose any unsaved information in all applications.
+
+
+Restarting git-extract setup in ${bsodCountdown.value}...\
+`)
 </script>
 
 <style lang="scss">
@@ -506,4 +550,49 @@ function confirmClose() {
   margin: 0 4px;
   box-shadow: 1px 0 #fff;
 }
+
+// ── BSOD easter egg ────────────────────────────────────────────
+.w98-bsod {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #0000AA;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 48px 10%;
+
+  &--black {
+    background: #000;
+    transition: background 0.12s ease-in;
+  }
+
+  &__text {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    line-height: 1.65;
+    color: #fff;
+    white-space: pre;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// The BSOD appears instantly with a monitor-flicker feel:
+// frame 0→5% black flash, then slam to blue
+@keyframes bsod-in {
+  0%   { opacity: 0; background: #000; }
+  8%   { opacity: 1; background: #000; }
+  12%  { opacity: 1; background: #0000AA; }
+  18%  { opacity: 0; background: #0000AA; }  // tiny flicker
+  22%  { opacity: 1; background: #0000AA; }
+  100% { opacity: 1; background: #0000AA; }
+}
+
+.bsod-flash-enter-active {
+  animation: bsod-in 0.28s steps(1, end) forwards;
+}
+// no leave animation — black phase handles the fade-out
+.bsod-flash-leave-active { transition: none; }
+.bsod-flash-leave-to     { opacity: 0; }
 </style>

From c5591797664005c0d7b720d6aa8d4367eb72c508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:54:12 +0300
Subject: [PATCH 16/24] feat: full PC boot sequence after BSOD on wizard close
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Confirming close now plays a ~12.5 s sequence:
  1. BSOD (#0000AA) with 3 s countdown — existing
  2. Black  (CRT off between screens)
  3. BIOS POST — Phoenix AwardBIOS header, memory test counting
     up (16384 → 131072 → 524288K OK), IDE drive detection,
     boot-menu hint, "Booting from CD-ROM..." — lines stagger in
     via CSS animation-delay on each .boot-line
  4. Black
  5. CD-ROM boot — ATAPI drive, boot-sector load, blinking cursor
     after "Press any key to boot from CD-ROM."
  6. Black
  7. Starting Windows 98... — classic white-on-black text
  8. Black — monitor off
  9. bootPhase resets to null, 'close' emitted, wizard reboots
     to Welcome step
---
 frontend/src/components/Win98Window.vue | 218 ++++++++++++++++++------
 1 file changed, 167 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index 982e0d4..1c6050b 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -38,12 +38,45 @@
       <slot />
     </div>
 
-    <!-- ── BSOD easter egg ──────────────────────────────────────────── -->
-    <Transition name="bsod-flash">
-      <div v-if="showBSOD" class="w98-bsod" :class="{ 'w98-bsod--black': bsodBlack }">
-        <pre v-if="!bsodBlack" class="w98-bsod__text">{{ bsodText }}</pre>
+    <!-- ── Boot sequence overlay (BSOD → BIOS → CD → Win98) ────────── -->
+    <div v-if="bootPhase" class="boot-overlay" :class="`boot-phase--${bootPhase}`">
+
+      <!-- BSOD -->
+      <pre v-if="bootPhase === 'bsod'" class="bsod-text">{{ bsodText }}</pre>
+
+      <!-- BIOS POST screen -->
+      <div v-else-if="bootPhase === 'bios'" class="bios-screen">
+        <div
+          v-for="(item, i) in BIOS_CONTENT"
+          :key="i"
+          class="boot-line bios-line"
+          :class="{ 'bios-line--header': i < 2 }"
+          :style="{ '--d': item.delay + 'ms' }"
+        >{{ item.text }}</div>
       </div>
-    </Transition>
+
+      <!-- CD boot -->
+      <div v-else-if="bootPhase === 'cdboot'" class="cdboot-screen">
+        <div
+          v-for="(item, i) in CDBOOT_CONTENT"
+          :key="i"
+          class="boot-line cdboot-line"
+          :style="{ '--d': item.delay + 'ms' }"
+        >{{ item.text }}</div>
+      </div>
+
+      <!-- Starting Windows 98 -->
+      <div v-else-if="bootPhase === 'win98'" class="win98start-screen">
+        <div
+          v-for="(item, i) in WIN98_CONTENT"
+          :key="i"
+          class="boot-line win98-line"
+          :style="{ '--d': item.delay + 'ms' }"
+        >{{ item.text }}</div>
+      </div>
+
+      <!-- 'black' phase: just the black background, no content -->
+    </div>
 
     <!-- ── Close-confirm dialog ───────────────────────────────────── -->
     <div v-if="showCloseConfirm" class="w98-overlay" @click.self="showCloseConfirm = false">
@@ -89,8 +122,7 @@ const dragOffset       = ref({ x: 0, y: 0 })
 const maximized        = ref(false)
 const minimized        = ref(false)
 const showCloseConfirm = ref(false)
-const showBSOD         = ref(false)
-const bsodBlack        = ref(false)
+const bootPhase        = ref(null)   // null|'bsod'|'black'|'bios'|'cdboot'|'win98'
 const bsodCountdown    = ref(3)
 const vw               = ref(window.innerWidth)
 const vh               = ref(window.innerHeight)
@@ -179,27 +211,70 @@ function openCloseDialog() {
   showCloseConfirm.value = true
 }
 
+// ── Boot sequence content ───────────────────────────────────────
+const BIOS_CONTENT = [
+  { text: 'Phoenix - AwardBIOS v6.00PG, An Energy Star Ally',          delay: 0 },
+  { text: 'Copyright (C) 1984-2001, Phoenix Technologies, LTD',        delay: 60 },
+  { text: '',                                                            delay: 150 },
+  { text: 'git-extract Systems, Inc.',                                  delay: 220 },
+  { text: '',                                                            delay: 310 },
+  { text: 'Main Processor  : Intel Pentium III 450MHz',                 delay: 380 },
+  { text: 'Math Coprocessor: Installed',                                delay: 450 },
+  { text: 'Floppy Drive A  : 1.44MB  3.5"',                            delay: 520 },
+  { text: '',                                                            delay: 600 },
+  { text: 'Memory Test :      16384K',                                  delay: 750 },
+  { text: 'Memory Test :     131072K',                                  delay: 950 },
+  { text: 'Memory Test :     524288K  OK',                              delay: 1150 },
+  { text: '',                                                            delay: 1350 },
+  { text: 'Detecting Primary Master   ...  ST320423A      Ultra DMA Mode 5', delay: 1550 },
+  { text: 'Detecting Primary Slave    ...  None',                       delay: 1830 },
+  { text: 'Detecting Secondary Master ...  ASUS CD-524E   PIO Mode 4', delay: 2110 },
+  { text: 'Detecting Secondary Slave  ...  None',                       delay: 2390 },
+  { text: '',                                                            delay: 2600 },
+  { text: 'Press <DEL> to enter SETUP   Press <F12> for Boot Menu',    delay: 2800 },
+  { text: '',                                                            delay: 3100 },
+  { text: 'Booting from CD-ROM...',                                     delay: 3400 },
+]
+
+const CDBOOT_CONTENT = [
+  { text: 'ATAPI CD-ROM: ASUS CD-524E',         delay: 0 },
+  { text: '',                                    delay: 300 },
+  { text: 'Loading boot sector...',              delay: 500 },
+  { text: '',                                    delay: 850 },
+  { text: 'Press any key to boot from CD-ROM.', delay: 1100 },
+]
+
+const WIN98_CONTENT = [
+  { text: 'Microsoft Windows 98',              delay: 0 },
+  { text: '',                                  delay: 200 },
+  { text: '         Starting Windows 98...', delay: 400 },
+]
+
+// ── Boot sequence logic ─────────────────────────────────────────
+function go(phase, ms) { setTimeout(() => { bootPhase.value = phase }, ms) }
+
 function confirmClose() {
   showCloseConfirm.value = false
-  showBSOD.value      = true
-  bsodBlack.value     = false
-  bsodCountdown.value = 3
+  bsodCountdown.value    = 3
+  bootPhase.value        = 'bsod'
 
-  // Tick down the countdown every second
   const ticker = setInterval(() => {
     bsodCountdown.value--
     if (bsodCountdown.value <= 0) clearInterval(ticker)
   }, 1000)
 
-  // Screen goes black after 3.5 s
-  setTimeout(() => { bsodBlack.value = true }, 3500)
+  go('black',  3000)   // brief black after BSOD
+  go('bios',   3500)   // BIOS POST screen
+  go('black',  7900)   // brief black
+  go('cdboot', 8300)   // CD boot prompt
+  go('black',  9900)   // brief black
+  go('win98',  10300)  // Starting Windows 98...
+  go('black',  12000)  // final black — screen off
 
-  // "Reboot": hide BSOD and emit close after 4.2 s
   setTimeout(() => {
-    showBSOD.value  = false
-    bsodBlack.value = false
+    bootPhase.value = null
     emit('close')
-  }, 4200)
+  }, 12500)
 }
 
 const bsodText = computed(() => `\
@@ -551,48 +626,89 @@ Restarting git-extract setup in ${bsodCountdown.value}...\
   box-shadow: 1px 0 #fff;
 }
 
-// ── BSOD easter egg ────────────────────────────────────────────
-.w98-bsod {
+// ── Boot overlay ───────────────────────────────────────────────
+// Base: always covers the full screen in black
+.boot-overlay {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  background: #0000AA;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 48px 10%;
+  background: #000;
+  overflow: hidden;
 
-  &--black {
-    background: #000;
-    transition: background 0.12s ease-in;
-  }
+  // BSOD phase snaps to blue
+  &.boot-phase--bsod { background: #0000AA; }
+}
 
-  &__text {
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 14px;
-    line-height: 1.65;
-    color: #fff;
-    white-space: pre;
-    margin: 0;
-    padding: 0;
-  }
+// Whole overlay flickers in like a CRT turning on
+@keyframes boot-flicker {
+  0%   { opacity: 0; }
+  6%   { opacity: 1; }
+  10%  { opacity: 0; }
+  14%  { opacity: 1; }
+  100% { opacity: 1; }
+}
+.boot-overlay { animation: boot-flicker 0.25s steps(1) forwards; }
+
+// ── BSOD text ──────────────────────────────────────────────────
+.bsod-text {
+  display: block;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.65;
+  color: #fff;
+  white-space: pre;
+  margin: 48px 10% 0;
+  padding: 0;
+}
+
+// ── Shared line-reveal animation ───────────────────────────────
+// Each line starts invisible and pops in at its own --d delay.
+@keyframes line-appear {
+  to { opacity: 1; }
+}
+
+.boot-line {
+  opacity: 0;
+  animation: line-appear 1ms var(--d, 0ms) step-end forwards;
+  white-space: pre;        // preserve indent
+  min-height: 1em;         // blank lines still take up space
+  font-family: 'Courier New', Courier, monospace;
+}
+
+// ── BIOS POST screen ───────────────────────────────────────────
+.bios-screen {
+  padding: 18px 36px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #aaaaaa;          // default grey like a real BIOS
 }
 
-// The BSOD appears instantly with a monitor-flicker feel:
-// frame 0→5% black flash, then slam to blue
-@keyframes bsod-in {
-  0%   { opacity: 0; background: #000; }
-  8%   { opacity: 1; background: #000; }
-  12%  { opacity: 1; background: #0000AA; }
-  18%  { opacity: 0; background: #0000AA; }  // tiny flicker
-  22%  { opacity: 1; background: #0000AA; }
-  100% { opacity: 1; background: #0000AA; }
+.bios-line {
+  &--header { color: #ffffff; } // copyright lines brighter
 }
 
-.bsod-flash-enter-active {
-  animation: bsod-in 0.28s steps(1, end) forwards;
+// ── CD boot screen ─────────────────────────────────────────────
+.cdboot-screen {
+  padding: 18px 36px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #ffffff;
+}
+
+// blinking cursor on last CD boot line
+.cdboot-line:last-child::after {
+  content: '_';
+  animation: blink-cur 1s step-end infinite;
+  animation-delay: 1.3s;
+  opacity: 0;
+}
+@keyframes blink-cur { 50% { opacity: 1; } }
+
+// ── Windows 98 start screen ────────────────────────────────────
+.win98start-screen {
+  padding: 18px 36px;
+  font-size: 14px;
+  line-height: 2;
+  color: #ffffff;
 }
-// no leave animation — black phase handles the fade-out
-.bsod-flash-leave-active { transition: none; }
-.bsod-flash-leave-to     { opacity: 0; }
 </style>

From daf98614822e44703d749c9aaca1867900c7377e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:55:57 +0300
Subject: [PATCH 17/24] fix: replace real brand names in boot sequence with
 parody names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phoenix → Fenix, AwardBIOS → RewardBIOS, Intel → Intek,
Pentium III → Pentagram III, ST320423A → XS320423A,
ASUS → AZUS, Ultra DMA → Ultra DXA,
Microsoft Windows 98 → Microtough Winders 98
---
 frontend/src/components/Win98Window.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index 1c6050b..a061ae4 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -213,12 +213,12 @@ function openCloseDialog() {
 
 // ── Boot sequence content ───────────────────────────────────────
 const BIOS_CONTENT = [
-  { text: 'Phoenix - AwardBIOS v6.00PG, An Energy Star Ally',          delay: 0 },
-  { text: 'Copyright (C) 1984-2001, Phoenix Technologies, LTD',        delay: 60 },
+  { text: 'Fenix - RewardBIOS v6.00PG, An Energy Star Companion',      delay: 0 },
+  { text: 'Copyright (C) 1984-2001, Fenix Technologies, LTD',          delay: 60 },
   { text: '',                                                            delay: 150 },
   { text: 'git-extract Systems, Inc.',                                  delay: 220 },
   { text: '',                                                            delay: 310 },
-  { text: 'Main Processor  : Intel Pentium III 450MHz',                 delay: 380 },
+  { text: 'Main Processor  : Intek Pentagram III 450MHz',               delay: 380 },
   { text: 'Math Coprocessor: Installed',                                delay: 450 },
   { text: 'Floppy Drive A  : 1.44MB  3.5"',                            delay: 520 },
   { text: '',                                                            delay: 600 },
@@ -226,9 +226,9 @@ const BIOS_CONTENT = [
   { text: 'Memory Test :     131072K',                                  delay: 950 },
   { text: 'Memory Test :     524288K  OK',                              delay: 1150 },
   { text: '',                                                            delay: 1350 },
-  { text: 'Detecting Primary Master   ...  ST320423A      Ultra DMA Mode 5', delay: 1550 },
+  { text: 'Detecting Primary Master   ...  XS320423A      Ultra DXA Mode 5', delay: 1550 },
   { text: 'Detecting Primary Slave    ...  None',                       delay: 1830 },
-  { text: 'Detecting Secondary Master ...  ASUS CD-524E   PIO Mode 4', delay: 2110 },
+  { text: 'Detecting Secondary Master ...  AZUS CD-524E   PIO Mode 4', delay: 2110 },
   { text: 'Detecting Secondary Slave  ...  None',                       delay: 2390 },
   { text: '',                                                            delay: 2600 },
   { text: 'Press <DEL> to enter SETUP   Press <F12> for Boot Menu',    delay: 2800 },
@@ -237,7 +237,7 @@ const BIOS_CONTENT = [
 ]
 
 const CDBOOT_CONTENT = [
-  { text: 'ATAPI CD-ROM: ASUS CD-524E',         delay: 0 },
+  { text: 'ATAPI CD-ROM: AZUS CD-524E',         delay: 0 },
   { text: '',                                    delay: 300 },
   { text: 'Loading boot sector...',              delay: 500 },
   { text: '',                                    delay: 850 },
@@ -245,9 +245,9 @@ const CDBOOT_CONTENT = [
 ]
 
 const WIN98_CONTENT = [
-  { text: 'Microsoft Windows 98',              delay: 0 },
-  { text: '',                                  delay: 200 },
-  { text: '         Starting Windows 98...', delay: 400 },
+  { text: 'Microtough Winders 98',                delay: 0 },
+  { text: '',                                     delay: 200 },
+  { text: '         Starting Winders 98...', delay: 400 },
 ]
 
 // ── Boot sequence logic ─────────────────────────────────────────

From d33cf158313a8e9121da8919b9a289e9eeee70c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 20:57:24 +0300
Subject: [PATCH 18/24] feat: title-bar icon system menu; remove hover from
 chrome buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Clicking the ⎇ icon opens a Win98-style system menu dropdown with
  Minimize / Maximize (both disabled/greyed) and Close (Alt+F4).
  Double-clicking the icon opens the close-confirm dialog directly.
  Clicking anywhere outside dismisses the menu via a document
  mousedown listener.
- Removed hover background/colour change from all chrome buttons —
  Win98 title bar buttons have no hover effect.
---
 frontend/src/components/Win98Window.vue | 88 ++++++++++++++++++++++++-
 1 file changed, 85 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index a061ae4..4bc289a 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -24,7 +24,21 @@
         @mousedown="onTitlebarMouseDown"
         @dblclick="toggleMaximize"
       >
-        <span class="w98-titlebar__icon">⎇</span>
+        <span class="w98-titlebar__icon" @click.stop="toggleSysMenu" @dblclick.stop="openCloseDialog">⎇</span>
+
+        <!-- System menu dropdown -->
+        <div v-if="showSysMenu" class="w98-sysmenu" @mousedown.stop>
+          <div class="w98-sysmenu__item w98-sysmenu__item--disabled">
+            <span class="w98-sysmenu__icon">_</span> Minimize
+          </div>
+          <div class="w98-sysmenu__item w98-sysmenu__item--disabled">
+            <span class="w98-sysmenu__icon">□</span> Maximize
+          </div>
+          <div class="w98-sysmenu__sep" />
+          <div class="w98-sysmenu__item" @click="closeSysMenu(); openCloseDialog()">
+            <span class="w98-sysmenu__icon">✕</span> Close        <span class="w98-sysmenu__hotkey">Alt+F4</span>
+          </div>
+        </div>
         <span class="w98-titlebar__text">{{ title }}</span>
 
         <div class="w98-titlebar__controls" @mousedown.stop>
@@ -122,6 +136,7 @@ const dragOffset       = ref({ x: 0, y: 0 })
 const maximized        = ref(false)
 const minimized        = ref(false)
 const showCloseConfirm = ref(false)
+const showSysMenu      = ref(false)
 const bootPhase        = ref(null)   // null|'bsod'|'black'|'bios'|'cdboot'|'win98'
 const bsodCountdown    = ref(3)
 const vw               = ref(window.innerWidth)
@@ -148,12 +163,14 @@ onMounted(() => {
   )
   document.addEventListener('mousemove', onMouseMove)
   document.addEventListener('mouseup',   onMouseUp)
+  document.addEventListener('mousedown', onDocMouseDown)
   window.addEventListener('resize', onViewportResize)
 })
 
 onUnmounted(() => {
   document.removeEventListener('mousemove', onMouseMove)
   document.removeEventListener('mouseup',   onMouseUp)
+  document.removeEventListener('mousedown', onDocMouseDown)
   window.removeEventListener('resize', onViewportResize)
 })
 
@@ -207,7 +224,12 @@ function toggleMaximize() {
   maximized.value = !maximized.value
 }
 
+function toggleSysMenu()  { showSysMenu.value = !showSysMenu.value }
+function closeSysMenu()   { showSysMenu.value = false }
+function onDocMouseDown() { showSysMenu.value = false }
+
 function openCloseDialog() {
+  showSysMenu.value = false
   showCloseConfirm.value = true
 }
 
@@ -354,6 +376,7 @@ Restarting git-extract setup in ${bsodCountdown.value}...\
   background: linear-gradient(to right, #0d4a88 0%, #1a78cc 100%);
   flex-shrink: 0;
   cursor: default;
+  position: relative;   // anchor for system menu dropdown
 
   &__icon { font-size: 13px; color: $accent; flex-shrink: 0; }
 
@@ -368,6 +391,66 @@ Restarting git-extract setup in ${bsodCountdown.value}...\
   }
 
   &__controls { display: flex; gap: 2px; }
+
+  // clickable icon cursor
+  &__icon { cursor: default; }
+}
+
+// ── System menu (title-bar icon dropdown) ──────────────────────
+.w98-sysmenu {
+  position: absolute;
+  top: 100%;    // just below the title bar
+  left: 0;
+  z-index: 200;
+  min-width: 160px;
+  background: #F2F2F2;
+  border: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline: 1px solid #000;
+  box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
+  padding: 2px 0;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 20px 3px 6px;
+    font-size: 11px;
+    cursor: default;
+    white-space: nowrap;
+
+    &:hover:not(.w98-sysmenu__item--disabled) {
+      background: $primary;
+      color: #fff;
+    }
+
+    &--disabled {
+      color: #808080;
+      text-shadow: 1px 1px 0 #fff;
+      cursor: default;
+    }
+  }
+
+  &__icon {
+    width: 14px;
+    font-size: 9px;
+    flex-shrink: 0;
+    text-align: center;
+  }
+
+  &__hotkey {
+    margin-left: auto;
+    padding-left: 24px;
+    color: inherit;
+    font-size: 11px;
+  }
+
+  &__sep {
+    height: 0;
+    margin: 3px 2px;
+    border-top: 1px solid #808080;
+    border-bottom: 1px solid #fff;
+  }
 }
 
 // ── Chrome buttons ─────────────────────────────────────────────
@@ -445,8 +528,7 @@ Restarting git-extract setup in ${bsodCountdown.value}...\
     font-size: 9px;
     font-weight: 700;
     line-height: 1;
-
-    &:hover:not(:disabled) { background: #e04040; color: #fff; }
+    // Win98 title buttons have no hover effect
   }
 }
 

From 53a5d88fd039108a2c3aacf56ec76bc0aba9622f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 23:50:32 +0300
Subject: [PATCH 19/24] rename Cancel button to Restart

---
 frontend/src/layouts/WizardLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index 784f0aa..511eab5 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -79,7 +79,7 @@
 
           <div class="w98-btn-sep" />
 
-          <button class="w98-btn" @click="logout">Cancel</button>
+          <button class="w98-btn" @click="logout">Restart</button>
         </div>
       </div>
     </div>

From 8721ca4c8fe76c6b9412f15fd51a7debd4418ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Sun, 26 Apr 2026 23:57:03 +0300
Subject: [PATCH 20/24] refactor: extract BlueScreen and BootSequence into own
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BlueScreen.vue   — presentational; renders the BSOD blue screen with
                   a countdown prop.
BootSequence.vue — self-contained sequence (BSOD → BIOS → CD boot →
                   Winders 98 start); runs entirely on onMounted,
                   emits 'done' when finished. Uses <BlueScreen>
                   internally for the BSOD phase.
Win98Window.vue  — now just mounts <BootSequence v-if="showBoot">
                   and calls emit('close') on its 'done' event;
                   all content arrays, phase state and timing
                   logic removed.
---
 frontend/src/components/BlueScreen.vue   |  40 +++++
 frontend/src/components/BootSequence.vue | 185 +++++++++++++++++++
 frontend/src/components/Win98Window.vue  | 217 ++---------------------
 3 files changed, 237 insertions(+), 205 deletions(-)
 create mode 100644 frontend/src/components/BlueScreen.vue
 create mode 100644 frontend/src/components/BootSequence.vue

diff --git a/frontend/src/components/BlueScreen.vue b/frontend/src/components/BlueScreen.vue
new file mode 100644
index 0000000..706131b
--- /dev/null
+++ b/frontend/src/components/BlueScreen.vue
@@ -0,0 +1,40 @@
+<template>
+  <pre class="bsod-text">{{ text }}</pre>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  countdown: { type: Number, default: 3 },
+})
+
+const text = computed(() => `\
+Windows
+
+A fatal exception 0E has occurred at 0028:C061B3F7 in VxD git-
+extract(09) + 0000B3F7. The current application will be
+terminated.
+
+*  Press any key to terminate the current application.
+
+*  Press CTRL+ALT+DEL to restart your computer. You will
+   lose any unsaved information in all applications.
+
+
+Restarting git-extract setup in ${props.countdown}...\
+`)
+</script>
+
+<style scoped>
+.bsod-text {
+  display: block;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.65;
+  color: #fff;
+  white-space: pre;
+  margin: 48px 10% 0;
+  padding: 0;
+}
+</style>
diff --git a/frontend/src/components/BootSequence.vue b/frontend/src/components/BootSequence.vue
new file mode 100644
index 0000000..6d30e99
--- /dev/null
+++ b/frontend/src/components/BootSequence.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="boot-overlay" :class="`boot-phase--${phase}`">
+
+    <!-- BSOD -->
+    <BlueScreen v-if="phase === 'bsod'" :countdown="bsodCountdown" />
+
+    <!-- BIOS POST screen -->
+    <div v-else-if="phase === 'bios'" class="bios-screen">
+      <div
+        v-for="(item, i) in BIOS_CONTENT"
+        :key="i"
+        class="boot-line bios-line"
+        :class="{ 'bios-line--header': i < 2 }"
+        :style="{ '--d': item.delay + 'ms' }"
+      >{{ item.text }}</div>
+    </div>
+
+    <!-- CD boot -->
+    <div v-else-if="phase === 'cdboot'" class="cdboot-screen">
+      <div
+        v-for="(item, i) in CDBOOT_CONTENT"
+        :key="i"
+        class="boot-line cdboot-line"
+        :style="{ '--d': item.delay + 'ms' }"
+      >{{ item.text }}</div>
+    </div>
+
+    <!-- Starting Winders 98 -->
+    <div v-else-if="phase === 'win98'" class="win98start-screen">
+      <div
+        v-for="(item, i) in WIN98_CONTENT"
+        :key="i"
+        class="boot-line win98-line"
+        :style="{ '--d': item.delay + 'ms' }"
+      >{{ item.text }}</div>
+    </div>
+
+    <!-- 'black' phase: just the black background, no content -->
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import BlueScreen from './BlueScreen.vue'
+
+const emit = defineEmits(['done'])
+
+// ── State ──────────────────────────────────────────────────────
+const phase         = ref('bsod')
+const bsodCountdown = ref(3)
+
+// ── Boot content ───────────────────────────────────────────────
+const BIOS_CONTENT = [
+  { text: 'Fenix - RewardBIOS v6.00PG, An Energy Star Companion',      delay: 0 },
+  { text: 'Copyright (C) 1984-2001, Fenix Technologies, LTD',          delay: 60 },
+  { text: '',                                                            delay: 150 },
+  { text: 'git-extract Systems, Inc.',                                  delay: 220 },
+  { text: '',                                                            delay: 310 },
+  { text: 'Main Processor  : Intek Pentagram III 450MHz',               delay: 380 },
+  { text: 'Math Coprocessor: Installed',                                delay: 450 },
+  { text: 'Floppy Drive A  : 1.44MB  3.5"',                            delay: 520 },
+  { text: '',                                                            delay: 600 },
+  { text: 'Memory Test :      16384K',                                  delay: 750 },
+  { text: 'Memory Test :     131072K',                                  delay: 950 },
+  { text: 'Memory Test :     524288K  OK',                              delay: 1150 },
+  { text: '',                                                            delay: 1350 },
+  { text: 'Detecting Primary Master   ...  XS320423A      Ultra DXA Mode 5', delay: 1550 },
+  { text: 'Detecting Primary Slave    ...  None',                       delay: 1830 },
+  { text: 'Detecting Secondary Master ...  AZUS CD-524E   PIO Mode 4', delay: 2110 },
+  { text: 'Detecting Secondary Slave  ...  None',                       delay: 2390 },
+  { text: '',                                                            delay: 2600 },
+  { text: 'Press <DEL> to enter SETUP   Press <F12> for Boot Menu',    delay: 2800 },
+  { text: '',                                                            delay: 3100 },
+  { text: 'Booting from CD-ROM...',                                     delay: 3400 },
+]
+
+const CDBOOT_CONTENT = [
+  { text: 'ATAPI CD-ROM: AZUS CD-524E',         delay: 0 },
+  { text: '',                                    delay: 300 },
+  { text: 'Loading boot sector...',              delay: 500 },
+  { text: '',                                    delay: 850 },
+  { text: 'Press any key to boot from CD-ROM.', delay: 1100 },
+]
+
+const WIN98_CONTENT = [
+  { text: 'Microtough Winders 98',                delay: 0 },
+  { text: '',                                     delay: 200 },
+  { text: '         Starting Winders 98...', delay: 400 },
+]
+
+// ── Sequence ───────────────────────────────────────────────────
+function go(p, ms) { setTimeout(() => { phase.value = p }, ms) }
+
+onMounted(() => {
+  bsodCountdown.value = 3
+
+  const ticker = setInterval(() => {
+    bsodCountdown.value--
+    if (bsodCountdown.value <= 0) clearInterval(ticker)
+  }, 1000)
+
+  go('black',  3000)
+  go('bios',   3500)
+  go('black',  7900)
+  go('cdboot', 8300)
+  go('black',  9900)
+  go('win98',  10300)
+  go('black',  12000)
+
+  setTimeout(() => emit('done'), 12500)
+})
+</script>
+
+<style lang="scss" scoped>
+// ── Overlay ────────────────────────────────────────────────────
+.boot-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #000;
+  overflow: hidden;
+
+  &.boot-phase--bsod { background: #0000AA; }
+}
+
+@keyframes boot-flicker {
+  0%   { opacity: 0; }
+  6%   { opacity: 1; }
+  10%  { opacity: 0; }
+  14%  { opacity: 1; }
+  100% { opacity: 1; }
+}
+.boot-overlay { animation: boot-flicker 0.25s steps(1) forwards; }
+
+// ── Shared line-reveal ─────────────────────────────────────────
+@keyframes line-appear {
+  to { opacity: 1; }
+}
+
+.boot-line {
+  opacity: 0;
+  animation: line-appear 1ms var(--d, 0ms) step-end forwards;
+  white-space: pre;
+  min-height: 1em;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+// ── BIOS POST ──────────────────────────────────────────────────
+.bios-screen {
+  padding: 18px 36px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #aaaaaa;
+}
+
+.bios-line {
+  &--header { color: #ffffff; }
+}
+
+// ── CD boot ────────────────────────────────────────────────────
+.cdboot-screen {
+  padding: 18px 36px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #ffffff;
+}
+
+.cdboot-line:last-child::after {
+  content: '_';
+  opacity: 0;
+  animation: blink-cur 1s step-end infinite;
+  animation-delay: 1.3s;
+}
+
+@keyframes blink-cur { 50% { opacity: 1; } }
+
+// ── Winders 98 start ───────────────────────────────────────────
+.win98start-screen {
+  padding: 18px 36px;
+  font-size: 14px;
+  line-height: 2;
+  color: #ffffff;
+}
+</style>
diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
index 4bc289a..d1aa5c0 100644
--- a/frontend/src/components/Win98Window.vue
+++ b/frontend/src/components/Win98Window.vue
@@ -52,45 +52,8 @@
       <slot />
     </div>
 
-    <!-- ── Boot sequence overlay (BSOD → BIOS → CD → Win98) ────────── -->
-    <div v-if="bootPhase" class="boot-overlay" :class="`boot-phase--${bootPhase}`">
-
-      <!-- BSOD -->
-      <pre v-if="bootPhase === 'bsod'" class="bsod-text">{{ bsodText }}</pre>
-
-      <!-- BIOS POST screen -->
-      <div v-else-if="bootPhase === 'bios'" class="bios-screen">
-        <div
-          v-for="(item, i) in BIOS_CONTENT"
-          :key="i"
-          class="boot-line bios-line"
-          :class="{ 'bios-line--header': i < 2 }"
-          :style="{ '--d': item.delay + 'ms' }"
-        >{{ item.text }}</div>
-      </div>
-
-      <!-- CD boot -->
-      <div v-else-if="bootPhase === 'cdboot'" class="cdboot-screen">
-        <div
-          v-for="(item, i) in CDBOOT_CONTENT"
-          :key="i"
-          class="boot-line cdboot-line"
-          :style="{ '--d': item.delay + 'ms' }"
-        >{{ item.text }}</div>
-      </div>
-
-      <!-- Starting Windows 98 -->
-      <div v-else-if="bootPhase === 'win98'" class="win98start-screen">
-        <div
-          v-for="(item, i) in WIN98_CONTENT"
-          :key="i"
-          class="boot-line win98-line"
-          :style="{ '--d': item.delay + 'ms' }"
-        >{{ item.text }}</div>
-      </div>
-
-      <!-- 'black' phase: just the black background, no content -->
-    </div>
+    <!-- ── Boot sequence (BSOD → BIOS → CD → Winders) ──────────────── -->
+    <BootSequence v-if="showBootSequence" @done="onBootDone" />
 
     <!-- ── Close-confirm dialog ───────────────────────────────────── -->
     <div v-if="showCloseConfirm" class="w98-overlay" @click.self="showCloseConfirm = false">
@@ -119,6 +82,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import BootSequence from './BootSequence.vue'
 
 const props = defineProps({
   title:       { type: String,  default: 'Window' },
@@ -135,10 +99,9 @@ const dragging         = ref(false)
 const dragOffset       = ref({ x: 0, y: 0 })
 const maximized        = ref(false)
 const minimized        = ref(false)
-const showCloseConfirm = ref(false)
-const showSysMenu      = ref(false)
-const bootPhase        = ref(null)   // null|'bsod'|'black'|'bios'|'cdboot'|'win98'
-const bsodCountdown    = ref(3)
+const showCloseConfirm  = ref(false)
+const showSysMenu       = ref(false)
+const showBootSequence  = ref(false)
 const vw               = ref(window.innerWidth)
 const vh               = ref(window.innerHeight)
 
@@ -233,87 +196,15 @@ function openCloseDialog() {
   showCloseConfirm.value = true
 }
 
-// ── Boot sequence content ───────────────────────────────────────
-const BIOS_CONTENT = [
-  { text: 'Fenix - RewardBIOS v6.00PG, An Energy Star Companion',      delay: 0 },
-  { text: 'Copyright (C) 1984-2001, Fenix Technologies, LTD',          delay: 60 },
-  { text: '',                                                            delay: 150 },
-  { text: 'git-extract Systems, Inc.',                                  delay: 220 },
-  { text: '',                                                            delay: 310 },
-  { text: 'Main Processor  : Intek Pentagram III 450MHz',               delay: 380 },
-  { text: 'Math Coprocessor: Installed',                                delay: 450 },
-  { text: 'Floppy Drive A  : 1.44MB  3.5"',                            delay: 520 },
-  { text: '',                                                            delay: 600 },
-  { text: 'Memory Test :      16384K',                                  delay: 750 },
-  { text: 'Memory Test :     131072K',                                  delay: 950 },
-  { text: 'Memory Test :     524288K  OK',                              delay: 1150 },
-  { text: '',                                                            delay: 1350 },
-  { text: 'Detecting Primary Master   ...  XS320423A      Ultra DXA Mode 5', delay: 1550 },
-  { text: 'Detecting Primary Slave    ...  None',                       delay: 1830 },
-  { text: 'Detecting Secondary Master ...  AZUS CD-524E   PIO Mode 4', delay: 2110 },
-  { text: 'Detecting Secondary Slave  ...  None',                       delay: 2390 },
-  { text: '',                                                            delay: 2600 },
-  { text: 'Press <DEL> to enter SETUP   Press <F12> for Boot Menu',    delay: 2800 },
-  { text: '',                                                            delay: 3100 },
-  { text: 'Booting from CD-ROM...',                                     delay: 3400 },
-]
-
-const CDBOOT_CONTENT = [
-  { text: 'ATAPI CD-ROM: AZUS CD-524E',         delay: 0 },
-  { text: '',                                    delay: 300 },
-  { text: 'Loading boot sector...',              delay: 500 },
-  { text: '',                                    delay: 850 },
-  { text: 'Press any key to boot from CD-ROM.', delay: 1100 },
-]
-
-const WIN98_CONTENT = [
-  { text: 'Microtough Winders 98',                delay: 0 },
-  { text: '',                                     delay: 200 },
-  { text: '         Starting Winders 98...', delay: 400 },
-]
-
-// ── Boot sequence logic ─────────────────────────────────────────
-function go(phase, ms) { setTimeout(() => { bootPhase.value = phase }, ms) }
-
 function confirmClose() {
   showCloseConfirm.value = false
-  bsodCountdown.value    = 3
-  bootPhase.value        = 'bsod'
-
-  const ticker = setInterval(() => {
-    bsodCountdown.value--
-    if (bsodCountdown.value <= 0) clearInterval(ticker)
-  }, 1000)
-
-  go('black',  3000)   // brief black after BSOD
-  go('bios',   3500)   // BIOS POST screen
-  go('black',  7900)   // brief black
-  go('cdboot', 8300)   // CD boot prompt
-  go('black',  9900)   // brief black
-  go('win98',  10300)  // Starting Windows 98...
-  go('black',  12000)  // final black — screen off
-
-  setTimeout(() => {
-    bootPhase.value = null
-    emit('close')
-  }, 12500)
+  showBootSequence.value = true
 }
 
-const bsodText = computed(() => `\
-Windows
-
-A fatal exception 0E has occurred at 0028:C061B3F7 in VxD git-
-extract(09) + 0000B3F7. The current application will be
-terminated.
-
-*  Press any key to terminate the current application.
-
-*  Press CTRL+ALT+DEL to restart your computer. You will
-   lose any unsaved information in all applications.
-
-
-Restarting git-extract setup in ${bsodCountdown.value}...\
-`)
+function onBootDone() {
+  showBootSequence.value = false
+  emit('close')
+}
 </script>
 
 <style lang="scss">
@@ -708,89 +599,5 @@ Restarting git-extract setup in ${bsodCountdown.value}...\
   box-shadow: 1px 0 #fff;
 }
 
-// ── Boot overlay ───────────────────────────────────────────────
-// Base: always covers the full screen in black
-.boot-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: #000;
-  overflow: hidden;
-
-  // BSOD phase snaps to blue
-  &.boot-phase--bsod { background: #0000AA; }
-}
-
-// Whole overlay flickers in like a CRT turning on
-@keyframes boot-flicker {
-  0%   { opacity: 0; }
-  6%   { opacity: 1; }
-  10%  { opacity: 0; }
-  14%  { opacity: 1; }
-  100% { opacity: 1; }
-}
-.boot-overlay { animation: boot-flicker 0.25s steps(1) forwards; }
-
-// ── BSOD text ──────────────────────────────────────────────────
-.bsod-text {
-  display: block;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 14px;
-  line-height: 1.65;
-  color: #fff;
-  white-space: pre;
-  margin: 48px 10% 0;
-  padding: 0;
-}
-
-// ── Shared line-reveal animation ───────────────────────────────
-// Each line starts invisible and pops in at its own --d delay.
-@keyframes line-appear {
-  to { opacity: 1; }
-}
-
-.boot-line {
-  opacity: 0;
-  animation: line-appear 1ms var(--d, 0ms) step-end forwards;
-  white-space: pre;        // preserve indent
-  min-height: 1em;         // blank lines still take up space
-  font-family: 'Courier New', Courier, monospace;
-}
-
-// ── BIOS POST screen ───────────────────────────────────────────
-.bios-screen {
-  padding: 18px 36px;
-  font-size: 13px;
-  line-height: 1.65;
-  color: #aaaaaa;          // default grey like a real BIOS
-}
-
-.bios-line {
-  &--header { color: #ffffff; } // copyright lines brighter
-}
-
-// ── CD boot screen ─────────────────────────────────────────────
-.cdboot-screen {
-  padding: 18px 36px;
-  font-size: 14px;
-  line-height: 1.8;
-  color: #ffffff;
-}
-
-// blinking cursor on last CD boot line
-.cdboot-line:last-child::after {
-  content: '_';
-  animation: blink-cur 1s step-end infinite;
-  animation-delay: 1.3s;
-  opacity: 0;
-}
-@keyframes blink-cur { 50% { opacity: 1; } }
-
-// ── Windows 98 start screen ────────────────────────────────────
-.win98start-screen {
-  padding: 18px 36px;
-  font-size: 14px;
-  line-height: 2;
-  color: #ffffff;
-}
+// Boot sequence is now in BootSequence.vue / BlueScreen.vue
 </style>

From 44621daf55e4495e993f689486ade27a10e78928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Mon, 27 Apr 2026 00:04:28 +0300
Subject: [PATCH 21/24] feat: add BIOS logo badge to top-right of POST screen

Classic BIOS-style logo box (dark blue #000080, grey border) fixed
to the top-right corner of the BIOS phase. Shows the Fenix flame
glyph in amber, FENIX brand in large white bold text, RewardBIOS
product name, version, and git-extract Systems attribution.
---
 frontend/src/components/BootSequence.vue | 71 ++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/frontend/src/components/BootSequence.vue b/frontend/src/components/BootSequence.vue
index 6d30e99..7f5434d 100644
--- a/frontend/src/components/BootSequence.vue
+++ b/frontend/src/components/BootSequence.vue
@@ -6,6 +6,7 @@
 
     <!-- BIOS POST screen -->
     <div v-else-if="phase === 'bios'" class="bios-screen">
+      <!-- POST text -->
       <div
         v-for="(item, i) in BIOS_CONTENT"
         :key="i"
@@ -13,6 +14,18 @@
         :class="{ 'bios-line--header': i < 2 }"
         :style="{ '--d': item.delay + 'ms' }"
       >{{ item.text }}</div>
+
+      <!-- Top-right logo badge -->
+      <div class="bios-logo">
+        <div class="bios-logo__flame">( ⎇ )</div>
+        <div class="bios-logo__brand">FENIX</div>
+        <div class="bios-logo__divider" />
+        <div class="bios-logo__product">RewardBIOS</div>
+        <div class="bios-logo__version">v6.00PG</div>
+        <div class="bios-logo__divider" />
+        <div class="bios-logo__copy">git-extract</div>
+        <div class="bios-logo__copy">Systems, Inc.</div>
+      </div>
     </div>
 
     <!-- CD boot -->
@@ -148,6 +161,7 @@ onMounted(() => {
 
 // ── BIOS POST ──────────────────────────────────────────────────
 .bios-screen {
+  position: relative;    // anchor for the logo
   padding: 18px 36px;
   font-size: 13px;
   line-height: 1.65;
@@ -158,6 +172,63 @@ onMounted(() => {
   &--header { color: #ffffff; }
 }
 
+// ── BIOS logo badge (top-right corner) ─────────────────────────
+.bios-logo {
+  position: absolute;
+  top: 18px;
+  right: 36px;
+  width: 140px;
+  background: #000080;           // classic BIOS badge blue
+  border: 2px solid #aaaaaa;
+  padding: 8px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  font-family: 'Courier New', Courier, monospace;
+  text-align: center;
+
+  &__flame {
+    font-size: 18px;
+    color: #ffcc00;              // amber glow
+    line-height: 1;
+    margin-bottom: 2px;
+    letter-spacing: 2px;
+  }
+
+  &__brand {
+    font-size: 16px;
+    font-weight: 700;
+    color: #ffffff;
+    letter-spacing: 3px;
+    line-height: 1;
+  }
+
+  &__product {
+    font-size: 10px;
+    color: #aaddff;
+    letter-spacing: 1px;
+  }
+
+  &__version {
+    font-size: 9px;
+    color: #88bbdd;
+  }
+
+  &__copy {
+    font-size: 9px;
+    color: #888888;
+    line-height: 1.3;
+  }
+
+  &__divider {
+    width: 80%;
+    height: 1px;
+    background: #446688;
+    margin: 3px 0;
+  }
+}
+
 // ── CD boot ────────────────────────────────────────────────────
 .cdboot-screen {
   padding: 18px 36px;

From 58bb0371a2324b841e5ee802bf1c2b77eb2c6323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Mon, 27 Apr 2026 00:07:47 +0300
Subject: [PATCH 22/24] fix: replace CSS-styled BIOS logo with pure box-drawing
 characters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The old logo used CSS background, border, flexbox and multiple font
sizes — things that didn't exist in 1998 BIOS text modes.

New approach: each line is a <div> containing one row of the ASCII
box, drawn entirely with Unicode box-drawing characters (╔ ═ ║ ╠ ╚
etc.). The only CSS is font-family, font-size, line-height and color
per line — matching how real Award/Phoenix BIOS logos actually looked.
---
 frontend/src/components/BootSequence.vue | 76 +++++++-----------------
 1 file changed, 20 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/BootSequence.vue b/frontend/src/components/BootSequence.vue
index 7f5434d..d370592 100644
--- a/frontend/src/components/BootSequence.vue
+++ b/frontend/src/components/BootSequence.vue
@@ -15,16 +15,16 @@
         :style="{ '--d': item.delay + 'ms' }"
       >{{ item.text }}</div>
 
-      <!-- Top-right logo badge -->
+      <!-- Top-right logo — pure box-drawing chars, no CSS borders -->
       <div class="bios-logo">
-        <div class="bios-logo__flame">( ⎇ )</div>
-        <div class="bios-logo__brand">FENIX</div>
-        <div class="bios-logo__divider" />
-        <div class="bios-logo__product">RewardBIOS</div>
-        <div class="bios-logo__version">v6.00PG</div>
-        <div class="bios-logo__divider" />
-        <div class="bios-logo__copy">git-extract</div>
-        <div class="bios-logo__copy">Systems, Inc.</div>
+        <div class="bios-logo__line">╔══════════════╗</div>
+        <div class="bios-logo__line bios-logo__line--brand">║  * FENIX  *  ║</div>
+        <div class="bios-logo__line bios-logo__line--product">║  RewardBIOS  ║</div>
+        <div class="bios-logo__line bios-logo__line--dim">║   v6.00PG    ║</div>
+        <div class="bios-logo__line">╠══════════════╣</div>
+        <div class="bios-logo__line bios-logo__line--dim">║  git-extract ║</div>
+        <div class="bios-logo__line bios-logo__line--dim">║ Systems, Inc.║</div>
+        <div class="bios-logo__line">╚══════════════╝</div>
       </div>
     </div>
 
@@ -172,60 +172,24 @@ onMounted(() => {
   &--header { color: #ffffff; }
 }
 
-// ── BIOS logo badge (top-right corner) ─────────────────────────
+// ── BIOS logo (top-right corner) ───────────────────────────────
+// Pure monospace box-drawing characters — no CSS borders or backgrounds.
+// Each div is one line; colours mimic real Award/Phoenix BIOS text.
 .bios-logo {
   position: absolute;
   top: 18px;
   right: 36px;
-  width: 140px;
-  background: #000080;           // classic BIOS badge blue
-  border: 2px solid #aaaaaa;
-  padding: 8px 10px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
   font-family: 'Courier New', Courier, monospace;
-  text-align: center;
-
-  &__flame {
-    font-size: 18px;
-    color: #ffcc00;              // amber glow
-    line-height: 1;
-    margin-bottom: 2px;
-    letter-spacing: 2px;
-  }
-
-  &__brand {
-    font-size: 16px;
-    font-weight: 700;
-    color: #ffffff;
-    letter-spacing: 3px;
-    line-height: 1;
-  }
-
-  &__product {
-    font-size: 10px;
-    color: #aaddff;
-    letter-spacing: 1px;
-  }
-
-  &__version {
-    font-size: 9px;
-    color: #88bbdd;
-  }
+  font-size: 13px;
+  line-height: 1.55;
 
-  &__copy {
-    font-size: 9px;
-    color: #888888;
-    line-height: 1.3;
-  }
+  &__line {
+    white-space: pre;
+    color: #aaaaaa;           // box-drawing chars: same grey as POST text
 
-  &__divider {
-    width: 80%;
-    height: 1px;
-    background: #446688;
-    margin: 3px 0;
+    &--brand   { color: #ffff55; } // bright yellow — product name highlight
+    &--product { color: #ffffff; } // white
+    &--dim     { color: #777777; } // darker grey for version / company
   }
 }
 

From c84307e21bda84923e62b05144551adb4c096324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Mon, 27 Apr 2026 00:50:49 +0300
Subject: [PATCH 23/24] feat: pixel-art BIOS logo + split extract into 4 wizard
 sub-steps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace ASCII box-drawing BIOS logo with a canvas-based pixel-art
graphic (80×50 px, CSS-scaled 3× with image-rendering: pixelated).
Draws a dithered dark-blue background, chunky 5×5 'FENIX' in yellow,
separator line, and small variable-width pixel-font subtitles —
matching the low-res bitmap look of real 90s Award/AMI BIOS cards.

Split the single Configure & Extract step into four dedicated pages:
  /extract/paths    – branch selector + FolderTree folder picker
  /extract/options  – target repo/branch/path + generate project file
  /extract/progress – InstallShield-style segmented progress bar with
                      scrolling status log; POSTs job and polls status
  /extract/finish   – summary panel with source/target details

Wizard sidebar grows from 4 to 7 steps. All inter-step state
(sourceBranch, targetBranch, generateProjectFile, extractRunId, …)
moved to the repos Pinia store so it persists across page transitions.
Shared Win98 form controls (w98-select, w98-input-full, w98-link-btn)
promoted from scoped CSS to global app.scss.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/BootSequence.vue   | 137 ++++++--
 frontend/src/css/app.scss                  |  50 +++
 frontend/src/layouts/WizardLayout.vue      |  16 +-
 frontend/src/pages/ExtractFinishPage.vue   | 189 +++++++++++
 frontend/src/pages/ExtractOptionsPage.vue  | 191 ++++++++++++
 frontend/src/pages/ExtractPathsPage.vue    | 187 +++++++++++
 frontend/src/pages/ExtractProgressPage.vue | 346 +++++++++++++++++++++
 frontend/src/router/routes.js              |   9 +-
 frontend/src/stores/repos.js               |  24 +-
 9 files changed, 1111 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/pages/ExtractFinishPage.vue
 create mode 100644 frontend/src/pages/ExtractOptionsPage.vue
 create mode 100644 frontend/src/pages/ExtractPathsPage.vue
 create mode 100644 frontend/src/pages/ExtractProgressPage.vue

diff --git a/frontend/src/components/BootSequence.vue b/frontend/src/components/BootSequence.vue
index d370592..0075cb3 100644
--- a/frontend/src/components/BootSequence.vue
+++ b/frontend/src/components/BootSequence.vue
@@ -15,17 +15,8 @@
         :style="{ '--d': item.delay + 'ms' }"
       >{{ item.text }}</div>
 
-      <!-- Top-right logo — pure box-drawing chars, no CSS borders -->
-      <div class="bios-logo">
-        <div class="bios-logo__line">╔══════════════╗</div>
-        <div class="bios-logo__line bios-logo__line--brand">║  * FENIX  *  ║</div>
-        <div class="bios-logo__line bios-logo__line--product">║  RewardBIOS  ║</div>
-        <div class="bios-logo__line bios-logo__line--dim">║   v6.00PG    ║</div>
-        <div class="bios-logo__line">╠══════════════╣</div>
-        <div class="bios-logo__line bios-logo__line--dim">║  git-extract ║</div>
-        <div class="bios-logo__line bios-logo__line--dim">║ Systems, Inc.║</div>
-        <div class="bios-logo__line">╚══════════════╝</div>
-      </div>
+      <!-- Top-right logo — pixel-art canvas, 80×50 px drawn natively, scaled 3× -->
+      <canvas ref="biosLogoCanvas" class="bios-logo" />
     </div>
 
     <!-- CD boot -->
@@ -54,14 +45,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, watch, nextTick, onMounted } from 'vue'
 import BlueScreen from './BlueScreen.vue'
 
 const emit = defineEmits(['done'])
 
 // ── State ──────────────────────────────────────────────────────
-const phase         = ref('bsod')
-const bsodCountdown = ref(3)
+const phase          = ref('bsod')
+const bsodCountdown  = ref(3)
+const biosLogoCanvas = ref(null)
 
 // ── Boot content ───────────────────────────────────────────────
 const BIOS_CONTENT = [
@@ -102,6 +94,103 @@ const WIN98_CONTENT = [
   { text: '         Starting Winders 98...', delay: 400 },
 ]
 
+// ── BIOS logo (pixel art) ─────────────────────────────────────
+watch(phase, val => { if (val === 'bios') nextTick(() => drawBiosLogo()) })
+
+function drawBiosLogo() {
+  const canvas = biosLogoCanvas.value
+  if (!canvas) return
+
+  const W = 80, H = 50
+  canvas.width  = W
+  canvas.height = H
+  const ctx = canvas.getContext('2d')
+
+  // Dithered dark-blue background (2-colour checkerboard)
+  for (let y = 0; y < H; y++) {
+    for (let x = 0; x < W; x++) {
+      ctx.fillStyle = (x + y) % 2 === 0 ? '#00007B' : '#000055'
+      ctx.fillRect(x, y, 1, 1)
+    }
+  }
+
+  // 1-px border
+  ctx.fillStyle = '#4444AA'
+  ctx.fillRect(0, 0, W, 1);      ctx.fillRect(0, H - 1, W, 1)
+  ctx.fillRect(0, 0, 1, H);      ctx.fillRect(W - 1, 0, 1, H)
+
+  // ── Big pixel font (5×5) — "FENIX" ────────────────────────────
+  const BIG = {
+    F: [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0]],
+    E: [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,1,1,1,1]],
+    N: [[1,0,0,0,1],[1,1,0,0,1],[1,0,1,0,1],[1,0,0,1,1],[1,0,0,0,1]],
+    I: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[1,1,1,1,1]],
+    X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],
+  }
+  const ps = 2           // on-canvas px per font pixel
+  const bigStr = 'FENIX'
+  const bigW = bigStr.length * 5 * ps + (bigStr.length - 1) * 2
+  const bigX = Math.floor((W - bigW) / 2)
+  const bigY = 6
+
+  ctx.fillStyle = '#FFFF55'
+  bigStr.split('').forEach((ch, ci) => {
+    const ox = bigX + ci * (5 * ps + 2)
+    BIG[ch].forEach((row, ry) =>
+      row.forEach((bit, rx) => { if (bit) ctx.fillRect(ox + rx * ps, bigY + ry * ps, ps, ps) })
+    )
+  })
+
+  // Horizontal separator
+  ctx.fillStyle = '#5555CC'
+  ctx.fillRect(3, 22, W - 6, 1)
+
+  // ── Small variable-width pixel font (4-5 × 5) ─────────────────
+  const SM = {
+    A: [[0,1,1,0],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1]],
+    B: [[1,1,1,0],[1,0,0,1],[1,1,1,0],[1,0,0,1],[1,1,1,0]],
+    C: [[0,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[0,1,1,0]],
+    D: [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,0]],
+    E: [[1,1,1,1],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,1,1,1]],
+    G: [[0,1,1,1],[1,0,0,0],[1,0,1,1],[1,0,0,1],[0,1,1,1]],
+    I: [[1,1,1],[0,1,0],[0,1,0],[0,1,0],[1,1,1]],
+    O: [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
+    P: [[1,1,1,0],[1,0,0,1],[1,1,1,0],[1,0,0,0],[1,0,0,0]],
+    R: [[1,1,1,0],[1,0,0,1],[1,1,1,0],[1,0,1,0],[1,0,0,1]],
+    S: [[0,1,1,1],[1,0,0,0],[0,1,1,0],[0,0,0,1],[1,1,1,0]],
+    T: [[1,1,1],[0,1,0],[0,1,0],[0,1,0],[0,1,0]],
+    V: [[1,0,0,0,1],[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,0,0,0,0]],
+    W: [[1,0,0,0,1],[1,0,0,0,1],[1,0,1,0,1],[1,1,0,1,1],[1,0,0,0,1]],
+    X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],
+    '0': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
+    '6': [[0,1,1,0],[1,0,0,0],[1,1,1,0],[1,0,0,1],[0,1,1,0]],
+    '.': [[0],[0],[0],[0],[1]],
+    '-': [[0,0,0],[0,0,0],[1,1,1],[0,0,0],[0,0,0]],
+    ' ': [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
+  }
+
+  function smWidth(str) {
+    let w = 0
+    for (const ch of str) { const b = SM[ch] ?? SM[' ']; w += b[0].length + 1 }
+    return w - 1
+  }
+  function drawSmText(str, y, color) {
+    ctx.fillStyle = color
+    let cx = Math.floor((W - smWidth(str)) / 2)
+    for (const ch of str) {
+      const bmp = SM[ch] ?? SM[' ']
+      bmp.forEach((row, ry) =>
+        row.forEach((bit, rx) => { if (bit) ctx.fillRect(cx + rx, y + ry, 1, 1) })
+      )
+      cx += bmp[0].length + 1
+    }
+  }
+
+  drawSmText('REWARDBIOS', 26, '#FFFFFF')
+  drawSmText('V6.00PG',    35, '#AAAAAA')
+  drawSmText('GIT-EXTRACT', 43, '#666699')
+}
+
 // ── Sequence ───────────────────────────────────────────────────
 function go(p, ms) { setTimeout(() => { phase.value = p }, ms) }
 
@@ -173,24 +262,16 @@ onMounted(() => {
 }
 
 // ── BIOS logo (top-right corner) ───────────────────────────────
-// Pure monospace box-drawing characters — no CSS borders or backgrounds.
-// Each div is one line; colours mimic real Award/Phoenix BIOS text.
+// 80×50 canvas drawn at native resolution, scaled to 240×150 via CSS.
+// image-rendering: pixelated keeps each logical pixel a hard block — no blur.
 .bios-logo {
   position: absolute;
   top: 18px;
   right: 36px;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 13px;
-  line-height: 1.55;
-
-  &__line {
-    white-space: pre;
-    color: #aaaaaa;           // box-drawing chars: same grey as POST text
-
-    &--brand   { color: #ffff55; } // bright yellow — product name highlight
-    &--product { color: #ffffff; } // white
-    &--dim     { color: #777777; } // darker grey for version / company
-  }
+  width:  240px;
+  height: 150px;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges; // Firefox
 }
 
 // ── CD boot ────────────────────────────────────────────────────
diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index dac10bd..4f844fa 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -115,3 +115,53 @@
   margin-bottom: 4px;
   color: #000;
 }
+
+// ── Win98 inset select ────────────────────────────────────────────
+.w98-select {
+  height: 21px;
+  padding: 0 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  cursor: pointer;
+
+  &--full { width: 100%; }
+
+  &:disabled { color: #808080; cursor: default; }
+}
+
+// ── Win98 inset text input ────────────────────────────────────────
+.w98-input-full {
+  width: 100%;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+// ── Inline link-style button (footer "Sign out") ──────────────────
+.w98-link-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  color: $primary;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover { color: $secondary; }
+}
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
index 511eab5..f122d72 100644
--- a/frontend/src/layouts/WizardLayout.vue
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -103,15 +103,21 @@ const steps = [
   { id: 1, label: 'Welcome' },
   { id: 2, label: 'Sign In' },
   { id: 3, label: 'Select Repository' },
-  { id: 4, label: 'Configure & Extract' },
+  { id: 4, label: 'Select Paths' },
+  { id: 5, label: 'Output Options' },
+  { id: 6, label: 'Progress' },
+  { id: 7, label: 'Finish' },
 ]
 
 const currentStep = computed(() => {
   const p = route.path
-  if (p === '/' || p === '/welcome')           return 1
-  if (p === '/login' || p.startsWith('/auth')) return 2
-  if (p === '/repos')                          return 3
-  if (p === '/extract')                        return 4
+  if (p === '/' || p === '/welcome')              return 1
+  if (p === '/login' || p.startsWith('/auth'))    return 2
+  if (p === '/repos')                             return 3
+  if (p === '/extract/paths')                     return 4
+  if (p === '/extract/options')                   return 5
+  if (p === '/extract/progress')                  return 6
+  if (p === '/extract/finish')                    return 7
   return 1
 })
 
diff --git a/frontend/src/pages/ExtractFinishPage.vue b/frontend/src/pages/ExtractFinishPage.vue
new file mode 100644
index 0000000..1c933ea
--- /dev/null
+++ b/frontend/src/pages/ExtractFinishPage.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">🎉</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 7 of 7</div>
+        <h1 class="wiz-page__title">Extraction Complete</h1>
+        <p class="wiz-page__desc">
+          git-extract Setup has finished copying files to the target repository.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <div class="fin-content">
+
+        <p class="fin-intro">
+          The following operation completed successfully:
+        </p>
+
+        <!-- Summary panel -->
+        <div class="w98-panel fin-panel">
+          <div class="w98-panel__body">
+
+            <div class="fin-row">
+              <span class="fin-key">Source</span>
+              <span class="fin-val">
+                {{ source?.fullName }}
+                <span class="fin-branch">{{ store.sourceBranch }}</span>
+              </span>
+            </div>
+
+            <div class="fin-row">
+              <span class="fin-key">Path</span>
+              <span class="fin-val"><code>{{ store.sourcePath || '/' }}</code></span>
+            </div>
+
+            <div class="fin-sep" />
+
+            <div class="fin-row">
+              <span class="fin-key">Target</span>
+              <span class="fin-val">
+                <a
+                  v-if="targetUrl"
+                  :href="targetUrl"
+                  target="_blank"
+                  class="fin-link"
+                >{{ target?.fullName }}</a>
+                <span v-else>{{ target?.fullName }}</span>
+                <span class="fin-branch">{{ store.targetBranch }}</span>
+              </span>
+            </div>
+
+            <div class="fin-row">
+              <span class="fin-key">Written to</span>
+              <span class="fin-val"><code>{{ store.targetPath || 'root' }}</code></span>
+            </div>
+
+            <template v-if="store.generateProjectFile">
+              <div class="fin-sep" />
+              <div class="fin-row">
+                <span class="fin-key">Project file</span>
+                <span class="fin-val fin-val--ok">✔ .git-extract.json written</span>
+              </div>
+            </template>
+
+          </div>
+        </div>
+
+        <p class="fin-outro">
+          Click <strong>Finish</strong> to close Setup, or
+          <strong>Restart</strong> to start a new extraction.
+        </p>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+const source = computed(() => store.selectedSource)
+const target = computed(() => store.selectedTarget)
+
+const targetUrl = computed(() => {
+  if (!target.value) return ''
+  const base = auth.provider === 'github'
+    ? 'https://github.com'
+    : `https://${auth.gitlabHost}`
+  return `${base}/${target.value.fullName}`
+})
+
+onMounted(() => {
+  nav.value = {
+    backLabel: '< Back', backDisabled: true,  onBack: null,
+    nextLabel: 'Next >', nextDisabled: true,  onNext: null,
+    finishLabel: 'Finish', finishDisabled: false,
+    onFinish: () => {
+      // Clear extraction state and return to welcome
+      store.extractRunId  = ''
+      store.extractRunUrl = ''
+      store.extractStatus = null
+      store.extractResult = null
+      router.push('/welcome')
+    },
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.fin-content { max-width: 440px; }
+
+.fin-intro {
+  font-size: 12px;
+  color: #000;
+  margin: 0 0 10px;
+}
+
+.fin-panel { margin-bottom: 14px; }
+
+.fin-row {
+  display: flex;
+  gap: 10px;
+  font-size: 11px;
+  padding: 3px 0;
+  align-items: baseline;
+}
+
+.fin-key {
+  width: 76px;
+  flex-shrink: 0;
+  font-weight: 700;
+  color: #555;
+  text-align: right;
+}
+
+.fin-val {
+  flex: 1;
+  color: #000;
+
+  code {
+    font-family: 'Courier New', monospace;
+    font-size: 10px;
+    background: #e8e8e8;
+    padding: 0 3px;
+  }
+
+  &--ok { color: $secondary; font-weight: 700; }
+}
+
+.fin-branch {
+  margin-left: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  color: $secondary;
+  background: rgba($secondary, 0.1);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.fin-link {
+  color: $primary;
+  text-decoration: underline;
+  &:hover { color: $secondary; }
+}
+
+.fin-sep {
+  margin: 5px 0;
+  border: none;
+  border-top: 1px solid #e0e0e0;
+}
+
+.fin-outro {
+  font-size: 11px;
+  color: #444;
+  margin: 0;
+  line-height: 1.6;
+}
+</style>
diff --git a/frontend/src/pages/ExtractOptionsPage.vue b/frontend/src/pages/ExtractOptionsPage.vue
new file mode 100644
index 0000000..9c50f59
--- /dev/null
+++ b/frontend/src/pages/ExtractOptionsPage.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">⚙</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 5 of 7</div>
+        <h1 class="wiz-page__title">Output Options</h1>
+        <p class="wiz-page__desc">
+          Choose where extracted files are written and configure output settings.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <div class="opts-form">
+
+        <!-- Target repository -->
+        <div class="opts-field">
+          <label class="w98-field-label">Target repository:</label>
+          <q-select
+            v-model="store.selectedTarget"
+            :options="store.filtered"
+            option-label="fullName"
+            option-value="id"
+            outlined dense use-input input-debounce="300"
+            placeholder="Search repositories…"
+            @filter="filterRepos"
+            @update:model-value="loadTargetBranches"
+          />
+        </div>
+
+        <!-- Target branch -->
+        <div class="opts-field">
+          <label class="w98-field-label">Target branch:</label>
+          <select
+            v-model="store.targetBranch"
+            class="w98-select w98-select--full"
+            :disabled="!store.targetBranches.length"
+          >
+            <option
+              v-for="b in store.targetBranches"
+              :key="b"
+              :value="b"
+            >{{ b }}</option>
+          </select>
+        </div>
+
+        <!-- Destination path -->
+        <div class="opts-field">
+          <label class="w98-field-label" for="dest-path">Destination path:</label>
+          <input
+            id="dest-path"
+            v-model="store.targetPath"
+            class="w98-input-full"
+            placeholder="src"
+            spellcheck="false"
+          />
+          <div class="opts-hint">
+            Relative path inside the target repo where files will be written.
+          </div>
+        </div>
+
+        <div class="opts-divider" />
+
+        <!-- Generate project file checkbox -->
+        <div class="opts-check-row">
+          <input
+            id="gen-proj"
+            v-model="store.generateProjectFile"
+            type="checkbox"
+          />
+          <label for="gen-proj" class="opts-check-label">
+            <span class="opts-check-name">Generate project file (.git-extract.json)</span>
+            <span class="opts-check-desc">
+              Records source repo, branch, and paths so this extraction can
+              be reproduced or updated later.
+            </span>
+          </label>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { getBranches as getGhBranches } from '../services/github.js'
+import { getBranches as getGlBranches } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+const canProceed = () => !!store.selectedTarget && !!store.targetBranch
+
+onMounted(() => {
+  updateNav()
+  // Re-load target branches if a target is already chosen (came back from next step)
+  if (store.selectedTarget && !store.targetBranches.length) loadTargetBranches()
+})
+
+watch([() => store.selectedTarget, () => store.targetBranch], updateNav)
+
+function updateNav() {
+  nav.value = {
+    backLabel: '< Back', backDisabled: false,
+    onBack: () => router.push('/extract/paths'),
+    nextLabel: 'Next >', nextDisabled: !canProceed(),
+    onNext: canProceed() ? () => router.push('/extract/progress') : null,
+    finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+  }
+}
+
+async function loadTargetBranches() {
+  if (!store.selectedTarget) return
+  store.targetBranch   = ''
+  store.targetBranches = []
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, store.selectedTarget.owner, store.selectedTarget.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, store.selectedTarget.id)
+  if (!data.error) {
+    store.targetBranches = data.map(b => b.name)
+    store.targetBranch   =
+      store.selectedTarget.defaultBranch || store.targetBranches[0] || 'main'
+  }
+}
+
+function filterRepos(val, update) {
+  update(() => { store.search = val })
+}
+</script>
+
+<style lang="scss" scoped>
+.opts-form { max-width: 400px; }
+
+.opts-field { margin-bottom: 12px; }
+
+.opts-hint {
+  margin-top: 4px;
+  font-size: 10px;
+  color: #808080;
+  line-height: 1.4;
+}
+
+.opts-divider {
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid #808080;
+  border-bottom: 1px solid #fff;
+}
+
+.opts-check-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    flex-shrink: 0;
+    margin-top: 2px;
+    cursor: pointer;
+    accent-color: $secondary;
+  }
+}
+
+.opts-check-label {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.opts-check-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: #000;
+}
+
+.opts-check-desc {
+  font-size: 11px;
+  color: #444;
+  line-height: 1.45;
+}
+</style>
diff --git a/frontend/src/pages/ExtractPathsPage.vue b/frontend/src/pages/ExtractPathsPage.vue
new file mode 100644
index 0000000..884671d
--- /dev/null
+++ b/frontend/src/pages/ExtractPathsPage.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">📁</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 4 of 7</div>
+        <h1 class="wiz-page__title">Select Paths</h1>
+        <p class="wiz-page__desc">
+          Choose the source branch, then select the folder you want to extract.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+
+      <!-- Guard: no repo selected -->
+      <template v-if="!source">
+        <p style="font-size:12px;color:#808080">
+          No repository selected. Please go back and choose a source repository.
+        </p>
+      </template>
+
+      <template v-else>
+        <!-- Source + branch row -->
+        <div class="paths-source-row">
+          <span class="w98-field-label" style="margin:0;flex-shrink:0">Source:</span>
+          <span class="paths-source-name">{{ source.fullName }}</span>
+          <select
+            v-model="store.sourceBranch"
+            class="w98-select"
+            :disabled="!store.sourceBranches.length"
+            @change="loadTree"
+          >
+            <option v-for="b in store.sourceBranches" :key="b" :value="b">{{ b }}</option>
+          </select>
+        </div>
+
+        <!-- Folder tree panel -->
+        <div class="w98-panel paths-tree-panel">
+          <div class="w98-panel__head">📂 Source Folder</div>
+          <div class="w98-panel__body paths-tree-body">
+            <div v-if="treeLoading" class="paths-hint">Loading tree…</div>
+            <FolderTree
+              v-else
+              v-model="store.sourcePath"
+              :items="store.sourceTree"
+            />
+            <div
+              v-if="!treeLoading && !store.sourceTree.length"
+              class="paths-hint"
+            >
+              No directories found in this branch.
+            </div>
+          </div>
+        </div>
+
+        <!-- Selection feedback -->
+        <div v-if="store.sourcePath" class="paths-selected">
+          Selected: <strong>{{ store.sourcePath }}</strong>
+        </div>
+        <div v-else class="paths-hint paths-hint--idle">
+          Click a folder above to select it.
+        </div>
+
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { getBranches as getGhBranches, getTree as getGhTree } from '../services/github.js'
+import { getBranches as getGlBranches, getTree as getGlTree } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+import FolderTree from '../components/FolderTree.vue'
+
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+const source      = computed(() => store.selectedSource)
+const treeLoading = ref(false)
+
+onMounted(async () => {
+  updateNav()
+  if (!source.value) return
+  if (!store.sourceBranches.length) await loadSourceBranches()
+  if (!store.sourceTree.length)     await loadTree()
+})
+
+watch(() => store.sourcePath, updateNav)
+
+function updateNav() {
+  const ready = !!store.sourcePath && !!source.value
+  nav.value = {
+    backLabel: '< Back', backDisabled: false,
+    onBack: () => router.push('/repos'),
+    nextLabel: 'Next >', nextDisabled: !ready,
+    onNext: ready ? () => router.push('/extract/options') : null,
+    finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+  }
+}
+
+async function loadSourceBranches() {
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, source.value.owner, source.value.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, source.value.id)
+  if (!data.error) {
+    store.sourceBranches = data.map(b => b.name)
+    if (!store.sourceBranch)
+      store.sourceBranch = source.value.defaultBranch || store.sourceBranches[0] || ''
+  }
+}
+
+async function loadTree() {
+  if (!source.value || !store.sourceBranch) return
+  treeLoading.value = true
+  store.sourceTree  = []
+  store.sourcePath  = ''
+
+  if (auth.provider === 'github') {
+    const branches = await getGhBranches(auth.token, source.value.owner, source.value.name)
+    const branch   = (branches || []).find(b => b.name === store.sourceBranch)
+    if (branch) {
+      const data = await getGhTree(auth.token, source.value.owner, source.value.name, branch.commit.sha)
+      store.sourceTree = data.tree || []
+    }
+  } else {
+    const data = await getGlTree(auth.token, auth.gitlabHost, source.value.id, store.sourceBranch)
+    store.sourceTree = Array.isArray(data)
+      ? data.map(i => ({ path: i.path, type: i.type === 'tree' ? 'tree' : 'blob' }))
+      : []
+  }
+
+  treeLoading.value = false
+  updateNav()
+}
+</script>
+
+<style lang="scss" scoped>
+.paths-source-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+
+.paths-source-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: $primary;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.paths-tree-panel { flex: 1; }
+
+.paths-tree-body {
+  min-height: 180px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.paths-hint {
+  font-size: 11px;
+  color: #808080;
+  padding: 4px 0;
+
+  &--idle { margin-top: 6px; }
+}
+
+.paths-selected {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #222;
+
+  strong { color: $primary; }
+}
+</style>
diff --git a/frontend/src/pages/ExtractProgressPage.vue b/frontend/src/pages/ExtractProgressPage.vue
new file mode 100644
index 0000000..0e7d6f7
--- /dev/null
+++ b/frontend/src/pages/ExtractProgressPage.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">{{ headIcon }}</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 6 of 7</div>
+        <h1 class="wiz-page__title">{{ headTitle }}</h1>
+        <p class="wiz-page__desc">{{ headDesc }}</p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+
+      <!-- Current action label -->
+      <div class="prg-action">{{ actionLabel }}</div>
+
+      <!-- Win98-style segmented progress bar -->
+      <div class="prg-bar-wrap">
+        <div class="prg-bar">
+          <div
+            v-for="i in TOTAL_SEGS"
+            :key="i"
+            class="prg-bar__seg"
+            :class="{ 'prg-bar__seg--on': i <= filledSegs }"
+          />
+        </div>
+        <div class="prg-pct">{{ pctLabel }}</div>
+      </div>
+
+      <!-- InstallShield-style status log -->
+      <div class="w98-panel prg-log-panel">
+        <div class="w98-panel__head">📋 Status Log</div>
+        <div ref="logBodyEl" class="w98-panel__body prg-log-body">
+          <div
+            v-for="(line, i) in logLines"
+            :key="i"
+            class="prg-log-line"
+          >
+            <span class="prg-log-line__msg">{{ line.msg }}</span>
+            <span
+              v-if="line.badge"
+              class="prg-log-line__badge"
+              :class="`prg-log-line__badge--${line.variant}`"
+            >{{ line.badge }}</span>
+          </div>
+          <div v-if="!logLines.length" class="prg-log-empty">Starting…</div>
+        </div>
+      </div>
+
+      <!-- Error banner -->
+      <div v-if="errorMsg" class="prg-error">⚠ {{ errorMsg }}</div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+// ── Constants ──────────────────────────────────────────────────
+const TOTAL_SEGS = 28   // number of blocks in the progress bar
+
+// ── Stores / composables ───────────────────────────────────────
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+// ── State ──────────────────────────────────────────────────────
+const progress  = ref(0)         // 0–100
+const logLines  = ref([])
+const errorMsg  = ref('')
+const phase     = ref('idle')    // idle | submitting | running | done | error
+const logBodyEl = ref(null)
+
+let pollTimer = null
+let rampTimer = null
+
+// ── Computed ───────────────────────────────────────────────────
+const filledSegs = computed(() => Math.round((progress.value / 100) * TOTAL_SEGS))
+const pctLabel   = computed(() => `${Math.round(progress.value)}%`)
+
+const headIcon = computed(() => {
+  if (phase.value === 'done')  return '✔'
+  if (phase.value === 'error') return '✖'
+  return '⟳'
+})
+const headTitle = computed(() => {
+  if (phase.value === 'done')  return 'Extraction Complete'
+  if (phase.value === 'error') return 'Extraction Failed'
+  return 'Extracting Files…'
+})
+const headDesc = computed(() => {
+  if (phase.value === 'done')  return 'All files were copied to the target repository.'
+  if (phase.value === 'error') return 'An error occurred. See the status log for details.'
+  return 'Please wait while git-extract copies your files. Do not close this window.'
+})
+const actionLabel = computed(() => {
+  if (phase.value === 'submitting') return 'Submitting extraction job…'
+  if (phase.value === 'running')    return 'Copying files…'
+  if (phase.value === 'done')       return 'Setup complete.'
+  if (phase.value === 'error')      return 'Setup did not complete.'
+  return 'Initialising…'
+})
+
+// ── Helpers ────────────────────────────────────────────────────
+function log(msg, badge = '', variant = 'info') {
+  logLines.value.push({ msg, badge, variant })
+  nextTick(() => {
+    if (logBodyEl.value) logBodyEl.value.scrollTop = logBodyEl.value.scrollHeight
+  })
+}
+
+function setNav(done = false, hasError = false) {
+  nav.value = {
+    backLabel: '< Back', backDisabled: !done && !hasError,
+    onBack: (done || hasError) ? () => router.push('/extract/options') : null,
+    nextLabel: 'Next >', nextDisabled: !done || hasError,
+    onNext: (done && !hasError) ? () => router.push('/extract/finish') : null,
+    finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+  }
+}
+
+/** Smoothly ramp `progress` toward `target` over `ms` milliseconds. */
+function rampTo(target, ms) {
+  clearInterval(rampTimer)
+  const origin = progress.value
+  const t0     = Date.now()
+  rampTimer = setInterval(() => {
+    const frac = Math.min((Date.now() - t0) / ms, 1)
+    progress.value = origin + (target - origin) * frac
+    if (frac >= 1) clearInterval(rampTimer)
+  }, 50)
+}
+
+// ── Main extraction flow ───────────────────────────────────────
+async function run() {
+  phase.value = 'submitting'
+  setNav()
+
+  log('Connecting to extraction server…')
+  rampTo(8, 800)
+
+  const base   = auth.provider === 'github'
+    ? 'https://github.com'
+    : `https://${auth.gitlabHost}`
+  const source = store.selectedSource
+  const target = store.selectedTarget
+
+  let data
+  try {
+    const res = await fetch(`${process.env.WORKER_URL}/extract`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sourceRepoUrl:       `${base}/${source.fullName}`,
+        sourceToken:          auth.token,
+        sourcePath:           store.sourcePath,
+        targetRepoUrl:       `${base}/${target.fullName}`,
+        targetToken:          auth.token,
+        targetBranch:         store.targetBranch,
+        targetPath:           store.targetPath,
+        generateProjectFile:  store.generateProjectFile,
+      }),
+    })
+    data = await res.json()
+  } catch {
+    fail('Network error — could not reach the extraction server.')
+    return
+  }
+
+  if (data.error) {
+    fail(data.error)
+    return
+  }
+
+  store.extractRunId  = data.runId  || ''
+  store.extractRunUrl = data.runUrl || ''
+  log('Job submitted successfully', 'OK', 'ok')
+  rampTo(18, 600)
+
+  phase.value = 'running'
+  log('Workflow queued, waiting for runner…')
+  rampTo(22, 1200)
+
+  // Start polling
+  pollTimer = setInterval(poll, 4000)
+  await poll()
+}
+
+async function poll() {
+  if (!store.extractRunId) return
+  try {
+    const res  = await fetch(
+      `${process.env.WORKER_URL}/status?runId=${encodeURIComponent(store.extractRunId)}`,
+    )
+    const data = await res.json()
+    const st   = data.status     || 'queued'
+    const con  = data.conclusion || null
+
+    // Sprinkle fake progress messages as the job advances
+    if (st === 'in_progress') {
+      if (logLines.value.length === 3) {
+        log('Fetching source tree…')
+        rampTo(45, 5000)
+      } else if (logLines.value.length === 4) {
+        log('Reading and staging files…')
+        rampTo(72, 6000)
+      } else if (logLines.value.length === 5) {
+        log('Writing to target repository…')
+        rampTo(88, 5000)
+      }
+    }
+
+    if (st === 'completed') {
+      clearInterval(pollTimer)
+      if (con === 'success') {
+        log('Files written successfully', 'OK', 'ok')
+        if (store.generateProjectFile) log('Project file written (.git-extract.json)', 'OK', 'ok')
+        log('Workflow completed', 'OK', 'ok')
+        rampTo(100, 500)
+        setTimeout(() => {
+          phase.value         = 'done'
+          store.extractStatus = 'done'
+          store.extractResult = data
+          setNav(true, false)
+        }, 600)
+      } else {
+        log(`Workflow ended: ${con || 'failed'}`, 'ERR', 'err')
+        fail(`Extraction ${con || 'failed'}. Check your run logs for details.`)
+      }
+    }
+  } catch {
+    // Network blip — keep polling silently
+  }
+}
+
+function fail(msg) {
+  clearInterval(pollTimer)
+  clearInterval(rampTimer)
+  errorMsg.value      = msg
+  phase.value         = 'error'
+  store.extractStatus = 'error'
+  log(msg, 'ERR', 'err')
+  setNav(false, true)
+}
+
+// ── Lifecycle ──────────────────────────────────────────────────
+onMounted(() => { setNav(); run() })
+onUnmounted(() => { clearInterval(pollTimer); clearInterval(rampTimer) })
+</script>
+
+<style lang="scss" scoped>
+// ── Current-action label ───────────────────────────────────────
+.prg-action {
+  font-size: 12px;
+  color: #000;
+  margin-bottom: 10px;
+  min-height: 1.4em;
+}
+
+// ── Win98 segmented progress bar ──────────────────────────────
+.prg-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.prg-bar {
+  flex: 1;
+  height: 18px;
+  padding: 2px;
+  display: flex;
+  gap: 2px;
+  // Classic Win98 inset border
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+
+  &__seg {
+    flex: 1;
+    height: 100%;
+    background: #c8c8c8;
+
+    &--on {
+      background: $secondary;  // forest green — same as Win98 setup progress
+    }
+  }
+}
+
+.prg-pct {
+  width: 34px;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 11px;
+  color: #444;
+}
+
+// ── Status log panel ───────────────────────────────────────────
+.prg-log-panel  { margin-bottom: 10px; }
+
+.prg-log-body {
+  min-height: 90px;
+  max-height: 160px;
+  overflow-y: auto;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+  padding: 6px 8px;
+}
+
+.prg-log-empty { color: #808080; }
+
+.prg-log-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+
+  &__msg   { color: #222; flex: 1; }
+  &__badge {
+    flex-shrink: 0;
+    font-weight: 700;
+
+    &--ok   { color: $secondary; }
+    &--err  { color: $negative; }
+    &--info { color: #808080; }
+  }
+}
+
+// ── Error banner ───────────────────────────────────────────────
+.prg-error {
+  font-size: 11px;
+  padding: 6px 10px;
+  border: 2px solid $negative;
+  background: #ffeeee;
+  color: $negative;
+}
+</style>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 6025bd3..b47c975 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -5,11 +5,16 @@ const routes = [
     children: [
       { path: '', redirect: '/welcome' },
       { path: '/welcome', component: () => import('pages/WelcomePage.vue') },
-      { path: '/login', component: () => import('pages/LoginPage.vue') },
+      { path: '/login',   component: () => import('pages/LoginPage.vue') },
       { path: '/auth/github', component: () => import('pages/AuthCallback.vue') },
       { path: '/auth/gitlab', component: () => import('pages/AuthCallback.vue') },
       { path: '/repos', component: () => import('pages/ReposPage.vue'), meta: { requiresAuth: true } },
-      { path: '/extract', component: () => import('pages/ExtractPage.vue'), meta: { requiresAuth: true } },
+      // /extract → always land on the first extract sub-step
+      { path: '/extract', redirect: '/extract/paths' },
+      { path: '/extract/paths',    component: () => import('pages/ExtractPathsPage.vue'),    meta: { requiresAuth: true } },
+      { path: '/extract/options',  component: () => import('pages/ExtractOptionsPage.vue'),  meta: { requiresAuth: true } },
+      { path: '/extract/progress', component: () => import('pages/ExtractProgressPage.vue'), meta: { requiresAuth: true } },
+      { path: '/extract/finish',   component: () => import('pages/ExtractFinishPage.vue'),   meta: { requiresAuth: true } },
     ],
   },
   { path: '/:catchAll(.*)*', component: () => import('pages/ErrorNotFound.vue') },
diff --git a/frontend/src/stores/repos.js b/frontend/src/stores/repos.js
index 67309b4..5a0107a 100644
--- a/frontend/src/stores/repos.js
+++ b/frontend/src/stores/repos.js
@@ -12,9 +12,18 @@ export const useReposStore = defineStore('repos', () => {
   const search = ref('')
   const selectedSource = ref(null)
   const selectedTarget = ref(null)
-  const sourceTree = ref([])
-  const sourcePath = ref('')
-  const targetPath = ref('src')
+  const sourceTree     = ref([])
+  const sourcePath     = ref('')
+  const sourceBranch   = ref('')
+  const sourceBranches = ref([])
+  const targetPath     = ref('src')
+  const targetBranch   = ref('')
+  const targetBranches = ref([])
+  const generateProjectFile = ref(false)
+  const extractRunId   = ref('')
+  const extractRunUrl  = ref('')
+  const extractStatus  = ref(null)   // null | 'running' | 'done' | 'error'
+  const extractResult  = ref(null)
 
   const filtered = computed(() =>
     search.value
@@ -91,7 +100,16 @@ export const useReposStore = defineStore('repos', () => {
     selectedTarget,
     sourceTree,
     sourcePath,
+    sourceBranch,
+    sourceBranches,
     targetPath,
+    targetBranch,
+    targetBranches,
+    generateProjectFile,
+    extractRunId,
+    extractRunUrl,
+    extractStatus,
+    extractResult,
     filtered,
     loadRepos,
     loadMore,

From 13da0b472352fea3d90b1bf5396b54fc21fa53f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Mon, 27 Apr 2026 00:58:23 +0300
Subject: [PATCH 24/24] feat: make BIOS boot buttons interactive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DEL during POST → Award-style BIOS Setup Utility screen
  - 2-column menu (12 entries), arrow-key navigation
  - Any of Esc / F10 / Enter exits and resumes boot from cdboot

F12 during POST → Boot Device Priority menu
  - CD-ROM / Hard Disk / Floppy, arrow-key selection
  - CD-ROM / Floppy → resume normal cdboot sequence
  - Hard Disk → shows 'DISK BOOT FAILURE' screen for 2.8 s,
    then automatically falls back to CD-ROM boot

Any key during cdboot → skips 'Press any key' wait
  and immediately jumps to the Winders 98 start screen

Internal: go() now stores timer IDs; cancelAll() clears them
so entering a sub-screen properly cancels the scheduled phases.
keydown listener added on mount, removed on unmount.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/BootSequence.vue | 359 +++++++++++++++++++++--
 1 file changed, 340 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/BootSequence.vue b/frontend/src/components/BootSequence.vue
index 0075cb3..c8a27df 100644
--- a/frontend/src/components/BootSequence.vue
+++ b/frontend/src/components/BootSequence.vue
@@ -6,7 +6,6 @@
 
     <!-- BIOS POST screen -->
     <div v-else-if="phase === 'bios'" class="bios-screen">
-      <!-- POST text -->
       <div
         v-for="(item, i) in BIOS_CONTENT"
         :key="i"
@@ -19,6 +18,63 @@
       <canvas ref="biosLogoCanvas" class="bios-logo" />
     </div>
 
+    <!-- BIOS SETUP UTILITY (DEL) -->
+    <div v-else-if="phase === 'bios-setup'" class="setup-screen">
+      <div class="setup-topbar">
+        <span>ROM PCI/ISA BIOS (2A59G529)</span>
+        <span>CMOS SETUP UTILITY — AWARD SOFTWARE, INC.</span>
+      </div>
+
+      <div class="setup-body">
+        <div class="setup-menu">
+          <div
+            v-for="(item, i) in SETUP_MENU"
+            :key="i"
+            class="setup-menu__item"
+            :class="{ 'setup-menu__item--active': biosSetupItem === i }"
+          >{{ item }}</div>
+        </div>
+
+        <div class="setup-hints">
+          <span>Esc : Quit</span>
+          <span>↑ ↓ → ← : Select Item</span>
+          <span>Enter / F10 : Save &amp; Exit</span>
+        </div>
+      </div>
+
+      <div class="setup-botbar">
+        <span>Time : {{ setupTime }}</span>
+        <span>Date : {{ setupDate }}</span>
+        <span>Base Memory : 640K</span>
+        <span>Ext Memory : 523264K</span>
+      </div>
+    </div>
+
+    <!-- BOOT DEVICE MENU (F12) -->
+    <div v-else-if="phase === 'boot-menu'" class="bootmenu-screen">
+      <div class="bootmenu-box">
+        <div class="bootmenu-title">Boot Device Priority</div>
+        <div class="bootmenu-line" />
+        <div
+          v-for="(dev, i) in BOOT_DEVICES"
+          :key="i"
+          class="bootmenu-item"
+          :class="{ 'bootmenu-item--active': bootMenuDeviceIdx === i }"
+        >
+          <span class="bootmenu-item__arrow">{{ bootMenuDeviceIdx === i ? '►' : ' ' }}</span>
+          <span>{{ dev.label }}</span>
+        </div>
+        <div class="bootmenu-line" />
+        <div class="bootmenu-hint">↑ ↓ Select &nbsp;&nbsp; Enter Boot &nbsp;&nbsp; Esc Cancel</div>
+      </div>
+    </div>
+
+    <!-- HDD BOOT FAILURE (when user picks Hard Disk from boot menu) -->
+    <div v-else-if="phase === 'hdd-error'" class="hdd-error-screen">
+      <div class="hdd-error-msg">DISK BOOT FAILURE, INSERT SYSTEM DISK AND PRESS ENTER</div>
+      <div class="hdd-error-fallback">Switching to CD-ROM boot…</div>
+    </div>
+
     <!-- CD boot -->
     <div v-else-if="phase === 'cdboot'" class="cdboot-screen">
       <div
@@ -45,7 +101,7 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onMounted } from 'vue'
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import BlueScreen from './BlueScreen.vue'
 
 const emit = defineEmits(['done'])
@@ -54,6 +110,20 @@ const emit = defineEmits(['done'])
 const phase          = ref('bsod')
 const bsodCountdown  = ref(3)
 const biosLogoCanvas = ref(null)
+const biosSetupItem  = ref(6)     // pre-select "SAVE & EXIT SETUP"
+const bootMenuDeviceIdx = ref(0)
+
+// ── Timer management ───────────────────────────────────────────
+const timers = []   // plain array — not reactive, just for cleanup
+
+function go(p, ms) {
+  timers.push(setTimeout(() => { phase.value = p }, ms))
+}
+
+function cancelAll() {
+  timers.forEach(clearTimeout)
+  timers.length = 0
+}
 
 // ── Boot content ───────────────────────────────────────────────
 const BIOS_CONTENT = [
@@ -89,11 +159,111 @@ const CDBOOT_CONTENT = [
 ]
 
 const WIN98_CONTENT = [
-  { text: 'Microtough Winders 98',                delay: 0 },
-  { text: '',                                     delay: 200 },
+  { text: 'Microtough Winders 98',           delay: 0 },
+  { text: '',                                delay: 200 },
   { text: '         Starting Winders 98...', delay: 400 },
 ]
 
+// ── BIOS setup menu items (2-column grid) ──────────────────────
+const SETUP_MENU = [
+  'STANDARD CMOS SETUP',    'SUPERVISOR PASSWORD',
+  'BIOS FEATURES SETUP',    'USER PASSWORD',
+  'CHIPSET FEATURES SETUP', 'IDE HDD AUTO DETECTION',
+  'POWER MANAGEMENT SETUP', 'HDD LOW LEVEL FORMAT',
+  'PNP/PCI CONFIGURATION',  'SAVE & EXIT SETUP',
+  'LOAD BIOS DEFAULTS',     'EXIT WITHOUT SAVING',
+]
+
+// ── Boot device menu ───────────────────────────────────────────
+const BOOT_DEVICES = [
+  { label: 'CD-ROM Drive      (AZUS CD-524E)',  key: 'cd'  },
+  { label: 'Hard Disk Drive   (XS320423A)',     key: 'hdd' },
+  { label: 'Floppy Disk Drive (A:)',            key: 'fdd' },
+]
+
+// ── Fake BIOS clock (shows real time) ─────────────────────────
+const now = new Date()
+const setupTime = now.toTimeString().slice(0, 8)
+const setupDate = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: '2-digit', year: 'numeric' })
+
+// ── Resume helpers ─────────────────────────────────────────────
+/** Cancel all pending timeouts and schedule the boot tail from the cdboot phase. */
+function resumeFromCdBoot(flashMs = 400) {
+  cancelAll()
+  phase.value = 'black'
+  go('cdboot', flashMs)
+  go('black',  flashMs + 1650)
+  go('win98',  flashMs + 2050)
+  go('black',  flashMs + 3750)
+  timers.push(setTimeout(() => emit('done'), flashMs + 4250))
+}
+
+// ── Keyboard handler ───────────────────────────────────────────
+function onKeyDown(e) {
+  const p = phase.value
+
+  // ── BIOS POST: DEL → Setup, F12 → Boot Menu ─────────────────
+  if (p === 'bios') {
+    if (e.key === 'Delete') {
+      e.preventDefault()
+      cancelAll()
+      biosSetupItem.value = 6       // pre-select "SAVE & EXIT SETUP"
+      phase.value = 'bios-setup'
+    } else if (e.key === 'F12') {
+      e.preventDefault()
+      cancelAll()
+      bootMenuDeviceIdx.value = 0
+      phase.value = 'boot-menu'
+    }
+    return
+  }
+
+  // ── BIOS Setup utility ───────────────────────────────────────
+  if (p === 'bios-setup') {
+    e.preventDefault()
+    const len = SETUP_MENU.length
+    if (e.key === 'ArrowDown')  biosSetupItem.value = (biosSetupItem.value + 2) % len
+    if (e.key === 'ArrowUp')    biosSetupItem.value = (biosSetupItem.value - 2 + len) % len
+    if (e.key === 'ArrowRight') biosSetupItem.value = biosSetupItem.value % 2 === 0 ? Math.min(biosSetupItem.value + 1, len - 1) : biosSetupItem.value
+    if (e.key === 'ArrowLeft')  biosSetupItem.value = biosSetupItem.value % 2 === 1 ? biosSetupItem.value - 1 : biosSetupItem.value
+    if (e.key === 'Escape' || e.key === 'F10' || e.key === 'Enter') {
+      resumeFromCdBoot(400)
+    }
+    return
+  }
+
+  // ── Boot device menu ─────────────────────────────────────────
+  if (p === 'boot-menu') {
+    e.preventDefault()
+    const len = BOOT_DEVICES.length
+    if (e.key === 'ArrowDown') bootMenuDeviceIdx.value = (bootMenuDeviceIdx.value + 1) % len
+    if (e.key === 'ArrowUp')   bootMenuDeviceIdx.value = (bootMenuDeviceIdx.value - 1 + len) % len
+    if (e.key === 'Enter') {
+      const dev = BOOT_DEVICES[bootMenuDeviceIdx.value]
+      if (dev.key === 'hdd') {
+        // HDD path: show disk-boot failure, then fall back to CD
+        cancelAll()
+        phase.value = 'hdd-error'
+        timers.push(setTimeout(() => resumeFromCdBoot(0), 2800))
+      } else {
+        resumeFromCdBoot(0)
+      }
+    }
+    if (e.key === 'Escape') resumeFromCdBoot(0)
+    return
+  }
+
+  // ── CD boot: any key skips the "press any key" wait ──────────
+  if (p === 'cdboot') {
+    e.preventDefault()
+    cancelAll()
+    phase.value = 'black'
+    go('win98',  300)
+    go('black',  2000)
+    timers.push(setTimeout(() => emit('done'), 2500))
+  }
+}
+
 // ── BIOS logo (pixel art) ─────────────────────────────────────
 watch(phase, val => { if (val === 'bios') nextTick(() => drawBiosLogo()) })
 
@@ -127,7 +297,7 @@ function drawBiosLogo() {
     I: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[1,1,1,1,1]],
     X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],
   }
-  const ps = 2           // on-canvas px per font pixel
+  const ps = 2
   const bigStr = 'FENIX'
   const bigW = bigStr.length * 5 * ps + (bigStr.length - 1) * 2
   const bigX = Math.floor((W - bigW) / 2)
@@ -192,8 +362,6 @@ function drawBiosLogo() {
 }
 
 // ── Sequence ───────────────────────────────────────────────────
-function go(p, ms) { setTimeout(() => { phase.value = p }, ms) }
-
 onMounted(() => {
   bsodCountdown.value = 3
 
@@ -209,8 +377,14 @@ onMounted(() => {
   go('black',  9900)
   go('win98',  10300)
   go('black',  12000)
+  timers.push(setTimeout(() => emit('done'), 12500))
 
-  setTimeout(() => emit('done'), 12500)
+  document.addEventListener('keydown', onKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyDown)
+  cancelAll()
 })
 </script>
 
@@ -223,7 +397,9 @@ onMounted(() => {
   background: #000;
   overflow: hidden;
 
-  &.boot-phase--bsod { background: #0000AA; }
+  &.boot-phase--bsod    { background: #0000AA; }
+  &.boot-phase--bios-setup  { background: #0000AA; }
+  &.boot-phase--hdd-error   { background: #000; }
 }
 
 @keyframes boot-flicker {
@@ -236,9 +412,7 @@ onMounted(() => {
 .boot-overlay { animation: boot-flicker 0.25s steps(1) forwards; }
 
 // ── Shared line-reveal ─────────────────────────────────────────
-@keyframes line-appear {
-  to { opacity: 1; }
-}
+@keyframes line-appear { to { opacity: 1; } }
 
 .boot-line {
   opacity: 0;
@@ -250,20 +424,16 @@ onMounted(() => {
 
 // ── BIOS POST ──────────────────────────────────────────────────
 .bios-screen {
-  position: relative;    // anchor for the logo
+  position: relative;
   padding: 18px 36px;
   font-size: 13px;
   line-height: 1.65;
   color: #aaaaaa;
 }
 
-.bios-line {
-  &--header { color: #ffffff; }
-}
+.bios-line { &--header { color: #ffffff; } }
 
 // ── BIOS logo (top-right corner) ───────────────────────────────
-// 80×50 canvas drawn at native resolution, scaled to 240×150 via CSS.
-// image-rendering: pixelated keeps each logical pixel a hard block — no blur.
 .bios-logo {
   position: absolute;
   top: 18px;
@@ -271,7 +441,158 @@ onMounted(() => {
   width:  240px;
   height: 150px;
   image-rendering: pixelated;
-  image-rendering: crisp-edges; // Firefox
+  image-rendering: crisp-edges;
+}
+
+// ── BIOS Setup Utility ─────────────────────────────────────────
+.setup-screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  background: #0000AA;
+}
+
+.setup-topbar {
+  flex-shrink: 0;
+  background: #AAAAAA;
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.setup-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.setup-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  border: 1px solid #AAAAAA;
+  width: min(680px, 100%);
+
+  &__item {
+    padding: 3px 16px;
+    color: #FFFFFF;
+    white-space: nowrap;
+    cursor: default;
+
+    // Divide left and right columns
+    &:nth-child(odd)  { border-right: 1px solid #555599; }
+
+    &--active {
+      background: #AAAAAA;
+      color: #000080;
+    }
+  }
+}
+
+.setup-hints {
+  display: flex;
+  gap: 24px;
+  margin-top: 12px;
+  color: #FFFF55;
+  font-size: 11px;
+}
+
+.setup-botbar {
+  flex-shrink: 0;
+  background: #AAAAAA;
+  color: #000;
+  display: flex;
+  justify-content: space-around;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+// ── Boot Device Menu ───────────────────────────────────────────
+.bootmenu-screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.bootmenu-box {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 13px;
+  color: #CCCCCC;
+  border: 1px solid #666;
+  min-width: 320px;
+  padding: 0;
+}
+
+.bootmenu-title {
+  background: #0000AA;
+  color: #FFFF55;
+  padding: 4px 14px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+.bootmenu-line {
+  border: none;
+  border-top: 1px solid #444;
+}
+
+.bootmenu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 14px;
+  color: #CCCCCC;
+  cursor: default;
+
+  &__arrow { width: 10px; flex-shrink: 0; color: #FFFF55; }
+
+  &--active {
+    background: #0000AA;
+    color: #FFFFFF;
+  }
+}
+
+.bootmenu-hint {
+  padding: 4px 14px;
+  font-size: 11px;
+  color: #888;
+}
+
+// ── HDD boot failure ───────────────────────────────────────────
+.hdd-error-screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 40px 60px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.hdd-error-msg {
+  font-size: 14px;
+  color: #cccccc;
+  margin-bottom: 20px;
+}
+
+.hdd-error-fallback {
+  font-size: 13px;
+  color: #888888;
+
+  @keyframes blink-fallback { 50% { opacity: 0; } }
+  animation: blink-fallback 1s step-end infinite;
 }
 
 // ── CD boot ────────────────────────────────────────────────────