From e785dfbf8bb01cdd964ae6f24bf3217451b5f3d6 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Sat, 13 Jun 2026 14:44:01 +0200
Subject: [PATCH 1/2] Implement space home panel and lobby functionality

- Introduced a new `SpaceHomePanel` component to display an overview of the selected space, including member count and available channels.
- Enhanced `RoomCategoryList` to support navigation to the space lobby and clear room selections when leaving a space channel.
- Added functionality to manage lobby entries, allowing users to join unjoined channels directly from the space home.
- Updated internationalization support for new space home and lobby-related messages in English and German.
- Enhanced `CHANGELOG` to reflect the addition of the space home panel and related features.
---
 CHANGELOG.md                                  |   5 +
 app/components/Chat/RoomCategoryList.vue      |  24 ++
 app/components/Chat/SpaceHomePanel.vue        | 213 ++++++++++++++++++
 app/composables/chat/chatPageTypes.ts         |   3 +
 app/composables/chat/useChatPageShell.ts      |   7 +
 app/composables/chat/useChatRoomSidebar.ts    |  39 ++++
 app/composables/chat/useChatSpaceRail.ts      |   3 +
 app/composables/i18n/locales/de.ts            |  11 +
 app/composables/i18n/locales/en.ts            |  10 +
 app/composables/useSpaceLobbyNames.ts         |  82 +++++++
 app/pages/chat.vue                            | 154 +++++++++++--
 app/utils/spaceLobbyHierarchy.ts              |  57 +++++
 app/utils/spaceRoomCategories.ts              | 200 +++++++++++++++-
 docs/architecture.md                          |   1 +
 tests/e2e/features/chat.feature               |  11 +-
 .../e2e/step-definitions/leave-room.steps.mjs |  19 ++
 tests/setup.ts                                |  11 +
 .../components/Chat/SpaceHomePanel.spec.ts    | 111 +++++++++
 .../unit/composables/useChatPageShell.spec.ts |  50 ++++
 tests/unit/utils/spaceLobbyHierarchy.spec.ts  |  61 +++++
 tests/unit/utils/spaceRoomCategories.spec.ts  |  45 ++++
 21 files changed, 1096 insertions(+), 21 deletions(-)
 create mode 100644 app/components/Chat/SpaceHomePanel.vue
 create mode 100644 app/composables/useSpaceLobbyNames.ts
 create mode 100644 app/utils/spaceLobbyHierarchy.ts
 create mode 100644 tests/unit/components/Chat/SpaceHomePanel.spec.ts
 create mode 100644 tests/unit/composables/useChatPageShell.spec.ts
 create mode 100644 tests/unit/utils/spaceLobbyHierarchy.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9133d0..3ef5669 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   chat view after leaving the active room; Cucumber E2E for ephemeral
   group, space channel, and DM leave flows
   ([#94](https://github.com/mjkatgithub/Decentra/issues/94))
+- Space home / sitemap view in the main pane when a Matrix Space is
+  selected but no channel is active; rail `selectSpace` clears room
+  selection; leaving a space channel lands on space home; lobby lists
+  unjoined channels with join actions and a sidebar Lobby entry
+  ([#124](https://github.com/mjkatgithub/Decentra/issues/124))
 - Project architecture map for developers and agents:
   `docs/architecture.md`, `docs/README.md`, issue documentation
   checklist; `AGENTS.md` requires doc updates on structural changes
diff --git a/app/components/Chat/RoomCategoryList.vue b/app/components/Chat/RoomCategoryList.vue
index c9d7321..0fd85ac 100644
--- a/app/components/Chat/RoomCategoryList.vue
+++ b/app/components/Chat/RoomCategoryList.vue
@@ -70,6 +70,7 @@ const emit = defineEmits<{
   openHomeStartDm: []
   openHomeCreateRoom: []
   openHomeExplorePublic: []
+  openSpaceLobby: []
   persistRoomOrder: [
     payload: { parentSpaceId: string; orderedRoomIds: string[] },
   ]
@@ -94,6 +95,14 @@ const categoryDragEnabled = computed(
   () => Boolean(props.selectedRootSpaceId) && props.canReorderCategories,
 )
 
+const lobbyButtonActiveClass = computed(() =>
+  !props.selectedRoomId
+    ? 'bg-primary-100 text-primary-800 dark:bg-primary-900/40'
+      + ' dark:text-primary-200'
+    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200'
+      + ' dark:hover:bg-gray-800',
+)
+
 const sortableDragOptions = {
   ghostClass: 'decentra-drag-ghost',
   chosenClass: 'decentra-drag-chosen',
@@ -622,6 +631,21 @@ function onRoomDragEnd(_category: RoomSectionItem, rawEvent: unknown) {
     </header>
 
     <div class="flex-1 overflow-y-auto px-2 py-3">
+      <button
+        v-if="selectedRootSpaceId"
+        type="button"
+        class="mb-3 flex w-full items-center gap-2 rounded-md px-2 py-2
+               text-left text-sm font-medium transition"
+        :class="lobbyButtonActiveClass"
+        data-space-lobby-button
+        @click="emit('openSpaceLobby')"
+      >
+        <UIcon
+          name="i-lucide-flag"
+          class="size-4 shrink-0"
+        />
+        <span>{{ translateText('spaceHome.lobby') }}</span>
+      </button>
       <template v-if="localCategories.length === 0">
         <p class="px-2 py-3 text-sm text-gray-500 dark:text-gray-400">
           {{ translateText('layout.noRoomsInSpace') }}
diff --git a/app/components/Chat/SpaceHomePanel.vue b/app/components/Chat/SpaceHomePanel.vue
new file mode 100644
index 0000000..0a57e69
--- /dev/null
+++ b/app/components/Chat/SpaceHomePanel.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { useAppI18n } from '~/composables/useAppI18n'
+import type { RoomCategoryGroup } from '~/composables/chat/chatPageTypes'
+
+const { translateText } = useAppI18n()
+
+const props = defineProps<{
+  spaceName: string
+  spaceAvatarUrl?: string
+  spaceTopic?: string
+  memberCountLabel: string
+  categories: RoomCategoryGroup[]
+  canInvite: boolean
+  joiningRoomId?: string | null
+}>()
+
+const emit = defineEmits<{
+  'select-room': [roomId: string]
+  'join-room': [roomId: string]
+  invite: []
+  'open-settings': []
+}>()
+
+const channelCategories = computed(() =>
+  props.categories.filter(
+    (category) =>
+      category.rooms.length > 0 || category.kind === 'subspace',
+  ),
+)
+
+const hasLobbyEntries = computed(() => channelCategories.value.length > 0)
+
+function onRoomAction(roomId: string, isJoined: boolean) {
+  if (isJoined) {
+    emit('select-room', roomId)
+    return
+  }
+  emit('join-room', roomId)
+}
+
+function onSubspaceAction(category: RoomCategoryGroup) {
+  if (!category.subspaceRoomId) {
+    return
+  }
+  if (category.isSubspaceJoined !== false) {
+    return
+  }
+  emit('join-room', category.subspaceRoomId)
+}
+</script>
+
+<template>
+  <div
+    class="mx-auto flex w-full max-w-2xl flex-col gap-5 overflow-auto p-2"
+    data-space-home-panel
+  >
+    <div
+      class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm
+             dark:border-gray-800 dark:bg-gray-900"
+    >
+      <div class="flex items-center gap-3">
+        <div
+          v-if="spaceAvatarUrl"
+          class="size-12 shrink-0 overflow-hidden rounded-lg bg-gray-200
+                 dark:bg-gray-700"
+        >
+          <img
+            :src="spaceAvatarUrl"
+            :alt="spaceName"
+            class="size-full object-cover"
+          >
+        </div>
+        <div
+          v-else
+          class="flex size-12 shrink-0 items-center justify-center rounded-lg
+                 bg-primary-100 text-primary-700 dark:bg-primary-900/40
+                 dark:text-primary-300"
+        >
+          <UIcon name="i-lucide-layers" class="size-6" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <h2
+            class="truncate text-lg font-semibold text-gray-900
+                   dark:text-gray-50"
+          >
+            {{
+              translateText('spaceHome.welcome', { space: spaceName })
+            }}
+          </h2>
+          <p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">
+            {{ memberCountLabel }}
+          </p>
+          <p
+            v-if="spaceTopic"
+            class="mt-1 text-sm text-gray-500 dark:text-gray-400"
+          >
+            {{ spaceTopic }}
+          </p>
+        </div>
+      </div>
+
+      <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
+        {{ translateText('spaceHome.subtitle') }}
+      </p>
+
+      <div class="mt-4 flex flex-col gap-2 sm:flex-row">
+        <UButton
+          v-if="canInvite"
+          color="primary"
+          class="flex-1"
+          @click="emit('invite')"
+        >
+          {{ translateText('invite.spaceMenu') }}
+        </UButton>
+        <UButton
+          color="neutral"
+          variant="soft"
+          class="flex-1"
+          @click="emit('open-settings')"
+        >
+          {{ translateText('layout.openSpaceSettings') }}
+        </UButton>
+      </div>
+    </div>
+
+    <div v-if="hasLobbyEntries" class="flex flex-col gap-4">
+      <section
+        v-for="category in channelCategories"
+        :key="category.id"
+        class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm
+               dark:border-gray-800 dark:bg-gray-900"
+      >
+        <div class="mb-2 flex items-center justify-between gap-2">
+          <h3
+            class="text-xs font-semibold uppercase tracking-wide text-gray-500
+                   dark:text-gray-400"
+          >
+            {{ category.name }}
+          </h3>
+          <UButton
+            v-if="
+              category.kind === 'subspace' &&
+                category.isSubspaceJoined === false &&
+                category.subspaceRoomId
+            "
+            size="xs"
+            color="primary"
+            variant="soft"
+            :loading="joiningRoomId === category.subspaceRoomId"
+            @click="onSubspaceAction(category)"
+          >
+            {{ translateText('spaceHome.joinSubspace') }}
+          </UButton>
+        </div>
+
+        <div
+          v-if="category.rooms.length === 0"
+          class="text-sm text-gray-500 dark:text-gray-400"
+        >
+          {{ translateText('spaceHome.emptySubspaceChannels') }}
+        </div>
+
+        <div
+          v-for="room in category.rooms"
+          :key="room.roomId"
+          class="flex items-center gap-2 border-b border-gray-100 py-2
+                 last:border-b-0 dark:border-gray-800"
+        >
+          <UIcon
+            name="i-lucide-hash"
+            class="size-4 shrink-0 text-gray-500 dark:text-gray-400"
+          />
+          <span class="min-w-0 flex-1 truncate text-sm text-gray-800
+                         dark:text-gray-100">
+            {{ room.name }}
+          </span>
+          <UButton
+            v-if="room.isJoined !== false"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-arrow-right"
+            :data-space-home-room-id="room.roomId"
+            :aria-label="
+              translateText('spaceHome.openChannel', { name: room.name })
+            "
+            @click="onRoomAction(room.roomId, true)"
+          />
+          <UButton
+            v-else
+            size="xs"
+            color="primary"
+            variant="soft"
+            :loading="joiningRoomId === room.roomId"
+            :data-space-home-room-id="room.roomId"
+            @click="onRoomAction(room.roomId, false)"
+          >
+            {{ translateText('spaceHome.joinChannel') }}
+          </UButton>
+        </div>
+      </section>
+    </div>
+
+    <p
+      v-else
+      class="rounded-lg border border-dashed border-gray-300 px-4 py-6
+             text-center text-sm text-gray-500 dark:border-gray-700
+             dark:text-gray-400"
+    >
+      {{ translateText('spaceHome.emptyChannels') }}
+    </p>
+  </div>
+</template>
diff --git a/app/composables/chat/chatPageTypes.ts b/app/composables/chat/chatPageTypes.ts
index 23811cd..03e2a35 100644
--- a/app/composables/chat/chatPageTypes.ts
+++ b/app/composables/chat/chatPageTypes.ts
@@ -93,7 +93,10 @@ export interface RoomCategoryGroup {
     name: string;
     hasUnread?: boolean;
     hasMentionUnread?: boolean;
+    isJoined?: boolean;
   }>;
+  /** Lobby: user joined this subspace room */
+  isSubspaceJoined?: boolean;
 }
 
 export interface MemberItem {
diff --git a/app/composables/chat/useChatPageShell.ts b/app/composables/chat/useChatPageShell.ts
index b1cb867..484ea1e 100644
--- a/app/composables/chat/useChatPageShell.ts
+++ b/app/composables/chat/useChatPageShell.ts
@@ -19,6 +19,7 @@ export function useChatPageShell(options: {
   isMobile: Ref<boolean>;
   spaceRailExpanded: Ref<boolean>;
   onboardingSubView: Ref<null | "dm" | "public">;
+  suppressAutoRoomSelect: Ref<boolean>;
   refreshRooms: () => void;
   clearLoadMessagesTimer: () => void;
   clearThreadNavRefreshTimer: () => void;
@@ -80,6 +81,9 @@ export function useChatPageShell(options: {
       void navigateTo({ path: "/chat", query: {} }, { replace: true });
       scheduleSpaceHierarchyRefresh();
     } else if (rootSpaceId) {
+      options.selectedRoomId.value = null;
+      options.onboardingSubView.value = null;
+      options.suppressAutoRoomSelect.value = true;
       options.refreshRooms();
       void navigateTo({ path: "/chat", query: {} }, { replace: true });
       scheduleSpaceHierarchyRefresh();
@@ -125,6 +129,9 @@ export function useChatPageShell(options: {
 
   function selectSpace(spaceId: string) {
     options.selectedSpaceId.value = spaceId;
+    options.selectedRoomId.value = null;
+    options.onboardingSubView.value = null;
+    options.suppressAutoRoomSelect.value = true;
     if (options.isMobile.value) {
       options.leftSidebarOpen.value = false;
     }
diff --git a/app/composables/chat/useChatRoomSidebar.ts b/app/composables/chat/useChatRoomSidebar.ts
index 781a3ae..951b2f4 100644
--- a/app/composables/chat/useChatRoomSidebar.ts
+++ b/app/composables/chat/useChatRoomSidebar.ts
@@ -1,6 +1,7 @@
 import { HOME_SPACE_ID } from "~/utils/spaceUnread";
 import {
   buildSpaceRoomCategories,
+  buildSpaceLobbyCategories,
   parseSpaceChildEvents,
   resolveRootSpaceIdForHierarchy,
   sortParsedSpaceChildren,
@@ -253,6 +254,43 @@ export function useChatRoomSidebar(options: {
       );
   }
 
+  function buildSpaceLobbySections(): RoomCategoryGroup[] {
+    const selectedId = options.selectedSpaceId.value;
+    if (!selectedId || selectedId === HOME_SPACE_ID) {
+      return [];
+    }
+    const built = buildSpaceLobbyCategories({
+      rootSpaceId: selectedId,
+      matrixRooms: options.matrixRooms.value,
+      getRoomType,
+      getRoomId: getMatrixRoomId,
+      getRoomDisplayName: (room) =>
+        String(
+          (room as { name?: string }).name ||
+            options.translateText("layout.roomFallback"),
+        ),
+      generalCategoryLabel: options.translateText(
+        "layout.spaceRoomsCategory",
+      ),
+    });
+    return built.map((category) => ({
+      id: category.id,
+      name: category.name,
+      kind: category.kind,
+      subspaceRoomId: category.subspaceRoomId,
+      nestingDepth: category.nestingDepth,
+      parentSubspaceId: category.parentSubspaceId,
+      rootChildAnchorIds: category.rootChildAnchorIds,
+      canReorderRooms: false,
+      isSubspaceJoined: category.isSubspaceJoined,
+      rooms: category.rooms.map((room) => ({
+        roomId: room.roomId,
+        name: room.name,
+        isJoined: room.isJoined ?? true,
+      })),
+    }));
+  }
+
   function canManageChildrenOnSpace(spaceRoomId: string): boolean {
     return canManageSpaceChildren(
       options.client.value,
@@ -421,6 +459,7 @@ export function useChatRoomSidebar(options: {
     closeLeaveOverlay,
     buildHomeSections,
     buildSpaceSections,
+    buildSpaceLobbySections,
     canManageChildrenOnSpace,
     canReorderRootCategories,
     canAddSpaceChildren,
diff --git a/app/composables/chat/useChatSpaceRail.ts b/app/composables/chat/useChatSpaceRail.ts
index efa06c3..ea61cc3 100644
--- a/app/composables/chat/useChatSpaceRail.ts
+++ b/app/composables/chat/useChatSpaceRail.ts
@@ -221,6 +221,9 @@ export function useChatSpaceRail(options: {
         }
         const currentId = options.selectedSpaceId.value;
         if (!currentId || currentId === HOME_SPACE_ID) {
+          if (!currentId && spaces.length > 0) {
+            options.selectedSpaceId.value = HOME_SPACE_ID;
+          }
           return;
         }
         const selectedExists = spaces.some(
diff --git a/app/composables/i18n/locales/de.ts b/app/composables/i18n/locales/de.ts
index 78845f3..9cc238f 100644
--- a/app/composables/i18n/locales/de.ts
+++ b/app/composables/i18n/locales/de.ts
@@ -508,6 +508,17 @@ const messages: LocaleMessages = {
     'rooms.visibilityPublic': 'Oeffentlich (Verzeichnis, offener Beitritt)',
     'rooms.createSubmit': 'Raum erstellen',
     'onboarding.title': 'Erste Schritte',
+    'spaceHome.welcome': 'Willkommen bei {space}',
+    'spaceHome.subtitle':
+      'Waehle einen Kanal oder verwalte diesen Space.',
+    'spaceHome.emptyChannels': 'Noch keine Kanaele beigetreten.',
+    'spaceHome.channelsSection': 'Kanaele',
+    'spaceHome.lobby': 'Lobby',
+    'spaceHome.joinChannel': 'Beitreten',
+    'spaceHome.joinSubspace': 'Subspace beitreten',
+    'spaceHome.openChannel': '{name} oeffnen',
+    'spaceHome.emptySubspaceChannels':
+      'Tritt diesem Subspace bei, um seine Kanaele zu sehen.',
     'onboarding.subtitle':
       'DM starten, Raum anlegen oder oeffentliche Raeume entdecken.',
     'onboarding.startDm': 'Direktnachricht starten',
diff --git a/app/composables/i18n/locales/en.ts b/app/composables/i18n/locales/en.ts
index c91a033..6e89e91 100644
--- a/app/composables/i18n/locales/en.ts
+++ b/app/composables/i18n/locales/en.ts
@@ -481,6 +481,16 @@ const messages: LocaleMessages = {
     'rooms.visibilityPublic': 'Public (listed, open join)',
     'rooms.createSubmit': 'Create room',
     'onboarding.title': 'Get started',
+    'spaceHome.welcome': 'Welcome to {space}',
+    'spaceHome.subtitle': 'Pick a channel or manage this space.',
+    'spaceHome.emptyChannels': 'No channels joined yet.',
+    'spaceHome.channelsSection': 'Channels',
+    'spaceHome.lobby': 'Lobby',
+    'spaceHome.joinChannel': 'Join',
+    'spaceHome.joinSubspace': 'Join subspace',
+    'spaceHome.openChannel': 'Open {name}',
+    'spaceHome.emptySubspaceChannels':
+      'Join this subspace to see its channels.',
     'onboarding.subtitle':
       'Start a direct message, create a room, or explore public rooms.',
     'onboarding.startDm': 'Start direct message',
diff --git a/app/composables/useSpaceLobbyNames.ts b/app/composables/useSpaceLobbyNames.ts
new file mode 100644
index 0000000..ba36e45
--- /dev/null
+++ b/app/composables/useSpaceLobbyNames.ts
@@ -0,0 +1,82 @@
+import type { MatrixClient } from "matrix-js-sdk";
+import { fetchSpaceHierarchyRoomNames } from "~/utils/spaceLobbyHierarchy";
+
+export function useSpaceLobbyNames(options: {
+  client: Ref<MatrixClient | null>;
+  selectedSpaceId: Ref<string | null>;
+  matrixSyncPrepared: Ref<boolean>;
+  isHomeSpace: (spaceId: string | null) => boolean;
+}) {
+  const lobbyRoomNamesById = ref<Record<string, string>>({});
+  let requestId = 0;
+  let debounceTimerId: number | null = null;
+
+  async function loadNames(spaceId: string) {
+    const matrixClient = options.client.value;
+    if (!matrixClient) {
+      return;
+    }
+    const currentRequest = ++requestId;
+    const names = await fetchSpaceHierarchyRoomNames(
+      matrixClient,
+      spaceId,
+    );
+    if (currentRequest !== requestId) {
+      return;
+    }
+    lobbyRoomNamesById.value = names;
+  }
+
+  function scheduleLoadNames(spaceId: string) {
+    if (debounceTimerId !== null) {
+      window.clearTimeout(debounceTimerId);
+    }
+    debounceTimerId = window.setTimeout(() => {
+      debounceTimerId = null;
+      void loadNames(spaceId);
+    }, 250);
+  }
+
+  function clearLobbyNames() {
+    requestId++;
+    if (debounceTimerId !== null) {
+      window.clearTimeout(debounceTimerId);
+      debounceTimerId = null;
+    }
+    lobbyRoomNamesById.value = {};
+  }
+
+  watch(
+    [
+      options.client,
+      options.selectedSpaceId,
+      options.matrixSyncPrepared,
+    ],
+    ([matrixClient, spaceId, prepared]) => {
+      if (!matrixClient || !prepared || options.isHomeSpace(spaceId)) {
+        clearLobbyNames();
+        return;
+      }
+      scheduleLoadNames(spaceId as string);
+    },
+    { immediate: true },
+  );
+
+  function refreshLobbyNames() {
+    const spaceId = options.selectedSpaceId.value;
+    if (
+      !options.client.value ||
+      !options.matrixSyncPrepared.value ||
+      options.isHomeSpace(spaceId) ||
+      !spaceId
+    ) {
+      return;
+    }
+    scheduleLoadNames(spaceId);
+  }
+
+  return {
+    lobbyRoomNamesById,
+    refreshLobbyNames,
+  };
+}
diff --git a/app/pages/chat.vue b/app/pages/chat.vue
index 0485a2f..7449826 100644
--- a/app/pages/chat.vue
+++ b/app/pages/chat.vue
@@ -15,6 +15,7 @@ import type { RoomNotificationLevel } from "~/utils/matrixNotificationRules";
 import ChatOnboardingPanel from "~/components/Chat/Onboarding/ChatOnboardingPanel.vue";
 import ChatDmStartPanel from "~/components/Chat/Onboarding/ChatDmStartPanel.vue";
 import ChatPublicRoomsPanel from "~/components/Chat/Onboarding/ChatPublicRoomsPanel.vue";
+import SpaceHomePanel from "~/components/Chat/SpaceHomePanel.vue";
 import MatrixInvitePanel from "~/components/Chat/MatrixInvitePanel.vue";
 import LeaveRoomConfirmPanel from "~/components/Chat/LeaveRoomConfirmPanel.vue";
 import { canUserSendRoomMessage } from "~/utils/matrixRoomMessagePermissions";
@@ -33,6 +34,8 @@ import { useChatSpaceRail } from "~/composables/chat/useChatSpaceRail";
 import { useChatRoomSidebar } from "~/composables/chat/useChatRoomSidebar";
 import { useChatMatrixEvents } from "~/composables/chat/useChatMatrixEvents";
 import { useChatPageShell } from "~/composables/chat/useChatPageShell";
+import { useSpaceLobbyNames } from "~/composables/useSpaceLobbyNames";
+import { applyLobbyHierarchyNames } from "~/utils/spaceLobbyHierarchy";
 
 const {
   client,
@@ -47,6 +50,7 @@ const {
   unpinRoomEvent,
   markRoomAsRead,
   markThreadAsRead,
+  joinRoomByIdOrAlias,
 } = useMatrixClient();
 const matrixSyncPrepared = useMatrixSyncPrepared(client);
 const { translateText } = useAppI18n();
@@ -73,6 +77,7 @@ const selectedSpaceId = useState<string | null>(
 );
 const pendingRootSpaceId = ref<string | null>(null);
 const suppressAutoRoomSelect = ref(false);
+const lobbyJoiningRoomId = ref<string | null>(null);
 const matrixRooms = ref<Array<Record<string, any>>>([]);
 const spaceUnreadForRail = shallowRef<
   Record<
@@ -104,6 +109,7 @@ function refreshRooms() {
   matrixRooms.value = getRooms();
   scheduleThreadNavRefresh();
   refreshUnread();
+  refreshLobbyNames();
 }
 
 const timeline = useChatTimelineWindow({
@@ -322,6 +328,7 @@ const {
   closeLeaveOverlay,
   buildHomeSections,
   buildSpaceSections,
+  buildSpaceLobbySections,
   canManageChildrenOnSpace,
   canReorderRootCategories,
   canAddSpaceChildren,
@@ -334,6 +341,17 @@ const {
   openAddSubspaceToSpace,
 } = roomSidebar;
 
+function isHomeSpaceContext(spaceId: string | null): boolean {
+  return spaceId === null || spaceId === HOME_SPACE_ID;
+}
+
+const { lobbyRoomNamesById, refreshLobbyNames } = useSpaceLobbyNames({
+  client,
+  selectedSpaceId,
+  matrixSyncPrepared,
+  isHomeSpace: isHomeSpaceContext,
+});
+
 function navigateToChatHome() {
   suppressAutoRoomSelect.value = true;
   onboardingSubView.value = null;
@@ -345,15 +363,37 @@ function navigateToChatHome() {
   closePinnedMessagesPanel();
 }
 
+function isInMatrixSpace(): boolean {
+  const spaceId = selectedSpaceId.value;
+  return spaceId !== null && spaceId !== HOME_SPACE_ID;
+}
+
+function navigateToSpaceHome() {
+  suppressAutoRoomSelect.value = true;
+  onboardingSubView.value = null;
+  selectedRoomId.value = null;
+  closeActiveThread();
+  resetTimelineState();
+  closeRoomThreadsPanel();
+  closePinnedMessagesPanel();
+}
+
+function navigateAfterLeavingActiveRoom() {
+  if (isInMatrixSpace()) {
+    navigateToSpaceHome();
+  } else {
+    navigateToChatHome();
+  }
+}
+
 function onLeaveConfirming(roomId: string) {
   if (selectedRoomId.value === roomId) {
-    navigateToChatHome();
+    navigateAfterLeavingActiveRoom();
   }
 }
 
 function onRoomLeft(_leftRoomId: string) {
-  // Interim (#94): always Home onboarding. #124: space home when in a space.
-  navigateToChatHome();
+  navigateAfterLeavingActiveRoom();
   refreshRooms();
   closeLeaveOverlay();
 }
@@ -391,6 +431,37 @@ const spaceMemberCountLabel = computed(() => {
   });
 });
 
+const selectedSpaceAvatarUrl = computed(() => {
+  const spaceId = selectedSpaceId.value;
+  if (!spaceId || isHomeSpaceContext(spaceId)) {
+    return undefined;
+  }
+  return spaceRailItems.value.find((space) => space.id === spaceId)
+    ?.avatarUrl;
+});
+
+const selectedSpaceTopic = computed(() => {
+  const spaceId = selectedSpaceId.value;
+  if (!spaceId || isHomeSpaceContext(spaceId)) {
+    return undefined;
+  }
+  const spaceRoom = client.value?.getRoom(spaceId);
+  const topic = spaceRoom?.currentState
+    ?.getStateEvents?.("m.room.topic", "")
+    ?.getContent?.()?.topic;
+  return typeof topic === "string" && topic.length > 0 ? topic : undefined;
+});
+
+const spaceLobbyCategories = computed<RoomCategoryGroup[]>(() => {
+  if (isHomeSpaceContext(selectedSpaceId.value)) {
+    return [];
+  }
+  return applyLobbyHierarchyNames(
+    buildSpaceLobbySections(),
+    lobbyRoomNamesById.value,
+  );
+});
+
 const roomCategoryStructure = computed<RoomCategoryGroup[]>(() => {
   if (selectedSpaceId.value === HOME_SPACE_ID) {
     return buildHomeSections();
@@ -554,6 +625,7 @@ const pageShell = useChatPageShell({
   isMobile,
   spaceRailExpanded,
   onboardingSubView,
+  suppressAutoRoomSelect,
   refreshRooms,
   clearLoadMessagesTimer,
   clearThreadNavRefreshTimer,
@@ -564,7 +636,6 @@ const {
   closeMobileOverlays,
   toggleLeftSidebar,
   toggleSpaceRail,
-  selectSpace,
   openHomeStartDm,
   openHomeExplorePublic,
   onDirectMessageStarted,
@@ -574,6 +645,34 @@ const {
   unmountShell,
 } = pageShell;
 
+function selectSpace(spaceId: string) {
+  closeActiveThread();
+  resetTimelineState();
+  closeRoomThreadsPanel();
+  closePinnedMessagesPanel();
+  pageShell.selectSpace(spaceId);
+}
+
+function openSpaceLobby() {
+  navigateToSpaceHome();
+}
+
+async function onJoinLobbyRoom(roomId: string) {
+  if (lobbyJoiningRoomId.value) {
+    return;
+  }
+  lobbyJoiningRoomId.value = roomId;
+  try {
+    const joinedRoomId = await joinRoomByIdOrAlias(roomId);
+    refreshRooms();
+    selectRoom(joinedRoomId);
+  } catch (thrownError) {
+    console.error("joinRoomByIdOrAlias failed", thrownError);
+  } finally {
+    lobbyJoiningRoomId.value = null;
+  }
+}
+
 function selectRoom(roomId: string) {
   suppressAutoRoomSelect.value = false;
   pageShell.selectRoom(roomId, activeThread.value, closeActiveThread);
@@ -676,6 +775,7 @@ setupMatrixEventWatchers();
           @open-home-start-dm="openHomeStartDm"
           @open-home-create-room="openHomeCreateRoom"
           @open-home-explore-public="openHomeExplorePublic"
+          @open-space-lobby="openSpaceLobby"
           @persist-room-order="onPersistRoomOrder"
           @move-room-between-categories="onMoveRoomBetweenCategories"
           @reorder-root-categories="onReorderRootCategories"
@@ -781,22 +881,38 @@ setupMatrixEventWatchers();
         v-if="!selectedRoomId"
         class="flex flex-1 items-center justify-center overflow-auto p-4"
       >
-        <ChatDmStartPanel
-          v-if="onboardingSubView === 'dm'"
-          @back="onboardingSubView = null"
-          @started="onDirectMessageStarted"
-        />
-        <ChatPublicRoomsPanel
-          v-else-if="onboardingSubView === 'public'"
-          @back="onboardingSubView = null"
-          @joined="onPublicRoomJoined"
-        />
-        <ChatOnboardingPanel
+        <template v-if="isHomeSpaceContext(selectedSpaceId)">
+          <ChatDmStartPanel
+            v-if="onboardingSubView === 'dm'"
+            @back="onboardingSubView = null"
+            @started="onDirectMessageStarted"
+          />
+          <ChatPublicRoomsPanel
+            v-else-if="onboardingSubView === 'public'"
+            @back="onboardingSubView = null"
+            @joined="onPublicRoomJoined"
+          />
+          <ChatOnboardingPanel
+            v-else
+            :show-header="!hasJoinedNonSpaceRooms"
+            @open-dm="onboardingSubView = 'dm'"
+            @open-create-room="navigateTo('/rooms/new')"
+            @open-public-rooms="onboardingSubView = 'public'"
+          />
+        </template>
+        <SpaceHomePanel
           v-else
-          :show-header="!hasJoinedNonSpaceRooms"
-          @open-dm="onboardingSubView = 'dm'"
-          @open-create-room="navigateTo('/rooms/new')"
-          @open-public-rooms="onboardingSubView = 'public'"
+          :space-name="selectedSpaceName"
+          :space-avatar-url="selectedSpaceAvatarUrl"
+          :space-topic="selectedSpaceTopic"
+          :member-count-label="spaceMemberCountLabel"
+          :categories="spaceLobbyCategories"
+          :can-invite="canInviteToSpace"
+          :joining-room-id="lobbyJoiningRoomId"
+          @select-room="selectRoom"
+          @join-room="onJoinLobbyRoom"
+          @invite="openInviteToSpace"
+          @open-settings="openSpaceSettings"
         />
       </div>
       <template v-else>
diff --git a/app/utils/spaceLobbyHierarchy.ts b/app/utils/spaceLobbyHierarchy.ts
new file mode 100644
index 0000000..dfdcf86
--- /dev/null
+++ b/app/utils/spaceLobbyHierarchy.ts
@@ -0,0 +1,57 @@
+import type { MatrixClient } from "matrix-js-sdk";
+import type { RoomCategoryGroup } from "~/composables/chat/chatPageTypes";
+
+/**
+ * Load display names for space children via MSC2946 /hierarchy (incl. unjoined).
+ */
+export async function fetchSpaceHierarchyRoomNames(
+  matrixClient: MatrixClient,
+  rootSpaceId: string,
+): Promise<Record<string, string>> {
+  const namesById: Record<string, string> = {};
+  let nextBatch: string | undefined;
+
+  try {
+    do {
+      const response = await matrixClient.getRoomHierarchy(
+        rootSpaceId,
+        100,
+        50,
+        false,
+        nextBatch,
+      );
+      for (const room of response.rooms) {
+        const roomId = room.room_id;
+        const name = typeof room.name === "string" ? room.name.trim() : "";
+        if (roomId && name) {
+          namesById[roomId] = name;
+        }
+      }
+      nextBatch = response.next_batch;
+    } while (nextBatch);
+  } catch (thrownError) {
+    console.warn("fetchSpaceHierarchyRoomNames failed", thrownError);
+  }
+
+  return namesById;
+}
+
+export function applyLobbyHierarchyNames(
+  categories: RoomCategoryGroup[],
+  namesById: Record<string, string>,
+): RoomCategoryGroup[] {
+  if (Object.keys(namesById).length === 0) {
+    return categories;
+  }
+  return categories.map((category) => ({
+    ...category,
+    name:
+      category.subspaceRoomId && namesById[category.subspaceRoomId]
+        ? namesById[category.subspaceRoomId]
+        : category.name,
+    rooms: category.rooms.map((room) => ({
+      ...room,
+      name: namesById[room.roomId] ?? room.name,
+    })),
+  }));
+}
diff --git a/app/utils/spaceRoomCategories.ts b/app/utils/spaceRoomCategories.ts
index cc867d2..5807973 100644
--- a/app/utils/spaceRoomCategories.ts
+++ b/app/utils/spaceRoomCategories.ts
@@ -33,7 +33,9 @@ export interface SpaceRoomCategory {
    * UI block represents — used to reorder category blocks on the root.
    */
   rootChildAnchorIds: string[];
-  rooms: Array<{ roomId: string; name: string }>;
+  rooms: Array<{ roomId: string; name: string; isJoined?: boolean }>;
+  /** Subspace block: user has joined this nested space room */
+  isSubspaceJoined?: boolean;
 }
 
 export interface MatrixRoomLike {
@@ -509,3 +511,199 @@ export function buildSpaceRoomCategories(options: {
 
   return categories;
 }
+
+function resolveLobbyRoomName(
+  roomId: string,
+  roomsById: Map<string, unknown>,
+  getRoomDisplayName: (room: unknown) => string,
+): string {
+  const room = roomsById.get(roomId);
+  if (room) {
+    return getRoomDisplayName(room);
+  }
+  const localpart = roomId.split(":")[0]?.replace(/^!/, "") ?? roomId;
+  return localpart;
+}
+
+function isLobbyRoomJoined(
+  roomId: string,
+  roomsById: Map<string, unknown>,
+): boolean {
+  const room = roomsById.get(roomId);
+  if (!room || typeof room !== "object") {
+    return false;
+  }
+  const membership = (room as { getMyMembership?: () => string })
+    .getMyMembership?.();
+  return membership === "join";
+}
+
+function lobbyRoomEntry(
+  roomId: string,
+  roomsById: Map<string, unknown>,
+  getRoomDisplayName: (room: unknown) => string,
+): { roomId: string; name: string; isJoined: boolean } {
+  return {
+    roomId,
+    name: resolveLobbyRoomName(roomId, roomsById, getRoomDisplayName),
+    isJoined: isLobbyRoomJoined(roomId, roomsById),
+  };
+}
+
+function appendLobbySubspaceCategoriesDepthFirst(
+  subspaceId: string,
+  roomsById: Map<string, unknown>,
+  getRoomType: (room: unknown) => string | undefined,
+  getRoomDisplayName: (room: unknown) => string,
+  categories: SpaceRoomCategory[],
+  rootChildAnchorIds: string[],
+  nestingDepth: number,
+  parentSubspaceId?: string,
+): void {
+  const subspaceRoom = roomsById.get(subspaceId);
+  const isSubspaceJoined =
+    Boolean(subspaceRoom) &&
+    getRoomType(subspaceRoom) === ROOM_TYPE_SPACE &&
+    isLobbyRoomJoined(subspaceId, roomsById);
+
+  const roomsInSubspace: Array<{
+    roomId: string;
+    name: string;
+    isJoined: boolean;
+  }> = [];
+  const nestedSubspaceIds: string[] = [];
+
+  if (isSubspaceJoined && subspaceRoom) {
+    const parsedChildren = sortParsedSpaceChildren(
+      parseSpaceChildEvents(subspaceRoom as MatrixRoomLike),
+      (childId) =>
+        resolveLobbyRoomName(childId, roomsById, getRoomDisplayName),
+    );
+
+    for (const parsed of parsedChildren) {
+      const memberRoom = roomsById.get(parsed.childRoomId);
+      if (memberRoom && getRoomType(memberRoom) === ROOM_TYPE_SPACE) {
+        nestedSubspaceIds.push(parsed.childRoomId);
+      } else {
+        roomsInSubspace.push(
+          lobbyRoomEntry(
+            parsed.childRoomId,
+            roomsById,
+            getRoomDisplayName,
+          ),
+        );
+      }
+    }
+  }
+
+  categories.push({
+    id: subspaceId,
+    name: resolveLobbyRoomName(subspaceId, roomsById, getRoomDisplayName),
+    kind: "subspace",
+    subspaceRoomId: subspaceId,
+    nestingDepth,
+    parentSubspaceId,
+    rootChildAnchorIds,
+    rooms: roomsInSubspace,
+    isSubspaceJoined,
+  });
+
+  if (isSubspaceJoined) {
+    for (const nestedSubspaceId of nestedSubspaceIds) {
+      appendLobbySubspaceCategoriesDepthFirst(
+        nestedSubspaceId,
+        roomsById,
+        getRoomType,
+        getRoomDisplayName,
+        categories,
+        [],
+        nestingDepth + 1,
+        subspaceId,
+      );
+    }
+  }
+}
+
+/**
+ * Space lobby / sitemap: all m.space.child channels under a joined root space,
+ * including rooms the user has not joined yet.
+ */
+export function buildSpaceLobbyCategories(options: {
+  rootSpaceId: string;
+  matrixRooms: unknown[];
+  getRoomType: (room: unknown) => string | undefined;
+  getRoomId: (room: unknown) => string;
+  getRoomDisplayName: (room: unknown) => string;
+  generalCategoryLabel: string;
+}): SpaceRoomCategory[] {
+  const {
+    rootSpaceId,
+    matrixRooms,
+    getRoomType,
+    getRoomId,
+    getRoomDisplayName,
+    generalCategoryLabel,
+  } = options;
+
+  const roomsById = new Map<string, unknown>();
+  for (const room of matrixRooms) {
+    roomsById.set(getRoomId(room), room);
+  }
+
+  const rootRoom = roomsById.get(rootSpaceId);
+  if (!rootRoom || getRoomType(rootRoom) !== ROOM_TYPE_SPACE) {
+    return [];
+  }
+
+  const parsedRootChildren = sortParsedSpaceChildren(
+    parseSpaceChildEvents(rootRoom as MatrixRoomLike),
+    (childId) =>
+      resolveLobbyRoomName(childId, roomsById, getRoomDisplayName),
+  );
+
+  const rootLevelRooms: Array<{
+    roomId: string;
+    name: string;
+    isJoined: boolean;
+  }> = [];
+  const subspaceIdsInOrder: string[] = [];
+
+  for (const parsed of parsedRootChildren) {
+    const childRoom = roomsById.get(parsed.childRoomId);
+    const childType = childRoom ? getRoomType(childRoom) : undefined;
+    if (childType === ROOM_TYPE_SPACE) {
+      subspaceIdsInOrder.push(parsed.childRoomId);
+      continue;
+    }
+    rootLevelRooms.push(
+      lobbyRoomEntry(parsed.childRoomId, roomsById, getRoomDisplayName),
+    );
+  }
+
+  const categories: SpaceRoomCategory[] = [];
+
+  if (rootLevelRooms.length > 0) {
+    categories.push({
+      id: `${rootSpaceId}-rooms`,
+      name: generalCategoryLabel,
+      kind: "root",
+      nestingDepth: 0,
+      rootChildAnchorIds: rootLevelRooms.map((entry) => entry.roomId),
+      rooms: rootLevelRooms,
+    });
+  }
+
+  for (const subspaceId of subspaceIdsInOrder) {
+    appendLobbySubspaceCategoriesDepthFirst(
+      subspaceId,
+      roomsById,
+      getRoomType,
+      getRoomDisplayName,
+      categories,
+      [subspaceId],
+      1,
+    );
+  }
+
+  return categories;
+}
diff --git a/docs/architecture.md b/docs/architecture.md
index dd59642..25d77c8 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -140,6 +140,7 @@ Related outside `chat/`: `useChatMedia.ts`, `useRoomTyping.ts`,
 | `ChatPinnedMessagesPanel.vue` | Pinned messages |
 | `VoiceMessagePlayer.vue`, `VideoMessagePlayer.vue` | Media playback |
 | `Onboarding/*` | DM start, public rooms, onboarding panel |
+| `SpaceHomePanel.vue` | Space overview when space selected, no room |
 
 ### Timeline utils
 
diff --git a/tests/e2e/features/chat.feature b/tests/e2e/features/chat.feature
index a06d3a2..a713c7b 100644
--- a/tests/e2e/features/chat.feature
+++ b/tests/e2e/features/chat.feature
@@ -334,9 +334,18 @@ Feature: Chat
     And I open the channel options menu for the seeded test space channel
     And I choose leave channel from the menu
     And I confirm leaving the channel
-    Then I should see the chat home onboarding panel
+    Then I should see the space home panel
     And the seeded test space channel should not appear in the sidebar
 
+  @space_home
+  Scenario: Select space from rail shows overview and opens channel from list
+    When I open the login page
+    And I sign in with configured credentials
+    And I select the seeded test space in the space rail
+    Then I should see the space home panel
+    When I open the seeded test space channel
+    Then I should not see the space home panel
+
   @leave_room
   Scenario: Leave seeded direct message room from sidebar
     When I open the login page
diff --git a/tests/e2e/step-definitions/leave-room.steps.mjs b/tests/e2e/step-definitions/leave-room.steps.mjs
index 76e2c7a..5f39bfc 100644
--- a/tests/e2e/step-definitions/leave-room.steps.mjs
+++ b/tests/e2e/step-definitions/leave-room.steps.mjs
@@ -72,6 +72,16 @@ async function assertChatHomeOnboarding(page) {
   })
 }
 
+async function assertSpaceHomePanel(page) {
+  const spaceHomePanel = page.locator('[data-space-home-panel]')
+  const welcomeHeading = page.getByRole('heading', {
+    name: /Welcome to|Willkommen bei/i,
+  })
+  await expect(spaceHomePanel.or(welcomeHeading)).toBeVisible({
+    timeout: 20000,
+  })
+}
+
 async function assertRoomAbsentFromSidebar(page, roomId) {
   await expect(roomButtonById(page, roomId)).toHaveCount(0, {
     timeout: 20000,
@@ -161,6 +171,15 @@ Then('I should see the chat home onboarding panel', async function () {
   await assertChatHomeOnboarding(this.page)
 })
 
+Then('I should see the space home panel', async function () {
+  await assertSpaceHomePanel(this.page)
+})
+
+Then('I should not see the space home panel', async function () {
+  await expect(this.page.locator('[data-space-home-panel]'))
+    .toHaveCount(0, { timeout: 20000 })
+})
+
 Then(
   'the side seeded test room should not appear in the sidebar',
   async function () {
diff --git a/tests/setup.ts b/tests/setup.ts
index 1ed5a4f..c1e560d 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -14,6 +14,17 @@ const englishMessages: Record<string, string> = {
   'layout.channels': 'Channels',
   'layout.noRoomsInSpace': 'No channels in this space',
   'layout.openSpaceSettings': 'Space settings',
+  'invite.spaceMenu': 'Invite to space',
+  'spaceHome.welcome': 'Welcome to {space}',
+  'spaceHome.subtitle': 'Pick a channel or manage this space.',
+  'spaceHome.emptyChannels': 'No channels joined yet.',
+  'spaceHome.channelsSection': 'Channels',
+  'spaceHome.lobby': 'Lobby',
+  'spaceHome.joinChannel': 'Join',
+  'spaceHome.joinSubspace': 'Join subspace',
+  'spaceHome.openChannel': 'Open {name}',
+  'spaceHome.emptySubspaceChannels':
+    'Join this subspace to see its channels.',
   'layout.expandCategory': 'Expand category',
   'layout.collapseCategory': 'Collapse category',
   'layout.channelUnreadAria': 'Unread messages in {name}',
diff --git a/tests/unit/components/Chat/SpaceHomePanel.spec.ts b/tests/unit/components/Chat/SpaceHomePanel.spec.ts
new file mode 100644
index 0000000..394e002
--- /dev/null
+++ b/tests/unit/components/Chat/SpaceHomePanel.spec.ts
@@ -0,0 +1,111 @@
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SpaceHomePanel from '~/components/Chat/SpaceHomePanel.vue'
+
+const UButtonStub = {
+  template: '<button type="button"><slot /></button>',
+}
+
+const categories = [
+  {
+    id: 'general',
+    name: 'Rooms',
+    kind: 'root' as const,
+    rootChildAnchorIds: ['!channel:example.org'],
+    canReorderRooms: false,
+    rooms: [
+      { roomId: '!channel:example.org', name: 'General', isJoined: true },
+      { roomId: '!other:example.org', name: 'Random', isJoined: false },
+    ],
+  },
+]
+
+function mountSpaceHome(extraProps: Record<string, unknown> = {}) {
+  return mount(SpaceHomePanel, {
+    props: {
+      spaceName: 'Team Space',
+      memberCountLabel: '3 members',
+      categories,
+      canInvite: true,
+      ...extraProps,
+    },
+    global: {
+      stubs: {
+        UButton: UButtonStub,
+        UIcon: true,
+      },
+    },
+  })
+}
+
+describe('SpaceHomePanel', () => {
+  it('renders welcome header and channel list from categories', () => {
+    const wrapper = mountSpaceHome()
+
+    wrapper.find('[data-space-home-panel]').exists().should.equal(true)
+    wrapper.text().should.include('Welcome to Team Space')
+    wrapper.text().should.include('3 members')
+    wrapper.text().should.include('General')
+    wrapper.text().should.include('Random')
+  })
+
+  it('emits select-room when an joined channel action is clicked', async () => {
+    const wrapper = mountSpaceHome()
+
+    const roomButton = wrapper.find(
+      'button[data-space-home-room-id="!channel:example.org"]',
+    )
+    await roomButton.trigger('click')
+
+    const emitted = wrapper.emitted('select-room')
+    emitted?.length.should.equal(1)
+    emitted?.[0]?.[0].should.equal('!channel:example.org')
+  })
+
+  it('emits join-room for unjoined channels', async () => {
+    const wrapper = mountSpaceHome()
+
+    const joinButton = wrapper.find(
+      'button[data-space-home-room-id="!other:example.org"]',
+    )
+    await joinButton.trigger('click')
+
+    const emitted = wrapper.emitted('join-room')
+    emitted?.length.should.equal(1)
+    emitted?.[0]?.[0].should.equal('!other:example.org')
+  })
+
+  it('shows invite button only when canInvite is true', () => {
+    const withInvite = mountSpaceHome({ canInvite: true })
+    withInvite.text().should.include('Invite to space')
+
+    const withoutInvite = mountSpaceHome({ canInvite: false })
+    withoutInvite.text().should.not.include('Invite to space')
+    withoutInvite.text().should.include('Space settings')
+  })
+
+  it('shows empty state when no channels are listed', () => {
+    const wrapper = mountSpaceHome({ categories: [] })
+
+    wrapper.text().should.include('No channels joined yet.')
+    wrapper.find('[data-space-home-room-id]').exists().should.equal(false)
+  })
+
+  it('emits invite and open-settings from action buttons', async () => {
+    const wrapper = mountSpaceHome()
+    const buttons = wrapper.findAll('button')
+
+    const inviteButton = buttons.find((button) =>
+      button.text().includes('Invite to space'),
+    )
+    const settingsButton = buttons.find((button) =>
+      button.text().includes('Space settings'),
+    )
+
+    await inviteButton?.trigger('click')
+    await settingsButton?.trigger('click')
+
+    wrapper.emitted('invite')?.length.should.equal(1)
+    wrapper.emitted('open-settings')?.length.should.equal(1)
+  })
+})
diff --git a/tests/unit/composables/useChatPageShell.spec.ts b/tests/unit/composables/useChatPageShell.spec.ts
new file mode 100644
index 0000000..6a272ef
--- /dev/null
+++ b/tests/unit/composables/useChatPageShell.spec.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { useChatPageShell } from '~/composables/chat/useChatPageShell'
+import { HOME_SPACE_ID } from '~/utils/spaceUnread'
+
+vi.stubGlobal('navigateTo', vi.fn(async () => undefined))
+vi.stubGlobal('useRoute', () => ({ query: {} }))
+
+function createShellOptions() {
+  return {
+    client: ref<Record<string, unknown> | null>(null),
+    matrixRooms: ref<Array<Record<string, unknown>>>([]),
+    selectedSpaceId: ref<string | null>(HOME_SPACE_ID),
+    selectedRoomId: ref<string | null>('!room:example.org'),
+    pendingRootSpaceId: ref<string | null>(null),
+    leftSidebarOpen: ref(true),
+    rightSidebarOpen: ref(true),
+    isMobile: ref(false),
+    spaceRailExpanded: ref(false),
+    onboardingSubView: ref<'dm' | 'public' | null>('dm'),
+    suppressAutoRoomSelect: ref(false),
+    refreshRooms: vi.fn(),
+    clearLoadMessagesTimer: vi.fn(),
+    clearThreadNavRefreshTimer: vi.fn(),
+  }
+}
+
+describe('useChatPageShell', () => {
+  it('selectSpace clears room, onboarding, and suppresses auto-pick', () => {
+    const options = createShellOptions()
+    const { selectSpace } = useChatPageShell(options)
+
+    selectSpace('!space:example.org')
+
+    expect(options.selectedSpaceId.value).toBe('!space:example.org')
+    expect(options.selectedRoomId.value).toBeNull()
+    expect(options.onboardingSubView.value).toBeNull()
+    expect(options.suppressAutoRoomSelect.value).toBe(true)
+  })
+
+  it('selectSpace closes left sidebar on mobile', () => {
+    const options = createShellOptions()
+    options.isMobile.value = true
+    const { selectSpace } = useChatPageShell(options)
+
+    selectSpace('!space:example.org')
+
+    expect(options.leftSidebarOpen.value).toBe(false)
+  })
+})
diff --git a/tests/unit/utils/spaceLobbyHierarchy.spec.ts b/tests/unit/utils/spaceLobbyHierarchy.spec.ts
new file mode 100644
index 0000000..866ec4d
--- /dev/null
+++ b/tests/unit/utils/spaceLobbyHierarchy.spec.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  applyLobbyHierarchyNames,
+  fetchSpaceHierarchyRoomNames,
+} from '~/utils/spaceLobbyHierarchy'
+
+describe('spaceLobbyHierarchy', () => {
+  it('fetchSpaceHierarchyRoomNames maps room ids to names', async () => {
+    const matrixClient = {
+      getRoomHierarchy: vi.fn()
+        .mockResolvedValueOnce({
+          rooms: [
+            { room_id: '!a:example.org', name: 'General' },
+            { room_id: '!b:example.org', name: 'Random' },
+          ],
+          next_batch: 'token-1',
+        })
+        .mockResolvedValueOnce({
+          rooms: [
+            { room_id: '!c:example.org', name: 'Deep' },
+          ],
+        }),
+    }
+
+    const names = await fetchSpaceHierarchyRoomNames(
+      matrixClient as never,
+      '!root:example.org',
+    )
+
+    expect(names).toEqual({
+      '!a:example.org': 'General',
+      '!b:example.org': 'Random',
+      '!c:example.org': 'Deep',
+    })
+    expect(matrixClient.getRoomHierarchy).toHaveBeenCalledTimes(2)
+  })
+
+  it('applyLobbyHierarchyNames replaces fallback names', () => {
+    const categories = applyLobbyHierarchyNames(
+      [
+        {
+          id: 'rooms',
+          name: 'Rooms',
+          kind: 'root',
+          rootChildAnchorIds: ['!a:example.org'],
+          canReorderRooms: false,
+          rooms: [
+            {
+              roomId: '!a:example.org',
+              name: 'abc123',
+              isJoined: false,
+            },
+          ],
+        },
+      ],
+      { '!a:example.org': 'General' },
+    )
+
+    expect(categories[0]!.rooms[0]!.name).toBe('General')
+  })
+})
diff --git a/tests/unit/utils/spaceRoomCategories.spec.ts b/tests/unit/utils/spaceRoomCategories.spec.ts
index 5795dae..0330251 100644
--- a/tests/unit/utils/spaceRoomCategories.spec.ts
+++ b/tests/unit/utils/spaceRoomCategories.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it } from 'vitest'
 import {
   assignLexOrdersForSiblingCount,
+  buildSpaceLobbyCategories,
   buildSpaceRoomCategories,
   getJoinedSpaceIdsListedAsChild,
   getJoinedSpaceRoomIds,
@@ -420,4 +421,48 @@ describe('spaceRoomCategories', () => {
       roomNestedId,
     ])
   })
+
+  it('buildSpaceLobbyCategories includes unjoined m.space.child rooms', () => {
+    const rootId = '!root:example.org'
+    const joinedRoomId = '!joined:example.org'
+    const unjoinedRoomId = '!unjoined:example.org'
+
+    const matrixRooms = [
+      {
+        roomId: rootId,
+        name: 'Root',
+        getType: () => 'm.space' as const,
+        getMyMembership: () => 'join',
+        currentState: {
+          getStateEvents: () => [
+            mockStateEvent(joinedRoomId, { order: '0' }),
+            mockStateEvent(unjoinedRoomId, { order: '1' }),
+          ],
+        },
+      },
+      {
+        roomId: joinedRoomId,
+        name: 'Joined',
+        getType: () => undefined,
+        getMyMembership: () => 'join',
+      },
+    ]
+
+    const categories = buildSpaceLobbyCategories({
+      rootSpaceId: rootId,
+      matrixRooms,
+      getRoomType: (room: unknown) =>
+        (room as { getType?: () => string }).getType?.(),
+      getRoomId: (room: unknown) => (room as { roomId: string }).roomId,
+      getRoomDisplayName: (room: unknown) =>
+        String((room as { name?: string }).name ?? ''),
+      generalCategoryLabel: 'Rooms',
+    })
+
+    categories.length.should.equal(1)
+    categories[0]!.rooms.length.should.equal(2)
+    categories[0]!.rooms[0]!.isJoined.should.equal(true)
+    categories[0]!.rooms[1]!.isJoined.should.equal(false)
+    categories[0]!.rooms[1]!.roomId.should.equal(unjoinedRoomId)
+  })
 })

From af5aef8a63e0c60c597e7691af61a77102e42117 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Sat, 13 Jun 2026 15:11:31 +0200
Subject: [PATCH 2/2] Enhance space lobby functionality and UI components

- Introduced a new composable `useSpaceLobbyHierarchy` to manage lobby categories and their hierarchy, improving the organization of space channels.
- Updated `SpaceHomePanel` to display subspace avatars and member counts, enhancing the user interface for navigating spaces.
- Refactored `useChatSpaceRail` to prevent auto-selection of rooms when none are selected, improving user experience.
- Enhanced `CHANGELOG` to reflect the addition of lobby hierarchy management and UI improvements in the space home panel.
- Added unit tests for new functionalities, ensuring robust coverage for the space lobby features.
---
 CHANGELOG.md                                  |   3 +-
 app/components/Chat/SpaceHomePanel.vue        | 103 +++++++--
 app/composables/chat/chatPageTypes.ts         |   4 +
 app/composables/chat/useChatSpaceRail.ts      |  49 ++--
 ...obbyNames.ts => useSpaceLobbyHierarchy.ts} |  51 +++--
 app/pages/chat.vue                            |  57 +++--
 app/utils/spaceLobbyHierarchy.ts              | 212 +++++++++++++++++-
 .../components/Chat/SpaceHomePanel.spec.ts    |  19 ++
 .../unit/composables/useChatSpaceRail.spec.ts |  94 ++++++++
 tests/unit/utils/spaceLobbyHierarchy.spec.ts  | 117 ++++++++++
 10 files changed, 637 insertions(+), 72 deletions(-)
 rename app/composables/{useSpaceLobbyNames.ts => useSpaceLobbyHierarchy.ts} (50%)
 create mode 100644 tests/unit/composables/useChatSpaceRail.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ef5669..9fa1246 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Space home / sitemap view in the main pane when a Matrix Space is
   selected but no channel is active; rail `selectSpace` clears room
   selection; leaving a space channel lands on space home; lobby lists
-  unjoined channels with join actions and a sidebar Lobby entry
+  unjoined channels with join actions and a sidebar Lobby entry; no
+  auto-select of first channel on load or space change
   ([#124](https://github.com/mjkatgithub/Decentra/issues/124))
 - Project architecture map for developers and agents:
   `docs/architecture.md`, `docs/README.md`, issue documentation
diff --git a/app/components/Chat/SpaceHomePanel.vue b/app/components/Chat/SpaceHomePanel.vue
index 0a57e69..414a00c 100644
--- a/app/components/Chat/SpaceHomePanel.vue
+++ b/app/components/Chat/SpaceHomePanel.vue
@@ -30,6 +30,38 @@ const channelCategories = computed(() =>
 
 const hasLobbyEntries = computed(() => channelCategories.value.length > 0)
 
+function categoryIndentStyle(category: RoomCategoryGroup) {
+  const depth = category.nestingDepth ?? 0
+  if (category.kind !== 'subspace' || depth <= 1) {
+    return undefined
+  }
+  const indentRem = (depth - 1) * 1.25
+  return { marginLeft: `${indentRem}rem` }
+}
+
+function subspaceInitial(name: string): string {
+  const trimmed = name.trim()
+  return trimmed ? trimmed.charAt(0).toUpperCase() : '?'
+}
+
+function roomMemberLabel(count: number | undefined): string | null {
+  if (count === undefined || count <= 0) {
+    return null
+  }
+  return translateText('layout.spaceMembersCount', {
+    count: String(count),
+  })
+}
+
+function categoryTitleClass(category: RoomCategoryGroup): string {
+  if (category.kind === 'root') {
+    return 'truncate text-xs font-semibold uppercase tracking-wide'
+      + ' text-gray-500 dark:text-gray-400'
+  }
+  return 'truncate text-sm font-semibold text-gray-800'
+    + ' dark:text-gray-100'
+}
+
 function onRoomAction(roomId: string, isJoined: boolean) {
   if (isJoined) {
     emit('select-room', roomId)
@@ -51,7 +83,7 @@ function onSubspaceAction(category: RoomCategoryGroup) {
 
 <template>
   <div
-    class="mx-auto flex w-full max-w-2xl flex-col gap-5 overflow-auto p-2"
+    class="mx-auto flex w-full max-w-2xl flex-col gap-4 overflow-auto p-2"
     data-space-home-panel
   >
     <div
@@ -123,20 +155,43 @@ function onSubspaceAction(category: RoomCategoryGroup) {
       </div>
     </div>
 
-    <div v-if="hasLobbyEntries" class="flex flex-col gap-4">
+    <div v-if="hasLobbyEntries" class="flex flex-col gap-3">
       <section
         v-for="category in channelCategories"
         :key="category.id"
         class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm
                dark:border-gray-800 dark:bg-gray-900"
+        :style="categoryIndentStyle(category)"
+        :data-lobby-category-depth="category.nestingDepth ?? 0"
       >
-        <div class="mb-2 flex items-center justify-between gap-2">
-          <h3
-            class="text-xs font-semibold uppercase tracking-wide text-gray-500
-                   dark:text-gray-400"
-          >
-            {{ category.name }}
-          </h3>
+        <div class="mb-3 flex items-center justify-between gap-2">
+          <div class="flex min-w-0 items-center gap-2">
+            <template v-if="category.kind === 'subspace'">
+              <div
+                v-if="category.subspaceAvatarUrl"
+                class="size-8 shrink-0 overflow-hidden rounded-md
+                       bg-gray-200 dark:bg-gray-700"
+              >
+                <img
+                  :src="category.subspaceAvatarUrl"
+                  :alt="category.name"
+                  class="size-full object-cover"
+                >
+              </div>
+              <div
+                v-else
+                class="flex size-8 shrink-0 items-center justify-center
+                       rounded-md bg-primary-100 text-sm font-semibold
+                       text-primary-700 dark:bg-primary-900/40
+                       dark:text-primary-300"
+              >
+                {{ subspaceInitial(category.name) }}
+              </div>
+            </template>
+            <h3 :class="categoryTitleClass(category)">
+              {{ category.name }}
+            </h3>
+          </div>
           <UButton
             v-if="
               category.kind === 'subspace' &&
@@ -166,14 +221,36 @@ function onSubspaceAction(category: RoomCategoryGroup) {
           class="flex items-center gap-2 border-b border-gray-100 py-2
                  last:border-b-0 dark:border-gray-800"
         >
+          <div
+            v-if="room.avatarUrl"
+            class="size-7 shrink-0 overflow-hidden rounded-md bg-gray-200
+                   dark:bg-gray-700"
+          >
+            <img
+              :src="room.avatarUrl"
+              :alt="room.name"
+              class="size-full object-cover"
+            >
+          </div>
           <UIcon
+            v-else
             name="i-lucide-hash"
             class="size-4 shrink-0 text-gray-500 dark:text-gray-400"
           />
-          <span class="min-w-0 flex-1 truncate text-sm text-gray-800
-                         dark:text-gray-100">
-            {{ room.name }}
-          </span>
+          <div class="min-w-0 flex-1">
+            <span
+              class="block truncate text-sm text-gray-800
+                     dark:text-gray-100"
+            >
+              {{ room.name }}
+            </span>
+            <span
+              v-if="roomMemberLabel(room.memberCount)"
+              class="text-xs text-gray-500 dark:text-gray-400"
+            >
+              {{ roomMemberLabel(room.memberCount) }}
+            </span>
+          </div>
           <UButton
             v-if="room.isJoined !== false"
             size="xs"
diff --git a/app/composables/chat/chatPageTypes.ts b/app/composables/chat/chatPageTypes.ts
index 03e2a35..d7bd6ae 100644
--- a/app/composables/chat/chatPageTypes.ts
+++ b/app/composables/chat/chatPageTypes.ts
@@ -94,9 +94,13 @@ export interface RoomCategoryGroup {
     hasUnread?: boolean;
     hasMentionUnread?: boolean;
     isJoined?: boolean;
+    avatarUrl?: string;
+    memberCount?: number;
   }>;
   /** Lobby: user joined this subspace room */
   isSubspaceJoined?: boolean;
+  /** Lobby: subspace avatar from hierarchy or local room */
+  subspaceAvatarUrl?: string;
 }
 
 export interface MemberItem {
diff --git a/app/composables/chat/useChatSpaceRail.ts b/app/composables/chat/useChatSpaceRail.ts
index ea61cc3..c8d03e2 100644
--- a/app/composables/chat/useChatSpaceRail.ts
+++ b/app/composables/chat/useChatSpaceRail.ts
@@ -98,7 +98,19 @@ export function useChatSpaceRail(options: {
 
   const visibleRooms = computed(() => {
     if (options.selectedSpaceId.value === HOME_SPACE_ID) {
-      return roomItems.value;
+      return roomItems.value.filter(
+        (room) =>
+          isPersonalChatRoom(
+            room,
+            options.matrixRooms.value,
+            options.client.value,
+          ) ||
+          isGroupChatRoom(
+            room,
+            options.matrixRooms.value,
+            options.client.value,
+          ),
+      );
     }
     if (!options.selectedSpaceId.value) {
       return [];
@@ -241,11 +253,8 @@ export function useChatSpaceRail(options: {
         ) {
           return;
         }
-        const firstRealSpace = spaces.find(
-          (space) => space.id !== HOME_SPACE_ID,
-        );
-        options.selectedSpaceId.value =
-          firstRealSpace?.id ?? spaces[0]?.id ?? null;
+        options.selectedSpaceId.value = HOME_SPACE_ID;
+        options.selectedRoomId.value = null;
       },
       { immediate: true },
     );
@@ -253,33 +262,17 @@ export function useChatSpaceRail(options: {
     watch(
       visibleRooms,
       (rooms) => {
-        if (rooms.length === 0) {
-          options.selectedRoomId.value = null;
-          options.allMessages.value = [];
-          options.messages.value = [];
+        const activeRoomId = options.selectedRoomId.value;
+        if (!activeRoomId) {
           return;
         }
         const selectedExists = rooms.some(
-          (room) => room.roomId === options.selectedRoomId.value,
+          (room) => room.roomId === activeRoomId,
         );
-        if (
-          options.suppressAutoRoomSelect?.value &&
-          options.selectedRoomId.value === null
-        ) {
-          return;
-        }
-        if (!selectedExists && options.selectedRoomId.value !== null) {
-          const firstRoom = rooms[0];
-          if (firstRoom) {
-            options.selectedRoomId.value = firstRoom.roomId;
-          }
-          return;
-        }
         if (!selectedExists) {
-          const firstRoom = rooms[0];
-          if (firstRoom) {
-            options.selectedRoomId.value = firstRoom.roomId;
-          }
+          options.selectedRoomId.value = null;
+          options.allMessages.value = [];
+          options.messages.value = [];
         }
       },
       { immediate: true },
diff --git a/app/composables/useSpaceLobbyNames.ts b/app/composables/useSpaceLobbyHierarchy.ts
similarity index 50%
rename from app/composables/useSpaceLobbyNames.ts
rename to app/composables/useSpaceLobbyHierarchy.ts
index ba36e45..f48018c 100644
--- a/app/composables/useSpaceLobbyNames.ts
+++ b/app/composables/useSpaceLobbyHierarchy.ts
@@ -1,49 +1,68 @@
 import type { MatrixClient } from "matrix-js-sdk";
-import { fetchSpaceHierarchyRoomNames } from "~/utils/spaceLobbyHierarchy";
+import type { RoomCategoryGroup } from "~/composables/chat/chatPageTypes";
+import { matrixRoomHasJoinedMembership } from "~/utils/matrixRoomChannelPermissions";
+import { fetchSpaceHierarchyLobby } from "~/utils/spaceLobbyHierarchy";
 
-export function useSpaceLobbyNames(options: {
+export function useSpaceLobbyHierarchy(options: {
   client: Ref<MatrixClient | null>;
   selectedSpaceId: Ref<string | null>;
   matrixSyncPrepared: Ref<boolean>;
   isHomeSpace: (spaceId: string | null) => boolean;
+  translateText: (key: string) => string;
+  resolveMxcAvatarUrl: (mxcUrl: string | undefined) => string | undefined;
 }) {
-  const lobbyRoomNamesById = ref<Record<string, string>>({});
+  const lobbyCategories = ref<RoomCategoryGroup[]>([]);
   let requestId = 0;
   let debounceTimerId: number | null = null;
 
-  async function loadNames(spaceId: string) {
+  function isRoomJoined(roomId: string): boolean {
+    const matrixClient = options.client.value;
+    if (!matrixClient) {
+      return false;
+    }
+    return matrixRoomHasJoinedMembership(matrixClient.getRoom(roomId));
+  }
+
+  async function loadLobby(spaceId: string) {
     const matrixClient = options.client.value;
     if (!matrixClient) {
       return;
     }
     const currentRequest = ++requestId;
-    const names = await fetchSpaceHierarchyRoomNames(
+    const categories = await fetchSpaceHierarchyLobby(
       matrixClient,
       spaceId,
+      {
+        generalCategoryLabel: options.translateText(
+          "layout.spaceRoomsCategory",
+        ),
+        resolveAvatarUrl: options.resolveMxcAvatarUrl,
+        isRoomJoined,
+      },
     );
     if (currentRequest !== requestId) {
       return;
     }
-    lobbyRoomNamesById.value = names;
+    lobbyCategories.value = categories;
   }
 
-  function scheduleLoadNames(spaceId: string) {
+  function scheduleLoadLobby(spaceId: string) {
     if (debounceTimerId !== null) {
       window.clearTimeout(debounceTimerId);
     }
     debounceTimerId = window.setTimeout(() => {
       debounceTimerId = null;
-      void loadNames(spaceId);
+      void loadLobby(spaceId);
     }, 250);
   }
 
-  function clearLobbyNames() {
+  function clearLobby() {
     requestId++;
     if (debounceTimerId !== null) {
       window.clearTimeout(debounceTimerId);
       debounceTimerId = null;
     }
-    lobbyRoomNamesById.value = {};
+    lobbyCategories.value = [];
   }
 
   watch(
@@ -54,15 +73,15 @@ export function useSpaceLobbyNames(options: {
     ],
     ([matrixClient, spaceId, prepared]) => {
       if (!matrixClient || !prepared || options.isHomeSpace(spaceId)) {
-        clearLobbyNames();
+        clearLobby();
         return;
       }
-      scheduleLoadNames(spaceId as string);
+      scheduleLoadLobby(spaceId as string);
     },
     { immediate: true },
   );
 
-  function refreshLobbyNames() {
+  function refreshLobbyHierarchy() {
     const spaceId = options.selectedSpaceId.value;
     if (
       !options.client.value ||
@@ -72,11 +91,11 @@ export function useSpaceLobbyNames(options: {
     ) {
       return;
     }
-    scheduleLoadNames(spaceId);
+    scheduleLoadLobby(spaceId);
   }
 
   return {
-    lobbyRoomNamesById,
-    refreshLobbyNames,
+    lobbyCategories,
+    refreshLobbyHierarchy,
   };
 }
diff --git a/app/pages/chat.vue b/app/pages/chat.vue
index 7449826..826432a 100644
--- a/app/pages/chat.vue
+++ b/app/pages/chat.vue
@@ -34,8 +34,7 @@ import { useChatSpaceRail } from "~/composables/chat/useChatSpaceRail";
 import { useChatRoomSidebar } from "~/composables/chat/useChatRoomSidebar";
 import { useChatMatrixEvents } from "~/composables/chat/useChatMatrixEvents";
 import { useChatPageShell } from "~/composables/chat/useChatPageShell";
-import { useSpaceLobbyNames } from "~/composables/useSpaceLobbyNames";
-import { applyLobbyHierarchyNames } from "~/utils/spaceLobbyHierarchy";
+import { useSpaceLobbyHierarchy } from "~/composables/useSpaceLobbyHierarchy";
 
 const {
   client,
@@ -109,7 +108,7 @@ function refreshRooms() {
   matrixRooms.value = getRooms();
   scheduleThreadNavRefresh();
   refreshUnread();
-  refreshLobbyNames();
+  refreshLobbyHierarchy();
 }
 
 const timeline = useChatTimelineWindow({
@@ -345,12 +344,44 @@ function isHomeSpaceContext(spaceId: string | null): boolean {
   return spaceId === null || spaceId === HOME_SPACE_ID;
 }
 
-const { lobbyRoomNamesById, refreshLobbyNames } = useSpaceLobbyNames({
-  client,
-  selectedSpaceId,
-  matrixSyncPrepared,
-  isHomeSpace: isHomeSpaceContext,
-});
+const { lobbyCategories: lobbyHierarchyCategories, refreshLobbyHierarchy } =
+  useSpaceLobbyHierarchy({
+    client,
+    selectedSpaceId,
+    matrixSyncPrepared,
+    isHomeSpace: isHomeSpaceContext,
+    translateText,
+    resolveMxcAvatarUrl: (mxcUrl) => {
+      const matrixClient = client.value;
+      if (!mxcUrl || !matrixClient?.mxcUrlToHttp) {
+        return undefined;
+      }
+      try {
+        const httpUrl = matrixClient.mxcUrlToHttp(
+          mxcUrl,
+          40,
+          40,
+          "crop",
+          false,
+          true,
+          true,
+        ) as string;
+        const accessToken = matrixClient.getAccessToken?.();
+        if (!accessToken || !httpUrl.includes("/_matrix/")) {
+          return httpUrl;
+        }
+        if (httpUrl.includes("access_token=")) {
+          return httpUrl;
+        }
+        const separator = httpUrl.includes("?") ? "&" : "?";
+        return `${httpUrl}${separator}access_token=${encodeURIComponent(
+          accessToken,
+        )}`;
+      } catch {
+        return undefined;
+      }
+    },
+  });
 
 function navigateToChatHome() {
   suppressAutoRoomSelect.value = true;
@@ -456,10 +487,10 @@ const spaceLobbyCategories = computed<RoomCategoryGroup[]>(() => {
   if (isHomeSpaceContext(selectedSpaceId.value)) {
     return [];
   }
-  return applyLobbyHierarchyNames(
-    buildSpaceLobbySections(),
-    lobbyRoomNamesById.value,
-  );
+  if (lobbyHierarchyCategories.value.length > 0) {
+    return lobbyHierarchyCategories.value;
+  }
+  return buildSpaceLobbySections();
 });
 
 const roomCategoryStructure = computed<RoomCategoryGroup[]>(() => {
diff --git a/app/utils/spaceLobbyHierarchy.ts b/app/utils/spaceLobbyHierarchy.ts
index dfdcf86..cefc035 100644
--- a/app/utils/spaceLobbyHierarchy.ts
+++ b/app/utils/spaceLobbyHierarchy.ts
@@ -1,9 +1,219 @@
 import type { MatrixClient } from "matrix-js-sdk";
 import type { RoomCategoryGroup } from "~/composables/chat/chatPageTypes";
+import { sortParsedSpaceChildren } from "~/utils/spaceRoomCategories";
+
+const SPACE_CHILD_EVENT = "m.space.child";
+const ROOM_TYPE_SPACE = "m.space";
+
+export interface HierarchyLobbyRoom {
+  room_id: string;
+  name?: string;
+  avatar_url?: string;
+  num_joined_members?: number;
+  room_type?: string;
+  children_state: Array<{
+    type: string;
+    state_key?: string;
+    content?: { order?: string };
+  }>;
+}
+
+export interface FetchSpaceHierarchyLobbyOptions {
+  generalCategoryLabel: string;
+  resolveAvatarUrl?: (mxcUrl: string | undefined) => string | undefined;
+  isRoomJoined?: (roomId: string) => boolean;
+}
+
+function sortHierarchyChildIds(
+  parent: HierarchyLobbyRoom,
+  roomMap: Map<string, HierarchyLobbyRoom>,
+): string[] {
+  const parsed = parent.children_state
+    .filter(
+      (stateEvent) =>
+        stateEvent.type === SPACE_CHILD_EVENT && stateEvent.state_key,
+    )
+    .map((stateEvent) => ({
+      childRoomId: stateEvent.state_key as string,
+      orderKey:
+        typeof stateEvent.content?.order === "string"
+          ? stateEvent.content.order
+          : "",
+    }));
+
+  return sortParsedSpaceChildren(parsed, (childId) => {
+    const child = roomMap.get(childId);
+    return child?.name?.trim() || childId;
+  }).map((entry) => entry.childRoomId);
+}
+
+function resolveHierarchyRoomName(
+  room: HierarchyLobbyRoom | undefined,
+  roomId: string,
+): string {
+  const name = room?.name?.trim();
+  if (name) {
+    return name;
+  }
+  return roomId.split(":")[0]?.replace(/^!/, "") ?? roomId;
+}
+
+function toLobbyRoomEntry(
+  room: HierarchyLobbyRoom,
+  roomId: string,
+  options: FetchSpaceHierarchyLobbyOptions,
+): RoomCategoryGroup["rooms"][number] {
+  const isJoined = options.isRoomJoined?.(roomId) ?? false;
+  return {
+    roomId,
+    name: resolveHierarchyRoomName(room, roomId),
+    isJoined,
+    avatarUrl: options.resolveAvatarUrl?.(room.avatar_url),
+    memberCount: room.num_joined_members,
+  };
+}
 
 /**
- * Load display names for space children via MSC2946 /hierarchy (incl. unjoined).
+ * Build lobby categories from MSC2946 /hierarchy (full tree, incl. unjoined).
  */
+export function buildLobbyCategoriesFromHierarchy(
+  rootSpaceId: string,
+  hierarchyRooms: HierarchyLobbyRoom[],
+  options: FetchSpaceHierarchyLobbyOptions,
+): RoomCategoryGroup[] {
+  const roomMap = new Map<string, HierarchyLobbyRoom>();
+  for (const room of hierarchyRooms) {
+    roomMap.set(room.room_id, room);
+  }
+
+  const rootRoom = roomMap.get(rootSpaceId);
+  if (!rootRoom) {
+    return [];
+  }
+
+  const categories: RoomCategoryGroup[] = [];
+
+  function appendSubspaceCategory(
+    subspaceId: string,
+    nestingDepth: number,
+    parentSubspaceId?: string,
+  ): void {
+    const subspaceRoom = roomMap.get(subspaceId);
+    if (!subspaceRoom) {
+      return;
+    }
+
+    const childIds = sortHierarchyChildIds(subspaceRoom, roomMap);
+    const channels: RoomCategoryGroup["rooms"] = [];
+    const nestedSubspaceIds: string[] = [];
+
+    for (const childId of childIds) {
+      const childRoom = roomMap.get(childId);
+      if (!childRoom) {
+        continue;
+      }
+      if (childRoom.room_type === ROOM_TYPE_SPACE) {
+        nestedSubspaceIds.push(childId);
+      } else {
+        channels.push(toLobbyRoomEntry(childRoom, childId, options));
+      }
+    }
+
+    categories.push({
+      id: subspaceId,
+      name: resolveHierarchyRoomName(subspaceRoom, subspaceId),
+      kind: "subspace",
+      subspaceRoomId: subspaceId,
+      subspaceAvatarUrl: options.resolveAvatarUrl?.(
+        subspaceRoom.avatar_url,
+      ),
+      nestingDepth,
+      parentSubspaceId,
+      rootChildAnchorIds: [subspaceId],
+      canReorderRooms: false,
+      isSubspaceJoined: options.isRoomJoined?.(subspaceId) ?? false,
+      rooms: channels,
+    });
+
+    for (const nestedSubspaceId of nestedSubspaceIds) {
+      appendSubspaceCategory(
+        nestedSubspaceId,
+        nestingDepth + 1,
+        subspaceId,
+      );
+    }
+  }
+
+  const rootChildIds = sortHierarchyChildIds(rootRoom, roomMap);
+  const rootChannels: RoomCategoryGroup["rooms"] = [];
+  const rootSubspaceIds: string[] = [];
+
+  for (const childId of rootChildIds) {
+    const childRoom = roomMap.get(childId);
+    if (!childRoom) {
+      continue;
+    }
+    if (childRoom.room_type === ROOM_TYPE_SPACE) {
+      rootSubspaceIds.push(childId);
+    } else {
+      rootChannels.push(toLobbyRoomEntry(childRoom, childId, options));
+    }
+  }
+
+  if (rootChannels.length > 0) {
+    categories.push({
+      id: `${rootSpaceId}-rooms`,
+      name: options.generalCategoryLabel,
+      kind: "root",
+      nestingDepth: 0,
+      rootChildAnchorIds: rootChannels.map((room) => room.roomId),
+      canReorderRooms: false,
+      rooms: rootChannels,
+    });
+  }
+
+  for (const subspaceId of rootSubspaceIds) {
+    appendSubspaceCategory(subspaceId, 1);
+  }
+
+  return categories;
+}
+
+export async function fetchSpaceHierarchyLobby(
+  matrixClient: MatrixClient,
+  rootSpaceId: string,
+  options: FetchSpaceHierarchyLobbyOptions,
+): Promise<RoomCategoryGroup[]> {
+  const hierarchyRooms: HierarchyLobbyRoom[] = [];
+  let nextBatch: string | undefined;
+
+  try {
+    do {
+      const response = await matrixClient.getRoomHierarchy(
+        rootSpaceId,
+        100,
+        50,
+        false,
+        nextBatch,
+      );
+      for (const room of response.rooms) {
+        hierarchyRooms.push(room as HierarchyLobbyRoom);
+      }
+      nextBatch = response.next_batch;
+    } while (nextBatch);
+  } catch (thrownError) {
+    console.warn("fetchSpaceHierarchyLobby failed", thrownError);
+    return [];
+  }
+
+  return buildLobbyCategoriesFromHierarchy(
+    rootSpaceId,
+    hierarchyRooms,
+    options,
+  );
+}
+
+/** @deprecated Use fetchSpaceHierarchyLobby — kept for tests */
 export async function fetchSpaceHierarchyRoomNames(
   matrixClient: MatrixClient,
   rootSpaceId: string,
diff --git a/tests/unit/components/Chat/SpaceHomePanel.spec.ts b/tests/unit/components/Chat/SpaceHomePanel.spec.ts
index 394e002..bf2d9e2 100644
--- a/tests/unit/components/Chat/SpaceHomePanel.spec.ts
+++ b/tests/unit/components/Chat/SpaceHomePanel.spec.ts
@@ -18,6 +18,18 @@ const categories = [
       { roomId: '!other:example.org', name: 'Random', isJoined: false },
     ],
   },
+  {
+    id: '!sub:example.org',
+    name: 'Subspace',
+    kind: 'subspace' as const,
+    subspaceRoomId: '!sub:example.org',
+    subspaceAvatarUrl: 'https://example.org/sub.png',
+    nestingDepth: 1,
+    rootChildAnchorIds: ['!sub:example.org'],
+    canReorderRooms: false,
+    isSubspaceJoined: false,
+    rooms: [],
+  },
 ]
 
 function mountSpaceHome(extraProps: Record<string, unknown> = {}) {
@@ -108,4 +120,11 @@ describe('SpaceHomePanel', () => {
     wrapper.emitted('invite')?.length.should.equal(1)
     wrapper.emitted('open-settings')?.length.should.equal(1)
   })
+
+  it('renders subspace avatar and join button for unjoined subspace', () => {
+    const wrapper = mountSpaceHome()
+
+    wrapper.find('img[alt="Subspace"]').exists().should.equal(true)
+    wrapper.text().should.include('Join subspace')
+  })
 })
diff --git a/tests/unit/composables/useChatSpaceRail.spec.ts b/tests/unit/composables/useChatSpaceRail.spec.ts
new file mode 100644
index 0000000..1ff769d
--- /dev/null
+++ b/tests/unit/composables/useChatSpaceRail.spec.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+import { ref, nextTick } from 'vue'
+import { useChatSpaceRail } from '~/composables/chat/useChatSpaceRail'
+import { HOME_SPACE_ID } from '~/utils/spaceUnread'
+
+function createMatrixRoom(
+  roomId: string,
+  options: {
+    name?: string
+    type?: string
+    parentSpaceIds?: string[]
+    membership?: string
+  } = {},
+) {
+  return {
+    roomId,
+    name: options.name ?? roomId,
+    getType: () => options.type,
+    getMyMembership: () => options.membership ?? 'join',
+    currentState: {
+      getStateEvents: () => undefined,
+    },
+  }
+}
+
+describe('useChatSpaceRail room selection', () => {
+  it('does not auto-select a room when none is selected', async () => {
+    const selectedSpaceId = ref<string | null>(HOME_SPACE_ID)
+    const selectedRoomId = ref<string | null>(null)
+    const matrixRooms = ref([
+      createMatrixRoom('!dm:example.org', {
+        name: 'DM',
+        parentSpaceIds: [],
+      }),
+    ] as never[])
+
+    const spaceRail = useChatSpaceRail({
+      client: ref(null),
+      matrixRooms,
+      selectedSpaceId,
+      selectedRoomId,
+      pendingRootSpaceId: ref(null),
+      translateText: (key) => key,
+      getSpaceAvatarUrl: () => undefined,
+      matrixSyncPrepared: ref(true),
+      spaceUnreadById: ref({}),
+      allMessages: ref([]),
+      messages: ref([]),
+    })
+
+    spaceRail.setupSpaceRailWatchers()
+    await nextTick()
+
+    expect(selectedRoomId.value).toBeNull()
+  })
+
+  it('clears stale room selection instead of auto-picking another', async () => {
+    const spaceId = '!space:example.org'
+    const staleRoomId = '!stale:example.org'
+    const otherRoomId = '!other:example.org'
+    const selectedSpaceId = ref<string | null>(spaceId)
+    const selectedRoomId = ref<string | null>(staleRoomId)
+    const matrixRooms = ref([
+      createMatrixRoom(spaceId, {
+        name: 'Team',
+        type: 'm.space',
+      }),
+      createMatrixRoom(otherRoomId, {
+        name: 'General',
+        parentSpaceIds: [spaceId],
+      }),
+    ] as never[])
+
+    const spaceRail = useChatSpaceRail({
+      client: ref(null),
+      matrixRooms,
+      selectedSpaceId,
+      selectedRoomId,
+      pendingRootSpaceId: ref(null),
+      translateText: (key) => key,
+      getSpaceAvatarUrl: () => undefined,
+      matrixSyncPrepared: ref(true),
+      spaceUnreadById: ref({}),
+      allMessages: ref([]),
+      messages: ref([]),
+    })
+
+    spaceRail.setupSpaceRailWatchers()
+    await nextTick()
+
+    expect(selectedRoomId.value).toBeNull()
+    expect(selectedRoomId.value).not.to.equal(otherRoomId)
+  })
+})
diff --git a/tests/unit/utils/spaceLobbyHierarchy.spec.ts b/tests/unit/utils/spaceLobbyHierarchy.spec.ts
index 866ec4d..6e7dc43 100644
--- a/tests/unit/utils/spaceLobbyHierarchy.spec.ts
+++ b/tests/unit/utils/spaceLobbyHierarchy.spec.ts
@@ -1,9 +1,22 @@
 import { describe, expect, it, vi } from 'vitest'
 import {
   applyLobbyHierarchyNames,
+  buildLobbyCategoriesFromHierarchy,
+  fetchSpaceHierarchyLobby,
   fetchSpaceHierarchyRoomNames,
 } from '~/utils/spaceLobbyHierarchy'
 
+function mockStateEvent(
+  stateKey: string,
+  content: Record<string, unknown> = {},
+) {
+  return {
+    type: 'm.space.child',
+    state_key: stateKey,
+    content,
+  }
+}
+
 describe('spaceLobbyHierarchy', () => {
   it('fetchSpaceHierarchyRoomNames maps room ids to names', async () => {
     const matrixClient = {
@@ -58,4 +71,108 @@ describe('spaceLobbyHierarchy', () => {
 
     expect(categories[0]!.rooms[0]!.name).toBe('General')
   })
+
+  it('buildLobbyCategoriesFromHierarchy nests subspaces deeply', () => {
+    const rootId = '!root:example.org'
+    const subId = '!sub:example.org'
+    const nestedSubId = '!nested:example.org'
+    const roomRootId = '!room-root:example.org'
+    const roomNestedId = '!room-nested:example.org'
+
+    const categories = buildLobbyCategoriesFromHierarchy(
+      rootId,
+      [
+        {
+          room_id: rootId,
+          name: 'Open Space',
+          children_state: [
+            mockStateEvent(roomRootId, { order: '0' }),
+            mockStateEvent(subId, { order: '1' }),
+          ],
+        },
+        {
+          room_id: roomRootId,
+          name: 'General',
+          room_type: 'm.room',
+          num_joined_members: 2,
+          children_state: [],
+        },
+        {
+          room_id: subId,
+          name: 'Sub A',
+          room_type: 'm.space',
+          avatar_url: 'mxc://example.org/subavatar',
+          children_state: [
+            mockStateEvent(nestedSubId, { order: '0' }),
+          ],
+        },
+        {
+          room_id: nestedSubId,
+          name: 'Sub B',
+          room_type: 'm.space',
+          children_state: [
+            mockStateEvent(roomNestedId, { order: '0' }),
+          ],
+        },
+        {
+          room_id: roomNestedId,
+          name: 'Deep Room',
+          room_type: 'm.room',
+          children_state: [],
+        },
+      ],
+      {
+        generalCategoryLabel: 'Rooms',
+        resolveAvatarUrl: (mxc) => (mxc ? `https://avatar/${mxc}` : undefined),
+        isRoomJoined: () => false,
+      },
+    )
+
+    expect(categories.length).to.equal(3)
+    expect(categories[0]!.kind).to.equal('root')
+    expect(categories[0]!.rooms[0]!.name).to.equal('General')
+    expect(categories[1]!.kind).to.equal('subspace')
+    expect(categories[1]!.nestingDepth).to.equal(1)
+    expect(categories[1]!.subspaceAvatarUrl)
+      .to.equal('https://avatar/mxc://example.org/subavatar')
+    expect(categories[2]!.kind).to.equal('subspace')
+    expect(categories[2]!.nestingDepth).to.equal(2)
+    expect(categories[2]!.parentSubspaceId).to.equal(subId)
+    expect(categories[2]!.rooms[0]!.name).to.equal('Deep Room')
+  })
+
+  it('fetchSpaceHierarchyLobby builds categories from API', async () => {
+    const matrixClient = {
+      getRoomHierarchy: vi.fn().mockResolvedValue({
+        rooms: [
+          {
+            room_id: '!root:example.org',
+            name: 'Root',
+            children_state: [
+              mockStateEvent('!child:example.org'),
+            ],
+          },
+          {
+            room_id: '!child:example.org',
+            name: 'Child',
+            room_type: 'm.room',
+            children_state: [],
+          },
+        ],
+      }),
+    }
+
+    const categories = await fetchSpaceHierarchyLobby(
+      matrixClient as never,
+      '!root:example.org',
+      {
+        generalCategoryLabel: 'Rooms',
+        isRoomJoined: () => true,
+      },
+    )
+
+    expect(categories.length).to.equal(1)
+    expect(categories[0]!.rooms[0]!.name).to.equal('Child')
+    expect(categories[0]!.rooms[0]!.isJoined).to.equal(true)
+  })
 })