From 908e6c2b72e548003c8af7bef1c38da158b7a152 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Thu, 3 Sep 2026 21:04:19 +0300
Subject: [PATCH] feat(ui): rebuild Session history on subturtle-ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rebuilds /sessions as the design's timeline: a date and duration column, a
rail with a per-mode node, and a card carrying the type icon, bundle title,
Voice/Text badge, dialog count and chevron.

List logic is unchanged — the same list-live-sessions RPC and pagination,
useInlineFeatureLock('session_history'), the try/catch that flips to locked,
isPracticeSession and goToBundles.

- Search and an All / Voice / Text StSegmentedControl narrow the current page.
  The RPC paginates server-side and takes no query arguments, so both filters
  are deliberately client-side over the loaded rows.
- StPagination replaces pilotui's Pagination. It is app-local, not in ui/: the
  design system defines no pagination component, so this is a composition of
  its tokens rather than a library primitive — the same call InlineNotice
  records.
- States: populated, empty, no-match, locked and loading. Locked replaces
  FeatureLocked on this page only, showing three withheld rows and the upgrade
  path instead of the list.

Two fixes found along the way:

The Voice/Text badge keyed off `session._isText`, a field nothing in the
codebase ever assigned, so the Text badge could never render. It now reads
`metadata.mode`, which the practice pages do write.

The timeline's date and duration are formatted for the column rather than the
visitor's locale: en-US would render "Aug 12, 02:20 PM" and break the fixed
width. formatSessionDuration keeps its precise "8m 0s" form for the session
detail page; a list scanned at a glance reads "8 min".

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/components/common/StPagination.vue |  55 +++
 frontend/locales/en.json                    |  27 +-
 frontend/pages/sessions/index.vue           | 432 ++++++++++++--------
 3 files changed, 341 insertions(+), 173 deletions(-)
 create mode 100644 frontend/components/common/StPagination.vue

diff --git a/frontend/components/common/StPagination.vue b/frontend/components/common/StPagination.vue
new file mode 100644
index 00000000..cd7e3ddc
--- /dev/null
+++ b/frontend/components/common/StPagination.vue
@@ -0,0 +1,55 @@
+<template>
+    <nav class="flex items-center justify-center gap-2" :aria-label="label">
+        <StButton variant="outline" color="neutral" size="sm" icon="solar:alt-arrow-left-linear" :disabled="modelValue <= 1" @click="go(modelValue - 1)">
+            {{ t('pagination.prev') }}
+        </StButton>
+
+        <span class="px-2 text-st-sm font-bold text-st-muted">{{ t('pagination.page-of', { page: modelValue, total: totalPages }) }}</span>
+
+        <StButton
+            variant="outline"
+            color="neutral"
+            size="sm"
+            icon-right="solar:alt-arrow-right-linear"
+            :disabled="modelValue >= totalPages"
+            @click="go(modelValue + 1)"
+        >
+            {{ t('pagination.next') }}
+        </StButton>
+    </nav>
+</template>
+
+<script setup lang="ts">
+    /**
+     * Prev / "Page 1 of 3" / Next, replacing pilotui's `Pagination` on migrated screens.
+     *
+     * App-local rather than in subturtle-ui: the design system defines no pagination
+     * component at all, so this is our composition of its tokens, not a library primitive.
+     * The second migrated screen that needs one is the moment to graduate it — the same call
+     * `InlineNotice` records.
+     *
+     * Emits `change-page` alongside `update:modelValue` so a caller can refetch; that matches
+     * the pilotui component it replaces, so call sites need no rewiring.
+     */
+    import { StButton } from 'subturtle-ui';
+
+    const props = withDefaults(
+        defineProps<{
+            modelValue?: number;
+            totalPages?: number;
+            /** Accessible name, when a page has more than one pager. */
+            label?: string;
+        }>(),
+        { modelValue: 1, totalPages: 1 }
+    );
+
+    const emit = defineEmits<{ 'update:modelValue': [number]; 'change-page': [number] }>();
+
+    const { t } = useI18n();
+
+    function go(page: number) {
+        if (page < 1 || page > props.totalPages || page === props.modelValue) return;
+        emit('update:modelValue', page);
+        emit('change-page', page);
+    }
+</script>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index eb9aeb31..809c47d4 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -495,11 +495,11 @@
         "title": "Study"
     },
     "live-session": {
-        "no-sessions": "No Sessions Yet",
-        "no-sessions-description": "You haven't started any practice sessions yet. Start a live session from a phrase bundle to practice your language skills and come back here to see your session history.",
+        "no-sessions": "No sessions yet",
+        "no-sessions-description": "Practise a bundle with the AI coach and every session you run will be listed here.",
         "start-session": "Start session",
         "start-first-session": "Start Your First Session",
-        "6-months-expiry": "Each session will expire in 6 months",
+        "6-months-expiry": "Every session stays here for six months.",
         "session-history": "Session history",
         "session-details": "Session Details",
         "dialogs": "dialogs",
@@ -551,7 +551,21 @@
             "unlimited": "Unlimited"
         },
         "start-a-session": "Start a session",
-        "repeat-last": "Repeat your last session"
+        "repeat-last": "Repeat your last session",
+        "history-overline": "LIVE SESSIONS",
+        "6-months-removal": "Sessions older than six months are removed automatically.",
+        "new-session": "New session",
+        "search-sessions": "Search sessions",
+        "n-dialogs": "{n} dialogs",
+        "showing-count": "Showing {shown} of {total}.",
+        "transcript-locked": "Transcript locked",
+        "no-matches": "No sessions match",
+        "no-matches-description": "Nothing on this page matches that search and filter.",
+        "filter": {
+            "all": "All"
+        },
+        "n-minutes": "{n} min",
+        "under-a-minute": "under a min"
     },
     "profile": {
         "profile": "Profile",
@@ -806,5 +820,10 @@
         "system": "System",
         "resolved": "{mode} · {resolved}",
         "aria": "Theme: {current}. Switch to {next}."
+    },
+    "pagination": {
+        "prev": "Prev",
+        "next": "Next",
+        "page-of": "Page {page} of {total}"
     }
 }
diff --git a/frontend/pages/sessions/index.vue b/frontend/pages/sessions/index.vue
index be9d4314..121e239d 100644
--- a/frontend/pages/sessions/index.vue
+++ b/frontend/pages/sessions/index.vue
@@ -1,190 +1,284 @@
 <template>
-    <div class="relative min-h-screen">
-        <!-- Decorative Background Elements -->
-        <div
-            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
-        </div>
-        <div
-            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+    <div class="flex flex-col gap-6">
+        <StPageHeader :title="t('live-session.session-history')" :overline="t('live-session.history-overline')" :subtitle="t('live-session.6-months-expiry')">
+            <template #actions>
+                <StButton color="primary" icon="solar:add-circle-bold" @click="goToNewSession">{{ t('live-session.new-session') }}</StButton>
+            </template>
+        </StPageHeader>
+
+        <!-- Loading: five timeline rows, so the column keeps its shape while the page lands. -->
+        <div v-if="isLoading && !sessionList.length" class="flex flex-col gap-3.5">
+            <StSkeleton v-for="n in 5" :key="n" class="h-[76px]" />
         </div>
 
-        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
-            <PageHeader :title="t('live-session.your-sessions')" :subtitle="t('live-session.6-months-expiry')"
-                overline="LIVE SESSIONS" />
+        <template v-else>
+            <!-- Full history is a Learner+ entitlement. The list is replaced by a teaser: the
+                 shape of what is there, with the transcripts withheld. -->
+            <InlineNotice
+                v-if="locked"
+                color="danger"
+                icon="solar:lock-keyhole-bold"
+                :title="t('subscription.feature-locked.session_history.title')"
+                :message="t('subscription.feature-locked.session_history.body')"
+            />
 
-            <!-- Locked: full session history is a Learner+ feature (the global upgrade modal also opens). -->
-            <FeatureLocked v-if="locked" feature-key="session_history" required-tier="learner" />
+            <!-- Search + mode filter narrow the CURRENT page only; the RPC paginates
+                 server-side and has no query parameters to push these into. -->
+            <div v-if="!isEmptyState && !locked" class="flex flex-wrap items-center gap-3.5">
+                <StInput v-model="search" :placeholder="t('live-session.search-sessions')" icon="solar:magnifer-linear" class="w-[300px] max-w-full" />
+                <StSegmentedControl v-model="modeFilter" :options="modeFilters" />
+            </div>
 
-            <!-- Empty State -->
-            <div v-else-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center py-12">
-                <div
-                    class="flex max-w-xl flex-col items-center justify-center rounded-3xl border border-white/20 bg-white/40 p-12 text-center shadow-xl backdrop-blur-md dark:bg-gray-800/40">
-                    <!-- Decorative blob for empty state -->
-                    <div
-                        class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-2xl">
+            <!-- Timeline. The rail is drawn on the row, not the list, so it cannot outrun the
+                 last card when the list is filtered down. -->
+            <ol v-if="visibleSessions.length" class="flex flex-col">
+                <li v-for="(session, i) in visibleSessions" :key="session._id" class="flex gap-5">
+                    <div class="w-[150px] flex-none pt-3.5 text-right">
+                        <div class="text-st-base font-extrabold text-st-strong">{{ formatWhen(session.createdAt) }}</div>
+                        <div class="mt-0.5 text-st-sm font-semibold text-st-muted">{{ durationOf(session) }}</div>
                     </div>
 
-                    <img class="mx-auto h-48 w-auto dark:hidden"
-                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
-                        alt="No sessions available" />
-                    <img class="mx-auto hidden h-48 w-auto dark:block"
-                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
-                        alt="No sessions available" />
-                    <h3 class="mt-6 text-xl font-bold text-gray-900 dark:text-gray-100">{{ t('live-session.no-sessions')
-                    }}</h3>
-                    <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
-                        {{ t('live-session.no-sessions-description') }}
-                    </p>
-                    <div class="mt-8">
-                        <Button color="primary" iconName="IconPlayCircle" :label="t('live-session.start-first-session')"
-                            @click="goToBundles" class="shadow-lg shadow-primary/20" />
+                    <!-- Rail + node. The segment is hidden on the last row so the line stops
+                         with the timeline instead of trailing into the footer. -->
+                    <div class="relative flex w-3 flex-none justify-center">
+                        <span class="absolute top-0 w-px bg-st-line" :class="i === visibleSessions.length - 1 ? 'h-[38px]' : 'h-full'" />
+                        <span
+                            class="absolute top-[32px] h-2.5 w-2.5 rounded-full ring-4 ring-st-page"
+                            :class="isText(session) ? 'bg-st-info' : 'bg-st-primary'"
+                        />
                     </div>
-                </div>
-            </div>
 
-            <!-- Sessions List -->
-            <div v-else class="max-w-2xl space-y-4">
-                <div v-for="session in sessionList" :key="session._id"
-                    class="rounded-xl border border-gray-100 bg-white/60 p-5 shadow-sm backdrop-blur-sm transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-700 dark:bg-gray-800/60">
-                    <NuxtLink :to="`/sessions/${session._id}`" class="block">
-                        <!-- Header with Type and Date -->
-                        <div class="mb-3 flex items-baseline justify-between">
-                            <div class="flex items-center gap-2">
-                                <span
-                                    class="rounded-lg bg-blue-100 px-2 py-1 text-xs font-bold uppercase tracking-wide text-blue-600 dark:bg-blue-900/50 dark:text-blue-300">
-                                    {{ session.type }}
-                                </span>
-                                <span :class="[
-                                    'rounded-lg px-2 py-1 text-xs font-bold uppercase tracking-wide',
-                                    session.provider === 'gemini'
-                                        ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300'
-                                        : 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',
-                                ]">
-                                    {{ session.provider === 'gemini' ? 'Gemini' : 'OpenAI' }}
-                                </span>
-                                <span v-if="session._isText"
-                                    class="rounded-lg bg-violet-100 px-2 py-1 text-xs font-bold uppercase tracking-wide text-violet-700 dark:bg-violet-900/50 dark:text-violet-300">
-                                    {{ t('live-practice.mode.text') }}
-                                </span>
-                                <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                                    {{ new Date(session.createdAt).toLocaleString() }}
-                                </span>
-                                <span v-if="session.updatedAt"
-                                    class="rounded-lg bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                                    {{ formatSessionDuration(session.createdAt, session.updatedAt) }}
-                                </span>
-                            </div>
-                            <div
-                                class="flex items-center gap-1 text-sm font-semibold text-primary transition-colors group-hover:text-primary-dark">
-                                <span> {{ session.dialogs?.length || 0 }} {{ t('live-session.dialogs') }} </span>
-                                <Icon name="IconChevronRight" class="h-4 w-4" />
-                            </div>
-                        </div>
-
-                        <!-- Session Metadata -->
-                        <div v-if="isPracticeSession(session)"
-                            class="mt-3 flex flex-wrap gap-4 text-sm text-gray-600 dark:text-gray-400">
-                            <div class="flex items-center gap-1">
-                                <span class="font-bold text-gray-400 text-xs uppercase">{{
-                                    t('live-session.ai-character') }}:</span>
-                                <span class="font-medium text-gray-900 dark:text-gray-100">{{
-                                    session.metadata.aiCharacter || '-' }}</span>
-                            </div>
-                            <div class="flex items-center gap-1">
-                                <span class="font-bold text-gray-400 text-xs uppercase">{{
-                                    t('live-session.selection-mode') }}:</span>
-                                <span class="font-medium capitalize text-gray-900 dark:text-gray-100">{{
-                                    session.metadata.selectionMode || '-' }}</span>
-                            </div>
-                            <div v-if="session.session.totalPhrases">
-                                <span class="font-bold text-gray-400 text-xs uppercase">{{
-                                    t('live-session.total-phrases') }}:</span>
-                                <span class="font-medium text-gray-900 dark:text-gray-100">{{
-                                    session.metadata.totalPhrases || '-' }}</span>
-                            </div>
-                            <div v-if="session.metadata.selectionMode === 'selection'">
-                                <span class="font-bold text-gray-400 text-xs uppercase">{{
-                                    t('live-session.phrase-range') }}:</span>
-                                <span class="font-medium text-gray-900 dark:text-gray-100">{{
-                                    session.metadata.fromPhrase || '-' }} - {{ session.metadata.toPhrase || '-'
-                                    }}</span>
-                            </div>
-                        </div>
+                    <NuxtLink
+                        :to="`/sessions/${session._id}`"
+                        class="st-focus-ring mb-3.5 flex flex-1 items-center gap-3.5 rounded-st-lg border border-st-line bg-st-card p-3.5 shadow-st-xs transition duration-200 ease-out hover:border-st-ink-300 hover:shadow-st-sm"
+                    >
+                        <span
+                            class="flex h-11 w-11 flex-none items-center justify-center rounded-st-md"
+                            :class="isText(session) ? 'bg-st-info-soft text-st-sky-600' : 'bg-st-primary-soft text-st-primary'"
+                        >
+                            <StIcon :name="isText(session) ? 'solar:chat-round-line-bold-duotone' : 'solar:microphone-3-bold-duotone'" :size="22" />
+                        </span>
+
+                        <span class="flex min-w-0 flex-1 flex-wrap items-center gap-2.5">
+                            <span class="truncate text-st-base font-extrabold text-st-strong">{{ titleOf(session) }}</span>
+                            <StBadge :color="isText(session) ? 'info' : 'primary'">
+                                {{ isText(session) ? t('live-practice.mode.text') : t('live-practice.mode.voice') }}
+                            </StBadge>
+                        </span>
+
+                        <span class="flex flex-none items-center gap-1.5 text-st-sm font-bold text-st-muted">
+                            {{ t('live-session.n-dialogs', { n: session.dialogs?.length || 0 }) }}
+                            <StIcon name="solar:alt-arrow-right-linear" :size="18" />
+                        </span>
                     </NuxtLink>
-                </div>
-            </div>
+                </li>
+            </ol>
+
+            <!-- Locked: the rows are there, the transcripts are not. -->
+            <ol v-else-if="locked" class="flex flex-col" aria-hidden="true">
+                <li v-for="(n, i) in 3" :key="n" class="flex gap-5">
+                    <div class="w-[150px] flex-none pt-3.5 text-right">
+                        <div class="h-3.5 w-24 rounded-st-pill bg-st-ink-150" />
+                        <div class="ml-auto mt-2 h-3 w-12 rounded-st-pill bg-st-ink-100" />
+                    </div>
+                    <div class="relative flex w-3 flex-none justify-center">
+                        <span class="absolute top-0 w-px bg-st-line" :class="i === 2 ? 'h-[38px]' : 'h-full'" />
+                        <span class="absolute top-[32px] h-2.5 w-2.5 rounded-full bg-st-ink-300 ring-4 ring-st-page" />
+                    </div>
+                    <div class="mb-3.5 flex flex-1 items-center gap-3.5 rounded-st-lg border border-st-line bg-st-card p-3.5">
+                        <span class="flex h-11 w-11 flex-none items-center justify-center rounded-st-md bg-st-ink-100 text-st-faint">
+                            <StIcon name="solar:lock-keyhole-bold" :size="22" />
+                        </span>
+                        <span class="flex-1 text-st-base font-bold text-st-faint">{{ t('live-session.transcript-locked') }}</span>
+                        <span class="h-3.5 w-16 rounded-st-pill bg-st-ink-100" />
+                    </div>
+                </li>
+            </ol>
+
+            <!-- No match for the active search / filter. Distinct from having no sessions. -->
+            <StCard v-else-if="!isEmptyState" padding="none">
+                <StEmptyState
+                    compact
+                    icon="solar:magnifer-linear"
+                    color="neutral"
+                    :title="t('live-session.no-matches')"
+                    :description="t('live-session.no-matches-description')"
+                >
+                    <template #action>
+                        <StButton variant="outline" color="primary" size="sm" @click="resetFilters">{{ t('bundle.clear_filter') }}</StButton>
+                    </template>
+                </StEmptyState>
+            </StCard>
+
+            <StCard v-else padding="none">
+                <StEmptyState
+                    icon="solar:history-2-bold-duotone"
+                    color="neutral"
+                    :title="t('live-session.no-sessions')"
+                    :description="t('live-session.no-sessions-description')"
+                >
+                    <template #action>
+                        <StButton color="primary" icon="solar:play-bold" @click="goToBundles">{{ t('live-session.start-first-session') }}</StButton>
+                    </template>
+                </StEmptyState>
+            </StCard>
 
-            <!-- Pagination -->
-            <div v-if="totalPages > 1 && !isEmptyState && !locked" class="mt-8 max-w-2xl flex justify-center">
-                <Pagination v-model="currentPage" :totalPages="totalPages" @change-page="loadSessions" />
+            <!-- Locked users get the upgrade path where the footer line would be. -->
+            <div v-if="locked" class="flex justify-center">
+                <StButton color="primary" icon="solar:crown-bold" @click="goToPlans">{{ t('subscription.feature-locked.session_history.cta') }}</StButton>
             </div>
-        </div>
+
+            <p v-else-if="visibleSessions.length" class="text-st-sm font-semibold text-st-muted">
+                {{ t('live-session.showing-count', { shown: visibleSessions.length, total }) }}
+                {{ t('live-session.6-months-removal') }}
+            </p>
+
+            <StPagination
+                v-if="totalPages > 1 && !isEmptyState && !locked"
+                v-model="currentPage"
+                :total-pages="totalPages"
+                :label="t('live-session.session-history')"
+                @change-page="loadSessions"
+            />
+        </template>
     </div>
 </template>
 
 <script setup lang="ts">
-import { Icon, Button } from 'pilotui/elements';
-import { Pagination } from 'pilotui/complex';
-import PageHeader from '~/components/common/PageHeader.vue';
-import FeatureLocked from '~/components/FeatureLocked.vue';
-import { useInlineFeatureLock } from '~/composables/useTierLimitModal';
-import { functionProvider } from '@modular-rest/client';
-import type { LiveSessionRecordType, LivePracticeSessionSetupType } from '~/types/live-session.type';
-import { formatSessionDuration } from '~/utils/duration';
-
-const { t } = useI18n();
-const router = useRouter();
-
-definePageMeta({
-    layout: 'default',
-    title: () => t('live-session.session-history'),
-    middleware: ['auth'],
-});
-
-const perPage = ref(20);
-const sessionList = ref<any[]>([]);
-const currentPage = ref(1);
-const totalPages = ref(1);
-const isLoading = ref(false);
-const locked = ref(false);
-
-// session_history renders as an inline FeatureLocked card on this page, so the
-// global tier-limit modal defers to it (no double upsell on the same lock).
-useInlineFeatureLock('session_history');
-
-const isEmptyState = computed(() => !sessionList.value.length && !isLoading.value && !locked.value);
-
-// Type guard for practice sessions
-const isPracticeSession = (session: any): session is LiveSessionRecordType & { session: LivePracticeSessionSetupType } => {
-    return session.type === 'bundle-practice' && !!session.session;
-};
-
-// Full session history is a Learner+ entitlement. The gated list-live-sessions
-// RPC merges voice + text and paginates server-side; for free/Reader it throws
-// TIER_LIMIT_REACHED (the global interceptor shows the upgrade modal) and we
-// render a locked state instead of the list.
-async function loadSessions(page = 1) {
-    isLoading.value = true;
-    try {
-        const res = await functionProvider.run<{ items: any[]; pages: number }>({
-            name: 'list-live-sessions',
-            args: { userId: authUser.value?.id, page: page - 1, limit: perPage.value },
+    import { StBadge, StButton, StCard, StEmptyState, StIcon, StInput, StSegmentedControl, StSkeleton } from 'subturtle-ui';
+    import StPageHeader from '~/components/common/StPageHeader.vue';
+    import StPagination from '~/components/common/StPagination.vue';
+    import InlineNotice from '~/components/common/InlineNotice.vue';
+    import { useInlineFeatureLock } from '~/composables/useTierLimitModal';
+    import { functionProvider } from '@modular-rest/client';
+    import type { LiveSessionRecordType, LivePracticeSessionSetupType } from '~/types/live-session.type';
+    import { formatSessionDuration } from '~/utils/duration';
+
+    const { t } = useI18n();
+    const router = useRouter();
+
+    definePageMeta({
+        layout: 'default',
+        title: () => t('live-session.session-history'),
+        // @ts-ignore
+        middleware: ['auth'],
+    });
+
+    const perPage = ref(20);
+    const sessionList = ref<any[]>([]);
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const total = ref(0);
+    const isLoading = ref(false);
+    const locked = ref(false);
+
+    const search = ref('');
+    const modeFilter = ref<'all' | 'voice' | 'text'>('all');
+
+    // session_history renders as an inline locked state on this page, so the
+    // global tier-limit modal defers to it (no double upsell on the same lock).
+    useInlineFeatureLock('session_history');
+
+    const isEmptyState = computed(() => !sessionList.value.length && !isLoading.value && !locked.value);
+
+    // Type guard for practice sessions
+    const isPracticeSession = (session: any): session is LiveSessionRecordType & { session: LivePracticeSessionSetupType } => {
+        return session.type === 'bundle-practice' && !!session.session;
+    };
+
+    /**
+     * Voice or text. `metadata` is the LiveSessionRequest the practice page stored, which
+     * carries `mode`; anything older predates text chat and is voice.
+     *
+     * The previous version keyed this off `session._isText`, a field nothing in the codebase
+     * ever assigned — so the Text badge could never render.
+     */
+    const isText = (session: any) => session?.metadata?.mode === 'text';
+
+    /** The bundle the session practised, falling back to its record type. */
+    const titleOf = (session: any) => session?.metadata?.title || session?.type || '—';
+
+    /**
+     * "8 min" — the timeline's duration line. `formatSessionDuration` stays the precise form
+     * ("8m 0s") the session detail page wants; a list scanned at a glance reads better
+     * rounded, and the seconds are noise next to a date.
+     */
+    function durationOf(session: any) {
+        if (!session.updatedAt) return '—';
+        const ms = new Date(session.updatedAt).getTime() - new Date(session.createdAt).getTime();
+        if (!Number.isFinite(ms) || ms < 0) return formatSessionDuration(session.createdAt, session.updatedAt);
+        const minutes = Math.round(ms / 60000);
+        return minutes < 1 ? t('live-session.under-a-minute') : t('live-session.n-minutes', { n: minutes });
+    }
+
+    /**
+     * "12 Aug, 14:20" — the timeline's left column. Day-first and 24-hour, pinned with an
+     * explicit locale: the visitor's own would render "Aug 12, 02:20 PM" in en-US and break
+     * the column's fixed width.
+     */
+    function formatWhen(value: string | Date) {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) return '—';
+        const day = date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
+        const time = date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false });
+        return `${day}, ${time}`;
+    }
+
+    const modeFilters = computed(() => [
+        { value: 'all', label: t('live-session.filter.all') },
+        { value: 'voice', label: t('live-practice.mode.voice') },
+        { value: 'text', label: t('live-practice.mode.text') },
+    ]);
+
+    const visibleSessions = computed(() => {
+        const needle = search.value.trim().toLowerCase();
+        return sessionList.value.filter((s) => {
+            if (modeFilter.value === 'text' && !isText(s)) return false;
+            if (modeFilter.value === 'voice' && isText(s)) return false;
+            return needle ? String(titleOf(s)).toLowerCase().includes(needle) : true;
         });
-        sessionList.value = res.items || [];
-        currentPage.value = page;
-        totalPages.value = res.pages || 1;
-        locked.value = false;
-    } catch (e) {
-        sessionList.value = [];
-        locked.value = true;
-    } finally {
-        isLoading.value = false;
+    });
+
+    function resetFilters() {
+        search.value = '';
+        modeFilter.value = 'all';
     }
-}
 
-onMounted(() => loadSessions(1));
+    // Full session history is a Learner+ entitlement. The gated list-live-sessions
+    // RPC merges voice + text and paginates server-side; for free/Reader it throws
+    // TIER_LIMIT_REACHED (the global interceptor shows the upgrade modal) and we
+    // render a locked state instead of the list.
+    async function loadSessions(page = 1) {
+        isLoading.value = true;
+        try {
+            const res = await functionProvider.run<{ items: any[]; pages: number; total: number }>({
+                name: 'list-live-sessions',
+                args: { userId: authUser.value?.id, page: page - 1, limit: perPage.value },
+            });
+            sessionList.value = res.items || [];
+            currentPage.value = page;
+            totalPages.value = res.pages || 1;
+            total.value = res.total ?? sessionList.value.length;
+            locked.value = false;
+        } catch (e) {
+            sessionList.value = [];
+            locked.value = true;
+        } finally {
+            isLoading.value = false;
+        }
+    }
 
-function goToBundles() {
-    router.push('/bundles');
-}
+    onMounted(() => loadSessions(1));
+
+    function goToBundles() {
+        router.push('/bundles');
+    }
+
+    function goToNewSession() {
+        router.push('/sessions/new');
+    }
+
+    function goToPlans() {
+        router.push('/settings/subscription?suggest=learner&from=cap-hit-banner');
+    }
 </script>