+
+
+`;
diff --git a/packages/shared-components/src/core/FacePile/FacePileView.stories.tsx b/packages/shared-components/src/core/FacePile/FacePileView.stories.tsx
new file mode 100644
index 00000000000..962bc131b84
--- /dev/null
+++ b/packages/shared-components/src/core/FacePile/FacePileView.stories.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type FacePileViewSnapshot, FacePileView } from "./FacePileView";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+import profileLink1 from "../../../static/profile-pics/profile1.png";
+import profileLink2 from "../../../static/profile-pics/profile2.png";
+import profileLink3 from "../../../static/profile-pics/profile3.png";
+import { MockViewModel, useMockedViewModel } from "../viewmodel";
+import { type MemberAvatarViewSnapshot } from "../MemberAvatar/MemberAvatarView";
+
+const FacePileViewWrapperImpl = (snapshot: FacePileViewSnapshot): React.ReactNode => {
+ const vm = useMockedViewModel(snapshot, {});
+ return
+ (
+ );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Icon/Icon.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Icon/Icon.tsx
new file mode 100644
index 00000000000..a5b59213cb8
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Icon/Icon.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentType, type SVGAttributes } from "react";
+import { VideoCallSolidIcon, VoiceCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { CallType } from "../../../common";
+
+interface Props extends SVGAttributes
+ {_t("timeline|call_tile|ongoing|common|call_started_by", {
+ startedByDisplayName: snapshot.startedByDisplayName,
+ })}
+
+
+ );
+}
+
+function OutgoingCallContent({ snapshot }: { snapshot: DmOngoingCallTileViewSnapshot }): React.ReactNode {
+ const { translate: _t } = useI18n();
+ return (
+ <>
+ {_t("timeline|call_tile|ongoing|dm|call_started")}
+
+ );
+}
+
+function CallJoinedContent({ snapshot }: { snapshot: DmOngoingCallTileViewSnapshot }): React.ReactNode {
+ const { translate: _t } = useI18n();
+ return (
+ <>
+ {_t("timeline|call_tile|ongoing|dm|title")}
+
+ );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/__snapshots__/DmOngoingCallTileView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/__snapshots__/DmOngoingCallTileView.test.tsx.snap
new file mode 100644
index 00000000000..17735a29a72
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/__snapshots__/DmOngoingCallTileView.test.tsx.snap
@@ -0,0 +1,603 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DmOngoingCallTileView > renders the tile > IncomingVideoCall 1`] = `
+
+
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > IncomingVoiceCall 1`] = `
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Bob started a call
+
+
+
+
+ (
+
+ )
+
+
+
+
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > OutgoingVideoCall 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bob started a call
+
+
+
+
+ (
+
+ )
+
+
+
+
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > OutgoingVoiceCall 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call started
+
+
+
+
+ (
+
+ )
+
+
+
+
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > VideoCallInProgress 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call started
+
+
+
+
+ (
+
+ )
+
+
+
+
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > VoiceCallInProgress 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Call in progress
+
+
+
+
+ (
+
+ )
+
+
+
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.module.css b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.module.css
new file mode 100644
index 00000000000..e0fb3453ad5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.module.css
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.subContainer {
+ min-height: 23px;
+ width: 100%;
+ font: var(--cpd-font-body-md-regular);
+ color: var(--cpd-color-text-secondary);
+}
+
+.startedTextContainer {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx
new file mode 100644
index 00000000000..83ecbb7ef5f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RoomOngoingCallTileViewSnapshot, RoomOngoingCallTileView } from "./RoomOngoingCallTileView";
+import { MockViewModel, useMockedViewModel } from "../../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../../.storybook/withViewDocs";
+import { type CommonOngoingCallTileViewAction } from "../common";
+import { CallDirection } from "../../common";
+import profileLink1 from "../../../../../../../static/profile-pics/profile1.png";
+import profileLink2 from "../../../../../../../static/profile-pics/profile2.png";
+import profileLink3 from "../../../../../../../static/profile-pics/profile3.png";
+import { MockFacePileViewModel, MockMemberAvatarViewModel } from "../call-mocks";
+
+const RoomOngoingCallTileViewWrapperImpl = ({
+ join,
+ ...rest
+}: RoomOngoingCallTileViewSnapshot & CommonOngoingCallTileViewAction): React.ReactNode => {
+ const vm = useMockedViewModel(rest, { join });
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call in progress
+
+
+
+
+ (
+
+ )
+
+ {_t("timeline|call_tile|ongoing|room|title")}
+
+ {callHasOtherParticipants || isCallIgnored ? (
+
+ {_t("timeline|call_tile|ongoing|common|call_started_by", { startedByDisplayName })}
+
+
+
+`;
+
+exports[`RoomOngoingCallTileView > renders the tile > RoomCallJoined 1`] = `
+
+
+
+
+
+
+
+
+
+
+ Group call in progress
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 8 joined
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+ )
+
+
+
+
+`;
+
+exports[`RoomOngoingCallTileView > renders the tile > RoomCallWithoutOtherParticipants 1`] = `
+
+
+
+
+
+
+
+
+
+
+ Group call in progress
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 8 joined
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+ )
+
+
+
+`;
diff --git a/packages/shared-components/static/profile-pics/profile1.png b/packages/shared-components/static/profile-pics/profile1.png
new file mode 100644
index 00000000000..94c52f3f83a
Binary files /dev/null and b/packages/shared-components/static/profile-pics/profile1.png differ
diff --git a/packages/shared-components/static/profile-pics/profile2.png b/packages/shared-components/static/profile-pics/profile2.png
new file mode 100644
index 00000000000..bb43ae7ca26
Binary files /dev/null and b/packages/shared-components/static/profile-pics/profile2.png differ
diff --git a/packages/shared-components/static/profile-pics/profile3.png b/packages/shared-components/static/profile-pics/profile3.png
new file mode 100644
index 00000000000..95c06110084
Binary files /dev/null and b/packages/shared-components/static/profile-pics/profile3.png differ
+
+
+
+
+
+
+
+
+
+ Group call in progress
+
+
+
+
+
+
+
+
+
+ Bob started a call
+
+
+
+
+ (
+
+ )
+
+
+