From 27dd4e03750a88c9136f217be5859249ad3ba057 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Tue, 28 Apr 2026 02:32:53 +0300
Subject: [PATCH 1/6] frontend: redo sign-in step as provider table with
 dropdown

Replace radio-button layout with a Win98-styled table listing GitHub
and GitLab rows. A Sign In dropdown in the top-right of the toolbar
lets users initiate either provider flow. The Next button stays
disabled until at least one provider is authenticated.

Closes #49
---
 src/pages/LoginPage.vue | 352 +++++++++++++++++++++++++++-------------
 1 file changed, 241 insertions(+), 111 deletions(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 73f1ac5..b6b06b2 100644
--- a/src/pages/LoginPage.vue
+++ b/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>.
+          Sign in to at least one Git provider to continue.
         </p>
       </div>
     </div>
@@ -16,101 +16,145 @@
       <!-- Error banner -->
       <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
 
-      <p class="login-intro">How would you like to sign in?</p>
-
-      <!-- ── Provider radio options ──────────────────────────────── -->
-      <div class="provider-options">
-        <label
-          v-for="p in providers"
-          :key="p.id"
-          class="provider-option"
-        >
-          <input
-            type="radio"
-            name="provider"
-            :value="p.id"
-            v-model="selected"
-          />
-          <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>
+      <!-- ── Provider table ──────────────────────────────────────── -->
+      <div class="provider-table-wrap">
+        <div class="provider-table-toolbar">
+          <!-- top-right Sign In dropdown -->
+          <div class="signin-dropdown" ref="dropdownRef">
+            <button
+              class="w98-btn signin-dropdown__btn"
+              @click="toggleDropdown"
+              aria-haspopup="listbox"
+              :aria-expanded="dropdownOpen"
+            >
+              Sign In ▾
+            </button>
+            <div v-if="dropdownOpen" class="signin-dropdown__menu" role="listbox">
+              <button
+                v-for="p in providers"
+                :key="p.id"
+                class="signin-dropdown__item"
+                :disabled="auth.provider === p.id"
+                @click="signIn(p.id)"
+              >
+                <q-icon :name="p.icon" class="signin-dropdown__icon" :class="`signin-dropdown__icon--${p.id}`" />
+                Sign in with {{ p.name }}
+              </button>
+            </div>
           </div>
-        </label>
-      </div>
+        </div>
 
-      <!-- ── GitLab host (only when GitLab selected) ─────────────── -->
-      <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" style="display:block;margin-bottom:4px">
-                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 only for self-hosted GitLab servers.
+        <table class="provider-table">
+          <thead>
+            <tr>
+              <th>Provider</th>
+              <th>Status</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="p in providers"
+              :key="p.id"
+              :class="{ 'provider-table__row--active': auth.provider === p.id }"
+            >
+              <td class="provider-table__name">
+                <q-icon :name="p.icon" class="provider-table__icon" :class="`provider-table__icon--${p.id}`" />
+                {{ p.name }}
+              </td>
+              <td class="provider-table__status">
+                <template v-if="auth.provider === p.id">
+                  <span class="status-badge status-badge--ok">✔</span>
+                  Signed in as
+                  <strong>{{ auth.user?.login || auth.user?.username }}</strong>
+                </template>
+                <template v-else>
+                  <span class="status-badge status-badge--none">—</span>
+                  Not signed in
+                </template>
+              </td>
+              <td class="provider-table__actions">
+                <template v-if="auth.provider === p.id">
+                  <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
+                </template>
+                <template v-else>
+                  <button class="w98-link-btn" @click="signIn(p.id)">Sign in…</button>
+                </template>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- GitLab host input — shown below the table when gitlab is the active provider
+             or when a gitlab sign-in is pending -->
+        <transition name="slide">
+          <div v-if="showHostBox" 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" style="display:block;margin-bottom:4px">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 only for self-hosted GitLab servers.
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </transition>
+        </transition>
 
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { startGitlabLogin } from '../services/gitlab.js'
 import { useWizardNav } from '../composables/useWizardNav.js'
+import { useAuthStore } from '../stores/auth.js'
 
 const route      = useRoute()
 const router     = useRouter()
 const nav        = useWizardNav()
-const selected   = ref(null)
+const auth       = useAuthStore()
 const gitlabHost = ref('gitlab.com')
+const dropdownOpen = ref(false)
+const dropdownRef  = ref(null)
+const pendingGitlab = ref(false)
 
 const providers = [
-  {
-    id:   'github',
-    name: 'GitHub',
-    icon: 'fab fa-github',
-    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.',
-  },
+  { id: 'github', name: 'GitHub', icon: 'fab fa-github' },
+  { id: 'gitlab', name: 'GitLab', icon: 'fab fa-gitlab' },
 ]
 
-onMounted(updateNav)
-watch(selected, updateNav)
+const showHostBox = computed(() => pendingGitlab.value || auth.provider === 'gitlab')
+
+onMounted(() => {
+  updateNav()
+  document.addEventListener('click', onDocClick)
+})
+onBeforeUnmount(() => document.removeEventListener('click', onDocClick))
+watch(() => auth.isLoggedIn, updateNav)
 
 function updateNav() {
   nav.value = {
-    backLabel: '< Back',
+    backLabel:    '< Back',
     backDisabled: false,
-    onBack: () => router.push('/welcome'),
-    nextLabel: selected.value ? 'Sign In >' : 'Next >',
-    nextDisabled: !selected.value,
-    onNext: selected.value ? () => proceed() : null,
-    finishLabel: 'Finish',
+    onBack:       () => router.push('/welcome'),
+    nextLabel:    'Next >',
+    nextDisabled: !auth.isLoggedIn,
+    onNext:       auth.isLoggedIn ? () => router.push('/repos') : null,
+    finishLabel:  'Finish',
     finishDisabled: true,
-    onFinish: null,
+    onFinish:     null,
   }
 }
 
@@ -123,9 +167,24 @@ 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 toggleDropdown() {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+function onDocClick(e) {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target)) {
+    dropdownOpen.value = false
+  }
+}
+
+async function signIn(providerId) {
+  dropdownOpen.value = false
+  if (providerId === 'github') {
+    loginGithub()
+  } else if (providerId === 'gitlab') {
+    pendingGitlab.value = true
+    await loginGitlab()
+  }
 }
 
 function loginGithub() {
@@ -150,59 +209,119 @@ async function loginGitlab() {
   border: 2px solid #c10015;
   background: #ffeeee;
   color: #c10015;
-  max-width: 420px;
+  max-width: 460px;
 }
 
-// ── Intro text ─────────────────────────────────────────────────────
-.login-intro {
-  font-size: 12px;
-  color: #000;
-  margin: 0 0 10px;
+// ── Provider table wrapper ─────────────────────────────────────────
+.provider-table-wrap {
+  max-width: 460px;
 }
 
-// ── 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 {
+// ── Toolbar (holds the Sign In dropdown) ──────────────────────────
+.provider-table-toolbar {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-width: 440px;
-  margin-bottom: 18px;
+  justify-content: flex-end;
+  margin-bottom: 4px;
 }
 
-.provider-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 7px;
-  padding: 4px 2px;
-  cursor: pointer;
-  user-select: none;
+// ── Sign In dropdown ──────────────────────────────────────────────
+.signin-dropdown {
+  position: relative;
 
-  // No background, no box-shadow — just the native radio + text on white
+  &__btn {
+    min-width: 80px;
+  }
 
-  input[type='radio'] {
-    flex-shrink: 0;
-    margin: 3px 0 0;
-    cursor: pointer;
-    accent-color: $primary;
+  &__menu {
+    position: absolute;
+    top: calc(100% + 2px);
+    right: 0;
+    z-index: 100;
+    background: #c0c0c0;
+    border: 2px solid;
+    border-color: #ffffff #808080 #808080 #ffffff;
+    box-shadow: 1px 1px 0 #000;
+    min-width: 200px;
+    padding: 2px 0;
   }
 
-  &__body {
+  &__item {
     display: flex;
-    flex-direction: column;
-    gap: 2px;
-    line-height: 1;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    padding: 3px 14px;
+    background: none;
+    border: none;
+    font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+    font-size: 12px;
+    color: #000;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover:not(:disabled) {
+      background: #000080;
+      color: #fff;
+
+      .signin-dropdown__icon { color: #fff; }
+    }
+
+    &:disabled {
+      color: #808080;
+      cursor: default;
+    }
+  }
+
+  &__icon {
+    font-size: 13px !important;
+    color: #333;
+
+    &--gitlab { color: #e24329; }
+  }
+}
+
+// ── Provider table ─────────────────────────────────────────────────
+.provider-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  border: 2px solid;
+  border-color: #808080 #ffffff #ffffff #808080;
+  box-shadow: inset 1px 1px 0 #000;
+  background: #fff;
+  margin-bottom: 12px;
+
+  thead tr {
+    background: #000080;
+    color: #fff;
+  }
+
+  th {
+    padding: 3px 8px;
+    font-weight: 700;
+    text-align: left;
+    font-size: 11px;
+    letter-spacing: 0.02em;
+  }
+
+  td {
+    padding: 5px 8px;
+    border-top: 1px solid #e0e0e0;
+    color: #000;
+    vertical-align: middle;
   }
 
+  tbody tr:hover { background: #f0f0f0; }
+
+  &__row--active td { background: #ddeeff; }
+  &__row--active:hover td { background: #cce0ff; }
+
   &__name {
     display: flex;
     align-items: center;
-    gap: 5px;
-    font-size: 12px;
+    gap: 6px;
     font-weight: 700;
-    color: #000;
+    white-space: nowrap;
   }
 
   &__icon {
@@ -212,14 +331,25 @@ async function loginGitlab() {
     &--gitlab { color: #e24329; }
   }
 
-  &__desc {
-    font-size: 11px;
-    color: #444;
-    line-height: 1.45;
-    padding-left: 19px; // indent to align under the name text
+  &__status { color: #444; }
+
+  &__actions {
+    text-align: right;
+    white-space: nowrap;
   }
 }
 
+// ── Status badge ───────────────────────────────────────────────────
+.status-badge {
+  display: inline-block;
+  margin-right: 4px;
+  font-size: 11px;
+  font-weight: 700;
+
+  &--ok   { color: #007700; }
+  &--none { color: #808080; }
+}
+
 // ── GitLab host group box ──────────────────────────────────────────
 .gitlab-host-box { max-width: 380px; }
 

From 81ac2542482d3eb8447367ea603522f68ae80a3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Tue, 28 Apr 2026 02:55:52 +0300
Subject: [PATCH 2/6] frontend: show only signed-in providers in table, display
 identity instead of status

---
 src/pages/LoginPage.vue | 58 +++++++++++++++--------------------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index b6b06b2..1d1bccc 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -44,42 +44,37 @@
           </div>
         </div>
 
-        <table class="provider-table">
+        <table v-if="auth.isLoggedIn" class="provider-table">
           <thead>
             <tr>
               <th>Provider</th>
-              <th>Status</th>
+              <th>Identity</th>
               <th></th>
             </tr>
           </thead>
           <tbody>
-            <tr
-              v-for="p in providers"
-              :key="p.id"
-              :class="{ 'provider-table__row--active': auth.provider === p.id }"
-            >
+            <tr v-if="auth.provider === 'github'">
               <td class="provider-table__name">
-                <q-icon :name="p.icon" class="provider-table__icon" :class="`provider-table__icon--${p.id}`" />
-                {{ p.name }}
+                <q-icon name="fab fa-github" class="provider-table__icon" />
+                GitHub
               </td>
-              <td class="provider-table__status">
-                <template v-if="auth.provider === p.id">
-                  <span class="status-badge status-badge--ok">✔</span>
-                  Signed in as
-                  <strong>{{ auth.user?.login || auth.user?.username }}</strong>
-                </template>
-                <template v-else>
-                  <span class="status-badge status-badge--none">—</span>
-                  Not signed in
-                </template>
+              <td class="provider-table__identity">
+                {{ auth.user?.login }}
               </td>
               <td class="provider-table__actions">
-                <template v-if="auth.provider === p.id">
-                  <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
-                </template>
-                <template v-else>
-                  <button class="w98-link-btn" @click="signIn(p.id)">Sign in…</button>
-                </template>
+                <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
+              </td>
+            </tr>
+            <tr v-if="auth.provider === 'gitlab'">
+              <td class="provider-table__name">
+                <q-icon name="fab fa-gitlab" class="provider-table__icon provider-table__icon--gitlab" />
+                GitLab
+              </td>
+              <td class="provider-table__identity">
+                {{ auth.user?.username }}
+              </td>
+              <td class="provider-table__actions">
+                <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
               </td>
             </tr>
           </tbody>
@@ -331,7 +326,7 @@ async function loginGitlab() {
     &--gitlab { color: #e24329; }
   }
 
-  &__status { color: #444; }
+  &__identity { color: #000; font-weight: 700; }
 
   &__actions {
     text-align: right;
@@ -339,17 +334,6 @@ async function loginGitlab() {
   }
 }
 
-// ── Status badge ───────────────────────────────────────────────────
-.status-badge {
-  display: inline-block;
-  margin-right: 4px;
-  font-size: 11px;
-  font-weight: 700;
-
-  &--ok   { color: #007700; }
-  &--none { color: #808080; }
-}
-
 // ── GitLab host group box ──────────────────────────────────────────
 .gitlab-host-box { max-width: 380px; }
 

From b340795993ceb945e69124b12187d8e9bf3db630 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Tue, 28 Apr 2026 02:56:03 +0300
Subject: [PATCH 3/6] frontend: make provider table full-width

---
 src/pages/LoginPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 1d1bccc..c9cf047 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -209,7 +209,7 @@ async function loginGitlab() {
 
 // ── Provider table wrapper ─────────────────────────────────────────
 .provider-table-wrap {
-  max-width: 460px;
+  width: 100%;
 }
 
 // ── Toolbar (holds the Sign In dropdown) ──────────────────────────

From 91e8768cf77a455199eae349ce210a7053e537ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Tue, 28 Apr 2026 02:58:34 +0300
Subject: [PATCH 4/6] frontend: use computed signedInProviders to filter table
 rows explicitly

---
 src/pages/LoginPage.vue | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index c9cf047..cf8c37d 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -44,7 +44,7 @@
           </div>
         </div>
 
-        <table v-if="auth.isLoggedIn" class="provider-table">
+        <table v-if="signedInProviders.length" class="provider-table">
           <thead>
             <tr>
               <th>Provider</th>
@@ -53,26 +53,12 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-if="auth.provider === 'github'">
+            <tr v-for="p in signedInProviders" :key="p.id">
               <td class="provider-table__name">
-                <q-icon name="fab fa-github" class="provider-table__icon" />
-                GitHub
-              </td>
-              <td class="provider-table__identity">
-                {{ auth.user?.login }}
-              </td>
-              <td class="provider-table__actions">
-                <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
-              </td>
-            </tr>
-            <tr v-if="auth.provider === 'gitlab'">
-              <td class="provider-table__name">
-                <q-icon name="fab fa-gitlab" class="provider-table__icon provider-table__icon--gitlab" />
-                GitLab
-              </td>
-              <td class="provider-table__identity">
-                {{ auth.user?.username }}
+                <q-icon :name="p.icon" class="provider-table__icon" :class="`provider-table__icon--${p.id}`" />
+                {{ p.name }}
               </td>
+              <td class="provider-table__identity">{{ p.identity }}</td>
               <td class="provider-table__actions">
                 <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
               </td>
@@ -130,6 +116,16 @@ const providers = [
   { id: 'gitlab', name: 'GitLab', icon: 'fab fa-gitlab' },
 ]
 
+const signedInProviders = computed(() => {
+  if (!auth.isLoggedIn || !auth.provider) return []
+  const meta = providers.find(p => p.id === auth.provider)
+  if (!meta) return []
+  const identity = auth.provider === 'github'
+    ? auth.user?.login
+    : auth.user?.username
+  return [{ ...meta, identity }]
+})
+
 const showHostBox = computed(() => pendingGitlab.value || auth.provider === 'gitlab')
 
 onMounted(() => {

From 632c83379391bd9119a91a37b2de425b7a80fc7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Tue, 28 Apr 2026 03:02:15 +0300
Subject: [PATCH 5/6] frontend: always show provider table, even when empty

---
 src/pages/LoginPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index cf8c37d..e9c455c 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -44,7 +44,7 @@
           </div>
         </div>
 
-        <table v-if="signedInProviders.length" class="provider-table">
+        <table class="provider-table">
           <thead>
             <tr>
               <th>Provider</th>

From 133c06416f5955763961d2cd5f786f224558fd97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimondas=20Rimkevi=C4=8Dius?= <github@mekdrop.name>
Date: Tue, 28 Apr 2026 03:16:01 +0300
Subject: [PATCH 6/6] frontend: listview fills remaining height, Win98
 Details-view styling

---
 src/pages/LoginPage.vue | 195 ++++++++++++++++++++++------------------
 1 file changed, 108 insertions(+), 87 deletions(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index e9c455c..4be0504 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -16,13 +16,14 @@
       <!-- Error banner -->
       <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
 
-      <!-- ── Provider table ──────────────────────────────────────── -->
-      <div class="provider-table-wrap">
-        <div class="provider-table-toolbar">
-          <!-- top-right Sign In dropdown -->
+      <!-- ── Provider section ─────────────────────────────────────── -->
+      <div class="provider-section">
+
+        <!-- toolbar -->
+        <div class="provider-toolbar">
           <div class="signin-dropdown" ref="dropdownRef">
             <button
-              class="w98-btn signin-dropdown__btn"
+              class="w98-btn"
               @click="toggleDropdown"
               aria-haspopup="listbox"
               :aria-expanded="dropdownOpen"
@@ -44,30 +45,32 @@
           </div>
         </div>
 
-        <table class="provider-table">
-          <thead>
-            <tr>
-              <th>Provider</th>
-              <th>Identity</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="p in signedInProviders" :key="p.id">
-              <td class="provider-table__name">
-                <q-icon :name="p.icon" class="provider-table__icon" :class="`provider-table__icon--${p.id}`" />
-                {{ p.name }}
-              </td>
-              <td class="provider-table__identity">{{ p.identity }}</td>
-              <td class="provider-table__actions">
-                <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <!-- GitLab host input — shown below the table when gitlab is the active provider
-             or when a gitlab sign-in is pending -->
+        <!-- Win98 Details-view listview -->
+        <div class="provider-listview">
+          <table>
+            <thead>
+              <tr>
+                <th class="col-provider">Provider</th>
+                <th class="col-identity">Identity</th>
+                <th class="col-actions"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="p in signedInProviders" :key="p.id">
+                <td class="col-provider">
+                  <q-icon :name="p.icon" class="row-icon" :class="`row-icon--${p.id}`" />
+                  {{ p.name }}
+                </td>
+                <td class="col-identity">{{ p.identity }}</td>
+                <td class="col-actions">
+                  <button class="w98-link-btn" @click="auth.logout()">Sign out</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- GitLab host input -->
         <transition name="slide">
           <div v-if="showHostBox" class="gitlab-host-box">
             <div class="w98-group-box">
@@ -192,37 +195,44 @@ async function loginGitlab() {
 </script>
 
 <style lang="scss" scoped>
+// ── Make body a flex column so children can fill remaining height ──
+.wiz-page__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 // ── Error banner ───────────────────────────────────────────────────
 .login-error {
+  flex-shrink: 0;
   font-size: 11px;
   padding: 5px 10px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   border: 2px solid #c10015;
   background: #ffeeee;
   color: #c10015;
-  max-width: 460px;
 }
 
-// ── Provider table wrapper ─────────────────────────────────────────
-.provider-table-wrap {
-  width: 100%;
+// ── Provider section — fills remaining body height ─────────────────
+.provider-section {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-// ── Toolbar (holds the Sign In dropdown) ──────────────────────────
-.provider-table-toolbar {
+// ── Toolbar ────────────────────────────────────────────────────────
+.provider-toolbar {
+  flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
 }
 
 // ── Sign In dropdown ──────────────────────────────────────────────
 .signin-dropdown {
   position: relative;
 
-  &__btn {
-    min-width: 80px;
-  }
-
   &__menu {
     position: absolute;
     top: calc(100% + 2px);
@@ -253,92 +263,103 @@ async function loginGitlab() {
     &:hover:not(:disabled) {
       background: #000080;
       color: #fff;
-
-      .signin-dropdown__icon { color: #fff; }
+      .signin-dropdown__icon { color: #fff !important; }
     }
 
-    &:disabled {
-      color: #808080;
-      cursor: default;
-    }
+    &:disabled { color: #808080; cursor: default; }
   }
 
   &__icon {
     font-size: 13px !important;
     color: #333;
-
     &--gitlab { color: #e24329; }
   }
 }
 
-// ── Provider table ─────────────────────────────────────────────────
-.provider-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
+// ── Win98 Details-view listview ────────────────────────────────────
+.provider-listview {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  // Sunken inset border — classic Win98 ListBox / ListView
   border: 2px solid;
   border-color: #808080 #ffffff #ffffff #808080;
-  box-shadow: inset 1px 1px 0 #000;
+  box-shadow:
+    inset 1px 1px 0 #0a0a0a,
+    inset -1px -1px 0 #e8e8e8;
   background: #fff;
-  margin-bottom: 12px;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
 
   thead tr {
-    background: #000080;
-    color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 1;
   }
 
   th {
-    padding: 3px 8px;
+    background: #d4d0c8;
+    // Raised Win98 column-header 3D look
+    box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff;
+    padding: 2px 6px;
+    font-size: 11px;
     font-weight: 700;
     text-align: left;
-    font-size: 11px;
-    letter-spacing: 0.02em;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   td {
-    padding: 5px 8px;
-    border-top: 1px solid #e0e0e0;
-    color: #000;
+    padding: 2px 6px;
+    font-size: 12px;
     vertical-align: middle;
-  }
-
-  tbody tr:hover { background: #f0f0f0; }
-
-  &__row--active td { background: #ddeeff; }
-  &__row--active:hover td { background: #cce0ff; }
-
-  &__name {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
+    border-bottom: 1px solid #f0f0f0;
   }
 
-  &__icon {
-    font-size: 14px !important;
-    color: #333;
+  tbody tr:hover td {
+    background: #000080;
+    color: #fff;
 
-    &--gitlab { color: #e24329; }
+    .row-icon { color: #fff !important; }
+    .w98-link-btn { color: #fff; }
   }
+}
 
-  &__identity { color: #000; font-weight: 700; }
-
-  &__actions {
-    text-align: right;
-    white-space: nowrap;
-  }
+// ── Column widths ──────────────────────────────────────────────────
+.col-provider  { width: 140px; }
+.col-identity  { width: auto; }
+.col-actions   { width: 70px; text-align: right; }
+
+// ── Row icon ──────────────────────────────────────────────────────
+.row-icon {
+  font-size: 13px !important;
+  margin-right: 5px;
+  vertical-align: middle;
+  color: #333;
+  &--gitlab { color: #e24329; }
 }
 
 // ── GitLab host group box ──────────────────────────────────────────
-.gitlab-host-box { max-width: 380px; }
+.gitlab-host-box {
+  flex-shrink: 0;
+  margin-top: 8px;
+}
 
 .w98-group-box {
   border: 1px solid #808080;
   box-shadow: 1px 1px 0 #fff;
   padding: 0 10px 10px;
   position: relative;
-  margin-top: 2px;
 
   &__label {
     position: absolute;