{row.kind === "work" ?
: null}
{row.kind === "message" && row.message.role === "user" ?
: null}
diff --git a/apps/web/src/components/chat/StickyUserMessagesOverlay.tsx b/apps/web/src/components/chat/StickyUserMessagesOverlay.tsx
new file mode 100644
index 00000000000..e0915b888c6
--- /dev/null
+++ b/apps/web/src/components/chat/StickyUserMessagesOverlay.tsx
@@ -0,0 +1,356 @@
+import { type MessageId, type ServerProviderSkill } from "@t3tools/contracts";
+import type {
+ StickyUserMessageCount,
+ StickyUserMessageMaxLines,
+ TimestampFormat,
+} from "@t3tools/contracts/settings";
+import type { LegendListRef } from "@legendapp/list/react";
+import * as Equal from "effect/Equal";
+import { useEffect, useRef, useState, type RefObject } from "react";
+
+import type { ChatMessage } from "../../types";
+import { formatTimestamp } from "../../timestampFormat";
+import { cn } from "~/lib/utils";
+import { deriveDisplayedUserMessageState } from "~/lib/terminalContext";
+import { SkillInlineText } from "./SkillInlineText";
+import type { MessagesTimelineRow } from "./MessagesTimeline.logic";
+
+type UserTimelineMessage = ChatMessage & { role: "user" };
+
+export interface StickyUserMessageEntry {
+ id: MessageId;
+ rowIndex: number;
+ message: UserTimelineMessage;
+}
+
+export function deriveStickyUserMessageEntries(
+ rows: ReadonlyArray
,
+ count: StickyUserMessageCount,
+): StickyUserMessageEntry[] {
+ if (count <= 0) {
+ return [];
+ }
+
+ const entries: StickyUserMessageEntry[] = [];
+ for (let rowIndex = rows.length - 1; rowIndex >= 0 && entries.length < count; rowIndex -= 1) {
+ const row = rows[rowIndex];
+ if (row?.kind !== "message") {
+ continue;
+ }
+
+ const { message } = row;
+ if (!isUserTimelineMessage(message)) {
+ continue;
+ }
+
+ entries.unshift({
+ id: message.id,
+ rowIndex,
+ message,
+ });
+ }
+
+ return entries;
+}
+
+function isUserTimelineMessage(message: ChatMessage): message is UserTimelineMessage {
+ return message.role === "user";
+}
+
+export function useHiddenStickyUserMessageIds({
+ entries,
+ listRef,
+ timelineViewportRef,
+ enabled,
+}: {
+ entries: ReadonlyArray;
+ listRef: RefObject;
+ timelineViewportRef: RefObject;
+ enabled: boolean;
+}): ReadonlySet {
+ const [hiddenMessageIds, setHiddenMessageIds] = useState>(() => new Set());
+ const entriesRef = useRef(entries);
+ entriesRef.current = entries;
+ const entryKey = entries.map((entry) => entry.id).join("\n");
+
+ useEffect(() => {
+ if (!enabled || entryKey.length === 0) {
+ setHiddenMessageIds((current) => (current.size === 0 ? current : new Set()));
+ return;
+ }
+
+ const timelineViewport = timelineViewportRef.current;
+ const scrollRoot = getTimelineScrollRoot(timelineViewport);
+ if (!timelineViewport || !scrollRoot) {
+ return;
+ }
+
+ let disposed = false;
+ let animationFrameId: number | null = null;
+
+ const measure = () => {
+ if (disposed) return;
+ const rootRect = scrollRoot.getBoundingClientRect();
+ const listState = listRef.current?.getState?.();
+ const currentEntries = entriesRef.current;
+
+ setHiddenMessageIds((current) => {
+ const next = new Set();
+ for (const entry of currentEntries) {
+ const source = findStickyUserMessageSource(timelineViewport, entry.id);
+ if (!source) {
+ if (
+ (listState && entry.rowIndex < listState.start) ||
+ (!listState && current.has(entry.id))
+ ) {
+ next.add(entry.id);
+ }
+ continue;
+ }
+
+ const sourceRect = source.getBoundingClientRect();
+ const isVisible = sourceRect.bottom > rootRect.top && sourceRect.top < rootRect.bottom;
+ const isAboveViewport = sourceRect.bottom <= rootRect.top;
+ if (!isVisible && isAboveViewport) {
+ next.add(entry.id);
+ }
+ }
+
+ return Equal.equals(current, next) ? current : next;
+ });
+ };
+
+ const scheduleMeasure = () => {
+ if (animationFrameId !== null) {
+ return;
+ }
+ animationFrameId = window.requestAnimationFrame(() => {
+ animationFrameId = null;
+ measure();
+ });
+ };
+
+ measure();
+ scrollRoot.addEventListener("scroll", scheduleMeasure, { passive: true });
+ window.addEventListener("resize", scheduleMeasure);
+
+ return () => {
+ disposed = true;
+ if (animationFrameId !== null) {
+ window.cancelAnimationFrame(animationFrameId);
+ }
+ scrollRoot.removeEventListener("scroll", scheduleMeasure);
+ window.removeEventListener("resize", scheduleMeasure);
+ };
+ }, [enabled, entryKey, listRef, timelineViewportRef]);
+
+ return hiddenMessageIds;
+}
+
+export function StickyUserMessagesOverlay({
+ entries,
+ hiddenMessageIds,
+ listRef,
+ maxLines,
+ skills,
+ timestampFormat,
+ timelineViewportRef,
+}: {
+ entries: ReadonlyArray;
+ hiddenMessageIds: ReadonlySet;
+ listRef: RefObject;
+ maxLines: StickyUserMessageMaxLines;
+ skills: ReadonlyArray>;
+ timestampFormat: TimestampFormat;
+ timelineViewportRef: RefObject;
+}) {
+ const visibleEntries = entries.filter((entry) => hiddenMessageIds.has(entry.id));
+
+ if (visibleEntries.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+ {visibleEntries.map((entry, index) => (
+
+ scrollToStickyUserMessageSource({
+ entry,
+ listRef,
+ timelineViewportRef,
+ })
+ }
+ />
+ ))}
+
+
+
+
+
+ }
+ />
+
{
sidebarProjectSortOrder: "manual" as const,
sidebarThreadSortOrder: "created_at" as const,
sidebarThreadPreviewCount: 6,
+ stickyUserMessageCount: 2 as const,
+ stickyUserMessageMaxLines: 3 as const,
timestampFormat: "24-hour" as const,
};
const getClientSettings = vi.fn().mockResolvedValue({
@@ -677,6 +679,8 @@ describe("wsApi", () => {
sidebarProjectSortOrder: "manual" as const,
sidebarThreadSortOrder: "created_at" as const,
sidebarThreadPreviewCount: 6,
+ stickyUserMessageCount: 2 as const,
+ stickyUserMessageMaxLines: 3 as const,
timestampFormat: "24-hour" as const,
};
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index 39695fe3b01..f87c8a0a585 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -2,12 +2,47 @@ import { describe, expect, it } from "vitest";
import * as Schema from "effect/Schema";
import { ProviderInstanceId } from "./providerInstance.ts";
-import { DEFAULT_SERVER_SETTINGS, ServerSettings, ServerSettingsPatch } from "./settings.ts";
+import {
+ ClientSettingsPatch,
+ ClientSettingsSchema,
+ DEFAULT_CLIENT_SETTINGS,
+ DEFAULT_SERVER_SETTINGS,
+ ServerSettings,
+ ServerSettingsPatch,
+} from "./settings.ts";
+const decodeClientSettings = Schema.decodeUnknownSync(ClientSettingsSchema);
+const decodeClientSettingsPatch = Schema.decodeUnknownSync(ClientSettingsPatch);
const decodeServerSettings = Schema.decodeUnknownSync(ServerSettings);
const decodeServerSettingsPatch = Schema.decodeUnknownSync(ServerSettingsPatch);
const encodeServerSettings = Schema.encodeSync(ServerSettings);
+describe("ClientSettings sticky user messages", () => {
+ it("defaults sticky user messages off with a two-line clamp", () => {
+ expect(DEFAULT_CLIENT_SETTINGS.stickyUserMessageCount).toBe(0);
+ expect(DEFAULT_CLIENT_SETTINGS.stickyUserMessageMaxLines).toBe(2);
+
+ const decoded = decodeClientSettings({});
+ expect(decoded.stickyUserMessageCount).toBe(0);
+ expect(decoded.stickyUserMessageMaxLines).toBe(2);
+ });
+
+ it("accepts bounded sticky user message patches", () => {
+ expect(
+ decodeClientSettingsPatch({
+ stickyUserMessageCount: 2,
+ stickyUserMessageMaxLines: 3,
+ }),
+ ).toEqual({
+ stickyUserMessageCount: 2,
+ stickyUserMessageMaxLines: 3,
+ });
+
+ expect(() => decodeClientSettingsPatch({ stickyUserMessageCount: 3 })).toThrow();
+ expect(() => decodeClientSettingsPatch({ stickyUserMessageMaxLines: 4 })).toThrow();
+ });
+});
+
describe("ServerSettings.providerInstances (slice-2 invariant)", () => {
it("defaults to an empty record so legacy configs without the key still decode", () => {
expect(DEFAULT_SERVER_SETTINGS.providerInstances).toEqual({});
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 2d115eed98e..7c6e001a2e9 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -39,6 +39,28 @@ export const SidebarThreadPreviewCount = Schema.Int.check(
export type SidebarThreadPreviewCount = typeof SidebarThreadPreviewCount.Type;
export const DEFAULT_SIDEBAR_THREAD_PREVIEW_COUNT: SidebarThreadPreviewCount = 6;
+export const MIN_STICKY_USER_MESSAGE_COUNT = 0;
+export const MAX_STICKY_USER_MESSAGE_COUNT = 2;
+export const DEFAULT_STICKY_USER_MESSAGE_COUNT = 0;
+export const StickyUserMessageCount = Schema.Int.check(
+ Schema.isBetween({
+ minimum: MIN_STICKY_USER_MESSAGE_COUNT,
+ maximum: MAX_STICKY_USER_MESSAGE_COUNT,
+ }),
+);
+export type StickyUserMessageCount = typeof StickyUserMessageCount.Type;
+
+export const MIN_STICKY_USER_MESSAGE_LINES = 1;
+export const MAX_STICKY_USER_MESSAGE_LINES = 3;
+export const DEFAULT_STICKY_USER_MESSAGE_MAX_LINES = 2;
+export const StickyUserMessageMaxLines = Schema.Int.check(
+ Schema.isBetween({
+ minimum: MIN_STICKY_USER_MESSAGE_LINES,
+ maximum: MAX_STICKY_USER_MESSAGE_LINES,
+ }),
+);
+export type StickyUserMessageMaxLines = typeof StickyUserMessageMaxLines.Type;
+
export const ClientSettingsSchema = Schema.Struct({
autoOpenPlanSidebar: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
confirmThreadArchive: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
@@ -89,6 +111,12 @@ export const ClientSettingsSchema = Schema.Struct({
sidebarThreadPreviewCount: SidebarThreadPreviewCount.pipe(
Schema.withDecodingDefault(Effect.succeed(DEFAULT_SIDEBAR_THREAD_PREVIEW_COUNT)),
),
+ stickyUserMessageCount: StickyUserMessageCount.pipe(
+ Schema.withDecodingDefault(Effect.succeed(DEFAULT_STICKY_USER_MESSAGE_COUNT)),
+ ),
+ stickyUserMessageMaxLines: StickyUserMessageMaxLines.pipe(
+ Schema.withDecodingDefault(Effect.succeed(DEFAULT_STICKY_USER_MESSAGE_MAX_LINES)),
+ ),
timestampFormat: TimestampFormat.pipe(
Schema.withDecodingDefault(Effect.succeed(DEFAULT_TIMESTAMP_FORMAT)),
),
@@ -508,6 +536,8 @@ export const ClientSettingsPatch = Schema.Struct({
sidebarProjectSortOrder: Schema.optionalKey(SidebarProjectSortOrder),
sidebarThreadSortOrder: Schema.optionalKey(SidebarThreadSortOrder),
sidebarThreadPreviewCount: Schema.optionalKey(SidebarThreadPreviewCount),
+ stickyUserMessageCount: Schema.optionalKey(StickyUserMessageCount),
+ stickyUserMessageMaxLines: Schema.optionalKey(StickyUserMessageMaxLines),
timestampFormat: Schema.optionalKey(TimestampFormat),
});
export type ClientSettingsPatch = typeof ClientSettingsPatch.Type;