From ef1d78a70714043612b6a754a96982339a12207c Mon Sep 17 00:00:00 2001
From: Kannamoris <mail@kanna.zip>
Date: Sat, 7 Nov 2026 07:27:15 +0100
Subject: [PATCH 1/5] feat: prototype three character switcher designs on
 Android

Runs up to three characters at once on Android, one WebView each, the way desktop gives every tab its own page. MainActivity hosts the WebViews with their own bridge instances, so per-character native state such as the log index never mixes, and a NativeSessions bridge relays each page's state (character, status, unread PMs and mentions) to the others and holds what they must share: the account credentials and the API ticket, since F-List cancels older tickets whenever it issues a new one. The background service now stays up until the last character disconnects. A character added from another page logs in with the shared account and leaves the characters already signed in out of its list; a hidden page behaves like a blurred window so its messages count as unread.

The switcher UI is chosen at build time with SWITCHER_DESIGN and -Pswitcher (tabs, drawer or sheet), each installing beside the normal app as Solstice A, B or C: A is a tab strip above the chat like the desktop window, B is a switch-to strip under your character in the left drawer with a dot on the menu button, and C turns the avatar in the chat box into a talking-as sheet. Without the flag the app builds as before. Prototype only: Android, notification taps go to the visible character, and each page keeps its own copy of the app settings.
---
 chat/ChatView.vue                             |   8 +
 mobile/Index.vue                              | 422 +++++++++++++++++-
 mobile/SessionCard.vue                        |  52 +++
 mobile/android/app/build.gradle               |   9 +
 .../android/app/src/main/AndroidManifest.xml  |   2 +-
 .../kotlin/net/f_list/fchat/MainActivity.kt   | 204 +++++++--
 mobile/api-ticket.ts                          |  12 +-
 mobile/chat.ts                                |   8 +
 mobile/sessions.ts                            | 142 ++++++
 mobile/webpack.config.js                      |   5 +-
 10 files changed, 822 insertions(+), 42 deletions(-)
 create mode 100644 mobile/SessionCard.vue
 create mode 100644 mobile/sessions.ts

diff --git a/chat/ChatView.vue b/chat/ChatView.vue
index 944832c3..fa59110c 100644
--- a/chat/ChatView.vue
+++ b/chat/ChatView.vue
@@ -45,6 +45,8 @@
             </span>
           </div>
         </div>
+        <!-- Mobile character switcher prototype (design B), registered by mobile/chat.ts. -->
+        <mobile-session-card v-if="hasSessionCard"></mobile-session-card>
         <div>
           <div class="userInfo-buttons-container">
             <button
@@ -544,6 +546,12 @@
       };
     },
     computed: {
+      hasSessionCard(): boolean {
+        return (
+          (window as { __solsticeSessionCard?: boolean })
+            .__solsticeSessionCard === true
+        );
+      },
       sortedChannelGroups(): any[] {
         return [...core.conversations.channelGroups].sort(
           (a, b) => a.order - b.order
diff --git a/mobile/Index.vue b/mobile/Index.vue
index d479b661..ce1e0a22 100644
--- a/mobile/Index.vue
+++ b/mobile/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="page" style="position: relative; padding: var(--page-pad);" :class="themeClass" v-if="settings">
+    <div id="page" style="position: relative; padding: var(--page-pad);" :class="[themeClass, sessionClass]" :style="sessionStyle" v-if="settings">
         <div v-html="styling"></div>
         <update-banner></update-banner>
         <div v-if="!characters" style="display:flex; align-items:center; justify-content:center; min-height: 100%;">
@@ -51,7 +51,49 @@
                 </div>
             </div>
         </div>
-        <chat v-else :ownCharacters="characters" :defaultCharacter="defaultCharacter" ref="chat"></chat>
+        <div v-else class="session-host">
+            <!-- Switcher prototype A: a tab per signed-in character, like the desktop window's tab bar. -->
+            <div v-if="switcherDesign === 'tabs' && sessionsEnabled" class="session-strip">
+                <button v-for="s in sessions.list" :key="s.id" type="button" class="session-tab" :class="{active: s.id === sessions.self}"
+                    @click="switchTo(s.id)" :aria-label="s.character || 'New character'">
+                    <img v-if="s.character" :src="avatar(s.character)" class="session-avatar" alt=""/>
+                    <span v-else class="session-avatar session-avatar-empty"><span class="fas fa-user"></span></span>
+                    <span v-if="s.id === sessions.self" class="session-name">{{s.character || 'Choose a character'}}</span>
+                    <span v-if="s.id !== sessions.self && s.unread" class="session-badge">{{s.unread}}</span>
+                    <span v-if="s.id === sessions.self && sessions.list.length > 1" class="session-close fas fa-times" role="button"
+                        aria-label="Log out this character" @click.stop="closeSession(s.id)"></span>
+                </button>
+                <button v-if="canAddSession()" type="button" class="session-add" aria-label="Add a character" @click="addSession()">
+                    <span class="fas fa-plus"></span>
+                </button>
+            </div>
+            <chat :ownCharacters="availableCharacters" :defaultCharacter="defaultCharacter" ref="chat"></chat>
+        </div>
+        <!-- Switcher prototype C: the avatar in the chat box opens this sheet. -->
+        <template v-if="sheetOpen">
+            <div class="session-scrim" @click="sheetOpen = false"></div>
+            <div class="session-sheet" role="dialog" aria-label="Talking as">
+                <div class="session-grab"></div>
+                <h5 class="session-sheet-title">Talking as</h5>
+                <div v-for="s in sessions.list" :key="s.id" class="session-row" :class="{active: s.id === sessions.self}" role="button" @click="pickSession(s.id)">
+                    <img v-if="s.character" :src="avatar(s.character)" class="session-avatar lg" alt=""/>
+                    <span v-else class="session-avatar lg session-avatar-empty"><span class="fas fa-user"></span></span>
+                    <div class="session-row-text">
+                        <b>{{s.character || 'Choosing a character'}}</b>
+                        <span class="session-meta"><i class="session-status" :class="'status-' + (s.status || 'offline')"></i>{{sessionSummary(s)}}</span>
+                    </div>
+                    <span v-if="s.id === sessions.self" class="fas fa-check session-check"></span>
+                    <span v-else-if="s.unread" class="session-pill">{{s.unread}}</span>
+                    <span v-if="s.id !== sessions.self" class="fas fa-times session-row-close" role="button" aria-label="Log out"
+                        @click.stop="closeSession(s.id)"></span>
+                </div>
+                <div v-if="canAddSession()" class="session-row add" role="button" @click="sheetOpen = false; addSession()">
+                    <span class="session-avatar lg session-avatar-empty"><span class="fas fa-plus"></span></span>
+                    <div class="session-row-text"><b>Log in another character</b><span class="session-meta">{{sessions.list.length}} of {{sessions.max}} signed in</span></div>
+                </div>
+                <div v-else class="session-note">{{sessions.max}} of {{sessions.max}} signed in. Log one out to add another.</div>
+            </div>
+        </template>
         <settings-view ref="settingsView"></settings-view>
         <app-exporter-dialog ref="appExporterDialog"></app-exporter-dialog>
         <device-sync-dialog ref="deviceSyncDialog"></device-sync-dialog>
@@ -81,6 +123,12 @@
     import DeviceSyncDialog from './DeviceSyncDialog.vue';
     import UpdateBanner from './UpdateBanner.vue';
     import { notifyConfigJSON, pushNotifyConfig } from './notifyConfig';
+    import {characterImage} from '../chat/common';
+    import {Conversation} from '../chat/interfaces';
+    import {
+        addSession, canAddSession, charactersInUse, closeSession, isSpawnedSession, otherUnread, report, SessionInfo, sessions,
+        sessionsEnabled, shareCredentials, sharedCredentials, switchTo, switcherDesign
+    } from './sessions';
 
     declare global {
         interface Window {
@@ -112,6 +160,10 @@
                 backButtonHandler: null as ((e: Event) => void) | null,
                 availableThemes: [] as ReadonlyArray<string>,
                 connected: false,
+                sessions,
+                sessionsEnabled,
+                switcherDesign,
+                sheetOpen: false,
             };
         },
         async mounted(): Promise<void> {
@@ -119,6 +171,23 @@
             this.availableThemes = (window as any).__availableThemes || [];
         },
         computed: {
+            // Characters another session already has signed in are left out of this one's list.
+            availableCharacters(): ReadonlyArray<SimpleCharacter> | undefined {
+                const self = this as any;
+                if(self.characters === undefined) return undefined;
+                const inUse = charactersInUse();
+                return inUse.length === 0 ? self.characters : self.characters.filter((c: SimpleCharacter) => inUse.indexOf(c.name) === -1);
+            },
+            sessionClass(): Record<string, boolean> {
+                return {
+                    [`switcher-${switcherDesign}`]: sessionsEnabled,
+                    'other-unread': sessionsEnabled && otherUnread() > 0,
+                };
+            },
+            // The unread count for the other characters, for the CSS badges in designs B and C.
+            sessionStyle(): Record<string, string> {
+                return sessionsEnabled ? {'--other-unread': `"${otherUnread()}"`} : {};
+            },
             // Mirrors electron/Index.vue getActiveThemeName: a character's own theme (settings menu,
             // Appearance > Layout) wins while that character is connected.
             activeTheme(): string {
@@ -157,6 +226,43 @@
             },
         },
         methods: {
+            avatar(name: string): string {
+                return characterImage(name);
+            },
+            switchTo, addSession, canAddSession,
+            closeSession(id: number): void {
+                // Closing this page's own character: disconnect cleanly first, then let the host drop the page.
+                if(id === sessions.self && core.connection.isOpen) core.connection.close();
+                closeSession(id);
+            },
+            pickSession(id: number): void {
+                (this as any).sheetOpen = false;
+                switchTo(id);
+            },
+            sessionSummary(s: SessionInfo): string {
+                const status = s.status !== undefined ? s.status.charAt(0).toUpperCase() + s.status.slice(1) : 'Not connected';
+                if(s.id === sessions.self) return status;
+                const parts = [status];
+                if(s.pmFrom !== undefined && s.pmFrom.length > 0)
+                    parts.push(s.pmFrom.length === 1 ? `PMs from ${s.pmFrom[0]}` : `PMs from ${s.pmFrom.length} people`);
+                if(s.mentions !== undefined && s.mentions.length > 0)
+                    parts.push(s.mentions.length === 1 ? `mentioned in ${s.mentions[0]}` : `mentioned in ${s.mentions.length} channels`);
+                return parts.join(' \u00b7 ');
+            },
+            // What the other sessions show about this one: who it is, and what is waiting for it.
+            sessionReport(): Omit<SessionInfo, 'id'> {
+                const self = this as any;
+                if(!self.connected) return {connected: false};
+                const conversations = core.conversations;
+                return {
+                    character: core.connection.character,
+                    connected: true,
+                    status: core.characters.ownCharacter.status,
+                    unread: conversations.newCount,
+                    pmFrom: conversations.privateConversations.filter((c) => c.unreadCount > 0).map((c) => c.character.name),
+                    mentions: conversations.channelConversations.filter((c) => c.unread === Conversation.UnreadState.Mention).map((c) => c.name),
+                };
+            },
             openSettingsMenu(data: OpenSettingsMenuEvent): void {
                 (<InstanceType<typeof SettingsView>>this.$refs['settingsView']).open(data.mode);
             },
@@ -174,6 +280,7 @@
                         return;
                     }
                     if(self.saveLogin) await setGeneralSettings(self.settings);
+                    shareCredentials(self.settings.account, self.settings.password);
                     Socket.host = self.settings.host;
                     core.connection.setCredentials(self.settings.account, ticketProvider(self.settings.account, self.settings.password));
                     core.connection.onEvent('connected', () => {
@@ -256,6 +363,36 @@
             document.addEventListener('open-mobile-device-sync', () => {
                 (<any>this.$refs['deviceSyncDialog']).show();
             });
+            if(sessionsEnabled) {
+                this.$watch(() => (this as any).sessionReport(), (info: Omit<SessionInfo, 'id'>) => report(info), {immediate: true, deep: true});
+                // A page the user cannot see behaves like a blurred window, so its messages count as unread
+                // and the conversation it had open is marked read again when it comes back.
+                this.$watch(() => sessions.active === sessions.self, (visible: boolean) => {
+                    window.dispatchEvent(new Event(visible ? 'focus' : 'blur'));
+                    (this as any).sheetOpen = false;
+                });
+                // Design C: the avatar in the chat box toolbar opens the sheet.
+                if(switcherDesign === 'sheet')
+                    document.addEventListener('click', (e: Event) => {
+                        const target = <Element | null>e.target;
+                        if(target === null || target.closest('.bbcode-toolbar .character-btn') === null) return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        // Otherwise the message box keeps focus and the keyboard comes up under the sheet.
+                        const focused = <HTMLElement | null>document.activeElement;
+                        if(focused !== null && typeof focused.blur === 'function') focused.blur();
+                        (this as any).sheetOpen = true;
+                    }, true);
+                // A character added from another page logs in with the same account straight away.
+                if(isSpawnedSession()) {
+                    const credentials = sharedCredentials();
+                    if(credentials !== undefined) {
+                        settings.account = credentials.account;
+                        settings.password = credentials.password;
+                    }
+                    if(settings.account !== '' && settings.password !== '') void this.login();
+                }
+            }
             // iOS: keep the native background-notify config (chat.ts pushes it on connect) current as
             // channels are joined/left and notification settings change. Watching the serialized config
             // re-fires only on a real change; debounce coalesces bursts (e.g. joining many channels).
@@ -327,4 +464,285 @@
         user-select: none;
         -webkit-user-drag: none;
     }
+    /* ---------- Character switcher prototypes (mobile/sessions.ts) ---------- */
+    .session-host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .session-host > :last-child {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .session-avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex: none;
+    }
+
+    .session-avatar.lg {
+        width: 44px;
+        height: 44px;
+        border-radius: 8px;
+    }
+
+    .session-avatar-empty {
+        display: inline-grid;
+        place-items: center;
+        background: var(--bs-secondary-bg);
+        color: var(--bs-secondary-color);
+    }
+
+    .session-badge {
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        border-radius: 9px;
+        background: var(--bs-danger);
+        color: #fff;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 18px;
+        text-align: center;
+    }
+
+    /* A: tab strip above the chat. */
+    .session-strip {
+        flex: none;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 6px;
+        padding: 6px var(--page-pad);
+        background: var(--bs-tertiary-bg);
+        border-bottom: 1px solid var(--bs-border-color);
+        overflow-x: auto;
+    }
+
+    .session-tab {
+        position: relative;
+        flex: none;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px;
+        border: 0;
+        border-radius: 10px;
+        background: transparent;
+        color: var(--bs-body-color);
+    }
+
+    .session-tab.active {
+        background: var(--bs-secondary-bg);
+        padding-right: 8px;
+    }
+
+    .session-name {
+        font-weight: 600;
+        white-space: nowrap;
+    }
+
+    .session-close {
+        padding: 4px 2px 4px 8px;
+        opacity: .7;
+    }
+
+    .session-add {
+        flex: none;
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+        border: 1px dashed var(--bs-border-color);
+        background: transparent;
+        color: var(--bs-secondary-color);
+    }
+
+    /* With the strip above the chat, an open drawer starts under it instead of at the screen top. */
+    .switcher-tabs .sidebar-wrapper.open .sidebar {
+        top: 0;
+        padding-top: 0;
+    }
+
+    /* B: the "switch to" strip in the drawer, and a dot on the menu button. */
+    .session-card {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 8px 10px 8px 0;
+        padding: 8px 10px;
+        border-radius: 10px;
+        background: var(--bs-secondary-bg);
+    }
+
+    .session-card-label {
+        flex: 1;
+        color: var(--bs-secondary-color);
+    }
+
+    .session-card-av {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        background: transparent;
+    }
+
+    .session-card-av img,
+    .session-card-av .session-avatar-empty {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
+    .session-card-add {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 1px dashed var(--bs-border-color);
+        background: transparent;
+        color: var(--bs-secondary-color);
+    }
+
+    /* The expander is rotated 270deg, so its bottom-right corner is the one that shows top-right. */
+    .switcher-drawer.other-unread .sidebar-left .expander::after {
+        content: "";
+        position: absolute;
+        bottom: -4px;
+        right: -4px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--bs-danger);
+        box-shadow: 0 0 0 2px var(--bs-body-bg);
+    }
+
+    /* C: the avatar in the chat box opens a sheet; its badge counts the other characters' unread. */
+    .switcher-sheet .bbcode-toolbar .character-btn {
+        position: relative;
+        cursor: pointer;
+    }
+
+    .switcher-sheet.other-unread .bbcode-toolbar .character-btn::after {
+        content: var(--other-unread);
+        position: absolute;
+        /* Inside the button: the toolbar clips anything that pokes out of it. */
+        top: 2px;
+        right: 2px;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        border-radius: 9px;
+        background: var(--bs-danger);
+        color: #fff;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 18px;
+        text-align: center;
+        z-index: 2;
+    }
+
+    .session-scrim {
+        position: fixed;
+        inset: 0;
+        z-index: 1060;
+        background: rgba(0, 0, 0, .5);
+    }
+
+    .session-sheet {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1061;
+        background: var(--bs-body-bg);
+        color: var(--bs-body-color);
+        border-radius: 18px 18px 0 0;
+        padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
+        box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
+    }
+
+    .session-grab {
+        width: 44px;
+        height: 5px;
+        border-radius: 3px;
+        background: var(--bs-border-color);
+        margin: 0 auto 12px;
+    }
+
+    .session-sheet-title {
+        margin: 0 0 6px;
+    }
+
+    .session-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 0;
+        border-top: 1px solid var(--bs-border-color);
+        cursor: pointer;
+    }
+
+    .session-row-text {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .session-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--bs-secondary-color);
+        font-size: .88em;
+    }
+
+    .session-status {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex: none;
+        background: var(--bs-secondary-color);
+    }
+
+    .status-online { background: #cfd2e0; }
+    .status-looking { background: #2fbf5f; }
+    .status-busy { background: #e08a1e; }
+    .status-away, .status-idle { background: #e6b800; }
+    .status-dnd { background: #d03030; }
+
+    .session-check {
+        color: var(--bs-primary);
+    }
+
+    .session-pill {
+        padding: 0 8px;
+        border-radius: 10px;
+        background: var(--bs-danger);
+        color: #fff;
+        font-size: .85em;
+        font-weight: 700;
+    }
+
+    .session-row-close {
+        padding: 8px;
+        opacity: .6;
+    }
+
+    .session-note {
+        padding-top: 10px;
+        border-top: 1px solid var(--bs-border-color);
+        color: var(--bs-secondary-color);
+        font-size: .9em;
+    }
 </style>
diff --git a/mobile/SessionCard.vue b/mobile/SessionCard.vue
new file mode 100644
index 00000000..e560d1ae
--- /dev/null
+++ b/mobile/SessionCard.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="session-card">
+        <span class="session-card-label">Switch to</span>
+        <button v-for="s in others" :key="s.id" type="button" class="session-card-av" :aria-label="s.character || 'New character'"
+            @click="pick(s.id)">
+            <img v-if="s.character" :src="avatar(s.character)" alt=""/>
+            <span v-else class="session-avatar-empty"><span class="fas fa-user"></span></span>
+            <span v-if="s.unread" class="session-badge">{{s.unread}}</span>
+        </button>
+        <button v-if="canAdd" type="button" class="session-card-add" aria-label="Add a character" @click="add()">
+            <span class="fas fa-plus"></span>
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+    import Vue from 'vue';
+    import {characterImage} from '../chat/common';
+    import {addSession, canAddSession, otherSessions, SessionInfo, sessions, switchTo} from './sessions';
+
+    // Switcher prototype B: the other signed-in characters, under your own in the left drawer.
+    export default Vue.extend({
+        data() {
+            return {sessions};
+        },
+        computed: {
+            others(): SessionInfo[] {
+                return (this as any).sessions.list.length >= 0 ? otherSessions() : [];
+            },
+            canAdd(): boolean {
+                return (this as any).sessions.list.length >= 0 && canAddSession();
+            },
+        },
+        methods: {
+            avatar(name: string): string {
+                return characterImage(name);
+            },
+            closeDrawer(): void {
+                const wrapper = <(Element & {__vue__?: {expanded: boolean}}) | null>this.$el.closest('.sidebar-wrapper');
+                if(wrapper !== null && wrapper.__vue__ !== undefined) wrapper.__vue__.expanded = false;
+            },
+            pick(id: number): void {
+                this.closeDrawer();
+                switchTo(id);
+            },
+            add(): void {
+                this.closeDrawer();
+                addSession();
+            },
+        },
+    });
+</script>
diff --git a/mobile/android/app/build.gradle b/mobile/android/app/build.gradle
index ea762863..d7215daf 100644
--- a/mobile/android/app/build.gradle
+++ b/mobile/android/app/build.gradle
@@ -11,12 +11,21 @@ android {
         targetSdk 35
         versionCode 56
         versionName "2026.10.0"
+        manifestPlaceholders = [appLabel: "@string/app_name"]
     }
+    // Prototype builds of the character switcher: -Pswitcher=tabs|drawer|sheet installs beside the
+    // normal app under its own id and label, so the three designs can be compared side by side.
+    def switcher = project.findProperty('switcher')
     flavorDimensions "brand"
     productFlavors {
         solstice {
             dimension "brand"
             applicationId "net.f_list.solstice"
+            if(switcher) {
+                applicationIdSuffix ".switcher.${switcher}"
+                versionNameSuffix "-switcher-${switcher}"
+                manifestPlaceholders = [appLabel: "Solstice ${[tabs: 'A', drawer: 'B', sheet: 'C'][switcher] ?: switcher}"]
+            }
         }
     }
     buildTypes {
diff --git a/mobile/android/app/src/main/AndroidManifest.xml b/mobile/android/app/src/main/AndroidManifest.xml
index 75405266..61c3fead 100644
--- a/mobile/android/app/src/main/AndroidManifest.xml
+++ b/mobile/android/app/src/main/AndroidManifest.xml
@@ -20,7 +20,7 @@
 	<application
 		android:allowBackup="true"
 		android:icon="@mipmap/ic_launcher"
-		android:label="@string/app_name"
+		android:label="${appLabel}"
 		android:roundIcon="@mipmap/ic_launcher"
 		android:supportsRtl="true"
 		android:usesCleartextTraffic="true"
diff --git a/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt b/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
index 9b0859c2..5681aa8c 100644
--- a/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
+++ b/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
@@ -18,6 +18,7 @@ import android.view.KeyEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewTreeObserver
+import android.webkit.JavascriptInterface
 import android.webkit.JsResult
 import android.webkit.PermissionRequest
 import android.webkit.ValueCallback
@@ -25,6 +26,7 @@ import android.webkit.WebChromeClient
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import android.widget.EditText
+import android.widget.LinearLayout
 import java.io.FileInputStream
 import java.io.FileOutputStream
 import java.net.URLDecoder
@@ -34,7 +36,25 @@ import org.json.JSONObject
 
 
 class MainActivity : Activity() {
-	private lateinit var webView: WebView
+	// Prototype: up to three characters at once, one WebView each, the way desktop gives every tab
+	// its own page. Each WebView gets its own bridge instances, so per-character native state (the
+	// log index in Logs) never mixes. NativeSessions relays session state between the pages and
+	// holds what they must share: the account credentials and the API ticket.
+	private inner class Session(val id: Int, val view: WebView) {
+		val background = BackgroundSession()
+		var state: JSONObject = JSONObject()
+	}
+
+	private val sessions = ArrayList<Session>()
+	private var nextSessionId = 1
+	private var activeId = 0
+	private val webView: WebView get() = (sessions.firstOrNull { it.id == activeId } ?: sessions[0]).view
+	private lateinit var container: ViewGroup
+	@Volatile private var credentials = ""
+	@Volatile private var sharedTicket = ""
+	private var backgroundHolders = 0
+	private var viewHeight = ViewGroup.LayoutParams.MATCH_PARENT
+
 	private val profileRegex = Regex("^https?://(www\\.)?f-list.net/c/([^/#]+)/?#?")
 	private val backgroundPlugin = Background(this)
 	private var debugPressed = 0
@@ -46,11 +66,118 @@ class MainActivity : Activity() {
 		return value?.let { JSONObject.quote(it) } ?: "null"
 	}
 
+	// The foreground service has to stay up while any character is connected, so each page holds
+	// its own claim and the service only stops when the last one lets go.
+	private inner class BackgroundSession {
+		private var on = false
+
+		@JavascriptInterface
+		fun start() = synchronized(this@MainActivity) {
+			if(on) return@synchronized
+			on = true
+			if(++backgroundHolders == 1) backgroundPlugin.start()
+		}
+
+		@JavascriptInterface
+		fun stop() = synchronized(this@MainActivity) {
+			if(!on) return@synchronized
+			on = false
+			if(--backgroundHolders == 0) backgroundPlugin.stop()
+		}
+	}
+
+	private inner class SessionsBridge(private val sessionId: Int) {
+		@JavascriptInterface
+		fun id(): Int = sessionId
+
+		@JavascriptInterface
+		fun max(): Int = MAX_SESSIONS
+
+		@JavascriptInterface
+		fun state(): String = synchronized(this@MainActivity) { snapshot().toString() }
+
+		@JavascriptInterface
+		fun report(json: String) {
+			runOnUiThread {
+				sessions.firstOrNull { it.id == sessionId }?.state = try { JSONObject(json) } catch(e: Exception) { JSONObject() }
+				broadcast()
+			}
+		}
+
+		@JavascriptInterface
+		fun switchTo(id: Int) = runOnUiThread { activate(id) }
+
+		@JavascriptInterface
+		fun add(): Boolean {
+			if(sessions.size >= MAX_SESSIONS) return false
+			runOnUiThread { addSession() }
+			return true
+		}
+
+		@JavascriptInterface
+		fun close(id: Int) = runOnUiThread { removeSession(id) }
+
+		@JavascriptInterface
+		fun setCredentials(json: String) { credentials = json }
+
+		@JavascriptInterface
+		fun getCredentials(): String = credentials
+
+		@JavascriptInterface
+		fun getTicket(): String = sharedTicket
+
+		@JavascriptInterface
+		fun setTicket(json: String) { sharedTicket = json }
+	}
+
+	private fun snapshot(): JSONObject {
+		val list = org.json.JSONArray()
+		for(session in sessions) list.put(JSONObject(session.state.toString()).put("id", session.id))
+		return JSONObject().put("active", activeId).put("max", MAX_SESSIONS).put("sessions", list)
+	}
+
+	private fun broadcast() {
+		val json = snapshot().toString()
+		for(session in sessions) session.view.evaluateJavascript("window.__solsticeSessions && window.__solsticeSessions($json)", null)
+	}
+
+	private fun activate(id: Int) {
+		if(sessions.none { it.id == id }) return
+		activeId = id
+		for(session in sessions) session.view.visibility = if(session.id == id) View.VISIBLE else View.GONE
+		webView.requestFocus()
+		broadcast()
+	}
+
+	private fun addSession() {
+		if(sessions.size >= MAX_SESSIONS) return
+		val view = WebView(this)
+		view.layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, viewHeight)
+		container.addView(view)
+		val session = Session(nextSessionId++, view)
+		sessions.add(session)
+		setupWebView(session)
+		activate(session.id)
+	}
+
+	private fun removeSession(id: Int) {
+		if(sessions.size <= 1) return
+		val session = sessions.firstOrNull { it.id == id } ?: return
+		session.background.stop()
+		sessions.remove(session)
+		container.removeView(session.view)
+		session.view.destroy()
+		if(activeId == id) activate(sessions[0].id) else broadcast()
+	}
+
 	override fun onCreate(savedInstanceState: Bundle?) {
 		super.onCreate(savedInstanceState)
 		setContentView(R.layout.activity_main)
 		if(BuildConfig.DEBUG) WebView.setWebContentsDebuggingEnabled(true)
-		webView = findViewById(R.id.webview)
+		container = findViewById(R.id.content)
+		val first = Session(nextSessionId++, findViewById(R.id.webview))
+		sessions.add(first)
+		activeId = first.id
 
 		// On many physical devices (especially OEM Android 11+), adjustResize doesn't reliably
 		// resize the WebView when the soft keyboard appears. We handle it manually here.
@@ -59,32 +186,34 @@ class MainActivity : Activity() {
 			val rect = Rect()
 			rootView.getWindowVisibleDisplayFrame(rect)
 			val heightDiff = rootView.height - rect.bottom
-			val params = webView.layoutParams
-			if (heightDiff > rootView.height * 0.15) {
-				// Keyboard visible — shrink WebView to the visible area
-				val newHeight = rect.bottom - rect.top
-				if (params.height != newHeight) {
-					params.height = newHeight
-					webView.layoutParams = params
-				}
-			} else {
-				// Keyboard hidden — restore WebView to full height
-				if (params.height != ViewGroup.LayoutParams.MATCH_PARENT) {
-					params.height = ViewGroup.LayoutParams.MATCH_PARENT
-					webView.layoutParams = params
+			// Keyboard visible: shrink to the visible area. Hidden: back to full height.
+			val wanted = if(heightDiff > rootView.height * 0.15) rect.bottom - rect.top else ViewGroup.LayoutParams.MATCH_PARENT
+			viewHeight = wanted
+			for(session in sessions) {
+				val params = session.view.layoutParams
+				if(params.height != wanted) {
+					params.height = wanted
+					session.view.layoutParams = params
 				}
 			}
 		}
-		webView.settings.javaScriptEnabled = true
-		webView.settings.mediaPlaybackRequiresUserGesture = false
-		webView.loadUrl("file:///android_asset/www/index.html")
-		webView.addJavascriptInterface(File(this), "NativeFile")
-		webView.addJavascriptInterface(Notifications(this), "NativeNotification")
-		webView.addJavascriptInterface(backgroundPlugin, "NativeBackground")
-		webView.addJavascriptInterface(Logs(this), "NativeLogs")
-		webView.addJavascriptInterface(Clipboard(this), "NativeClipboard")
-		webView.addJavascriptInterface(Sync { js -> runOnUiThread { webView.evaluateJavascript(js, null) } }, "SyncBridge")
-		webView.setDownloadListener { url, _, _, _, _ ->
+		setupWebView(first)
+		debugHandler.postDelayed(keepAlive, 10000);
+	}
+
+	private fun setupWebView(session: Session) {
+		val view = session.view
+		view.settings.javaScriptEnabled = true
+		view.settings.mediaPlaybackRequiresUserGesture = false
+		view.loadUrl("file:///android_asset/www/index.html")
+		view.addJavascriptInterface(File(this), "NativeFile")
+		view.addJavascriptInterface(Notifications(this), "NativeNotification")
+		view.addJavascriptInterface(session.background, "NativeBackground")
+		view.addJavascriptInterface(Logs(this), "NativeLogs")
+		view.addJavascriptInterface(Clipboard(this), "NativeClipboard")
+		view.addJavascriptInterface(Sync { js -> runOnUiThread { view.evaluateJavascript(js, null) } }, "SyncBridge")
+		view.addJavascriptInterface(SessionsBridge(session.id), "NativeSessions")
+		view.setDownloadListener { url, _, _, _, _ ->
 			if(Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
 				val permission = checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE)
 				if(permission != PackageManager.PERMISSION_GRANTED)
@@ -98,7 +227,7 @@ class MainActivity : Activity() {
 			val downloadManager = getSystemService(Context.DOWNLOAD_SERVICE) as DownloadManager
 			downloadManager.addCompletedDownload(name, name, false, "text/plain", file.absolutePath, file.length(), true)
 		}
-		webView.webChromeClient = object : WebChromeClient() {
+		view.webChromeClient = object : WebChromeClient() {
 			override fun onJsAlert(view: WebView, url: String, message: String, result: JsResult): Boolean {
 				AlertDialog.Builder(this@MainActivity).setTitle(R.string.app_name).setMessage(message).setPositiveButton(R.string.ok, { _, _ -> }).setOnDismissListener({ result.confirm() }).show()
 				return true
@@ -135,12 +264,12 @@ class MainActivity : Activity() {
 				return true
 			}
 		}
-		webView.webViewClient = object : WebViewClient() {
+		view.webViewClient = object : WebViewClient() {
 			override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
 				val match = profileRegex.find(url)
 				if(match != null) {
 					val char = URLDecoder.decode(match.groupValues[2], "UTF-8")
-					webView.evaluateJavascript("document.dispatchEvent(new CustomEvent('open-profile',{detail:${jsQuote(char)}}))", null)
+					view.evaluateJavascript("document.dispatchEvent(new CustomEvent('open-profile',{detail:${jsQuote(char)}}))", null)
 				} else {
 					var uri = Uri.parse(url)
 					if(uri.scheme == "profile") uri = Uri.parse("https://www.f-list.net/c/${uri.authority}")
@@ -149,17 +278,16 @@ class MainActivity : Activity() {
 				return true
 			}
 
-			override fun onPageFinished(view: WebView?, url: String?) {
-				super.onPageFinished(view, url)
-				webView.evaluateJavascript("window.setupPlatform('android')", null)
-				webView.evaluateJavascript("(function(n){n.listFiles=function(p){return JSON.parse(n.listFilesN(p))};" +
+			override fun onPageFinished(page: WebView?, url: String?) {
+				super.onPageFinished(page, url)
+				view.evaluateJavascript("window.setupPlatform('android')", null)
+				view.evaluateJavascript("(function(n){n.listFiles=function(p){return JSON.parse(n.listFilesN(p))};" +
 						"n.listDirectories=function(p){return JSON.parse(n.listDirectoriesN(p))}})(NativeFile)", null)
-				webView.evaluateJavascript("(function(n){n.init=function(c){return JSON.parse(n.initN(c))};n.getBacklog=function(k){return JSON.parse(n.getBacklogN(k))};" +
+				view.evaluateJavascript("(function(n){n.init=function(c){return JSON.parse(n.initN(c))};n.getBacklog=function(k){return JSON.parse(n.getBacklogN(k))};" +
 						"n.getLogs=function(c,k,d){return JSON.parse(n.getLogsN(c,k,d))};n.loadIndex=function(c){return JSON.parse(n.loadIndexN(c))};" +
 						"n.getCharacters=function(){return JSON.parse(n.getCharactersN())}})(NativeLogs)", null)
 			}
 		}
-		debugHandler.postDelayed(keepAlive, 10000);
 	}
 
 	private fun addFolder(folder: java.io.File, out: ZipOutputStream, path: String) {
@@ -188,11 +316,12 @@ class MainActivity : Activity() {
 	companion object {
 		private const val FILE_CHOOSER_REQUEST = 1001
 		private const val CAMERA_PERMISSION_REQUEST = 1002
+		private const val MAX_SESSIONS = 3
 	}
 
 	val keepAlive = object : Runnable {
 		override fun run() {
-			webView.dispatchWindowVisibilityChanged(View.VISIBLE);
+			for(session in sessions) session.view.dispatchWindowVisibilityChanged(View.VISIBLE);
 			debugHandler.postDelayed(this, 10000)
 		}
 	}
@@ -301,13 +430,14 @@ class MainActivity : Activity() {
 		// the background without running any more JavaScript. A WebView's document visibility follows
 		// the view rather than the activity lifecycle, so visibilitychange is not dependable here;
 		// nudge the web layer directly. The flush itself writes through the synchronous File bridge.
-		webView.evaluateJavascript("window.solsticeFlushDrafts && window.solsticeFlushDrafts()", null)
+		for(session in sessions) session.view.evaluateJavascript("window.solsticeFlushDrafts && window.solsticeFlushDrafts()", null)
 	}
 
 	override fun onDestroy() {
 		super.onDestroy()
+		val views = sessions.map { it.view }
 		findViewById<ViewGroup>(R.id.content).removeAllViews()
-		webView.destroy()
+		for(view in views) view.destroy()
 		backgroundPlugin.stop()
 	}
 }
diff --git a/mobile/api-ticket.ts b/mobile/api-ticket.ts
index 2d24ff8b..c85be6d2 100644
--- a/mobile/api-ticket.ts
+++ b/mobile/api-ticket.ts
@@ -1,5 +1,6 @@
 import Axios from 'axios';
 import * as qs from 'qs';
+import { sharedTicket, shareTicket } from './sessions';
 
 // Mobile counterpart of electron/api-ticket.ts. Horizon 2.4.1 dropped the password form of
 // Connection.setCredentials, so the connection now needs a ticket provider. The desktop one asks the
@@ -30,8 +31,12 @@ export async function fetchApiTicket(account: string, password: string): Promise
         const data = (await Axios.post('https://www.f-list.net/json/getApiTicket.php', qs.stringify({
             account, password, no_friends: true, no_bookmarks: true, new_character_list: true
         }))).data as ApiTicketResponse;
-        if (data.ticket !== undefined && data.error === '')
+        if (data.ticket !== undefined && data.error === '') {
             cached = { account, password, ticket: data.ticket, issuedAt: Date.now() };
+            // With several characters signed in, each page has its own cache; publish the ticket so
+            // the others pick it up instead of fetching one that would cancel this one.
+            shareTicket({ account, ticket: data.ticket, issuedAt: cached.issuedAt });
+        }
         return data;
     })();
     inFlight = { account, password, request };
@@ -45,6 +50,11 @@ export async function fetchApiTicket(account: string, password: string): Promise
 /** A Connection ticket provider that reuses the cached ticket until it is stale or rejected. */
 export function ticketProvider(account: string, password: string): (invalidTicket?: string) => Promise<string> {
     return async (invalidTicket?: string) => {
+        const shared = sharedTicket();
+        if (shared !== undefined && shared.account === account && shared.ticket !== invalidTicket &&
+            Date.now() - shared.issuedAt < ticketLifetime &&
+            (cached === undefined || shared.issuedAt > cached.issuedAt))
+            return shared.ticket;
         if (cached !== undefined && cached.account === account && cached.password === password &&
             cached.ticket !== invalidTicket && Date.now() - cached.issuedAt < ticketLifetime)
             return cached.ticket;
diff --git a/mobile/chat.ts b/mobile/chat.ts
index 90a87c8b..a33784bc 100644
--- a/mobile/chat.ts
+++ b/mobile/chat.ts
@@ -49,6 +49,8 @@ import Connection from '../fchat/connection';
 import {appVersion, GeneralSettings, Logs, SettingsStore} from './filesystem';
 import MobilePlatformService from './platform';
 import Index from './Index.vue';
+import SessionCard from './SessionCard.vue';
+import {sessionsEnabled, switcherDesign} from './sessions';
 import Notifications from './notifications';
 import {noteInterruptedImport} from './importTrace';
 import {sendNotifyConfig, clearConversationNotification} from './notifyConfig';
@@ -432,6 +434,12 @@ ipcMain.on('request-send-ad', (event: any, adId: string) => //tslint:disable-lin
 
 // Mount even if init failed (an unreadable '_/settings', say): a blank WebView gives the user nothing to
 // act on, while the mounted app can still log in, export data and save the error log recorded here.
+// Character switcher prototype B lives in ChatView's drawer, which renders it only when this is set.
+if(sessionsEnabled && switcherDesign === 'drawer') {
+    Vue.component('mobile-session-card', SessionCard);
+    (<{__solsticeSessionCard?: boolean}><unknown>window).__solsticeSessionCard = true;
+}
+
 coreReady.catch((e: unknown) => logCrash('core.init', e)).then(() => {
     new Index({ //tslint:disable-line:no-unused-expression
         el: '#app'
diff --git a/mobile/sessions.ts b/mobile/sessions.ts
new file mode 100644
index 00000000..27d7263f
--- /dev/null
+++ b/mobile/sessions.ts
@@ -0,0 +1,142 @@
+import Vue from 'vue';
+
+// Prototype: several characters at once. The native host (MainActivity on Android) runs one WebView
+// per character, like desktop runs one page per tab, and exposes NativeSessions to each of them. This
+// module is the page's side of that: it reports this character's state, keeps a reactive copy of every
+// session's, and wraps the calls that switch, add and close sessions. Which switcher UI is drawn is
+// chosen at build time (SWITCHER_DESIGN), so the three prototype builds differ only in this flag.
+
+export type SwitcherDesign = 'tabs' | 'drawer' | 'sheet' | '';
+export const switcherDesign = <SwitcherDesign>(process.env.SWITCHER_DESIGN || '');
+
+export interface SessionInfo {
+    id: number;
+    character?: string;
+    connected?: boolean;
+    status?: string;
+    unread?: number;
+    pmFrom?: string[];
+    mentions?: string[];
+}
+
+interface Snapshot {
+    active: number;
+    max: number;
+    sessions: SessionInfo[];
+}
+
+interface NativeSessionsBridge {
+    id(): number;
+    max(): number;
+    state(): string;
+    report(json: string): void;
+    switchTo(id: number): void;
+    add(): boolean;
+    close(id: number): void;
+    setCredentials(json: string): void;
+    getCredentials(): string;
+    getTicket(): string;
+    setTicket(json: string): void;
+}
+
+const native = (<{NativeSessions?: NativeSessionsBridge}><unknown>window).NativeSessions;
+
+export const sessionsEnabled = switcherDesign !== '' && native !== undefined;
+
+export const sessions = Vue.observable({self: 0, active: 0, max: 3, list: <SessionInfo[]>[]});
+
+function apply(snapshot: Snapshot): void {
+    sessions.active = snapshot.active;
+    sessions.max = snapshot.max;
+    sessions.list = snapshot.sessions;
+}
+
+if(sessionsEnabled) {
+    sessions.self = native!.id();
+    try {
+        apply(<Snapshot>JSON.parse(native!.state()));
+    } catch {
+        // the host sends a fresh snapshot on the next change anyway
+    }
+    (<{__solsticeSessions?: (s: Snapshot) => void}><unknown>window).__solsticeSessions = apply;
+}
+
+export function otherSessions(): SessionInfo[] {
+    return sessions.list.filter((s) => s.id !== sessions.self);
+}
+
+export function otherUnread(): number {
+    return otherSessions().reduce((sum, s) => sum + (s.unread || 0), 0);
+}
+
+export function canAddSession(): boolean {
+    return sessions.list.length < sessions.max;
+}
+
+/** Characters signed in by the other sessions, so the character list can leave them out. */
+export function charactersInUse(): string[] {
+    return otherSessions().map((s) => s.character).filter((c): c is string => c !== undefined && c !== '');
+}
+
+/** A page the host opened with "add a character" logs in straight away with the shared account. */
+export function isSpawnedSession(): boolean {
+    return sessionsEnabled && sessions.self !== 1;
+}
+
+let lastReport = '';
+export function report(info: Omit<SessionInfo, 'id'>): void {
+    if(!sessionsEnabled) return;
+    const json = JSON.stringify(info);
+    if(json === lastReport) return;
+    lastReport = json;
+    native!.report(json);
+}
+
+export function switchTo(id: number): void {
+    if(sessionsEnabled && id !== sessions.self) native!.switchTo(id);
+}
+
+export function addSession(): boolean {
+    return sessionsEnabled && native!.add();
+}
+
+export function closeSession(id: number): void {
+    if(sessionsEnabled) native!.close(id);
+}
+
+export function sharedCredentials(): {account: string, password: string} | undefined {
+    if(!sessionsEnabled) return undefined;
+    try {
+        const raw = native!.getCredentials();
+        return raw !== '' ? <{account: string, password: string}>JSON.parse(raw) : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+export function shareCredentials(account: string, password: string): void {
+    if(sessionsEnabled) native!.setCredentials(JSON.stringify({account, password}));
+}
+
+// F-List cancels an account's older tickets as soon as it issues a new one, so every session has to
+// use the same ticket (desktop shares it through its main process). mobile/api-ticket.ts reads and
+// writes it here when sessions are on.
+export interface SharedTicket {
+    account: string;
+    ticket: string;
+    issuedAt: number;
+}
+
+export function sharedTicket(): SharedTicket | undefined {
+    if(!sessionsEnabled) return undefined;
+    try {
+        const raw = native!.getTicket();
+        return raw !== '' ? <SharedTicket>JSON.parse(raw) : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+export function shareTicket(ticket: SharedTicket): void {
+    if(sessionsEnabled) native!.setTicket(JSON.stringify(ticket));
+}
diff --git a/mobile/webpack.config.js b/mobile/webpack.config.js
index 1c923abf..72b7e548 100644
--- a/mobile/webpack.config.js
+++ b/mobile/webpack.config.js
@@ -121,6 +121,8 @@ const config = {
     new webpack.DefinePlugin({
       'process.versions': JSON.stringify({ node: '22.0.0' }),
       'process.version': JSON.stringify('v22.0.0'),
+      // Character switcher prototypes: tabs | drawer | sheet, or '' for the normal single-character app.
+      'process.env.SWITCHER_DESIGN': JSON.stringify(process.env.SWITCHER_DESIGN || ''),
     }),
     // Bundle the sound-theme assets into www/sound-themes so the WebView can
     // load themed sounds at ./sound-themes/<theme>/... (loaded by URL at runtime,
@@ -165,7 +167,8 @@ const config = {
 module.exports = function (mode) {
   const cacheConfig = {
     type: 'filesystem',
-    name: `mobile-${mode}`,
+    // The switcher design is baked in by DefinePlugin, which the cache does not track, so key on it.
+    name: `mobile-${mode}${process.env.SWITCHER_DESIGN ? '-' + process.env.SWITCHER_DESIGN : ''}`,
     buildDependencies: {
       config: [
         __filename,

From be231c219f288a3b7f7a234321b6bb38ebe37509 Mon Sep 17 00:00:00 2001
From: Kannamoris <mail@kanna.zip>
Date: Sat, 7 Nov 2026 07:33:32 +0100
Subject: [PATCH 2/5] fix: keep the prototype tab strip above an open drawer's
 backdrop

---
 mobile/Index.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/mobile/Index.vue b/mobile/Index.vue
index ce1e0a22..3646d636 100644
--- a/mobile/Index.vue
+++ b/mobile/Index.vue
@@ -564,6 +564,12 @@
         color: var(--bs-secondary-color);
     }
 
+    /* The strip is app-level, like desktop's tab bar, so it stays bright and tappable above a drawer's backdrop. */
+    .switcher-tabs .session-strip {
+        position: relative;
+        z-index: 20;
+    }
+
     /* With the strip above the chat, an open drawer starts under it instead of at the screen top. */
     .switcher-tabs .sidebar-wrapper.open .sidebar {
         top: 0;

From 589a4a36e2e788efdc4359ab9681413b7f982f16 Mon Sep 17 00:00:00 2001
From: Kannamoris <mail@kanna.zip>
Date: Sat, 7 Nov 2026 07:40:28 +0100
Subject: [PATCH 3/5] fix: draw the Android app behind the status and
 navigation bars

The app used the Holo theme's black system bars, so a black band sat above the page and another under it, most visible on light themes. MainActivity now draws behind both bars, reports their sizes to each page as --sys-top/right/bottom/left (the bottom drops to 0 while the keyboard is up, since the bar sits under it), and switches the bar icons dark or light through a small NativeView bridge that the page drives from its theme's background. The page pads itself and its modals by those sizes or the iOS safe areas, whichever is larger, and the open drawers and the prototype tab strip stretch under the bars. The keyboard resize now ends the WebView at the keyboard's top edge, since the views start at the screen top.
---
 mobile/Index.vue                              | 54 +++++++++++----
 .../kotlin/net/f_list/fchat/MainActivity.kt   | 69 ++++++++++++++++++-
 2 files changed, 109 insertions(+), 14 deletions(-)

diff --git a/mobile/Index.vue b/mobile/Index.vue
index 3646d636..45f7dd04 100644
--- a/mobile/Index.vue
+++ b/mobile/Index.vue
@@ -134,6 +134,8 @@
         interface Window {
             NativeView: {
                 setTheme(theme: string): void
+                // Android only: dark bar icons on a light theme.
+                setLightBars?(light: boolean): void
             } | undefined;
         }
 
@@ -229,6 +231,18 @@
             avatar(name: string): string {
                 return characterImage(name);
             },
+            // Android draws the app behind the status and navigation bars, so their icons have to suit the
+            // theme: dark on a light background, light on a dark one.
+            updateBars(): void {
+                const view = window.NativeView;
+                if(view === undefined || typeof view.setLightBars !== 'function') return;
+                const raw = getComputedStyle(document.body).getPropertyValue('--bs-body-bg').trim();
+                const hex = /^#([0-9a-f]{6})$/i.exec(raw);
+                const rgb = /rgba?\((\d+)\D+(\d+)\D+(\d+)/i.exec(raw);
+                const [r, g, b] = hex !== null ? [0, 2, 4].map((i) => parseInt(hex[1].substr(i, 2), 16))
+                    : rgb !== null ? [1, 2, 3].map((i) => Number(rgb[i])) : [0, 0, 0];
+                view.setLightBars((0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6);
+            },
             switchTo, addSession, canAddSession,
             closeSession(id: number): void {
                 // Closing this page's own character: disconnect cleanly first, then let the host drop the page.
@@ -353,6 +367,8 @@
             // it survives persistence via _.merge, so read it dynamically.
             setLanguage((settings as any).displayLanguage);
             (core.state as any).generalSettings = settings;
+            // The theme's stylesheet goes in with the next render, so read its colours after that.
+            this.$watch(() => (this as any).activeTheme, () => this.$nextTick(() => (this as any).updateBars()), {immediate: true});
             (window as any).__generalSettings = settings;
             (window as any).__setGeneralSettings = setGeneralSettings;
             // Document events, not EventBus: Chat.vue calls EventBus.clear() on every disconnect,
@@ -370,6 +386,7 @@
                 this.$watch(() => sessions.active === sessions.self, (visible: boolean) => {
                     window.dispatchEvent(new Event(visible ? 'focus' : 'blur'));
                     (this as any).sheetOpen = false;
+                    if(visible) (this as any).updateBars();
                 });
                 // Design C: the avatar in the chat box toolbar opens the sheet.
                 if(switcherDesign === 'sheet')
@@ -416,6 +433,18 @@
         --page-pad: 10px;
     }
 
+    /*
+     * Space to keep clear at each screen edge: the iOS safe areas, or on Android the status and
+     * navigation bars, which the app draws behind (MainActivity sets --sys-* to their sizes). The theme
+     * then runs to the screen edges instead of stopping at black bars.
+     */
+    :root {
+        --inset-top: max(env(safe-area-inset-top, 0px), var(--sys-top, 0px));
+        --inset-right: max(env(safe-area-inset-right, 0px), var(--sys-right, 0px));
+        --inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--sys-bottom, 0px));
+        --inset-left: max(env(safe-area-inset-left, 0px), var(--sys-left, 0px));
+    }
+
     /*
      * The sidebar drawers sit inside #page's padding (and, on iOS, inside the safe-area padding on html),
      * but their backdrop is a full-screen .modal-backdrop, so an open drawer had a darkened gutter on its
@@ -424,25 +453,25 @@
      * while its contents and the expander button stay where they were.
      */
     .sidebar-wrapper.open .sidebar {
-        top: calc(-1 * (var(--page-pad) + env(safe-area-inset-top, 0px)));
-        bottom: calc(-1 * (var(--page-pad) + env(safe-area-inset-bottom, 0px)));
-        padding-top: calc(var(--page-pad) + env(safe-area-inset-top, 0px));
+        top: calc(-1 * (var(--page-pad) + var(--inset-top)));
+        bottom: calc(-1 * (var(--page-pad) + var(--inset-bottom)));
+        padding-top: calc(var(--page-pad) + var(--inset-top));
         /* .sidebar already has 10px of bottom padding (scss/_chat.scss). */
-        padding-bottom: calc(10px + var(--page-pad) + env(safe-area-inset-bottom, 0px));
+        padding-bottom: calc(10px + var(--page-pad) + var(--inset-bottom));
     }
 
     .sidebar-wrapper.open .sidebar-left {
-        left: calc(-1 * (var(--page-pad) + env(safe-area-inset-left, 0px)));
-        padding-left: calc(var(--page-pad) + env(safe-area-inset-left, 0px));
+        left: calc(-1 * (var(--page-pad) + var(--inset-left)));
+        padding-left: calc(var(--page-pad) + var(--inset-left));
     }
 
     .sidebar-wrapper.open .sidebar-right {
-        right: calc(-1 * (var(--page-pad) + env(safe-area-inset-right, 0px)));
-        padding-right: calc(var(--page-pad) + env(safe-area-inset-right, 0px));
+        right: calc(-1 * (var(--page-pad) + var(--inset-right)));
+        padding-right: calc(var(--page-pad) + var(--inset-right));
     }
 
     html, .modal {
-       padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+       padding: var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left);
     }
 
     /*
@@ -519,8 +548,9 @@
         display: flex;
         align-items: center;
         gap: 6px;
-        margin: calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 6px;
-        padding: 6px var(--page-pad);
+        /* Up under the status bar too, so the bar shows the strip rather than a band of page. */
+        margin: calc(-1 * (var(--page-pad) + var(--inset-top))) calc(-1 * var(--page-pad)) 6px;
+        padding: calc(6px + var(--inset-top)) var(--page-pad) 6px;
         background: var(--bs-tertiary-bg);
         border-bottom: 1px solid var(--bs-border-color);
         overflow-x: auto;
@@ -673,7 +703,7 @@
         background: var(--bs-body-bg);
         color: var(--bs-body-color);
         border-radius: 18px 18px 0 0;
-        padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
+        padding: 10px 16px calc(16px + var(--inset-bottom));
         box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
     }
 
diff --git a/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt b/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
index 5681aa8c..b31d73b4 100644
--- a/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
+++ b/mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
@@ -7,6 +7,7 @@ import android.app.DownloadManager
 import android.content.Context
 import android.content.Intent
 import android.content.pm.PackageManager
+import android.graphics.Color
 import android.graphics.Rect
 import android.net.Uri
 import android.os.Build
@@ -18,6 +19,7 @@ import android.view.KeyEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewTreeObserver
+import android.view.WindowManager
 import android.webkit.JavascriptInterface
 import android.webkit.JsResult
 import android.webkit.PermissionRequest
@@ -54,6 +56,59 @@ class MainActivity : Activity() {
 	@Volatile private var sharedTicket = ""
 	private var backgroundHolders = 0
 	private var viewHeight = ViewGroup.LayoutParams.MATCH_PARENT
+	// System bar sizes in CSS pixels (top, right, bottom, left). The app draws behind the status and
+	// navigation bars and the page pads itself by these, so the theme runs to the screen edges.
+	private var barInsets = floatArrayOf(0f, 0f, 0f, 0f)
+	private var keyboardVisible = false
+
+	private fun insetsJs(): String {
+		val bottom = if(keyboardVisible) 0f else barInsets[2]
+		return "(function(s){s.setProperty('--sys-top','${barInsets[0]}px');s.setProperty('--sys-right','${barInsets[1]}px');" +
+			"s.setProperty('--sys-bottom','${bottom}px');s.setProperty('--sys-left','${barInsets[3]}px')})(document.documentElement.style)"
+	}
+
+	private fun pushInsets() {
+		val js = insetsJs()
+		for(session in sessions) session.view.evaluateJavascript(js, null)
+	}
+
+	@Suppress("DEPRECATION")
+	private fun drawBehindSystemBars() {
+		window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS or WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
+		window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
+		window.statusBarColor = Color.TRANSPARENT
+		window.navigationBarColor = Color.TRANSPARENT
+		if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+			window.isStatusBarContrastEnforced = false
+			window.isNavigationBarContrastEnforced = false
+		}
+		window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
+			View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
+		container.setOnApplyWindowInsetsListener { _, insets ->
+			val density = resources.displayMetrics.density
+			// Stable insets are the bars themselves, without the keyboard, which the layout listener handles.
+			barInsets = floatArrayOf(insets.stableInsetTop / density, insets.stableInsetRight / density,
+				insets.stableInsetBottom / density, insets.stableInsetLeft / density)
+			pushInsets()
+			insets
+		}
+	}
+
+	// Lets the page pick dark or light bar icons to suit its theme. setTheme matches the iOS bridge,
+	// which the shared code already calls.
+	private inner class ViewBridge {
+		@JavascriptInterface
+		fun setTheme(@Suppress("UNUSED_PARAMETER") theme: String) {}
+
+		@JavascriptInterface
+		fun setLightBars(light: Boolean) = runOnUiThread {
+			@Suppress("DEPRECATION")
+			val mask = View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+			@Suppress("DEPRECATION")
+			window.decorView.systemUiVisibility = if(light) window.decorView.systemUiVisibility or mask
+				else window.decorView.systemUiVisibility and mask.inv()
+		}
+	}
 
 	private val profileRegex = Regex("^https?://(www\\.)?f-list.net/c/([^/#]+)/?#?")
 	private val backgroundPlugin = Background(this)
@@ -186,8 +241,15 @@ class MainActivity : Activity() {
 			val rect = Rect()
 			rootView.getWindowVisibleDisplayFrame(rect)
 			val heightDiff = rootView.height - rect.bottom
-			// Keyboard visible: shrink to the visible area. Hidden: back to full height.
-			val wanted = if(heightDiff > rootView.height * 0.15) rect.bottom - rect.top else ViewGroup.LayoutParams.MATCH_PARENT
+			// Keyboard visible: end at its top edge (the views start at the screen top, behind the status
+			// bar). Hidden: back to full height. The navigation bar sits under the keyboard while it is up,
+			// so the page stops padding for it.
+			val keyboard = heightDiff > rootView.height * 0.15
+			val wanted = if(keyboard) rect.bottom else ViewGroup.LayoutParams.MATCH_PARENT
+			if(keyboard != keyboardVisible) {
+				keyboardVisible = keyboard
+				pushInsets()
+			}
 			viewHeight = wanted
 			for(session in sessions) {
 				val params = session.view.layoutParams
@@ -197,6 +259,7 @@ class MainActivity : Activity() {
 				}
 			}
 		}
+		drawBehindSystemBars()
 		setupWebView(first)
 		debugHandler.postDelayed(keepAlive, 10000);
 	}
@@ -213,6 +276,7 @@ class MainActivity : Activity() {
 		view.addJavascriptInterface(Clipboard(this), "NativeClipboard")
 		view.addJavascriptInterface(Sync { js -> runOnUiThread { view.evaluateJavascript(js, null) } }, "SyncBridge")
 		view.addJavascriptInterface(SessionsBridge(session.id), "NativeSessions")
+		view.addJavascriptInterface(ViewBridge(), "NativeView")
 		view.setDownloadListener { url, _, _, _, _ ->
 			if(Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
 				val permission = checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE)
@@ -280,6 +344,7 @@ class MainActivity : Activity() {
 
 			override fun onPageFinished(page: WebView?, url: String?) {
 				super.onPageFinished(page, url)
+				view.evaluateJavascript(insetsJs(), null)
 				view.evaluateJavascript("window.setupPlatform('android')", null)
 				view.evaluateJavascript("(function(n){n.listFiles=function(p){return JSON.parse(n.listFilesN(p))};" +
 						"n.listDirectories=function(p){return JSON.parse(n.listDirectoriesN(p))}})(NativeFile)", null)

From 9fb3b1d0fbf544a46f66e3db290b1622cbb0b016 Mon Sep 17 00:00:00 2001
From: Kannamoris <mail@kanna.zip>
Date: Sat, 7 Nov 2026 07:44:18 +0100
Subject: [PATCH 4/5] fix: close the gap between the prototype tab strip and an
 open drawer

The chat sits 6px below the tab strip and the open drawer started at the chat's top, so the dimmed backdrop showed through as a dark band between the strip and the drawer. The drawer now reaches up over that gap.
---
 mobile/Index.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/mobile/Index.vue b/mobile/Index.vue
index 45f7dd04..c825c3ac 100644
--- a/mobile/Index.vue
+++ b/mobile/Index.vue
@@ -549,7 +549,7 @@
         align-items: center;
         gap: 6px;
         /* Up under the status bar too, so the bar shows the strip rather than a band of page. */
-        margin: calc(-1 * (var(--page-pad) + var(--inset-top))) calc(-1 * var(--page-pad)) 6px;
+        margin: calc(-1 * (var(--page-pad) + var(--inset-top))) calc(-1 * var(--page-pad)) var(--strip-gap);
         padding: calc(6px + var(--inset-top)) var(--page-pad) 6px;
         background: var(--bs-tertiary-bg);
         border-bottom: 1px solid var(--bs-border-color);
@@ -600,10 +600,18 @@
         z-index: 20;
     }
 
-    /* With the strip above the chat, an open drawer starts under it instead of at the screen top. */
+    #page {
+        --strip-gap: 6px;
+    }
+
+    /*
+     * With the strip above the chat, an open drawer starts right at the strip's bottom edge instead of at
+     * the screen top. The chat sits --strip-gap below the strip, so reach up over that gap, or the dimmed
+     * backdrop shows through as a dark band between the strip and the drawer.
+     */
     .switcher-tabs .sidebar-wrapper.open .sidebar {
-        top: 0;
-        padding-top: 0;
+        top: calc(-1 * var(--strip-gap));
+        padding-top: var(--strip-gap);
     }
 
     /* B: the "switch to" strip in the drawer, and a dot on the menu button. */

From 6bd0d6d2691decf157f6a1447137e784e065b2fb Mon Sep 17 00:00:00 2001
From: Kannamoris <mail@kanna.zip>
Date: Sat, 7 Nov 2026 17:38:46 +0100
Subject: [PATCH 5/5] feat: port character switcher design A to iOS

Runs up to three characters at once on iOS, one WKWebView each, like the Android prototype. Each character's page (the new ChatPage) gets its own bridges, so the log index and the native socket with its background buffer never mix. WebViewController stacks the pages and brings the active one to the front instead of hiding the others, so WebKit keeps the background characters' JavaScript running while the app is open.

mobile/sessions.ts reads NativeSessions synchronously, which WKWebView cannot do, so bridge.js answers the getters from a copy that the host seeds in a boot script and updates on every change. The host also holds the shared credentials and API ticket.

Notifications carry the character's page: a tap brings that character to the front before opening the conversation, pages after the first tag their notification ids so two characters can both have a PM open with the same person, and the app badge counts every character. The audio keep-alive is shared and only stops when the last character disconnects. Logging a character out from its tab closes its native socket.

The iOS workflow builds the web bundle with SWITCHER_DESIGN=tabs, so the IPA is the multi-character app under the normal bundle id.
---
 .github/workflows/ios.yml                     |   4 +
 .../Solstice/Bridge/NativeBackground.swift    |  22 +-
 mobile/ios/Solstice/Bridge/NativeFile.swift   |   4 +-
 .../Solstice/Bridge/NativeNotification.swift  |  18 +-
 .../ios/Solstice/Bridge/NativeSessions.swift  |  35 ++
 mobile/ios/Solstice/Bridge/NativeSocket.swift |  54 ++-
 mobile/ios/Solstice/Bridge/NativeView.swift   |   4 +-
 mobile/ios/Solstice/Bridge/bridge.js          |  42 +++
 mobile/ios/Solstice/ChatPage.swift            | 272 ++++++++++++++
 mobile/ios/Solstice/WebViewController.swift   | 354 +++++++-----------
 mobile/sessions.ts                            |   5 +-
 11 files changed, 572 insertions(+), 242 deletions(-)
 create mode 100644 mobile/ios/Solstice/Bridge/NativeSessions.swift
 create mode 100644 mobile/ios/Solstice/ChatPage.swift

diff --git a/.github/workflows/ios.yml b/.github/workflows/ios.yml
index 668268e4..f3aed601 100644
--- a/.github/workflows/ios.yml
+++ b/.github/workflows/ios.yml
@@ -69,8 +69,12 @@ jobs:
 
       # Emits mobile/www, which mobile/ios/project.yml references as a folder reference.
       # Must run BEFORE xcodegen so the folder exists when the project is generated.
+      # SWITCHER_DESIGN bakes the multi-character switcher prototype (mobile/sessions.ts) into the
+      # bundle: `tabs` is design A, a tab strip above the chat. Empty builds the single-character app.
       - name: Build web assets
         run: pnpm --filter solstice-mobile build:dist
+        env:
+          SWITCHER_DESIGN: tabs
 
       - name: Install XcodeGen
         run: brew install xcodegen
diff --git a/mobile/ios/Solstice/Bridge/NativeBackground.swift b/mobile/ios/Solstice/Bridge/NativeBackground.swift
index a1534b76..b29cf355 100644
--- a/mobile/ios/Solstice/Bridge/NativeBackground.swift
+++ b/mobile/ios/Solstice/Bridge/NativeBackground.swift
@@ -18,22 +18,40 @@ import AVFoundation
 // host honors background audio for the guest. If iOS kills the app on backgrounding under
 // LiveContainer, enable background audio / "keep alive" for Solstice in LiveContainer's
 // per-app settings (or run it standalone). See the README "iOS limitations" section.
+//
+// With several characters signed in (ChatPage), one instance serves every page. Each page claims the
+// keep-alive when its character connects and lets go when it disconnects, keyed by the page's
+// WKUserContentController, and the audio only stops once the last claim is gone (Android's prototype
+// does the same with its foreground service).
 final class NativeBackground: NSObject, WKScriptMessageHandlerWithReply {
     private var taskId: UIBackgroundTaskIdentifier = .invalid
     private var player: AVAudioPlayer?
     private var active = false
+    private var claims: Set<ObjectIdentifier> = []
 
     func userContentController(_ userContentController: WKUserContentController,
                               didReceive message: WKScriptMessage,
                               replyHandler: @escaping (Any?, String?) -> Void) {
         guard let call = BridgeCall(message) else { return replyHandler(nil, "bad call") }
+        let claim = ObjectIdentifier(userContentController)
         switch call.method {
-        case "start": start(); replyHandler(nil, nil)
-        case "stop": stop(); replyHandler(nil, nil)
+        case "start":
+            claims.insert(claim)
+            start()
+            replyHandler(nil, nil)
+        case "stop":
+            release(userContentController)
+            replyHandler(nil, nil)
         default: replyHandler(nil, "unknown method \(call.method)")
         }
     }
 
+    /// Drops a page's claim (its character disconnected, or the page was closed).
+    func release(_ userContentController: WKUserContentController) {
+        claims.remove(ObjectIdentifier(userContentController))
+        if claims.isEmpty { stop() }
+    }
+
     private func start() {
         guard !active else { return }
         active = true
diff --git a/mobile/ios/Solstice/Bridge/NativeFile.swift b/mobile/ios/Solstice/Bridge/NativeFile.swift
index b3d4e7ca..d8ee13d5 100644
--- a/mobile/ios/Solstice/Bridge/NativeFile.swift
+++ b/mobile/ios/Solstice/Bridge/NativeFile.swift
@@ -6,7 +6,7 @@ import WebKit
 // "/" as the root and uses names like "!settings", "<character>/<key>" and
 // "<character>/logs/<key>".
 final class NativeFile: NSObject, WKScriptMessageHandlerWithReply {
-    weak var host: WebViewController?
+    weak var host: ChatPage?
     let rootURL: URL
 
     override init() {
@@ -139,7 +139,7 @@ final class NativeFile: NSObject, WKScriptMessageHandlerWithReply {
 
     // Writes a picked import file into app storage and returns its relative name, so the web
     // layer reads it back via getSize/readBytes (the same temp-file flow Android uses) and
-    // deletes it when done. Called by WebViewController's document-picker delegate.
+    // deletes it when done. Called by ChatPage's document-picker delegate.
     func stageImportFile(_ data: Data) -> String? {
         let name = ".import.tmp"
         do {
diff --git a/mobile/ios/Solstice/Bridge/NativeNotification.swift b/mobile/ios/Solstice/Bridge/NativeNotification.swift
index 8eb25b99..47cac021 100644
--- a/mobile/ios/Solstice/Bridge/NativeNotification.swift
+++ b/mobile/ios/Solstice/Bridge/NativeNotification.swift
@@ -8,11 +8,21 @@ import UserNotifications
 // from the bundled www/sounds/<name>.mp3 just like the Android MediaPlayer path.
 //
 // Foreground presentation and notification taps are handled by WebViewController, which is
-// the UNUserNotificationCenterDelegate (it owns the WebView needed to dispatch the
-// `notification-clicked` event back into the web app).
+// the UNUserNotificationCenterDelegate (it brings the character's page to the front and dispatches
+// the `notification-clicked` event into it).
 final class NativeNotification: NSObject, WKScriptMessageHandlerWithReply, AVAudioPlayerDelegate {
     static let notificationIdentifier = "message"
 
+    /// The ChatPage this bridge belongs to; see identifier(for:page:).
+    var pageId = 1
+
+    /// The notification identifier for a conversation. Two characters can both have a PM open with the
+    /// same person, so pages after the first tag their identifiers; the first page keeps the bare
+    /// conversation key it always used. NativeSocket posts and clears with the same identifiers.
+    static func identifier(for key: String, page: Int) -> String {
+        page == 1 ? key : "session\(page):\(key)"
+    }
+
     // AVAudioPlayer stops the moment it is deallocated, so keep players alive until they
     // finish (multiple notification sounds can briefly overlap).
     private var activePlayers: [AVAudioPlayer] = []
@@ -59,11 +69,11 @@ final class NativeNotification: NSObject, WKScriptMessageHandlerWithReply, AVAud
         let content = UNMutableNotificationContent()
         content.title = title
         content.body = text
-        content.userInfo = ["data": data]
+        content.userInfo = ["data": data, "session": pageId]
         // One notification per conversation: the JS layer passes conversation.key as `data`, so reuse it
         // as the identifier (a new message replaces that conversation's banner instead of stacking) and
         // the thread id (Notification Center grouping). Fall back to a constant when no key is given.
-        let key = data.isEmpty ? Self.notificationIdentifier : data
+        let key = Self.identifier(for: data.isEmpty ? Self.notificationIdentifier : data, page: pageId)
         content.threadIdentifier = key
 
         func submit(_ attachments: [UNNotificationAttachment]) {
diff --git a/mobile/ios/Solstice/Bridge/NativeSessions.swift b/mobile/ios/Solstice/Bridge/NativeSessions.swift
new file mode 100644
index 00000000..5b86485a
--- /dev/null
+++ b/mobile/ios/Solstice/Bridge/NativeSessions.swift
@@ -0,0 +1,35 @@
+import WebKit
+
+// The iOS side of mobile/sessions.ts: several characters at once, one ChatPage each. Android's
+// NativeSessions answers synchronously; WKWebView cannot, so bridge.js serves the getters (id, max,
+// state, credentials, ticket) from a copy that WebViewController seeds through the page's boot script
+// and keeps current with window.__solsticeSessionsPush. Only the calls that change something come here.
+final class NativeSessions: NSObject, WKScriptMessageHandlerWithReply {
+    private let pageId: Int
+    private weak var controller: WebViewController?
+
+    init(pageId: Int, controller: WebViewController) {
+        self.pageId = pageId
+        self.controller = controller
+    }
+
+    func userContentController(_ userContentController: WKUserContentController,
+                              didReceive message: WKScriptMessage,
+                              replyHandler: @escaping (Any?, String?) -> Void) {
+        guard let call = BridgeCall(message) else { return replyHandler(nil, "bad call") }
+        guard let controller = controller else { return replyHandler(nil, nil) }
+        switch call.method {
+        case "report": controller.updateState(of: pageId, json: call.string(0)); replyHandler(nil, nil)
+        case "switchTo": controller.activate(call.int(0)); replyHandler(nil, nil)
+        case "add": replyHandler(controller.addPage(), nil)
+        case "close":
+            // A page usually closes itself, so tear it down after this callback rather than inside it.
+            let id = call.int(0)
+            replyHandler(nil, nil)
+            DispatchQueue.main.async { controller.removePage(id) }
+        case "setCredentials": controller.setSharedCredentials(call.string(0), from: pageId); replyHandler(nil, nil)
+        case "setTicket": controller.setSharedTicket(call.string(0), from: pageId); replyHandler(nil, nil)
+        default: replyHandler(nil, "unknown method \(call.method)")
+        }
+    }
+}
diff --git a/mobile/ios/Solstice/Bridge/NativeSocket.swift b/mobile/ios/Solstice/Bridge/NativeSocket.swift
index b856ce49..ca876664 100644
--- a/mobile/ios/Solstice/Bridge/NativeSocket.swift
+++ b/mobile/ios/Solstice/Bridge/NativeSocket.swift
@@ -11,9 +11,12 @@ import AudioToolbox
 // process keeps it alive: we answer PIN natively, and buffer inbound frames while backgrounded so
 // the WebView catches up on foreground. The JS side (mobile/NativeSocketConnection.ts) drives
 // connect/send/close and receives events via window.__nativeSocketEvent, dispatched through the
-// WebViewController's web view.
+// web view of the ChatPage this socket belongs to (one socket per signed-in character).
 final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionWebSocketDelegate {
-    weak var host: WebViewController?
+    weak var host: ChatPage?
+    /// The ChatPage id, so this character's notifications stay apart from the others' and a tap
+    /// brings the right page to the front.
+    var pageId = 1
 
     private var session: URLSession?
     private var task: URLSessionWebSocketTask?
@@ -41,10 +44,13 @@ final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionW
     private var globalWatched: Set<String> = []
     private var channels: [String: ChannelCfg] = [:]
 
-    // One notification per conversation (Discord-style): each conversation key maps to how many unread
-    // messages its single notification represents. Drives the "(N)" title suffix and the app icon badge;
-    // reset per conversation when the user opens it (clearConversation).
-    private var unreadCounts: [String: Int] = [:]
+    // One notification per conversation (Discord-style): each notification identifier (the conversation
+    // key, tagged with the page once several characters are signed in) maps to how many unread messages
+    // its single notification represents. Drives the "(N)" title suffix and the app icon badge; reset per
+    // conversation when the user opens it (clearConversation). Shared by every page's socket, so the
+    // badge counts all characters; main thread only, like the rest of the socket state.
+    private static var unreadCounts: [String: Int] = [:]
+    private var ownIdentifiers: Set<String> = []
     // Rate-limit the notification vibration so a busy notify-all channel can't buzz continuously.
     private var lastVibrateMs = 0
 
@@ -221,8 +227,10 @@ final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionW
         // One notification per conversation: count this message, then reuse the conversation key as the
         // notification identifier so a new message REPLACES that conversation's notification instead of
         // stacking a fresh one. threadIdentifier keeps conversations grouped in Notification Center.
-        let count = (unreadCounts[key] ?? 0) + 1
-        unreadCounts[key] = count
+        let identifier = NativeNotification.identifier(for: key, page: pageId)
+        let count = (Self.unreadCounts[identifier] ?? 0) + 1
+        Self.unreadCounts[identifier] = count
+        ownIdentifiers.insert(identifier)
 
         let content = UNMutableNotificationContent()
         // Surface the unread count once a conversation has more than one waiting message ("Sarah (3)").
@@ -231,10 +239,10 @@ final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionW
         content.body = body
         // The current theme's PM/highlight sound (copied to Library/Sounds), or the system default.
         content.sound = SoundThemes.notificationSound(for: "attention")
-        content.userInfo = ["data": key]
-        content.threadIdentifier = key
-        // App icon badge = total unread messages across all conversations.
-        content.badge = NSNumber(value: unreadCounts.values.reduce(0, +))
+        content.userInfo = ["data": key, "session": pageId]
+        content.threadIdentifier = identifier
+        // App icon badge = total unread messages across all conversations of every character.
+        content.badge = NSNumber(value: Self.unreadCounts.values.reduce(0, +))
 
         // Vibrate. UIFeedbackGenerator only fires while foregrounded, but the audio keep-alive keeps this
         // process alive, so AudioServicesPlaySystemSound can still drive the haptic motor from the
@@ -247,7 +255,7 @@ final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionW
 
         func submit(_ attachments: [UNNotificationAttachment]) {
             content.attachments = attachments
-            let request = UNNotificationRequest(identifier: key, content: content, trigger: nil)
+            let request = UNNotificationRequest(identifier: identifier, content: content, trigger: nil)
             UNUserNotificationCenter.current().add(request, withCompletionHandler: nil)
         }
 
@@ -278,9 +286,16 @@ final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionW
     // delivered notification, reset its unread count, and refresh the app icon badge to the new total.
     private func clearConversation(_ key: String) {
         guard !key.isEmpty else { return }
-        unreadCounts.removeValue(forKey: key)
-        UNUserNotificationCenter.current().removeDeliveredNotifications(withIdentifiers: [key])
-        let total = unreadCounts.values.reduce(0, +)
+        clear([NativeNotification.identifier(for: key, page: pageId)])
+    }
+
+    private func clear(_ identifiers: [String]) {
+        for identifier in identifiers {
+            Self.unreadCounts.removeValue(forKey: identifier)
+            ownIdentifiers.remove(identifier)
+        }
+        UNUserNotificationCenter.current().removeDeliveredNotifications(withIdentifiers: identifiers)
+        let total = Self.unreadCounts.values.reduce(0, +)
         if #available(iOS 16.0, *) {
             UNUserNotificationCenter.current().setBadgeCount(total)
         } else {
@@ -304,6 +319,13 @@ final class NativeSocket: NSObject, WKScriptMessageHandlerWithReply, URLSessionW
         }
     }
 
+    /// The page is going away (its character was logged out from the switcher): close the socket
+    /// without telling the page, and take this character's notifications off the badge.
+    func shutdown() {
+        closeSocket()
+        clear(Array(ownIdentifiers))
+    }
+
     private func closeSocket() {
         task?.cancel(with: .goingAway, reason: nil)
         task = nil
diff --git a/mobile/ios/Solstice/Bridge/NativeView.swift b/mobile/ios/Solstice/Bridge/NativeView.swift
index 89eb6b73..e8de942f 100644
--- a/mobile/ios/Solstice/Bridge/NativeView.swift
+++ b/mobile/ios/Solstice/Bridge/NativeView.swift
@@ -5,9 +5,7 @@ import WebKit
 // setTheme(theme) whenever window.NativeView exists, so the native window background can
 // match the web theme and avoid a flash of the wrong colour during navigation/reload.
 final class NativeView: NSObject, WKScriptMessageHandlerWithReply {
-    weak var host: WebViewController?
-
-    init(host: WebViewController) { self.host = host }
+    weak var host: ChatPage?
 
     func userContentController(_ userContentController: WKUserContentController,
                               didReceive message: WKScriptMessage,
diff --git a/mobile/ios/Solstice/Bridge/bridge.js b/mobile/ios/Solstice/Bridge/bridge.js
index ccdda882..e4e867e2 100644
--- a/mobile/ios/Solstice/Bridge/bridge.js
+++ b/mobile/ios/Solstice/Bridge/bridge.js
@@ -57,4 +57,46 @@
   // Native HTTP for the LAN log sync session (NativeSync.swift). request(method, url, headers,
   // bodyBase64, timeoutMs) resolves to { status, bodyBase64 }, or rejects on a connection failure.
   window.NativeSync = make('nativeSync', ['request']);
+
+  // Several characters at once (mobile/sessions.ts, ChatPage.swift). That module reads this bridge
+  // synchronously, as Android's addJavascriptInterface allows, so the getters answer from a local
+  // copy: WebViewController seeds it in window.__solsticeSessionBoot (a user script that runs just
+  // before this one) and pushes every change through window.__solsticeSessionsPush. Only the calls
+  // that change something go to native, and nothing waits on them.
+  var boot = window.__solsticeSessionBoot;
+  var sessionsHandler = window.webkit && window.webkit.messageHandlers
+    ? window.webkit.messageHandlers.nativeSessions
+    : undefined;
+  if (boot && sessionsHandler) {
+    var cache = { state: boot.state, credentials: boot.credentials || '', ticket: boot.ticket || '' };
+    var post = function (method, args) {
+      sessionsHandler.postMessage({ method: method, args: args }).catch(function () {});
+    };
+    window.NativeSessions = {
+      id: function () { return boot.id; },
+      max: function () { return cache.state.max; },
+      state: function () { return JSON.stringify(cache.state); },
+      report: function (json) { post('report', [json]); },
+      switchTo: function (id) { post('switchTo', [id]); },
+      add: function () {
+        if (cache.state.sessions.length >= cache.state.max) return false;
+        post('add', []);
+        return true;
+      },
+      close: function (id) { post('close', [id]); },
+      setCredentials: function (json) { cache.credentials = json; post('setCredentials', [json]); },
+      getCredentials: function () { return cache.credentials; },
+      setTicket: function (json) { cache.ticket = json; post('setTicket', [json]); },
+      getTicket: function () { return cache.ticket; }
+    };
+    window.__solsticeSessionsPush = function (update) {
+      if (update.credentials !== undefined) cache.credentials = update.credentials;
+      if (update.ticket !== undefined) cache.ticket = update.ticket;
+      if (update.state !== undefined) {
+        cache.state = update.state;
+        // Set by mobile/sessions.ts once the app script has loaded.
+        if (window.__solsticeSessions) window.__solsticeSessions(update.state);
+      }
+    };
+  }
 })();
diff --git a/mobile/ios/Solstice/ChatPage.swift b/mobile/ios/Solstice/ChatPage.swift
new file mode 100644
index 00000000..de2a36f5
--- /dev/null
+++ b/mobile/ios/Solstice/ChatPage.swift
@@ -0,0 +1,272 @@
+import UIKit
+import WebKit
+import UniformTypeIdentifiers
+
+// One character's page: a WKWebView with its own set of native bridges, the iOS side of the
+// multi-character switcher (mobile/sessions.ts). Android's prototype runs one WebView per character
+// the same way, as desktop gives every tab its own page. Because each page has its own bridge
+// instances, per-character native state (the NativeLogs index, the native socket and the frames it
+// buffers in the background) never mixes. WebViewController stacks the pages and keeps the active one
+// on top; the others stay in the window underneath it, so WebKit treats them as visible and their
+// JavaScript keeps running in the foreground, the way a desktop tab in the background does.
+final class ChatPage: NSObject, WKNavigationDelegate, WKUIDelegate, UIDocumentPickerDelegate {
+    let id: Int
+    private(set) var webView: WKWebView!
+    /// The state this page last reported through NativeSessions (character, status, unread counts).
+    var state: [String: Any] = [:]
+    /// The page theme's background, so the window behind it can match while it is in front.
+    private(set) var themeColor = UIColor.black
+    private weak var controller: WebViewController?
+
+    // When the keyboard opens, WKWebView's built-in caret-avoidance programmatically scrolls the
+    // document down (negative contentOffset). Stacked on top of the controller's keyboard frame-resize,
+    // that makes the whole page visibly drop and spring back every time the keyboard appears. The app
+    // is a fixed-height SPA whose lists scroll in inner elements, so the outer scroll view must always
+    // sit at the top; we pin it there. isScrollEnabled / bounces=false do NOT stop this because the
+    // offset is set programmatically, not by a drag. KVO fires synchronously before the next render,
+    // so WebKit's shove never actually paints.
+    private var contentOffsetObservation: NSKeyValueObservation?
+
+    // Native bridges, one set per page. WKUserContentController also retains its message handlers;
+    // tearDown() drops them so a closed page frees its socket and log index.
+    private let nativeFile = NativeFile()
+    private let nativeLogs = NativeLogs()
+    private let nativeNotification = NativeNotification()
+    private let nativeClipboard = NativeClipboard()
+    private let nativeSocket = NativeSocket()
+    private let nativeSync = NativeSync()
+    private let nativeView = NativeView()
+    private let nativeSessions: NativeSessions
+    private let contentController = WKUserContentController()
+
+    // Matches the Android profileRegex: f-list.net profile links are shown in the in-app
+    // profile viewer rather than navigated to.
+    private static let profileRegex = try! NSRegularExpression(
+        pattern: "^https?://(www\\.)?f-list\\.net/c/([^/#]+)/?#?")
+
+    /// `bootScript` runs before bridge.js and hands the page its session id and the shared session
+    /// state, which mobile/sessions.ts reads synchronously as soon as the app script loads.
+    init(id: Int, controller: WebViewController, bootScript: String) {
+        self.id = id
+        self.controller = controller
+        nativeSessions = NativeSessions(pageId: id, controller: controller)
+        super.init()
+
+        let config = WKWebViewConfiguration()
+        config.allowsInlineMediaPlayback = true
+        config.mediaTypesRequiringUserActionForPlayback = []
+
+        let ucc = contentController
+        ucc.addUserScript(WKUserScript(source: bootScript, injectionTime: .atDocumentStart,
+                                       forMainFrameOnly: true))
+        if let bridgeURL = Bundle.main.url(forResource: "bridge", withExtension: "js"),
+           let bridgeJS = try? String(contentsOf: bridgeURL, encoding: .utf8) {
+            ucc.addUserScript(WKUserScript(source: bridgeJS,
+                                           injectionTime: .atDocumentStart,
+                                           forMainFrameOnly: true))
+        }
+        nativeFile.host = self
+        nativeSocket.host = self
+        nativeSocket.pageId = id
+        nativeNotification.pageId = id
+        nativeView.host = self
+        ucc.addScriptMessageHandler(nativeFile, contentWorld: .page, name: "nativeFile")
+        ucc.addScriptMessageHandler(nativeLogs, contentWorld: .page, name: "nativeLogs")
+        ucc.addScriptMessageHandler(nativeNotification, contentWorld: .page, name: "nativeNotification")
+        ucc.addScriptMessageHandler(nativeClipboard, contentWorld: .page, name: "nativeClipboard")
+        // One keep-alive for the whole app, shared by every page: it keeps playing while any
+        // character is connected (see NativeBackground's claims).
+        ucc.addScriptMessageHandler(controller.nativeBackground, contentWorld: .page, name: "nativeBackground")
+        ucc.addScriptMessageHandler(nativeSocket, contentWorld: .page, name: "nativeSocket")
+        ucc.addScriptMessageHandler(nativeSync, contentWorld: .page, name: "nativeSync")
+        ucc.addScriptMessageHandler(nativeView, contentWorld: .page, name: "nativeView")
+        ucc.addScriptMessageHandler(nativeSessions, contentWorld: .page, name: "nativeSessions")
+        config.userContentController = ucc
+
+        let webView = WKWebView(frame: .zero, configuration: config)
+        webView.navigationDelegate = self
+        webView.uiDelegate = self
+        webView.allowsBackForwardNavigationGestures = false
+        webView.scrollView.contentInsetAdjustmentBehavior = .never
+        webView.scrollView.bounces = false
+        webView.isOpaque = false
+        webView.backgroundColor = themeColor
+        // Debug builds only: don't expose the WebView to Safari Web Inspector in shipped/Release
+        // builds (CI builds -configuration Release, where DEBUG is undefined).
+        #if DEBUG
+        if #available(iOS 16.4, *) { webView.isInspectable = true }
+        #endif
+        webView.translatesAutoresizingMaskIntoConstraints = false
+        self.webView = webView
+
+        contentOffsetObservation = webView.scrollView.observe(\.contentOffset, options: [.new]) { scrollView, _ in
+            if scrollView.contentOffset.y != 0 { scrollView.contentOffset.y = 0 }
+        }
+    }
+
+    func load() {
+        if let indexURL = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www") {
+            webView.loadFileURL(indexURL, allowingReadAccessTo: indexURL.deletingLastPathComponent())
+        }
+    }
+
+    /// Only the page in front takes touches and is read by VoiceOver; the ones under it stay live.
+    func setActive(_ active: Bool) {
+        webView.isUserInteractionEnabled = active
+        webView.accessibilityElementsHidden = !active
+    }
+
+    /// The character was logged out from the switcher: close its socket (it is native, so it would
+    /// otherwise outlive the page), give up its keep-alive claim and free its bridges.
+    func tearDown() {
+        nativeSocket.shutdown()
+        controller?.nativeBackground.release(contentController)
+        contentOffsetObservation = nil
+        contentController.removeAllScriptMessageHandlers()
+        contentController.removeAllUserScripts()
+        webView.stopLoading()
+        webView.removeFromSuperview()
+    }
+
+    // MARK: - Theme (NativeView)
+
+    func applyTheme(_ theme: String) {
+        themeColor = (theme == "light")
+            ? .white
+            : UIColor(red: 0.15, green: 0.15, blue: 0.16, alpha: 1)
+        webView.backgroundColor = themeColor
+        webView.scrollView.backgroundColor = themeColor
+        controller?.pageDidChangeTheme(self)
+    }
+
+    // MARK: - JS dispatch
+
+    /// Run JS in this page from any thread (hops to the main thread). Used by NativeSocket to push
+    /// socket events and by the controller to push session state.
+    func evalJS(_ js: String) {
+        DispatchQueue.main.async { [weak self] in
+            self?.webView?.evaluateJavaScript(js, completionHandler: nil)
+        }
+    }
+
+    // MARK: - WKNavigationDelegate
+
+    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction,
+                 decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
+        guard let url = navigationAction.request.url else { return decisionHandler(.allow) }
+        if url.isFileURL || url.scheme == "about" { return decisionHandler(.allow) }
+
+        let urlString = url.absoluteString
+        let range = NSRange(urlString.startIndex..., in: urlString)
+        if let match = Self.profileRegex.firstMatch(in: urlString, options: [], range: range),
+           let charRange = Range(match.range(at: 2), in: urlString) {
+            let name = String(urlString[charRange]).removingPercentEncoding ?? String(urlString[charRange])
+            webView.evaluateJavaScript(
+                "document.dispatchEvent(new CustomEvent('open-profile',{detail:\(WebViewController.jsString(name))}))")
+            return decisionHandler(.cancel)
+        }
+
+        if url.scheme == "profile", let authority = url.host,
+           let ext = URL(string: "https://www.f-list.net/c/\(authority)") {
+            UIApplication.shared.open(ext)
+            return decisionHandler(.cancel)
+        }
+        if url.scheme == "http" || url.scheme == "https" {
+            UIApplication.shared.open(url)
+            return decisionHandler(.cancel)
+        }
+        decisionHandler(.cancel)
+    }
+
+    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+        // Android calls this from onPageFinished; bridge globals were already installed at
+        // document-start, so we only need to announce the platform here.
+        webView.evaluateJavaScript("window.setupPlatform && window.setupPlatform('ios')")
+        // Drop the keyboard "‹ › Done" accessory bar (the WKContentView exists by now).
+        webView.hideInputAccessoryBar()
+        // The boot script carried the session state as it was when this page was created; anything
+        // pushed while it loaded went to the previous document, so send the current state now.
+        controller?.pageDidLoad(self)
+    }
+
+    // MARK: - WKUIDelegate (the web app uses alert()/confirm())
+
+    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String,
+                 initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
+        guard let presenter = controller?.topPresenter() else { return completionHandler() }
+        let alert = UIAlertController(title: "Solstice", message: message, preferredStyle: .alert)
+        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in completionHandler() })
+        presenter.present(alert, animated: true)
+    }
+
+    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String,
+                 initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
+        guard let presenter = controller?.topPresenter() else { return completionHandler(false) }
+        let alert = UIAlertController(title: "Solstice", message: message, preferredStyle: .alert)
+        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in completionHandler(false) })
+        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in completionHandler(true) })
+        presenter.present(alert, animated: true)
+    }
+
+    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String,
+                 defaultText: String?, initiatedByFrame frame: WKFrameInfo,
+                 completionHandler: @escaping (String?) -> Void) {
+        guard let presenter = controller?.topPresenter() else { return completionHandler(nil) }
+        let alert = UIAlertController(title: "Solstice", message: prompt, preferredStyle: .alert)
+        alert.addTextField { $0.text = defaultText }
+        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in completionHandler(nil) })
+        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
+            completionHandler(alert.textFields?.first?.text)
+        })
+        presenter.present(alert, animated: true)
+    }
+
+    // The Device Sync QR scanner opens the camera via getUserMedia. Grant so WebKit shows its own
+    // camera prompt (backed by NSCameraUsageDescription in Info.plist); the camera is used nowhere else.
+    @available(iOS 15.0, *)
+    func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin,
+                 initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType,
+                 decisionHandler: @escaping (WKPermissionDecision) -> Void) {
+        decisionHandler(.grant)
+    }
+
+    // MARK: - Export / Import (called by NativeFile)
+
+    func presentShareSheet(fileURL: URL) {
+        guard let controller = controller else { return }
+        let activity = UIActivityViewController(activityItems: [fileURL], applicationActivities: nil)
+        activity.popoverPresentationController?.sourceView = controller.view
+        activity.popoverPresentationController?.sourceRect =
+            CGRect(x: controller.view.bounds.midX, y: controller.view.bounds.midY, width: 0, height: 0)
+        controller.topPresenter().present(activity, animated: true)
+    }
+
+    func presentImportPicker() {
+        guard let controller = controller else { return deliverImport(nil, nil) }
+        let picker = UIDocumentPickerViewController(forOpeningContentTypes: [UTType.zip])
+        picker.delegate = self
+        picker.allowsMultipleSelection = false
+        controller.topPresenter().present(picker, animated: true)
+    }
+
+    func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
+        guard let url = urls.first else { return deliverImport(nil, nil) }
+        let accessed = url.startAccessingSecurityScopedResource()
+        defer { if accessed { url.stopAccessingSecurityScopedResource() } }
+        deliverImport(try? Data(contentsOf: url), url.lastPathComponent)
+    }
+
+    func documentPickerWasCancelled(_ controller: UIDocumentPickerViewController) {
+        deliverImport(nil, nil)
+    }
+
+    private func deliverImport(_ data: Data?, _ name: String?) {
+        // Match the Android import flow: stage the picked file into app storage and hand the
+        // web layer a temp filename (it reads it back in chunks via NativeFile.readBytes),
+        // rather than passing the whole file as one giant base64 string.
+        let tmpName = data.flatMap { nativeFile.stageImportFile($0) }
+        let tmpArg = tmpName.map { WebViewController.jsString($0) } ?? "null"
+        let nameArg = (tmpName != nil ? name : nil).map { WebViewController.jsString($0) } ?? "null"
+        webView.evaluateJavaScript("window.__mobileFilePicker && window.__mobileFilePicker(\(tmpArg),\(nameArg))")
+    }
+}
diff --git a/mobile/ios/Solstice/WebViewController.swift b/mobile/ios/Solstice/WebViewController.swift
index 77859288..76b6472f 100644
--- a/mobile/ios/Solstice/WebViewController.swift
+++ b/mobile/ios/Solstice/WebViewController.swift
@@ -1,41 +1,35 @@
 import UIKit
 import WebKit
 import UserNotifications
-import UniformTypeIdentifiers
 
-// The iOS analogue of Android's MainActivity: hosts the WKWebView, wires up the native
-// bridges, intercepts profile links, drives the keyboard inset, bridges JS dialogs, and
-// routes notification presentation/taps back into the web app.
-final class WebViewController: UIViewController, WKNavigationDelegate, WKUIDelegate,
-                               UNUserNotificationCenterDelegate, UIDocumentPickerDelegate {
-
-    private(set) var webView: WKWebView!
+// The iOS analogue of Android's MainActivity. It hosts one ChatPage (a WKWebView with its own native
+// bridges) per signed-in character, up to maxSessions, stacked in one container with the active page
+// on top. It owns what the pages share: the keyboard inset, the notification delegate (a tap brings
+// the character it was for to the front), the background keep-alive, and the session state that
+// mobile/sessions.ts reads (each page's reported character, status and unread counts, plus the
+// account credentials and the API ticket, since F-List cancels an account's older tickets whenever it
+// issues a new one).
+//
+// The keyboard slide: two mechanisms stack. keyboardWillChange below animates the page container
+// above the keyboard, and each ChatPage pins its scroll view's contentOffset to 0 so WebKit's own
+// caret-avoidance shove never paints (see the comment on ChatPage.contentOffsetObservation).
+final class WebViewController: UIViewController, UNUserNotificationCenterDelegate {
+
+    static let maxSessions = 3
+
+    /// Shared by every page; keeps playing while any of them holds a claim.
+    let nativeBackground = NativeBackground()
+
+    private let pageContainer = UIView()
     private var bottomConstraint: NSLayoutConstraint!
+    private var pages: [ChatPage] = []
+    private var nextPageId = 1
+    private var activeId = 0
+    /// JSON strings as mobile/sessions.ts writes them ("" until a page logs in).
+    private var sharedCredentials = ""
+    private var sharedTicket = ""
 
-    // When the keyboard opens, WKWebView's built-in caret-avoidance programmatically scrolls the
-    // document down (negative contentOffset). Stacked on top of our own keyboard frame-resize below,
-    // that makes the whole page visibly drop and spring back every time the keyboard appears. The app
-    // is a fixed-height SPA whose lists scroll in inner elements, so the outer scroll view must always
-    // sit at the top; we pin it there. isScrollEnabled / bounces=false do NOT stop this because the
-    // offset is set programmatically, not by a drag. KVO fires synchronously before the next render,
-    // so WebKit's shove never actually paints.
-    private var contentOffsetObservation: NSKeyValueObservation?
-
-    // Native bridges. Retained here for clarity even though WKUserContentController also
-    // retains its message handlers.
-    private let nativeFile = NativeFile()
-    private let nativeLogs = NativeLogs()
-    private let nativeNotification = NativeNotification()
-    private let nativeClipboard = NativeClipboard()
-    private let nativeBackground = NativeBackground()
-    private let nativeSocket = NativeSocket()
-    private let nativeSync = NativeSync()
-    private lazy var nativeView = NativeView(host: self)
-
-    // Matches the Android profileRegex — f-list.net profile links are shown in the in-app
-    // profile viewer rather than navigated to.
-    private let profileRegex = try! NSRegularExpression(
-        pattern: "^https?://(www\\.)?f-list\\.net/c/([^/#]+)/?#?")
+    private var activePage: ChatPage? { pages.first { $0.id == activeId } ?? pages.first }
 
     // MARK: - Setup
 
@@ -43,62 +37,18 @@ final class WebViewController: UIViewController, WKNavigationDelegate, WKUIDeleg
         view = UIView()
         view.backgroundColor = .black
 
-        let config = WKWebViewConfiguration()
-        config.allowsInlineMediaPlayback = true
-        config.mediaTypesRequiringUserActionForPlayback = []
-
-        let ucc = WKUserContentController()
-        if let bridgeURL = Bundle.main.url(forResource: "bridge", withExtension: "js"),
-           let bridgeJS = try? String(contentsOf: bridgeURL, encoding: .utf8) {
-            ucc.addUserScript(WKUserScript(source: bridgeJS,
-                                           injectionTime: .atDocumentStart,
-                                           forMainFrameOnly: true))
-        }
-        nativeFile.host = self
-        ucc.addScriptMessageHandler(nativeFile, contentWorld: .page, name: "nativeFile")
-        ucc.addScriptMessageHandler(nativeLogs, contentWorld: .page, name: "nativeLogs")
-        ucc.addScriptMessageHandler(nativeNotification, contentWorld: .page, name: "nativeNotification")
-        ucc.addScriptMessageHandler(nativeClipboard, contentWorld: .page, name: "nativeClipboard")
-        ucc.addScriptMessageHandler(nativeBackground, contentWorld: .page, name: "nativeBackground")
-        nativeSocket.host = self
-        ucc.addScriptMessageHandler(nativeSocket, contentWorld: .page, name: "nativeSocket")
-        ucc.addScriptMessageHandler(nativeSync, contentWorld: .page, name: "nativeSync")
-        ucc.addScriptMessageHandler(nativeView, contentWorld: .page, name: "nativeView")
-        config.userContentController = ucc
-
-        let webView = WKWebView(frame: .zero, configuration: config)
-        webView.navigationDelegate = self
-        webView.uiDelegate = self
-        webView.allowsBackForwardNavigationGestures = false
-        webView.scrollView.contentInsetAdjustmentBehavior = .never
-        webView.scrollView.bounces = false
-        webView.isOpaque = false
-        webView.backgroundColor = .black
-        // Debug builds only: don't expose the WebView to Safari Web Inspector in shipped/Release
-        // builds (CI builds -configuration Release, where DEBUG is undefined).
-        #if DEBUG
-        if #available(iOS 16.4, *) { webView.isInspectable = true }
-        #endif
-        webView.translatesAutoresizingMaskIntoConstraints = false
-        view.addSubview(webView)
-
         // Edge-to-edge so CSS env(safe-area-inset-*) resolves; the bottom constraint is
         // adjusted when the keyboard appears (Android does an equivalent manual resize).
-        bottomConstraint = webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
+        pageContainer.translatesAutoresizingMaskIntoConstraints = false
+        pageContainer.backgroundColor = .clear
+        view.addSubview(pageContainer)
+        bottomConstraint = pageContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor)
         NSLayoutConstraint.activate([
-            webView.topAnchor.constraint(equalTo: view.topAnchor),
-            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
-            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            pageContainer.topAnchor.constraint(equalTo: view.topAnchor),
+            pageContainer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            pageContainer.trailingAnchor.constraint(equalTo: view.trailingAnchor),
             bottomConstraint
         ])
-        self.webView = webView
-
-        // Keep the outer document offset pinned to the top (see contentOffsetObservation above). The
-        // observer resets the offset synchronously, so the keyboard's caret-avoidance scroll is
-        // cancelled before it can paint, eliminating the page slide.
-        contentOffsetObservation = webView.scrollView.observe(\.contentOffset, options: [.new]) { scrollView, _ in
-            if scrollView.contentOffset.y != 0 { scrollView.contentOffset.y = 0 }
-        }
     }
 
     override func viewDidLoad() {
@@ -112,110 +62,127 @@ final class WebViewController: UIViewController, WKNavigationDelegate, WKUIDeleg
             self, selector: #selector(keyboardWillChange(_:)),
             name: UIResponder.keyboardWillHideNotification, object: nil)
 
-        if let indexURL = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www") {
-            webView.loadFileURL(indexURL, allowingReadAccessTo: indexURL.deletingLastPathComponent())
-        }
+        addPage()
     }
 
     deinit { NotificationCenter.default.removeObserver(self) }
 
-    // MARK: - Theme (NativeView)
+    // MARK: - Sessions (NativeSessions)
+
+    /// Opens a page for another character and brings it to the front. False when all are in use.
+    @discardableResult
+    func addPage() -> Bool {
+        guard pages.count < Self.maxSessions else { return false }
+        let id = nextPageId
+        nextPageId += 1
+        // The new page is already in the snapshot it boots with, so it sees itself straight away.
+        var entries = sessionEntries()
+        entries.append(["id": id])
+        let page = ChatPage(id: id, controller: self, bootScript: bootScript(id: id, entries: entries))
+        pages.append(page)
+        let pageView: UIView = page.webView
+        pageContainer.addSubview(pageView)
+        NSLayoutConstraint.activate([
+            pageView.topAnchor.constraint(equalTo: pageContainer.topAnchor),
+            pageView.bottomAnchor.constraint(equalTo: pageContainer.bottomAnchor),
+            pageView.leadingAnchor.constraint(equalTo: pageContainer.leadingAnchor),
+            pageView.trailingAnchor.constraint(equalTo: pageContainer.trailingAnchor)
+        ])
+        page.load()
+        activate(id)
+        return true
+    }
 
-    func applyTheme(_ theme: String) {
-        let color: UIColor = (theme == "light")
-            ? .white
-            : UIColor(red: 0.15, green: 0.15, blue: 0.16, alpha: 1)
-        view.backgroundColor = color
-        webView.backgroundColor = color
-        webView.scrollView.backgroundColor = color
+    /// Logs a character out of the switcher: its page goes, and the first remaining one comes forward.
+    func removePage(_ id: Int) {
+        guard pages.count > 1, let index = pages.firstIndex(where: { $0.id == id }) else { return }
+        let page = pages.remove(at: index)
+        page.tearDown()
+        if activeId == id { activate(pages[0].id) } else { broadcast() }
     }
 
-    // MARK: - Keyboard
+    func activate(_ id: Int) {
+        guard let page = pages.first(where: { $0.id == id }) else { return }
+        // Drop the keyboard first, or it stays attached to the page going under and types into it.
+        view.endEditing(true)
+        activeId = id
+        pageContainer.bringSubviewToFront(page.webView)
+        for other in pages { other.setActive(other.id == id) }
+        view.backgroundColor = page.themeColor
+        broadcast()
+    }
 
-    @objc private func keyboardWillChange(_ note: Notification) {
-        guard let end = (note.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue
-        else { return }
-        let isHiding = note.name == UIResponder.keyboardWillHideNotification
-        let converted = view.convert(end, from: nil)
-        let overlap = isHiding ? 0 : max(0, view.bounds.maxY - converted.minY)
-        bottomConstraint.constant = -overlap
-        let duration = (note.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double) ?? 0.25
-        UIView.animate(withDuration: duration) { self.view.layoutIfNeeded() }
+    func updateState(of id: Int, json: String) {
+        guard let page = pages.first(where: { $0.id == id }) else { return }
+        let parsed = json.data(using: .utf8).flatMap { try? JSONSerialization.jsonObject(with: $0) }
+        page.state = (parsed as? [String: Any]) ?? [:]
+        broadcast()
     }
 
-    // MARK: - WKNavigationDelegate
-
-    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction,
-                 decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
-        guard let url = navigationAction.request.url else { return decisionHandler(.allow) }
-        if url.isFileURL || url.scheme == "about" { return decisionHandler(.allow) }
-
-        let urlString = url.absoluteString
-        let range = NSRange(urlString.startIndex..., in: urlString)
-        if let match = profileRegex.firstMatch(in: urlString, options: [], range: range),
-           let charRange = Range(match.range(at: 2), in: urlString) {
-            let name = String(urlString[charRange]).removingPercentEncoding ?? String(urlString[charRange])
-            webView.evaluateJavaScript(
-                "document.dispatchEvent(new CustomEvent('open-profile',{detail:\(Self.jsString(name))}))")
-            return decisionHandler(.cancel)
-        }
+    func setSharedCredentials(_ json: String, from id: Int) {
+        sharedCredentials = json
+        push("{credentials:\(Self.jsString(json))}", except: id)
+    }
 
-        if url.scheme == "profile", let authority = url.host,
-           let ext = URL(string: "https://www.f-list.net/c/\(authority)") {
-            UIApplication.shared.open(ext)
-            return decisionHandler(.cancel)
-        }
-        if url.scheme == "http" || url.scheme == "https" {
-            UIApplication.shared.open(url)
-            return decisionHandler(.cancel)
+    func setSharedTicket(_ json: String, from id: Int) {
+        sharedTicket = json
+        push("{ticket:\(Self.jsString(json))}", except: id)
+    }
+
+    func pageDidLoad(_ page: ChatPage) {
+        page.evalJS(pushJS("{state:\(snapshotJSON(sessionEntries())),credentials:\(Self.jsString(sharedCredentials))," +
+                           "ticket:\(Self.jsString(sharedTicket))}"))
+    }
+
+    func pageDidChangeTheme(_ page: ChatPage) {
+        if page.id == activeId { view.backgroundColor = page.themeColor }
+    }
+
+    private func sessionEntries() -> [[String: Any]] {
+        pages.map { page in
+            var entry = page.state
+            entry["id"] = page.id
+            return entry
         }
-        decisionHandler(.cancel)
     }
 
-    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
-        // Android calls this from onPageFinished; bridge globals were already installed at
-        // document-start, so we only need to announce the platform here.
-        webView.evaluateJavaScript("window.setupPlatform && window.setupPlatform('ios')")
-        // Drop the keyboard "‹ › Done" accessory bar (the WKContentView exists by now).
-        webView.hideInputAccessoryBar()
+    // The shape mobile/sessions.ts applies: {active, max, sessions: [{id, character, unread, ...}]}.
+    private func snapshotJSON(_ entries: [[String: Any]]) -> String {
+        let snapshot: [String: Any] = ["active": activeId, "max": Self.maxSessions, "sessions": entries]
+        guard let data = try? JSONSerialization.data(withJSONObject: snapshot),
+              let json = String(data: data, encoding: .utf8) else { return "{\"active\":0,\"max\":3,\"sessions\":[]}" }
+        return json
     }
 
-    // MARK: - WKUIDelegate (the web app uses alert()/confirm())
+    private func bootScript(id: Int, entries: [[String: Any]]) -> String {
+        "window.__solsticeSessionBoot={id:\(id),state:\(snapshotJSON(entries))," +
+            "credentials:\(Self.jsString(sharedCredentials)),ticket:\(Self.jsString(sharedTicket))};"
+    }
 
-    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String,
-                 initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
-        let alert = UIAlertController(title: "Solstice", message: message, preferredStyle: .alert)
-        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in completionHandler() })
-        topPresenter().present(alert, animated: true)
+    private func pushJS(_ update: String) -> String {
+        "window.__solsticeSessionsPush && window.__solsticeSessionsPush(\(update))"
     }
 
-    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String,
-                 initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
-        let alert = UIAlertController(title: "Solstice", message: message, preferredStyle: .alert)
-        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in completionHandler(false) })
-        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in completionHandler(true) })
-        topPresenter().present(alert, animated: true)
+    private func push(_ update: String, except id: Int? = nil) {
+        let js = pushJS(update)
+        for page in pages where page.id != id { page.evalJS(js) }
     }
 
-    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String,
-                 defaultText: String?, initiatedByFrame frame: WKFrameInfo,
-                 completionHandler: @escaping (String?) -> Void) {
-        let alert = UIAlertController(title: "Solstice", message: prompt, preferredStyle: .alert)
-        alert.addTextField { $0.text = defaultText }
-        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in completionHandler(nil) })
-        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
-            completionHandler(alert.textFields?.first?.text)
-        })
-        topPresenter().present(alert, animated: true)
+    private func broadcast() {
+        push("{state:\(snapshotJSON(sessionEntries()))}")
     }
 
-    // The Device Sync QR scanner opens the camera via getUserMedia. Grant so WebKit shows its own
-    // camera prompt (backed by NSCameraUsageDescription in Info.plist); the camera is used nowhere else.
-    @available(iOS 15.0, *)
-    func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin,
-                 initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType,
-                 decisionHandler: @escaping (WKPermissionDecision) -> Void) {
-        decisionHandler(.grant)
+    // MARK: - Keyboard
+
+    @objc private func keyboardWillChange(_ note: Notification) {
+        guard let end = (note.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue
+        else { return }
+        let isHiding = note.name == UIResponder.keyboardWillHideNotification
+        let converted = view.convert(end, from: nil)
+        let overlap = isHiding ? 0 : max(0, view.bounds.maxY - converted.minY)
+        bottomConstraint.constant = -overlap
+        let duration = (note.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double) ?? 0.25
+        UIView.animate(withDuration: duration) { self.view.layoutIfNeeded() }
     }
 
     // MARK: - Notifications (UNUserNotificationCenterDelegate)
@@ -228,53 +195,22 @@ final class WebViewController: UIViewController, WKNavigationDelegate, WKUIDeleg
 
     func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse,
                                 withCompletionHandler completionHandler: @escaping () -> Void) {
-        let data = response.notification.request.content.userInfo["data"] as? String ?? ""
-        webView.evaluateJavaScript(
+        let info = response.notification.request.content.userInfo
+        let data = info["data"] as? String ?? ""
+        // Bring the character the notification was for to the front, then let its page open the
+        // conversation. Notifications from before this field existed go to the page in front.
+        if let session = (info["session"] as? NSNumber)?.intValue, session != activeId,
+           pages.contains(where: { $0.id == session }) {
+            activate(session)
+        }
+        activePage?.webView.evaluateJavaScript(
             "document.dispatchEvent(new CustomEvent('notification-clicked',{detail:{data:\(Self.jsString(data))}}))")
         completionHandler()
     }
 
-    // MARK: - Export / Import (called by NativeFile)
-
-    func presentShareSheet(fileURL: URL) {
-        let activity = UIActivityViewController(activityItems: [fileURL], applicationActivities: nil)
-        activity.popoverPresentationController?.sourceView = view
-        activity.popoverPresentationController?.sourceRect =
-            CGRect(x: view.bounds.midX, y: view.bounds.midY, width: 0, height: 0)
-        topPresenter().present(activity, animated: true)
-    }
-
-    func presentImportPicker() {
-        let picker = UIDocumentPickerViewController(forOpeningContentTypes: [UTType.zip])
-        picker.delegate = self
-        picker.allowsMultipleSelection = false
-        topPresenter().present(picker, animated: true)
-    }
-
-    func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
-        guard let url = urls.first else { return deliverImport(nil, nil) }
-        let accessed = url.startAccessingSecurityScopedResource()
-        defer { if accessed { url.stopAccessingSecurityScopedResource() } }
-        deliverImport(try? Data(contentsOf: url), url.lastPathComponent)
-    }
-
-    func documentPickerWasCancelled(_ controller: UIDocumentPickerViewController) {
-        deliverImport(nil, nil)
-    }
-
-    private func deliverImport(_ data: Data?, _ name: String?) {
-        // Match the Android import flow: stage the picked file into app storage and hand the
-        // web layer a temp filename (it reads it back in chunks via NativeFile.readBytes),
-        // rather than passing the whole file as one giant base64 string.
-        let tmpName = data.flatMap { nativeFile.stageImportFile($0) }
-        let tmpArg = tmpName.map { Self.jsString($0) } ?? "null"
-        let nameArg = (tmpName != nil ? name : nil).map { Self.jsString($0) } ?? "null"
-        webView.evaluateJavaScript("window.__mobileFilePicker && window.__mobileFilePicker(\(tmpArg),\(nameArg))")
-    }
-
     // MARK: - Helpers
 
-    private func topPresenter() -> UIViewController {
+    func topPresenter() -> UIViewController {
         var presenter: UIViewController = self
         while let next = presenter.presentedViewController { presenter = next }
         return presenter
@@ -288,12 +224,4 @@ final class WebViewController: UIViewController, WKNavigationDelegate, WKUIDeleg
         json.removeLast()   // drop trailing ]
         return json
     }
-
-    /// Run JS in the web view from any thread (hops to the main thread). Used by NativeSocket to
-    /// push socket events to the page.
-    func evalJS(_ js: String) {
-        DispatchQueue.main.async { [weak self] in
-            self?.webView?.evaluateJavaScript(js, completionHandler: nil)
-        }
-    }
 }
diff --git a/mobile/sessions.ts b/mobile/sessions.ts
index 27d7263f..ab93d8e1 100644
--- a/mobile/sessions.ts
+++ b/mobile/sessions.ts
@@ -1,7 +1,8 @@
 import Vue from 'vue';
 
-// Prototype: several characters at once. The native host (MainActivity on Android) runs one WebView
-// per character, like desktop runs one page per tab, and exposes NativeSessions to each of them. This
+// Prototype: several characters at once. The native host (MainActivity on Android, WebViewController
+// and ChatPage on iOS) runs one WebView per character, like desktop runs one page per tab, and exposes
+// NativeSessions to each of them; iOS serves the synchronous getters from a copy kept in bridge.js. This
 // module is the page's side of that: it reports this character's state, keeps a reactive copy of every
 // session's, and wraps the calls that switch, add and close sessions. Which switcher UI is drawn is
 // chosen at build time (SWITCHER_DESIGN), so the three prototype builds differ only in this flag.