- setActiveView("chat")} />
+ setActiveView("chat")} />
) : (
<>
@@ -251,7 +261,8 @@ export function AppContent({
{showPromptBox && !(workspaces.length === 0 && supportsMultipleWorkspaces) && (
{isBooting && (
@@ -225,7 +235,7 @@ export function AppContent({
}
>
-
{queuedPrompts.length > 0 && (
) => {
+ const drag = dragRef.current;
+ if (!drag) return;
+ dragRef.current = null;
+ delete drag.wrapper.dataset.sidebarResizing;
+ document.body.style.removeProperty("cursor");
+ if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+ event.currentTarget.releasePointerCapture(event.pointerId);
+ }
+ setWidth(drag.startWidth + event.clientX - drag.startX);
+ };
+
+ return (
+ // biome-ignore lint/a11y/useSemanticElements: A focusable separator is the ARIA pattern for resizable panes.
+
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 89ab1e5..56f6311 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -1,3 +1,4 @@
+import type { SectionId } from "@/components/settings/SettingsView";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Plus, X } from "lucide-react";
@@ -49,7 +50,7 @@ export function AppSidebar({
}: {
detachedProject?: string;
highlightedSessionId?: string | null;
- onOpenSettings: () => void;
+ onOpenSettings: (tab?: SectionId) => void;
onOpenChat: () => void;
settingsActive?: boolean;
}) {
@@ -426,7 +427,7 @@ export function AppSidebar({
});
return (
-
+
{profileOpen && setProfileOpen(false)} />}
-
-
- {signedIn ? (
-
- ) : (
-
- )}
- {profileLabel}
-
-
onOpenSettings()}
className="size-8 justify-center p-0 text-muted-foreground"
>
+
+ onOpenSettings("appearance")} />
+
+ {signedIn && (
+
+
+ {signedIn ? (
+
+ ) : (
+
+ )}
+ {profileLabel}
+
+
+ )}
);
diff --git a/src/components/sidebar/SidebarHeaderContent.tsx b/src/components/sidebar/SidebarHeaderContent.tsx
index def5841..d56f178 100644
--- a/src/components/sidebar/SidebarHeaderContent.tsx
+++ b/src/components/sidebar/SidebarHeaderContent.tsx
@@ -1,7 +1,9 @@
-import { Search, SquarePen, X } from "lucide-react";
+import { PanelLeftIcon, Search, SquarePen, X } from "lucide-react";
import type { ReactNode, RefObject } from "react";
import { Input } from "@/components/ui/input";
-import { SidebarHeader } from "@/components/ui/sidebar";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { SidebarHeader, useSidebar } from "@/components/ui/sidebar";
import appIcon from "../../../assets/app-icon.svg";
import openguiLogoDark from "../../../assets/opengui-dark.svg";
import openguiLogoLight from "../../../assets/opengui-light.svg";
@@ -37,12 +39,15 @@ export function SidebarHeaderContent({
projectSelector?: ReactNode;
selectionActions?: ReactNode;
}) {
+ const { t } = useTranslation();
+ const { toggleSidebar } = useSidebar();
+
return (
{selectionActions ?? (
<>
);
}
+const SIDEBAR_RESIZE_KEYBOARD_STEP_PX = 16;
+
+/** Drag handle on the sidebar's inner edge; double-click restores the default width. */
+function SidebarResizeHandle() {
+ const { t } = useTranslation();
+ const { state } = useSidebar();
+ const [width, setWidth] = useSidebarWidth();
+ const dragRef = React.useRef<{ startX: number; startWidth: number; wrapper: HTMLElement } | null>(
+ null,
+ );
+
+ if (state === "collapsed") return null;
+
+ const endDrag = (event: React.PointerEvent {
+ onOpenSettings={(tab) => {
setProfileOpen(false);
- onOpenSettings();
+ onOpenSettings(tab);
closeMobileSidebar();
}}
profileOpen={profileOpen}
diff --git a/src/components/message-list/MessageListTranscript.tsx b/src/components/message-list/MessageListTranscript.tsx
index 6cab040..64cc0f3 100644
--- a/src/components/message-list/MessageListTranscript.tsx
+++ b/src/components/message-list/MessageListTranscript.tsx
@@ -1,6 +1,8 @@
+import { useMemo } from "react";
import { MessageListTrailing } from "@/components/message-list/MessageListTrailing";
import type { useMessageListModel } from "@/components/message-list/useMessageListModel";
import { useMessageListTranscriptRows } from "@/features/session-transcript/build-message-list-transcript-rows";
+import { buildPromptMarkers } from "@/features/session-transcript/transcript-prompt-markers";
import { TranscriptMessageRow } from "@/features/session-transcript/transcript-rows";
import { TranscriptViewport } from "@/features/session-transcript/transcript-viewport";
import { useActions } from "@/hooks/use-agent-state";
@@ -50,6 +52,8 @@ export function MessageListTranscript({ model }: { model: MessageListModel }) {
revertToMessage,
});
+ const promptMarkers = useMemo(() => buildPromptMarkers(rows), [rows]);
+
const contentKey = `${activeSessionId ?? ""}:${transcriptRevision}:${visibleMessages.length}:${isBusy ? 1 : 0}`;
const trailingContent = (
@@ -76,6 +80,7 @@ export function MessageListTranscript({ model }: { model: MessageListModel }) {
onLoadOlder={loadOlderMessages}
showLoadOlderRow={messageHistoryHasMore}
trailingContent={trailingContent}
+ promptMarkers={promptMarkers}
>
{rows.map((row) => (
({
}));
vi.mock("@/features/instructions/InstructionsSettings", () => ({
InstructionsSettings: () => (null);
+ const showPersonalInstructions = usePersonalInstructionsAvailable();
+ const [requestedTab, setActiveTab] = useState(initialTab ?? "models");
const [dirty, setDirty] = useState(false);
const [pendingTab, setPendingTab] = useState(null);
@@ -83,6 +103,14 @@ export function SettingsView({ onBack }: { onBack: () => void }) {
const groups: Group[] = (
[
+ {
+ id: "personal",
+ sections: [
+ { id: "appearance", icon: Palette, visible: true },
+ { id: "language", icon: Languages, visible: true },
+ { id: "chats", icon: MessageSquare, visible: true },
+ ],
+ },
{
id: "agent",
sections: [
@@ -258,10 +286,23 @@ export function SettingsView({ onBack }: { onBack: () => void }) {
{t(`settings.sectionDescriptions.${activeTab}`)}
+ {activeTab === "appearance" &&
)}
instructions-panel
, + usePersonalInstructionsAvailable: () => false, })); vi.mock("@/features/mcp/McpSettings", () => ({ McpSettings: () =>mcp-connections
, @@ -38,6 +39,14 @@ vi.mock("@/features/identity/workspace-identity", () => ({ identityWorkspaceIsLocalBypass: () => false, })); +vi.mock("@/features/profile/PreferenceSections", () => ({ + AppearanceSettings: () =>appearance-controls
, + ChatPreferences: () =>chat-controls
, +})); +vi.mock("@/features/profile/PreferenceControls", () => ({ + LanguageOptions: () =>language-options
, +})); + import { SettingsView } from "./SettingsView"; describe("SettingsView responsive navigation", () => { @@ -47,14 +56,32 @@ describe("SettingsView responsive navigation", () => { render(
+
+
+ )}
+
+ )}
{activeTab === "users" && {t("profile.personalInstructions")}
+
+ {!detachedProject && (
+
+ )}
({ useTranslation: () => ({ t: (key: string) => key }) }));
+vi.mock("@/hooks/use-mobile", () => ({ useIsMobile: () => false }));
+
+import { Sidebar, SidebarProvider } from "./sidebar";
+import { clampSidebarWidth, SIDEBAR_DEFAULT_WIDTH_PX } from "@/hooks/use-sidebar-width";
+import { STORAGE_KEYS } from "@/lib/constants";
+import { storageSet } from "@/lib/persistence/storage";
+
+function renderSidebar() {
+ return render(
+
+ content
+ ,
+ );
+}
+
+describe("sidebar resizing", () => {
+ afterEach(() => {
+ cleanup();
+ storageSet(STORAGE_KEYS.SIDEBAR_WIDTH, String(SIDEBAR_DEFAULT_WIDTH_PX));
+ });
+
+ test("clamps widths to the supported range", () => {
+ expect(clampSidebarWidth(50)).toBe(200);
+ expect(clampSidebarWidth(9999)).toBe(480);
+ expect(clampSidebarWidth(Number.NaN)).toBe(SIDEBAR_DEFAULT_WIDTH_PX);
+ });
+
+ test("resizes with the keyboard and resets on double-click", () => {
+ const view = renderSidebar();
+ const wrapper = view.container.querySelector("[data-slot=sidebar-wrapper]")!;
+ const handle = screen.getByRole("separator", { name: "workspace.resizeSidebar" });
+
+ fireEvent.keyDown(handle, { key: "ArrowRight" });
+ expect(wrapper.style.getPropertyValue("--sidebar-width")).toBe("272px");
+
+ fireEvent.doubleClick(handle);
+ expect(wrapper.style.getPropertyValue("--sidebar-width")).toBe(`${SIDEBAR_DEFAULT_WIDTH_PX}px`);
+ });
+});
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 0987804..2f105b4 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -17,6 +17,13 @@ import {
import { Skeleton } from "@/components/ui/skeleton";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useSidebarController } from "./use-sidebar-controller";
+import {
+ SIDEBAR_DEFAULT_WIDTH_PX,
+ SIDEBAR_MAX_WIDTH_PX,
+ SIDEBAR_MIN_WIDTH_PX,
+ clampSidebarWidth,
+ useSidebarWidth,
+} from "@/hooks/use-sidebar-width";
function Slot({ children, ...props }: { children?: React.ReactNode; [key: string]: unknown }) {
if (React.isValidElement(children)) {
@@ -27,7 +34,6 @@ function Slot({ children, ...props }: { children?: React.ReactNode; [key: string
Slot.Root = Slot as React.ElementType;
-const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
@@ -75,6 +81,7 @@ function SidebarProvider({
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed";
+ const [sidebarWidth] = useSidebarWidth();
const contextValue = React.useMemo(
() => ({
@@ -96,7 +103,7 @@ function SidebarProvider({
data-slot="sidebar-wrapper"
style={
{
- "--sidebar-width": SIDEBAR_WIDTH,
+ "--sidebar-width": `${sidebarWidth}px`,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style,
} as React.CSSProperties
@@ -183,7 +190,7 @@ function Sidebar({
{children}
+ {side === "left" && {
+ if (event.button !== 0) return;
+ const wrapper = event.currentTarget.closest("[data-slot=sidebar-wrapper]");
+ if (!wrapper) return;
+ event.preventDefault();
+ event.currentTarget.setPointerCapture(event.pointerId);
+ event.currentTarget.dataset.dragging = "true";
+ wrapper.dataset.sidebarResizing = "true";
+ document.body.style.cursor = "col-resize";
+ dragRef.current = { startX: event.clientX, startWidth: width, wrapper };
+ }}
+ onPointerMove={(event) => {
+ const drag = dragRef.current;
+ if (!drag) return;
+ const next = clampSidebarWidth(drag.startWidth + event.clientX - drag.startX);
+ // Live-update the CSS variable; the setting is persisted once on release.
+ drag.wrapper.style.setProperty("--sidebar-width", `${next}px`);
+ }}
+ onPointerUp={(event) => {
+ delete event.currentTarget.dataset.dragging;
+ endDrag(event);
+ }}
+ onPointerCancel={(event) => {
+ delete event.currentTarget.dataset.dragging;
+ endDrag(event);
+ }}
+ onDoubleClick={() => setWidth(SIDEBAR_DEFAULT_WIDTH_PX)}
+ onKeyDown={(event) => {
+ if (event.key === "ArrowLeft") setWidth(width - SIDEBAR_RESIZE_KEYBOARD_STEP_PX);
+ else if (event.key === "ArrowRight") setWidth(width + SIDEBAR_RESIZE_KEYBOARD_STEP_PX);
+ else if (event.key === "Home") setWidth(SIDEBAR_MIN_WIDTH_PX);
+ else if (event.key === "End") setWidth(SIDEBAR_MAX_WIDTH_PX);
+ else return;
+ event.preventDefault();
+ }}
+ />
+ );
+}
+
function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps) {
const { t } = useTranslation();
const { toggleSidebar } = useSidebar();
diff --git a/src/features/profile/FontSizeSetting.tsx b/src/features/profile/FontSizeSetting.tsx
new file mode 100644
index 0000000..d291f15
--- /dev/null
+++ b/src/features/profile/FontSizeSetting.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { useFontSize } from "@/hooks/use-font-size";
+
+export function FontSizeSetting() {
+ const { t } = useTranslation();
+ const [size, setSize] = useFontSize();
+ return (
+
- {
- if (value) setChatWidth(value as ChatWidth);
- }}
- className="flex w-full"
- >
-
- {t("settings.general.chatWidthStandard")}
-
-
- {t("settings.general.chatWidthFull")}
-
-
-
+
+ setSize(Array.isArray(value) ? value[0]! : value)}
+ />
+
+ );
+}
diff --git a/src/features/profile/PreferenceControls.tsx b/src/features/profile/PreferenceControls.tsx
index f50050d..e59d519 100644
--- a/src/features/profile/PreferenceControls.tsx
+++ b/src/features/profile/PreferenceControls.tsx
@@ -20,7 +20,7 @@ import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { NOTIFICATIONS_ENABLED_KEY } from "@/hooks/use-agent-state";
-import { useChatWidth, type ChatWidth } from "@/hooks/use-chat-width";
+import { useChatWidth } from "@/hooks/use-chat-width";
import { useTheme, type ThemeMode } from "@/hooks/use-theme";
import { detectSystemLanguage, SUPPORTED_LANGUAGE_LIST, type SupportedLanguage } from "@/i18n";
import { DEFAULT_MODEL_MAX_AGE_MONTHS, STORAGE_KEYS } from "@/lib/constants";
@@ -207,27 +207,25 @@ export function ContrastSetting() {
export function ChatWidthSetting() {
const { t } = useTranslation();
const [chatWidth, setChatWidth] = useChatWidth();
+ const id = useId();
return (
-
+
+ {size}px
+
+
+ setChatWidth(value ?? 70)}
+ min={40}
+ max={100}
+ step={1}
+ />
+
);
}
diff --git a/src/features/profile/PreferenceSections.tsx b/src/features/profile/PreferenceSections.tsx
new file mode 100644
index 0000000..fc53d71
--- /dev/null
+++ b/src/features/profile/PreferenceSections.tsx
@@ -0,0 +1,34 @@
+import {
+ AccentSetting,
+ ChatWidthSetting,
+ ContrastSetting,
+ ModelAgeFilterSetting,
+ NewChatModelSetting,
+ NotificationsSetting,
+ RespondingSidebarSetting,
+ ThemeSetting,
+} from "./PreferenceControls";
+import { FontSizeSetting } from "./FontSizeSetting";
+
+export function AppearanceSettings() {
+ return (
+
+
+ {chatWidth}%
+
+
+
+ );
+}
+
+export function ChatPreferences() {
+ return (
+
+
+ );
+}
diff --git a/src/features/profile/ProfilePanel.render.test.tsx b/src/features/profile/ProfilePanel.render.test.tsx
index c44bf73..8d84950 100644
--- a/src/features/profile/ProfilePanel.render.test.tsx
+++ b/src/features/profile/ProfilePanel.render.test.tsx
@@ -66,15 +66,11 @@ describe("ProfilePanel", () => {
fixture.actor = { type: "local", id: "local", displayName: "Local" };
});
- test("starts as a short menu that summarises each group", () => {
+ test("keeps account actions separate from centralized preferences", () => {
render(
{signedIn && (
@@ -108,34 +78,15 @@ function Home({
)}
-
+ )}
{signedIn && (
@@ -205,9 +156,6 @@ export function ProfilePanel({ onClose }: { onClose: () => void }) {
const title = {
home: signedIn ? t("profile.title") : t("profile.preferencesTitle"),
account: t("profile.account"),
- appearance: t("profile.sections.appearance"),
- language: t("settings.general.language"),
- chats: t("profile.sections.chats"),
instructions: t("profile.personalInstructions"),
}[view];
@@ -250,27 +198,6 @@ export function ProfilePanel({ onClose }: { onClose: () => void }) {
-
- )}
- {view === "language" && (
-
-
- )}
{view === "instructions" && (
+
+
+
+
+
+ {t("settings.quick.title")}
+
+
+ );
+}
diff --git a/src/features/session-transcript/transcript-navigation.test.tsx b/src/features/session-transcript/transcript-navigation.test.tsx
new file mode 100644
index 0000000..6cf73a5
--- /dev/null
+++ b/src/features/session-transcript/transcript-navigation.test.tsx
@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+vi.mock("react-i18next", () => ({
+ useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
+}));
+
+import { TranscriptViewport } from "./transcript-viewport";
+
+function setGeometry(
+ element: HTMLElement,
+ geometry: { scrollHeight: number; clientHeight: number; scrollTop: number },
+) {
+ Object.defineProperties(element, {
+ scrollHeight: { configurable: true, get: () => geometry.scrollHeight },
+ clientHeight: { configurable: true, get: () => geometry.clientHeight },
+ scrollTop: {
+ configurable: true,
+ get: () => geometry.scrollTop,
+ set: (value) => {
+ geometry.scrollTop = value;
+ },
+ },
+ });
+}
+
+function renderViewport(contentKey: string) {
+ return (
+ true}
+ showLoadOlderRow={false}
+ >
+
+ );
+}
+
+describe("TranscriptNavigation", () => {
+ beforeEach(() => {
+ vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+ callback(0);
+ return 1;
+ });
+ vi.stubGlobal(
+ "ResizeObserver",
+ class {
+ observe() {}
+ disconnect() {}
+ },
+ );
+ });
+ afterEach(() => {
+ cleanup();
+ vi.unstubAllGlobals();
+ });
+
+ test("offers a jump to the end once the user scrolls away and re-pins on click", () => {
+ render(renderViewport("1"));
+ const viewport = screen.getByText("message").parentElement!.parentElement!;
+ const button = screen.getByText("messageList.scrollToEnd").closest("button")!;
+ expect(button.getAttribute("aria-hidden")).toBe("true");
+
+ const geometry = { scrollHeight: 2000, clientHeight: 400, scrollTop: 200 };
+ setGeometry(viewport, geometry);
+ fireEvent.scroll(viewport);
+ expect(button.getAttribute("aria-hidden")).toBe("false");
+
+ fireEvent.click(button);
+ expect(geometry.scrollTop).toBe(1600);
+ expect(button.getAttribute("aria-hidden")).toBe("true");
+ });
+
+ test("flags new output that arrives while reading further up", () => {
+ const view = render(renderViewport("1"));
+ const viewport = screen.getByText("message").parentElement!.parentElement!;
+ setGeometry(viewport, { scrollHeight: 2000, clientHeight: 400, scrollTop: 200 });
+ fireEvent.scroll(viewport);
+ expect(screen.queryByText("messageList.newMessages")).toBeNull();
+
+ view.rerender(renderViewport("2"));
+ expect(screen.getByText("messageList.newMessages")).toBeTruthy();
+ });
+
+ test("Alt+End jumps to the end", () => {
+ render(renderViewport("1"));
+ const viewport = screen.getByText("message").parentElement!.parentElement!;
+ const geometry = { scrollHeight: 2000, clientHeight: 400, scrollTop: 200 };
+ setGeometry(viewport, geometry);
+ viewport.getClientRects = () => [{}] as unknown as DOMRectList;
+ fireEvent.keyDown(window, { key: "End", altKey: true });
+ expect(geometry.scrollTop).toBe(1600);
+ });
+});
diff --git a/src/features/session-transcript/transcript-navigation.tsx b/src/features/session-transcript/transcript-navigation.tsx
new file mode 100644
index 0000000..b6e3db0
--- /dev/null
+++ b/src/features/session-transcript/transcript-navigation.tsx
@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowDown } from "lucide-react";
+import { isNearBottom } from "@/features/session-transcript/use-pinned-scroll";
+
+/** Gap kept above a prompt after jumping to it, so it does not stick to the top edge. */
+const PROMPT_TOP_GAP_PX = 12;
+const PROMPT_SELECTOR = '[data-transcript-role="user"]';
+
+function promptOffset(container: HTMLElement, prompt: HTMLElement): number {
+ return (
+ prompt.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop
+ );
+}
+
+/** The prompt above or below the current reading position, if any. */
+export function findAdjacentPrompt(
+ container: HTMLElement,
+ direction: "previous" | "next",
+): HTMLElement | undefined {
+ const position = container.scrollTop + PROMPT_TOP_GAP_PX;
+ const prompts = Array.from(container.querySelectorAll(PROMPT_SELECTOR));
+ if (direction === "next") {
+ return prompts.find((prompt) => promptOffset(container, prompt) > position + 4);
+ }
+ let match: HTMLElement | undefined;
+ for (const prompt of prompts) {
+ if (promptOffset(container, prompt) < position - 4) match = prompt;
+ }
+ return match;
+}
+
+/** The prompt whose turn is currently being read: the last one above the upper third. */
+export function findActivePrompt(container: HTMLElement): HTMLElement | undefined {
+ const prompts = Array.from(container.querySelectorAll(PROMPT_SELECTOR));
+ if (!isNearBottom(container) || container.scrollHeight <= container.clientHeight) {
+ const position = container.scrollTop + container.clientHeight / 3;
+ let match = prompts[0];
+ for (const prompt of prompts) {
+ if (promptOffset(container, prompt) <= position) match = prompt;
+ }
+ return match;
+ }
+ return prompts.at(-1);
+}
+
+/**
+ * Jump controls for long transcripts: back to the newest message (flagging
+ * output that arrived while the user was reading above), prompt-to-prompt
+ * stepping via Alt+↑ / Alt+↓, and direct jumps for the prompt rail.
+ */
+export function useTranscriptNavigation(input: {
+ scrollRef: RefObject;
+ sessionId: string | null;
+ contentKey: string;
+ scrollToBottom: () => void;
+ detachPin: () => void;
+}) {
+ const { scrollRef, sessionId, contentKey, scrollToBottom, detachPin } = input;
+ const [awayFromBottom, setAwayFromBottom] = useState(false);
+ const [hasUnseen, setHasUnseen] = useState(false);
+ const [activePromptId, setActivePromptId] = useState(null);
+ const lastContentKey = useRef(contentKey);
+ const frame = useRef(null);
+
+ const sync = useCallback(() => {
+ const el = scrollRef.current;
+ if (!el) return;
+ const away = !isNearBottom(el);
+ setAwayFromBottom(away);
+ setActivePromptId(findActivePrompt(el)?.dataset.messageId ?? null);
+ if (!away) setHasUnseen(false);
+ }, [scrollRef]);
+
+ const onScroll = useCallback(() => {
+ if (frame.current !== null) return;
+ frame.current = requestAnimationFrame(() => {
+ frame.current = null;
+ sync();
+ });
+ }, [sync]);
+
+ useEffect(
+ () => () => {
+ if (frame.current !== null) cancelAnimationFrame(frame.current);
+ },
+ [],
+ );
+
+ useEffect(() => {
+ setAwayFromBottom(false);
+ setHasUnseen(false);
+ setActivePromptId(null);
+ }, [sessionId]);
+
+ useEffect(() => {
+ const changed = lastContentKey.current !== contentKey;
+ lastContentKey.current = contentKey;
+ const el = scrollRef.current;
+ if (!el || !changed) return;
+ if (!isNearBottom(el)) {
+ setAwayFromBottom(true);
+ setHasUnseen(true);
+ }
+ sync();
+ }, [contentKey, scrollRef, sync]);
+
+ const jumpToEnd = useCallback(() => {
+ scrollToBottom();
+ setAwayFromBottom(false);
+ setHasUnseen(false);
+ }, [scrollToBottom]);
+
+ const alignPrompt = useCallback(
+ (prompt: HTMLElement) => {
+ const el = scrollRef.current;
+ if (!el) return;
+ detachPin();
+ el.scrollTop = promptOffset(el, prompt) - PROMPT_TOP_GAP_PX;
+ // Rows use content-visibility, so heights above the target can settle after the jump.
+ requestAnimationFrame(() => {
+ el.scrollTop = promptOffset(el, prompt) - PROMPT_TOP_GAP_PX;
+ sync();
+ });
+ },
+ [scrollRef, detachPin, sync],
+ );
+
+ const jumpToPrompt = useCallback(
+ (direction: "previous" | "next") => {
+ const el = scrollRef.current;
+ if (!el) return;
+ const prompt = findAdjacentPrompt(el, direction);
+ if (prompt) alignPrompt(prompt);
+ else if (direction === "next") jumpToEnd();
+ else if (el.scrollTop > 0) {
+ detachPin();
+ el.scrollTop = 0;
+ }
+ },
+ [scrollRef, alignPrompt, detachPin, jumpToEnd],
+ );
+
+ const jumpToMessage = useCallback(
+ (messageId: string) => {
+ const prompt = scrollRef.current?.querySelector(
+ `[data-message-id="${CSS.escape(messageId)}"]`,
+ );
+ if (prompt) alignPrompt(prompt);
+ },
+ [scrollRef, alignPrompt],
+ );
+
+ useEffect(() => {
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.defaultPrevented || !event.altKey || event.ctrlKey || event.metaKey) return;
+ const el = scrollRef.current;
+ if (!el || !el.isConnected || el.getClientRects().length === 0) return;
+ if (event.key === "ArrowUp") jumpToPrompt("previous");
+ else if (event.key === "ArrowDown") jumpToPrompt("next");
+ else if (event.key === "End") jumpToEnd();
+ else return;
+ event.preventDefault();
+ };
+ window.addEventListener("keydown", onKeyDown);
+ return () => window.removeEventListener("keydown", onKeyDown);
+ }, [scrollRef, jumpToPrompt, jumpToEnd]);
+
+ return {
+ onScroll,
+ awayFromBottom,
+ hasUnseen,
+ activePromptId,
+ jumpToEnd,
+ jumpToPrompt,
+ jumpToMessage,
+ };
+}
+
+export function TranscriptNavigation({
+ awayFromBottom,
+ hasUnseen,
+ onJumpToEnd,
+}: {
+ awayFromBottom: boolean;
+ hasUnseen: boolean;
+ onJumpToEnd: () => void;
+}) {
+ const { t } = useTranslation();
+
+ return (
+ (null);
+ const listRef = useRef(null);
+ const [preview, setPreview] = useState<{ marker: PromptMarker; top: number } | null>(null);
+
+ useEffect(() => {
+ const list = listRef.current;
+ const active = activeId
+ ? list?.querySelector(`[data-marker-id="${CSS.escape(activeId)}"]`)
+ : null;
+ if (!list || !active) return;
+ if (active.offsetTop < list.scrollTop) list.scrollTop = active.offsetTop;
+ else if (active.offsetTop + active.offsetHeight > list.scrollTop + list.clientHeight) {
+ list.scrollTop = active.offsetTop + active.offsetHeight - list.clientHeight;
+ }
+ }, [activeId]);
+
+ const showPreview = (marker: PromptMarker, target: HTMLElement) => {
+ const nav = navRef.current;
+ if (!nav) return;
+ const rect = target.getBoundingClientRect();
+ setPreview({ marker, top: rect.top + rect.height / 2 - nav.getBoundingClientRect().top });
+ };
+
+ return (
+
+ );
+}
diff --git a/src/features/session-transcript/transcript-rows.tsx b/src/features/session-transcript/transcript-rows.tsx
index 6b3dd01..d50159c 100644
--- a/src/features/session-transcript/transcript-rows.tsx
+++ b/src/features/session-transcript/transcript-rows.tsx
@@ -24,6 +24,8 @@ export const TranscriptMessageRow = memo(function TranscriptMessageRow({
className={row.spacing}
style={{ contentVisibility: "auto" }}
data-created-at={row.entry.info.time.created || undefined}
+ data-transcript-role={row.entry.info.role}
+ data-message-id={row.id}
>
{
,
);
const content = screen.getByText("message").parentElement!;
- expect(content.classList.contains("max-w-2xl")).toBe(true);
+ expect(content.classList.contains("md:w-[var(--chat-width)]")).toBe(true);
+ expect(content.style.getPropertyValue("--chat-width")).toBe("70%");
act(() => storageSet(STORAGE_KEYS.CHAT_WIDTH, "full"));
- expect(content.classList.contains("max-w-none")).toBe(true);
+ expect(content.style.getPropertyValue("--chat-width")).toBe("100%");
+ act(() => storageSet(STORAGE_KEYS.CHAT_WIDTH, "83"));
+ expect(content.style.getPropertyValue("--chat-width")).toBe("83%");
view.unmount();
});
diff --git a/src/features/session-transcript/transcript-viewport.tsx b/src/features/session-transcript/transcript-viewport.tsx
index 75bda2c..05ad1a0 100644
--- a/src/features/session-transcript/transcript-viewport.tsx
+++ b/src/features/session-transcript/transcript-viewport.tsx
@@ -6,6 +6,12 @@ import {
ScrollTimeIndicator,
useScrollTimeIndicator,
} from "@/features/session-transcript/scroll-time-indicator";
+import {
+ TranscriptNavigation,
+ useTranscriptNavigation,
+} from "@/features/session-transcript/transcript-navigation";
+import type { PromptMarker } from "@/features/session-transcript/transcript-prompt-markers";
+import { TranscriptPromptRail } from "@/features/session-transcript/transcript-prompt-rail";
import { usePinnedScroll } from "@/features/session-transcript/use-pinned-scroll";
import { useChatWidth } from "@/hooks/use-chat-width";
@@ -19,6 +25,7 @@ export function TranscriptViewport({
showLoadOlderRow,
children,
trailingContent,
+ promptMarkers = [],
}: {
sessionId: string | null;
contentKey: string;
@@ -29,15 +36,23 @@ export function TranscriptViewport({
showLoadOlderRow: boolean;
children: ReactNode;
trailingContent?: ReactNode;
+ promptMarkers?: readonly PromptMarker[];
}) {
const { t } = useTranslation();
const [chatWidth] = useChatWidth();
- const { scrollRef, onScroll, detachPin, capturePrependAnchor } = usePinnedScroll({
+ const { scrollRef, onScroll, detachPin, capturePrependAnchor, scrollToBottom } = usePinnedScroll({
sessionId,
contentKey,
pinWhenNearBottom,
});
const timeIndicator = useScrollTimeIndicator(scrollRef);
+ const navigation = useTranscriptNavigation({
+ scrollRef,
+ sessionId,
+ contentKey,
+ scrollToBottom,
+ detachPin,
+ });
const handleLoadOlder = () => {
detachPin();
@@ -45,42 +60,59 @@ export function TranscriptViewport({
void onLoadOlder();
};
+ const showPromptRail = promptMarkers.length > 1;
+
return (
-
-
- )}
- {view === "chats" && (
-
+
+ {t("settings.general.language")}
+
+
+
+
+ message
+
+
+ );
+}
diff --git a/src/features/session-transcript/transcript-prompt-markers.test.ts b/src/features/session-transcript/transcript-prompt-markers.test.ts
new file mode 100644
index 0000000..ce0374f
--- /dev/null
+++ b/src/features/session-transcript/transcript-prompt-markers.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vite-plus/test";
+import { buildPromptMarkers } from "./transcript-prompt-markers";
+import type { TranscriptRow } from "./transcript-row-model";
+
+function row(id: string, role: string, ...texts: string[]): TranscriptRow {
+ return {
+ kind: "message",
+ id,
+ spacing: "",
+ actions: {},
+ entry: {
+ info: { id, sessionID: "s1", role, time: { created: 1 } },
+ parts: texts.map((text, index) => ({ id: `${id}-${index}`, type: "text", text })),
+ },
+ } as TranscriptRow;
+}
+
+describe("buildPromptMarkers", () => {
+ test("pairs each prompt with the reply text that followed it", () => {
+ const markers = buildPromptMarkers([
+ row("u1", "user", "Fix the login\nbug"),
+ row("a1", "assistant", "Done, the session", "cookie is set."),
+ row("u2", "user", "Look at @shots/home.png please"),
+ ]);
+ expect(markers).toEqual([
+ { id: "u1", prompt: "Fix the login bug", reply: "Done, the session cookie is set." },
+ { id: "u2", prompt: "Look at home.png please", reply: "" },
+ ]);
+ });
+
+ test("ignores synthetic parts and clips long previews", () => {
+ const first = row("u1", "user", "x".repeat(400));
+ first.entry.parts.push({ id: "syn", type: "text", text: "hidden", synthetic: true });
+ const [marker] = buildPromptMarkers([first]);
+ expect(marker?.prompt).toHaveLength(280);
+ expect(marker?.prompt.endsWith("…")).toBe(true);
+ expect(marker?.prompt).not.toContain("hidden");
+ });
+});
diff --git a/src/features/session-transcript/transcript-prompt-markers.ts b/src/features/session-transcript/transcript-prompt-markers.ts
new file mode 100644
index 0000000..d2bec17
--- /dev/null
+++ b/src/features/session-transcript/transcript-prompt-markers.ts
@@ -0,0 +1,50 @@
+import type { TranscriptRow } from "@/features/session-transcript/transcript-row-model";
+import { splitImageMentions } from "@/lib/image-mentions";
+
+const PREVIEW_MAX_CHARS = 280;
+
+export type PromptMarker = {
+ /** Message id of the user prompt; matches the row's `data-message-id`. */
+ id: string;
+ prompt: string;
+ reply: string;
+};
+
+function visibleText(row: TranscriptRow): string {
+ const text = row.entry.parts
+ .map((part) => (part.type === "text" && !part.synthetic && !part.ignored ? part.text : ""))
+ .join(" ");
+ return splitImageMentions(text)
+ .map((segment) => (segment.type === "text" ? segment.text : segment.filename))
+ .join("")
+ .replace(/\s+/g, " ")
+ .trim();
+}
+
+function clip(text: string): string {
+ return text.length > PREVIEW_MAX_CHARS ? `${text.slice(0, PREVIEW_MAX_CHARS - 1)}…` : text;
+}
+
+/** One marker per user prompt, paired with the text of the reply that followed it. */
+export function buildPromptMarkers(rows: readonly TranscriptRow[]): PromptMarker[] {
+ const markers: PromptMarker[] = [];
+ let replyParts: string[] = [];
+
+ const closeReply = () => {
+ const current = markers.at(-1);
+ if (current) current.reply = clip(replyParts.join(" ").trim());
+ replyParts = [];
+ };
+
+ for (const row of rows) {
+ if (row.entry.info.role === "user") {
+ closeReply();
+ markers.push({ id: row.id, prompt: clip(visibleText(row)), reply: "" });
+ } else if (markers.length > 0 && replyParts.join(" ").length < PREVIEW_MAX_CHARS) {
+ const text = visibleText(row);
+ if (text) replyParts.push(text);
+ }
+ }
+ closeReply();
+ return markers;
+}
diff --git a/src/features/session-transcript/transcript-prompt-rail.test.tsx b/src/features/session-transcript/transcript-prompt-rail.test.tsx
new file mode 100644
index 0000000..3212851
--- /dev/null
+++ b/src/features/session-transcript/transcript-prompt-rail.test.tsx
@@ -0,0 +1,34 @@
+// @vitest-environment happy-dom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vite-plus/test";
+
+vi.mock("react-i18next", () => ({
+ useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { TranscriptPromptRail } from "./transcript-prompt-rail";
+
+const markers = [
+ { id: "u1", prompt: "First prompt", reply: "First reply" },
+ { id: "u2", prompt: "Second prompt", reply: "" },
+];
+
+describe("TranscriptPromptRail", () => {
+ afterEach(cleanup);
+
+ test("marks the current prompt, previews on hover and jumps on click", () => {
+ const onSelect = vi.fn();
+ render(
+
+
+ {
- onScroll();
- timeIndicator.onScroll();
- }}
- onWheel={(event) => {
- if (event.deltaY < 0) detachPin();
- }}
- className="relative flex-1 overflow-y-auto overflow-x-hidden bg-background px-4 py-4 [overflow-anchor:none]"
- >
-
{
+ onScroll();
+ timeIndicator.onScroll();
+ navigation.onScroll();
+ }}
+ onWheel={(event) => {
+ if (event.deltaY < 0) detachPin();
+ }}
+ className={`relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-background py-4 pr-4 [overflow-anchor:none] ${showPromptRail ? "pl-8" : "pl-4"}`}
>
- {showLoadOlderRow && (
-
+ {showPromptRail && (
+
- {isLoadingOlder ? (
-
- )}
- {children}
- {trailingContent}
+
- {t("messageList.loadOlderFailed")}
-
- )}
-
+ {showLoadOlderRow && (
+
+ {isLoadingOlder ? (
+
+ )}
+ {children}
+ {trailingContent}
+
+ {t("messageList.loadOlderFailed")}
+
+ )}
+