fix(mobile): show the renamed session name on Android cross-device cards

src/components/hosts/RemoteDeviceSessions.tsx

@@ -10,6 +10,7 @@ import { getJoinableSessions, joinRemoteSession, killRemoteSession } from "@/ser
 import { usePendingKills } from "@/hooks/usePendingKills";
 import { AvatarTile } from "@/components/shared/AvatarTile";
 import { BaseCard } from "@/components/shared/BaseCard";
+import { sessionLabel } from "@/utils/sessionLabel";
 
 const KILL_WINDOW_MS = 5000;
 
@@ -111,7 +112,7 @@ export function RemoteDeviceSessions() {
                 </div>
               ) : isFailed ? (
                 <div className="flex-1 min-w-0 self-stretch flex flex-col gap-2">
-                  <p className="text-[11px] truncate text-(--t-text-bright)">{a.title || a.connectionName}</p>
+                  <p className="text-[11px] truncate text-(--t-text-bright)">{sessionLabel(a)}</p>
                   <p className="text-[11px] text-(--t-status-error)">{t("hosts.remoteSessions.killFailed")}</p>
                   <button
                     onClick={(e) => { e.stopPropagation(); setFailedIds((prev) => { const n = new Set(prev); n.delete(a.sessionId); return n; }); }}
@@ -131,7 +132,7 @@ export function RemoteDeviceSessions() {
                     iconClassName={joiningId === a.sessionId ? "animate-spin" : undefined}
                   />
                   <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                    <p className="text-sm font-bold truncate text-(--t-text-bright)">{a.title || a.connectionName}</p>
+                    <p className="text-sm font-bold truncate text-(--t-text-bright)">{sessionLabel(a)}</p>
                     <p className="text-[11px] truncate text-(--t-text-dim)">
                       {a.deviceName} · active {relativeAge(a.openedAt)}
                     </p>

src/components/mobile/MobileRemoteDeviceSessions.test.tsx

@@ -0,0 +1,54 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+
+const getJoinableSessions = vi.fn();
+
+vi.mock("@/services/crossDeviceSessions", () => ({
+  getJoinableSessions: () => getJoinableSessions(),
+  joinRemoteSession: vi.fn(),
+}));
+vi.mock("@/stores/toggleSettingsStore", () => ({ useToggle: () => [true] }));
+vi.mock("@/stores/crossDeviceSessionsStore", () => ({
+  useCrossDeviceSessionsStore: (sel: (s: unknown) => unknown) => sel({ manifests: {} }),
+}));
+vi.mock("@/stores/sessionStore", () => ({
+  useSessionStore: (sel: (s: unknown) => unknown) => sel({ sessions: [] }),
+}));
+vi.mock("@/stores/connectionStore", () => ({
+  useConnectionStore: (sel: (s: unknown) => unknown) => sel({ connections: [] }),
+}));
+vi.mock("@/stores/mobileNavStore", () => ({
+  useMobileNavStore: (sel: (s: unknown) => unknown) => sel({ setTab: vi.fn() }),
+}));
+vi.mock("react-i18next", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));
+vi.mock("@/i18n", () => ({ default: { t: (k: string) => k } }));
+vi.mock("@iconify/react", () => ({ Icon: () => null }));
+
+import MobileRemoteDeviceSessions from "./MobileRemoteDeviceSessions";
+
+const card = {
+  sessionId: "s1",
+  connectionId: "c1",
+  connectionName: "web",
+  deviceId: "d",
+  deviceName: "D",
+  openedAt: new Date().toISOString(),
+};
+
+beforeEach(() => { vi.clearAllMocks(); });
+afterEach(() => { cleanup(); });
+
+describe("MobileRemoteDeviceSessions label", () => {
+  it("shows the renamed session title", () => {
+    getJoinableSessions.mockReturnValue([{ ...card, title: "deploy box" }]);
+    render(<MobileRemoteDeviceSessions />);
+    expect(screen.getByText("deploy box")).toBeTruthy();
+    expect(screen.queryByText("web")).toBeNull();
+  });
+
+  it("falls back to the connection name", () => {
+    getJoinableSessions.mockReturnValue([card]);
+    render(<MobileRemoteDeviceSessions />);
+    expect(screen.getByText("web")).toBeTruthy();
+  });
+});

src/components/mobile/MobileRemoteDeviceSessions.tsx

@@ -8,6 +8,7 @@ import { useConnectionStore } from "@/stores/connectionStore";
 import { useToggle } from "@/stores/toggleSettingsStore";
 import { useMobileNavStore } from "@/stores/mobileNavStore";
 import { getJoinableSessions, joinRemoteSession } from "@/services/crossDeviceSessions";
+import { sessionLabel } from "@/utils/sessionLabel";
 
 function relativeAge(iso: string): string {
   const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60_000);
@@ -65,7 +66,7 @@ export default function MobileRemoteDeviceSessions() {
               />
             </span>
             <span className="flex flex-col gap-0.5 min-w-0">
-              <span className="text-sm font-semibold truncate text-(--t-text-primary)">{a.connectionName}</span>
+              <span className="text-sm font-semibold truncate text-(--t-text-primary)">{sessionLabel(a)}</span>
               <span className="text-[11px] truncate text-(--t-text-dim)">
                 {a.deviceName} · {relativeAge(a.openedAt)}
               </span>