feat: add conversation navigation with sender previews

CHANGELOG.md

@@ -10,6 +10,8 @@ release versions will follow [Semantic Versioning](https://semver.org/spec/v2.0.
 
 ### Added
 
+- Conversation side navigation previews each sender's avatar, name and message
+  excerpt, and jumps through loaded history with mouse or keyboard controls.
 - Model reasoning controls support distinct `max` and `ultra` levels when the
   selected model declares them, and explain changes to a supported default when
   switching models.

apps/web/e2e/support/p2-reading-harness.tsx

@@ -32,6 +32,7 @@ export function mountReadingFixture(messageCount = 36) {
   function render() {
     root.render(<I18nProvider><ThemeProvider><LingUiProvider><NormalConversationFeed
       messages={messages} visibleMessages={messages} runById={new Map()}
+      userProfile={{ schemaVersion: 1, displayName: "Local Operator", createdAt: "2026-10-14T00:00:00Z", updatedAt: "2026-10-14T00:00:00Z" }}
       composerGateApprovals={[]} generatedMedia={[]} workspaceCwd="/p2-fixture"
       searchActive={searchActive} editSaving={false} replacementRetryError=""
       onCancelMessageEdit={noop} onEditMessage={noop} onSaveMessage={noop}

apps/web/e2e/support/position-navigation-harness.tsx

@@ -0,0 +1,58 @@
+import { createRoot } from "react-dom/client";
+import type { ConversationTimelineMessageItem, TimelineSnapshot } from "@ling-stack/conversation-ui-core";
+import { I18nProvider } from "../../src/i18n.js";
+import { ConversationTimelineFeed } from "../../src/shared/conversation/blocks/ConversationTimelineFeed.js";
+import { mountConversationTimeline } from "../../src/shared/conversation/timeline/mountConversationTimeline.js";
+import type { ConversationTimelineItemLocator } from "../../src/shared/conversation/timeline/ConversationTimeline.js";
+
+/** Real shared Timeline/locator, with an owned history and one injected lookup failure. */
+export function mountPositionFixture() {
+  const container = document.createElement("main");
+  container.style.cssText = "position:fixed;inset:40px;display:flex;flex-direction:column;background:var(--ling-bg-panel)";
+  document.body.append(container);
+  const root = createRoot(container);
+  const scrollRef = { current: null as HTMLDivElement | null };
+  const locatorRef = { current: null as ConversationTimelineItemLocator | null };
+  const finals: ConversationTimelineMessageItem[] = Array.from({ length: 120 }, (_, index) => ({
+    id: `position-final-${index}`, kind: "agentMessage", phase: "final", status: "succeeded",
+    markdown: `Final ${index}\n\n${"Read the transcript at your own pace. ".repeat(12)}`,
+    revision: 1, threadSequence: index + 1, partIndex: 1, turnId: `turn-${index}`,
+    runId: `run-${index}`, attemptId: `attempt-${index}`, participantId: "ling_agent",
+    workflowStepId: null, actionId: null, sourceRefs: [],
+  }));
+  let items = [{ ...finals[0]!, id: "position-commentary", phase: "commentary" as const,
+    markdown: "Earlier process message", partIndex: 0 }, ...finals];
+  let revision = 1;
+  function render() {
+    const snapshot: TimelineSnapshot = { scope: { kind: "normal", threadId: "position-fixture", parentThreadId: null, anchorItemId: null, depth: 0 },
+      items, activeRun: null, canonicalRevision: revision++, sseCursor: null, contextSegmentIdByItemId: new Map() };
+    const timeline = mountConversationTimeline({ snapshot, depth: 0, virtualScrollRef: scrollRef, itemLocatorRef: locatorRef,
+      onPositionNavigate: () => {}, positionIdentity: () => ({ name: "Ling Agent", avatar: <span>L</span> }) });
+    root.render(<I18nProvider><ConversationTimelineFeed surfaceId="position-fixture" scrollRef={scrollRef}
+      ariaLabel="Navigation test feed" timelineId="position-fixture" timelineNode={timeline.node}
+      loadingLabel="Loading" emptyLabel="Empty" /></I18nProvider>);
+  }
+  render();
+  return {
+    cancelPending: async () => {
+      let current = true;
+      let revealed = false;
+      const pending = locatorRef.current!.revealFirstMatchingItem(["position-commentary"], () => { revealed = true; }, () => current);
+      current = false;
+      return { result: await pending, revealed };
+    },
+    failNext: () => {
+      const locator = locatorRef.current!;
+      locatorRef.current = { ...locator, revealFirstMatchingItem: async () => {
+        locatorRef.current = locator;
+        return "not_found";
+      } };
+    },
+    removeFirst: () => { items = items.slice(1); render(); },
+    single: () => { items = finals.slice(0, 1); render(); },
+    restore: () => { items = finals; render(); },
+    dispose: () => { root.unmount(); container.remove(); },
+  };
+}
+
+declare global { interface Window { positionHarness: ReturnType<typeof mountPositionFixture>; } }

apps/web/src/app/AppShell.tsx

@@ -2777,6 +2777,7 @@ export function AppShell(): React.JSX.Element {
               />
               ) : (
                 <ConversationHome
+                  userProfile={userProfile}
                   executionSelectionRevision={JSON.stringify([settingsDomain.state.runtimeSettings?.updatedAt, approvalPolicy])}
                   conversationTitle={selectedConversationDetail?.thread.title ?? ""}
                   initialMessages={selectedConversationMessages}

apps/web/src/features/teammates/TeammatePrivateChatFeed.tsx

@@ -456,6 +456,14 @@ export function TeammatePrivateChatFeed({
             cwd: cwd.trim(),
             virtualScrollRef: privateFeedRef,
             itemLocatorRef: timelineItemLocatorRef,
+            onPositionNavigate: onCancelPrivateFeedAutoFollow,
+            positionIdentity: (item) => item.kind === "userMessage" ? {
+              name: localUserDisplayName,
+              avatar: <UserProfileAvatar profile={userProfile} fallbackLabel={localUserDisplayName} />,
+            } : {
+              name: teammate.displayName,
+              avatar: <TeammateAvatarView teammate={teammate} cwd={cwd} compact />,
+            },
             onDisclosureIntent: onCancelPrivateFeedAutoFollow,
             onOpenSourceRef: handleOpenTimelineSourceRef,
             onOpenNativeFile: (localFile) => onOpenFiles({ path: localFile.path, line: localFile.line, localFile }),

apps/web/src/features/workspace/ChannelMessageRenderers.tsx

@@ -541,6 +541,7 @@ export interface ChannelMessageRenderersInput {
   readonly teammateOptions: readonly ChannelMention[];
   readonly t: (key: string, values?: Record<string, string | number>) => string;
   readonly timelineItemLocatorRef: MutableRefObject<ConversationTimelineItemLocator | null>;
+  readonly onTimelineLocateIntent: () => void;
   readonly timelineScrollRef: RefObject<HTMLDivElement | null>;
   readonly timelineViewRetainKeys: ConversationViewRetainKeys;
   readonly onTimelineDisclosureIntent: (intent: ConversationTimelineDisclosureIntent) => void;
@@ -1091,6 +1092,22 @@ export function createChannelMessageRenderers(input: ChannelMessageRenderersInpu
         return renderMessageActivityItem(channelMessageToActivityItem(message), body, presentation.ownsIdentity);
       },
       itemLocatorRef: input.timelineItemLocatorRef,
+      onPositionNavigate: input.onTimelineLocateIntent,
+      positionIdentity: (item) => {
+        const message = item.itemId ? messageByTimelineItemId.get(`message:${item.kind === "userMessage" ? "user" : "agent"}:${item.itemId}`) : undefined;
+        if (message) return {
+          name: messageAuthorLabel(message, input.teammateOptions, input.t("Deleted teammate"), input.localUserDisplayName, input.allLocalTeammateById),
+          avatar: renderChannelMessageAvatar(message),
+        };
+        const teammate = input.allLocalTeammateById.get(item.participantId ?? "");
+        return item.kind === "userMessage" ? {
+          name: input.localUserDisplayName,
+          avatar: <UserProfileAvatar profile={input.userProfile} fallbackLabel={input.localUserDisplayName} />,
+        } : {
+          name: teammate?.displayName ?? input.t("Ling Agent"),
+          avatar: teammate ? <TeammateAvatarView teammate={teammate} cwd={input.cwd} compact /> : renderLingAgentAvatar(),
+        };
+      },
       virtualScrollRef: input.timelineScrollRef,
       viewStateRetainKeys: input.timelineViewRetainKeys,
       ariaLabel: input.t("Channel conversation transcript"),

apps/web/src/features/workspace/ConversationHome.tsx

@@ -69,6 +69,7 @@ export type {
   ConversationHomeSendInput,
 } from "./normal-conversation-types.js";
 export function ConversationHome({
+  userProfile,
   conversationTitle = "",
   initialDraft = "",
   initialMessages = [],
@@ -863,6 +864,7 @@ export function ConversationHome({
         feedProps={{
           messages,
           visibleMessages,
+          userProfile,
           runById,
           detailContext,
           composerGateApprovals: inlineApprovalViews,

apps/web/src/features/workspace/NormalConversationFeed.tsx

@@ -44,8 +44,12 @@ import { requestTimelineWorkspaceFileOpen } from "../../shared/conversation/time
 import { timelineMessageChromeOwnerIds } from "../../shared/conversation/timeline/timeline-message-chrome-owners.js";
 import { NormalConversationResponseActions } from "./NormalConversationResponseActions.js";
 import { useConversationReadingViewport } from "../../shared/conversation/blocks/use-conversation-reading-viewport.js";
+import { UserProfileAvatar } from "../../shared/components/index.js";
+import { TeammateAvatarView } from "../teammates/TeammateAvatarView.js";
+import type { UserProfile } from "../../types.js";
 
 export interface NormalConversationFeedProps {
+  readonly userProfile?: UserProfile;
   readonly messages: readonly ConversationHomeMessage[];
   readonly visibleMessages: readonly ConversationHomeMessage[];
   readonly runById: ReadonlyMap<string, RunSession>;
@@ -71,6 +75,7 @@ export interface NormalConversationFeedProps {
 }
 
 export function NormalConversationFeed({
+  userProfile,
   detailContext,
   composerGateApprovals,
   editSaving,
@@ -214,6 +219,14 @@ export function NormalConversationFeed({
             cwd: projectPath?.trim() || workspaceCwd.trim(),
             virtualScrollRef: feedRef,
             itemLocatorRef: timelineItemLocatorRef,
+            onPositionNavigate: pauseTimelineAutoFollow,
+            positionIdentity: (item) => item.kind === "userMessage" ? {
+              name: userProfile?.displayName.trim() || t("You"),
+              avatar: <UserProfileAvatar profile={userProfile} fallbackLabel={t("You")} />,
+            } : {
+              name: t("Ling Agent"),
+              avatar: <TeammateAvatarView cwd={workspaceCwd} compact teammate={{ displayName: "Ling Agent", kind: "system_teammate", systemRole: "ling_agent" }} />,
+            },
             onDisclosureIntent: pauseTimelineAutoFollow,
             onOpenSourceRef: handleOpenTimelineSourceRef,
             onOpenNativeFile: (localFile) => onOpenReportFile({ path: localFile.path, line: localFile.line, localFile }),

apps/web/src/features/workspace/WorkspaceClientView.tsx

@@ -2990,6 +2990,7 @@ export function WorkspaceClientView({
     teammateOptions,
     t,
     timelineItemLocatorRef: conversationTimelineItemLocatorRef,
+    onTimelineLocateIntent: messageFeedState.onLocateIntent,
     timelineScrollRef: messageFeedState.scrollRef,
     timelineViewRetainKeys: messageFeedState.viewRetainKeys,
     onTimelineDisclosureIntent: messageFeedState.onDisclosureIntent,

apps/web/src/features/workspace/normal-conversation-types.ts

@@ -23,6 +23,7 @@ import type {
   RunIntervention,
   SessionPermissionMode,
   TerminalReportDto,
+  UserProfile,
   WorkspaceAccessMode,
 } from "../../types.js";
 import type { InlineApprovalView } from "../../lib/inline-approvals.js";
@@ -122,6 +123,7 @@ export interface ConversationHomeSendInput {
 }
 
 export interface ConversationHomeProps {
+  readonly userProfile?: UserProfile;
   readonly conversationTitle?: string;
   readonly initialDraft?: string;
   readonly initialMessages?: readonly ConversationHomeMessage[];