[feat : chat replay] add analytics event into chat replay

apps/backend/src/trpc/analytics-event.routes.ts

@@ -23,7 +23,7 @@ async function assertAssetOwnerOrAdmin(
 		if (assetProjectId !== projectId) {
 			throw new TRPCError({ code: 'NOT_FOUND', message: 'Chat not found.' });
 		}
-		if (userRole === 'admin') {
+		if (userRole === 'admin' || userRole === 'context_admin') {
 			return;
 		}
 		const ownerId = await chatQueries.getChatOwnerId(chatId);
@@ -38,7 +38,7 @@ async function assertAssetOwnerOrAdmin(
 		if (assetProjectId !== projectId) {
 			throw new TRPCError({ code: 'NOT_FOUND', message: 'Story not found.' });
 		}
-		if (userRole === 'admin') {
+		if (userRole === 'admin' || userRole === 'context_admin') {
 			return;
 		}
 		const ownerId = await storyQueries.getStoryOwnerId(storyId);
@@ -58,14 +58,24 @@ export const analyticsEventRoutes = {
 				assetType: z.enum(ANALYTICS_ASSET_TYPES),
 				chatId: z.string().optional(),
 				storyId: z.string().optional(),
+				storySlug: z.string().optional(),
 				limit: z.number().int().min(1).max(200).default(100),
 			}),
 		)
 		.query(async ({ input, ctx }) => {
+			let storyId = input.storyId;
+			if (input.assetType === 'story' && !storyId && input.chatId && input.storySlug) {
+				const story = await storyQueries.getStoryByChatAndSlug(input.chatId, input.storySlug);
+				if (!story) {
+					throw new TRPCError({ code: 'NOT_FOUND', message: 'Story not found.' });
+				}
+				storyId = story.id;
+			}
+
 			await assertAssetOwnerOrAdmin(
 				input.assetType,
 				input.chatId,
-				input.storyId,
+				storyId,
 				ctx.project.id,
 				ctx.user.id,
 				ctx.userRole,
@@ -74,7 +84,7 @@ export const analyticsEventRoutes = {
 			const rows = await analyticsEventQueries.listEventsForAsset({
 				assetType: input.assetType,
 				chatId: input.chatId,
-				storyId: input.storyId,
+				storyId,
 				limit: input.limit,
 			});
 

apps/backend/src/trpc/shared-story.routes.ts

@@ -83,6 +83,11 @@ export const sharedStoryRoutes = {
 				throw new TRPCError({ code: 'NOT_FOUND', message: 'Story not found in this project.' });
 			}
 
+			const storyOwnerId = await storyQueries.getStoryOwnerId(story.id);
+			if (storyOwnerId !== ctx.user.id && ctx.userRole !== 'admin') {
+				throw new TRPCError({ code: 'FORBIDDEN', message: 'Only the creator or an admin can share this.' });
+			}
+
 			if (input.visibility === 'project') {
 				await storyFolderQueries.moveStoryToFolder(story.id, null, {
 					storyOwnerId: ctx.user.id,

apps/frontend/src/components/asset-analytics-dialog.tsx

@@ -29,6 +29,7 @@ interface AssetAnalyticsDialogProps {
 	assetType: AnalyticsAssetType;
 	chatId?: string;
 	storyId?: string;
+	storySlug?: string;
 }
 
 interface TabDef {
@@ -77,13 +78,20 @@ const TAB_DEFS: TabDef[] = [
 	},
 ];
 
-export function AssetAnalyticsDialog({ open, onOpenChange, assetType, chatId, storyId }: AssetAnalyticsDialogProps) {
+export function AssetAnalyticsDialog({
+	open,
+	onOpenChange,
+	assetType,
+	chatId,
+	storyId,
+	storySlug,
+}: AssetAnalyticsDialogProps) {
 	const tabs = TAB_DEFS.filter((tab) => tab.assetTypes.includes(assetType));
 	const [activeTab, setActiveTab] = useState<AnalyticsEventType>('page_view');
 	const [search, setSearch] = useState('');
 
 	const query = useQuery({
-		...trpc.analyticsEvent.listForAsset.queryOptions({ assetType, chatId, storyId }),
+		...trpc.analyticsEvent.listForAsset.queryOptions({ assetType, chatId, storyId, storySlug }),
 		enabled: open,
 		staleTime: 0,
 		refetchOnMount: 'always',

apps/frontend/src/components/settings/chats-replay-panel.tsx

@@ -1,11 +1,12 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Info } from 'lucide-react';
 import { formatDate } from 'date-fns';
 import type { ReactNode } from 'react';
 import type { StickToBottomContext } from 'use-stick-to-bottom';
 
 import type { ReplayHighlight } from '@/components/settings/usage-route-search';
+import { AssetAnalyticsDialog } from '@/components/asset-analytics-dialog';
 import { SidePanelProvider } from '@/contexts/side-panel';
 import { SidePanel } from '@/components/side-panel/side-panel';
 import { SettingsCard } from '@/components/ui/settings-card';
@@ -110,6 +111,7 @@ export function ChatsReplayPanel({ chatId, onBack, metadataAction, highlightOnLo
 	const isOwner = session?.user?.id === chatReplayQuery.data?.chatOwnerId;
 	const title = chatReplayQuery.data?.title ?? 'Chat replay';
 	const updatedAt = chatReplayQuery.data?.updatedAt;
+	const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
 
 	return (
 		<div className='w-full h-full min-h-0 flex flex-col p-4 bg-background'>
@@ -125,6 +127,15 @@ export function ChatsReplayPanel({ chatId, onBack, metadataAction, highlightOnLo
 							{chatReplayQuery.data && <ReplayContextWindowRing chatId={chatId} />}
 						</div>
 						<div className='flex items-center gap-2'>
+							{chatReplayQuery.data && (
+								<button
+									className='hover:rounded-full hover:text-foreground size-[12px] text-muted-foreground'
+									onClick={() => setIsAnalyticsOpen(true)}
+									aria-label='Analytics'
+								>
+									<Info className='size-3' />
+								</button>
+							)}
 							<span className='text-muted-foreground text-xs font-semibold'>
 								{updatedAt != null ? formatDate(new Date(updatedAt), 'yyyy-MM-dd') : '—'}
 							</span>
@@ -169,6 +180,7 @@ export function ChatsReplayPanel({ chatId, onBack, metadataAction, highlightOnLo
 									setCurrentStoryTabIndex={sidePanel.setCurrentStoryTabIndex}
 									chatId={chatId}
 									isReadonlyMode={!isOwner}
+									isReplay={true}
 									open={sidePanel.open}
 									close={sidePanel.close}
 								>
@@ -202,6 +214,13 @@ export function ChatsReplayPanel({ chatId, onBack, metadataAction, highlightOnLo
 					</div>
 				)}
 			</SettingsCard>
+
+			<AssetAnalyticsDialog
+				open={isAnalyticsOpen}
+				onOpenChange={setIsAnalyticsOpen}
+				assetType='chat'
+				chatId={chatId}
+			/>
 		</div>
 	);
 }

apps/frontend/src/components/side-panel/story-header.tsx

@@ -7,13 +7,13 @@ import {
 	Ellipsis,
 	Eye,
 	Globe,
+	Info,
 	Loader2,
 	Maximize2,
 	Pencil,
 	RefreshCw,
 	RotateCcw,
 	Save,
-	ScanText,
 	Star,
 	Upload,
 	X,
@@ -65,6 +65,7 @@ export interface StoryHeaderProps {
 	isAgentRunning: boolean;
 	isSaving?: boolean;
 	isReadonlyMode: boolean;
+	isReplay?: boolean;
 	isLive: boolean;
 	isRefreshing: boolean;
 	onRefreshData: () => void;
@@ -102,6 +103,7 @@ export const StoryHeader = memo(function StoryHeader({
 	isAgentRunning,
 	isSaving = false,
 	isReadonlyMode,
+	isReplay = false,
 	isLive,
 	isRefreshing,
 	onRefreshData,
@@ -216,7 +218,7 @@ export const StoryHeader = memo(function StoryHeader({
 		/>
 	);
 
-	const starButton = storyId && (
+	const starButton = !isReadonlyMode && storyId && (
 		<Tooltip>
 			<TooltipTrigger asChild>
 				<Button
@@ -237,50 +239,77 @@ export const StoryHeader = memo(function StoryHeader({
 		</Tooltip>
 	);
 
-	const liveControls = !isReadonlyMode && (
+	const liveControls = (!isReadonlyMode || isReplay) && (
 		<>
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<button
 						type='button'
 						onClick={onOpenLiveSettings}
-						disabled={isAgentRunning}
+						disabled={isReadonlyMode || isAgentRunning}
 						className='flex items-center gap-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 border hover:bg-secondary rounded-full px-2 py-0.75'
 					>
 						<Activity className='size-3.5 text-foreground' strokeWidth={2.25} />
 						<span className='text-xs font-medium'>Live story</span>
 						<SwitchIndicator checked={isLive} />
 					</button>
 				</TooltipTrigger>
-				<TooltipContent>{isLive ? 'Live story settings' : 'Enable live mode'}</TooltipContent>
+				<TooltipContent>
+					{isReadonlyMode
+						? isLive
+							? 'Live mode on'
+							: 'Live mode off'
+						: isLive
+							? 'Live story settings'
+							: 'Enable live mode'}
+				</TooltipContent>
 			</Tooltip>
 			{isLive && (
 				<>
 					{cachedAt && <LiveStoryTimestamp cachedAt={cachedAt} />}
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant='ghost'
-								size='icon-sm'
-								className='hover:rounded-full'
-								onClick={onRefreshData}
-								disabled={isRefreshing}
-								aria-label='Refresh data'
-							>
-								{isRefreshing ? (
-									<Loader2 className='size-3 animate-spin' strokeWidth={2.25} />
-								) : (
-									<RefreshCw className='size-3' strokeWidth={2.25} />
-								)}
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Refresh data</TooltipContent>
-					</Tooltip>
+					{!isReadonlyMode && (
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant='ghost'
+									size='icon-sm'
+									className='hover:rounded-full'
+									onClick={onRefreshData}
+									disabled={isRefreshing}
+									aria-label='Refresh data'
+								>
+									{isRefreshing ? (
+										<Loader2 className='size-3 animate-spin' strokeWidth={2.25} />
+									) : (
+										<RefreshCw className='size-3' strokeWidth={2.25} />
+									)}
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Refresh data</TooltipContent>
+						</Tooltip>
+					)}
 				</>
 			)}
 		</>
 	);
 
+	const replayAnalyticsButton = isReplay && isReadonlyMode && (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant='ghost'
+					size='icon-sm'
+					className='hover:rounded-full'
+					onClick={onOpenAnalytics}
+					aria-label='Analytics'
+				>
+					<Info className='size-3' />
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>Analytics</TooltipContent>
+		</Tooltip>
+	);
+
 	const actionButtons = !isReadonlyMode && (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
@@ -294,7 +323,7 @@ export const StoryHeader = memo(function StoryHeader({
 					<span>Share</span>
 				</DropdownMenuItem>
 				<DropdownMenuItem onSelect={onOpenAnalytics}>
-					<ScanText className='size-3' />
+					<Info className='size-3' />
 					<span>Analytics</span>
 				</DropdownMenuItem>
 				<DropdownMenuItem onSelect={onEnlarge}>
@@ -324,6 +353,7 @@ export const StoryHeader = memo(function StoryHeader({
 						{liveControls}
 						{downloadButton}
 						{starButton}
+						{replayAnalyticsButton}
 						{actionButtons}
 					</div>
 					<div className='flex items-center gap-2 border-b px-4 py-2'>
@@ -348,6 +378,7 @@ export const StoryHeader = memo(function StoryHeader({
 					{liveControls}
 					{downloadButton}
 					{starButton}
+					{replayAnalyticsButton}
 					{actionButtons}
 				</div>
 			)}

apps/frontend/src/components/side-panel/story-viewer.tsx

@@ -55,12 +55,13 @@ export function StoryViewer({ chatId, storySlug, isReadonlyMode: readonlyProp, i
 	const {
 		close: closeSidePanel,
 		isReadonlyMode: contextReadonlyMode,
+		isReplay,
 		shareId,
 		shareType,
 		setCurrentStorySlug,
 		setCurrentStoryTabIndex,
 	} = useSidePanel();
-	const isReadonlyMode = readonlyProp ?? contextReadonlyMode;
+	const isReadonlyMode = isReplay ? contextReadonlyMode : (readonlyProp ?? contextReadonlyMode);
 	const { viewMode, setViewMode } = useStoryViewerViewMode();
 
 	const outerAgent = useOptionalAgentContext();
@@ -237,6 +238,7 @@ export function StoryViewer({ chatId, storySlug, isReadonlyMode: readonlyProp, i
 				isAgentRunning={isAgentRunning}
 				isSaving={isSaving}
 				isReadonlyMode={isReadonlyMode}
+				isReplay={isReplay}
 				isLive={isLive}
 				isRefreshing={isRefreshing}
 				onRefreshData={handleRefreshData}
@@ -326,6 +328,7 @@ export function StoryViewer({ chatId, storySlug, isReadonlyMode: readonlyProp, i
 				assetType='story'
 				chatId={chatId}
 				storyId={storyId ?? undefined}
+				storySlug={resolvedStorySlug}
 			/>
 
 			<LiveStorySettingsDialog

apps/frontend/src/components/story-page-header.tsx

@@ -7,13 +7,13 @@ import {
 	Ellipsis,
 	Eye,
 	Globe,
+	Info,
 	Loader2,
 	MessageSquare,
 	Pencil,
 	RefreshCw,
 	RotateCcw,
 	Save,
-	ScanText,
 	Star,
 	Upload,
 } from 'lucide-react';
@@ -169,7 +169,7 @@ export function StoryPageHeader({
 									)}
 									{onOpenAnalytics && (
 										<DropdownMenuItem onSelect={onOpenAnalytics}>
-											<ScanText className='size-3' />
+											<Info className='size-3' />
 											<span>Analytics</span>
 										</DropdownMenuItem>
 									)}