{
+ if (!open) onClose();
+ }}
>
-
- {preview.images.length > 1 && (
-
- )}
-
-
+ {preview.images.length > 1 && (
+
+ )}
+
+
);
});
diff --git a/apps/web/src/components/chat/ExpandedImagePreview.test.ts b/apps/web/src/components/chat/ExpandedImagePreview.test.ts
index 12fd8bbf3232..54e7a18c3763 100644
--- a/apps/web/src/components/chat/ExpandedImagePreview.test.ts
+++ b/apps/web/src/components/chat/ExpandedImagePreview.test.ts
@@ -1,8 +1,10 @@
import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+import { EnvironmentId } from "@t3tools/contracts";
import type { ComposerFileAttachment } from "../../composerDraftStore";
import {
attachVideoThumbnail,
+ buildAttachmentVideoPreview,
buildExpandedImagePreview,
resolveMarkdownMediaPreview,
} from "./ExpandedImagePreview";
@@ -42,30 +44,39 @@ describe("resolveMarkdownMediaPreview", () => {
});
describe("buildExpandedImagePreview", () => {
- it("keeps window capture details with the expanded image", () => {
- const source = {
- kind: "snap-shot" as const,
- capturedAt: "2026-09-01T00:00:00.000Z",
- appName: "Editor",
- windowTitle: "main.ts",
- accessibleText: "const answer = 42;",
- };
- const preview = buildExpandedImagePreview(
- [
+ it("builds a signed-asset preview for a persisted video attachment", () => {
+ const preview = buildAttachmentVideoPreview(EnvironmentId.make("environment-1"), {
+ type: "file",
+ id: "attachment-video-1",
+ name: "demo.mp4",
+ mimeType: "video/mp4",
+ sizeBytes: 42,
+ });
+
+ expect(preview).toEqual({
+ images: [
{
- type: "image",
- id: "capture-1",
- name: "window.png",
- mimeType: "image/png",
- sizeBytes: 3,
- previewUrl: "data:image/png;base64,AQID",
- source,
+ src: null,
+ name: "demo.mp4",
+ type: "video",
+ actionsSource: {
+ kind: "video",
+ name: "demo.mp4",
+ src: null,
+ asset: {
+ environmentId: "environment-1",
+ resource: {
+ _tag: "attachment",
+ attachmentId: "attachment-video-1",
+ fileName: "demo.mp4",
+ mimeType: "video/mp4",
+ },
+ },
+ },
},
],
- "capture-1",
- );
-
- expect(preview?.images[0]?.source).toEqual(source);
+ index: 0,
+ });
});
it("builds a video preview for a local video attachment", () => {
diff --git a/apps/web/src/components/chat/ExpandedImagePreview.tsx b/apps/web/src/components/chat/ExpandedImagePreview.tsx
index 660be1b8152f..119fbee4f228 100644
--- a/apps/web/src/components/chat/ExpandedImagePreview.tsx
+++ b/apps/web/src/components/chat/ExpandedImagePreview.tsx
@@ -1,11 +1,10 @@
import type { SnapShotSource } from "@t3tools/contracts";
import type { ComposerFileAttachment } from "../../composerDraftStore";
-import { type ChatImageAttachment, isVideoAttachment } from "../../types";
+import { type ChatFileAttachment, type ChatImageAttachment, isVideoAttachment } from "../../types";
import type {
AssetCreateUrlResult,
AssetResource,
- ChatFileAttachment,
EnvironmentId,
ScopedThreadRef,
} from "@t3tools/contracts";
@@ -119,6 +118,36 @@ export function buildAttachmentVideoAsset(
};
}
+/** Opens a persisted video through the same signed-asset dialog used by message media. */
+export function buildAttachmentVideoPreview(
+ environmentId: EnvironmentId,
+ attachment: ChatFileAttachment,
+): ExpandedImagePreview | null {
+ if (!isVideoAttachment(attachment)) return null;
+ const src = attachment.previewUrl ?? null;
+ const asset =
+ attachment.downloadable === false
+ ? undefined
+ : buildAttachmentVideoAsset(environmentId, attachment);
+ if (src === null && asset === undefined) return null;
+ return {
+ images: [
+ {
+ src,
+ name: attachment.name,
+ type: "video",
+ actionsSource: {
+ kind: "video",
+ name: attachment.name,
+ src,
+ ...(asset ? { asset } : {}),
+ },
+ },
+ ],
+ index: 0,
+ };
+}
+
export function expandedImageKey(preview: ExpandedImagePreview): string {
const item = preview.images[preview.index];
const asset = item?.actionsSource?.asset;
diff --git a/apps/web/src/components/chat/FileTagChip.tsx b/apps/web/src/components/chat/FileTagChip.tsx
index d3cd656b37c5..11d12bb941c2 100644
--- a/apps/web/src/components/chat/FileTagChip.tsx
+++ b/apps/web/src/components/chat/FileTagChip.tsx
@@ -5,11 +5,12 @@ import {
COMPOSER_INLINE_CHIP_CLASS_NAME,
COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
+ CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
} from "../composerInlineChip";
import { PierreEntryIcon } from "./PierreEntryIcon";
-export const FILE_TAG_CHIP_CLASS_NAME = COMPOSER_INLINE_CHIP_CLASS_NAME;
-export const CHAT_FILE_TAG_CHIP_CLASS_NAME = CHAT_INLINE_CHIP_CLASS_NAME;
+export const FILE_TAG_CHIP_CLASS_NAME = `${COMPOSER_INLINE_CHIP_CLASS_NAME} ${CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.mention}`;
+export const CHAT_FILE_TAG_CHIP_CLASS_NAME = `${CHAT_INLINE_CHIP_CLASS_NAME} ${CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.mention}`;
export function FileTagChipContent(props: {
path: string;
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 80abd722f89a..5f1c0d7611b1 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -1777,7 +1777,8 @@ describe("MessagesTimeline", () => {
expect(markup).toContain('aria-label="Image attachment, shot.png"');
// Selection copy re-emits chips as their canonical links.
expect(markup).toContain('data-markdown-copy=""');
- expect(markup).toContain('aria-label="File attachment, notes.txt"');
+ expect(markup).toContain('aria-label="File attachment, notes.txt, 1 KB"');
+ expect(markup).toContain(">1 KB");
expect(markup).not.toContain('aria-label="Download notes.txt"');
expect(markup).toContain("legacy.txt");
expect(markup).not.toContain('href="t3-context://');
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 63e0bb2fb167..ec4762daf773 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1,4 +1,3 @@
-import { GitPullRequestIcon } from "lucide-react";
import {
getQuestionAnswerPreview,
getQuestionAnswerText,
@@ -10,6 +9,7 @@ import {
type TimelineMinimapItem,
} from "./timelineMinimapItems";
import {
+ COMPOSER_CONTEXT_KINDS,
type AssistantCitation,
type EnvironmentId,
type MessageId,
@@ -28,6 +28,7 @@ import {
} from "@t3tools/client-runtime/work-log/presentation";
import { resolveWorkGroupScrollAnchor } from "@t3tools/client-runtime/work-log/scroll-anchor";
import type { AgentPanelModel } from "@t3tools/client-runtime/state/subagentRuntime";
+import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments";
import {
emptyAgentPanelModel,
formatSubagentTokenCount,
@@ -100,6 +101,7 @@ import {
CircleAlertIcon,
DownloadIcon,
EyeIcon,
+ GitPullRequestIcon,
GlobeIcon,
HammerIcon,
MessageCircleIcon,
@@ -114,9 +116,6 @@ import {
WrenchIcon,
XIcon,
ZapIcon,
- CircleDashedIcon,
- FileIcon,
- ImageIcon,
} from "lucide-react";
import type {
ComposerContextId,
@@ -129,6 +128,7 @@ import { MediaVideoPlayer } from "../media/MediaVideoPlayer";
import { getVirtualizedScrollFadeClassName } from "../ui/scroll-area";
import {
buildAttachmentVideoAsset,
+ buildAttachmentVideoPreview,
buildExpandedImagePreview,
ExpandedImagePreview,
} from "./ExpandedImagePreview";
@@ -144,6 +144,7 @@ import {
} from "./timelineScrollAnchoring";
import { MessageCopyButton } from "./MessageCopyButton";
import { PierreEntryIcon } from "./PierreEntryIcon";
+import { inferEntryKindFromPath } from "../../pierre-icons";
import { AssistantSelectionToolbar } from "./AssistantSelectionToolbar";
import type { AssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
import {
@@ -180,8 +181,22 @@ import {
} from "./MessagesTimeline.logic";
import { TerminalContextInlineChip } from "./TerminalContextInlineChip";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
-import { asKnownContextRecord, resolveUserMessageContext } from "~/lib/composerContextRecords";
+import {
+ ContextChipPopover as UserMessageContextPopover,
+ ContextChipShell,
+ FileChip,
+ ImageChipButton,
+ PullRequestChip,
+ UnresolvedChip,
+} from "../contextChipParts";
+import {
+ asKnownContextRecord,
+ isPullRequestSummaryContext,
+ pullRequestContextDisplayState,
+ pullRequestContextKindLabel,
+ resolveUserMessageContext,
+ reviewCommentContextLabel,
+} from "~/lib/composerContextRecords";
import {
collectComposerContextReferences,
formatComposerContextReference,
@@ -194,7 +209,13 @@ import {
CHAT_INLINE_CHIP_CLASS_NAME,
CHAT_INLINE_CHIP_LABEL_CLASS_NAME,
COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
+ SKILL_CHIP_ICON_SVG,
+ CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES,
+ CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
+ PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES,
} from "../composerInlineChip";
+import { createContextPresentationRegistry } from "../contextPresentationRegistry";
+import { useOpenPrLink } from "~/lib/openPullRequestLink";
import type { ChatMarkdownContextReference } from "../ChatMarkdown";
import { cn } from "~/lib/utils";
import { useUiStateStore } from "~/uiStateStore";
@@ -233,6 +254,7 @@ interface TimelineRowSharedState {
onImageExpand: (preview: ExpandedImagePreview) => void;
onFileOpen: (attachment: ChatFileAttachment) => void;
onFileDownload: (attachment: ChatFileAttachment) => void;
+ openPullRequest: (event: MouseEvent, url: string) => void;
onOpenTurnDiff: (turnId: TurnId, filePath?: string) => void;
onToggleTurnFold: (turnId: TurnId) => void;
onToggleWorkGroup: (groupId: string, anchorKey: string) => void;
@@ -445,6 +467,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
setExpandedWorkGroupIds(paintedExpandedWorkGroupIds);
}
const citationThreadRef = useMemo(() => parseScopedThreadKey(routeThreadKey), [routeThreadKey]);
+ const openPullRequest = useOpenPrLink(citationThreadRef ?? undefined);
const expandCitedTurn = useCallback((turnId: TurnId) => {
setExpandedTurnIds((current) =>
current.has(turnId) ? current : new Set([...current, turnId]),
@@ -791,6 +814,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
onImageExpand,
onFileOpen,
onFileDownload,
+ openPullRequest,
onOpenTurnDiff,
onToggleTurnFold,
onToggleWorkGroup,
@@ -815,6 +839,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
onImageExpand,
onFileOpen,
onFileDownload,
+ openPullRequest,
onOpenTurnDiff,
onToggleTurnFold,
onToggleWorkGroup,
@@ -1506,6 +1531,10 @@ function UserTimelineRow({ row }: { row: Extract {
+ const preview = buildAttachmentVideoPreview(ctx.activeThreadEnvironmentId, file);
+ if (preview) onImageExpand(preview);
+ }}
/>
);
},
@@ -1517,6 +1546,7 @@ function UserTimelineRow({ row }: { row: Extract
- {props.icon}
- {props.label}
-
- );
- if (!props.tooltip) return chip;
return (
-
-
- {props.tooltip}
-
-
+ ;
copyMarkdown: string;
+ toneClassName: string;
}) {
+ const { openPullRequest } = use(TimelineRowCtx);
+ const metadata = props.record.pullRequest;
+ if (metadata === undefined) return null;
return (
-
-
- {props.children}
-
-
+
+ returnFocusTarget}
+ >
+ Expanded {mediaLabel} preview
+ {preview.images.length > 1 && (
- {item.type === "video" ? (
-
+
,
- document.body,
+
+
+ {item.type === "video" ? (
+
+
+ ) : (
+ setFailedImageSrc(item.src)}
/>
- ) : null
- ) : item.src === null || failedImageSrc === item.src ? (
-
-
- ) : (
- setFailedImageSrc(item.src)}
- />
- )}
-
-
- {preview.images.length > 1 && (
-
- )}
- + {openOriginalLink + ? "This image could not be loaded." + : "Image unavailable. The file may have been moved or deleted."} +
+ {openOriginalLink} +- {openOriginalLink - ? "This image could not be loaded." - : "Image unavailable. The file may have been moved or deleted."} -
- {openOriginalLink} -
-
- {item.name}
- {preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}
-
- {accessibilityDetails && item.source ? (
-
-
- setAccessibilityDetailsSrc(showingAccessibilityDetails ? null : item.src)
- }
- size="icon-micro"
- variant="ghost-muted"
- />
- }
- >
-
-
- {contentsLabel}
-
- ) : item.source ? (
-
-
+
+ {item.name}
+ {preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}
+
+ {accessibilityDetails && item.source ? (
+
+
+ setAccessibilityDetailsSrc(showingAccessibilityDetails ? null : item.src)
+ }
+ size="icon-micro"
+ variant="ghost-muted"
+ />
+ }
+ >
+
+
+ {contentsLabel}
+
+ ) : item.source ? (
+
+ ;
+}) {
+ const sourceLabel = record.source?.fileName
+ ? `${record.source.fileName}${record.source.lineNumber === null ? "" : `:${record.source.lineNumber}`}`
+ : null;
+ return (
+ context.onExpandImage(attachment)}
/>
+ );
+ },
+ },
+ {
+ kind: "file",
+ canRender: (record, context) =>
+ record.kind === "file" &&
+ context.attachment !== null &&
+ isFileAttachment(context.attachment),
+ render: (record, context) => {
+ if (
+ record.kind !== "file" ||
+ context.attachment === null ||
+ !isFileAttachment(context.attachment)
+ ) {
+ return
+ isVideo ? context.onExpandVideo(attachment) : context.onOpenFile(attachment)
+ }
+ tooltip={`${record.name}\n${size}`}
+ />
+ );
+ },
+ },
+ {
+ kind: "terminal",
+ canRender: (record) => record.kind === "terminal",
+ render: (record, context, definition) =>
+ record.kind === "terminal" ? (
+
+
- {tooltipText}
-
-
+ triggerClassName={cn(
+ chipClassName,
+ CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.terminal,
+ CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
+ "cursor-pointer",
+ )}
+ popupClassName="w-[min(40rem,calc(100vw-2rem))]"
+ viewportClassName="overflow-hidden p-2"
+ >
+ , url: string) => void;
}
export const ComposerContextActionsContext = createContext({
expandImage: () => {},
+ expandVideo: () => {},
+ openPullRequest: () => {},
});
export type ComposerDraftContextRecords = ReadonlyMap;
@@ -108,27 +126,32 @@ function ContextChip(props: {
icon: ReactElement;
label: string;
kindLabel: string;
- tooltip: string;
+ details: ReactNode;
+ detailsMode: ContextPresentationCapability["details"];
+ toneClassName: string;
}) {
- return (
-
-
- {props.icon}
- {props.label}
-
- }
- />
-
- {props.tooltip}
-
-
+ const content = (
+
+ {props.details}
+
+ );
+ }
+ return content;
}
function uploadStatusSuffix(upload: AttachmentUploadState | undefined): string | null {
@@ -151,29 +174,18 @@ function ImageContextChip(props: {
upload: AttachmentUploadState | undefined;
}) {
const actions = use(ComposerContextActionsContext);
- const suffix = uploadStatusSuffix(props.upload);
return (
actions.expandImage(props.record.id)}
- >
- {props.record.previewUrl ? (
- 
- ) : (
-
@@ -187,41 +199,48 @@ function FileContextChip(props: {
record: ComposerFileAttachment;
upload: AttachmentUploadState | undefined;
}) {
+ const actions = use(ComposerContextActionsContext);
+ const { resolvedTheme } = useTheme();
const needsReattach = composerFileNeedsReattach(props.record);
const suffix = needsReattach ? "attach again" : uploadStatusSuffix(props.upload);
+ const size = formatAttachmentSize(props.record.sizeBytes);
+ const isVideo = videoMimeType(props.record) !== null;
return (
-
-
-
- }
- />
-
- {needsReattach
+ actions.expandVideo(props.record.id) : undefined}
+ tooltip={
+ needsReattach
? `${props.record.name} was not saved with this draft. Attach it again to send it.`
- : attachmentTooltip(props.record, props.upload)}
-
-
+ : attachmentTooltip(props.record, props.upload)
+ }
+ />
);
}
-function reviewCommentTooltip(comment: ReviewCommentContext): string {
- const lines = [`${comment.filePath} ${comment.rangeLabel}`];
- if (comment.text.trim()) lines.push("", comment.text.trim());
- return lines.join("\n");
+function PullRequestContextChip(props: { record: ReviewCommentContext; toneClassName: string }) {
+ const actions = use(ComposerContextActionsContext);
+ const metadata = props.record.pullRequest;
+ if (metadata === undefined) return null;
+ return (
+
-
-
- }
- />
-
- This context is no longer available. Remove it or attach it again.
-
-
+
+
+ {tooltip}
+
+
+ );
+}
+
+export function ContextChipPopover(props: {
+ copyMarkdown?: string;
+ accessibleLabel: string;
+ chip: ReactNode;
+ children: ReactNode;
+ triggerClassName?: string;
+ popupClassName?: string;
+ viewportClassName?: string;
+}) {
+ return (
+
+
+ {props.accessibleLabel}
+ {props.children}
+
+
+ );
+}
+
+export function PullRequestChip(props: {
+ metadata: PullRequestContextMetadata;
+ label: string;
+ kindLabel: string;
+ className: string;
+ labelClassName: string;
+ copyMarkdown?: string;
+ onOpen: (event: MouseEvent, url: string) => void;
+}) {
+ return (
+
+ props.onOpen(event, props.metadata.url)}
+ >
+
+
+
+ );
+}
+
+export function ImageChipButton({
+ name,
+ previewUrl,
+ className,
+ labelClassName,
+ suffix,
+ ...props
+}: ComponentProps<"button"> & {
+ name: string;
+ previewUrl: string | undefined;
+ labelClassName: string;
+ suffix?: string | null;
+}) {
+ return (
+
+ );
+}
+
+export function FileChip(props: {
+ name: string;
+ size: string;
+ isVideo: boolean;
+ theme: "light" | "dark";
+ className: string;
+ labelClassName: string;
+ accessibleLabel: string;
+ tooltip: string;
+ suffix?: string | null;
+ copyMarkdown?: string;
+ disabled?: boolean;
+ error?: boolean;
+ unresolved?: boolean;
+ onOpen?: (() => void) | undefined;
+}) {
+ const className = cn(
+ props.className,
+ props.isVideo
+ ? CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.video
+ : CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.file,
+ props.onOpen && !props.disabled && CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
+ props.onOpen && !props.disabled && (props.isVideo ? "cursor-zoom-in" : "cursor-pointer"),
+ props.unresolved && "border-dashed text-foreground",
+ props.error && "border-destructive/35 bg-destructive/8 text-destructive",
+ );
+ const content =
+
+ {content}
+
+ ) : (
+
+ {content}
+
+ )
+ }
+ />
+
+ {props.tooltip}
+
+
+ );
+}
+
+function FileChipContent(props: {
+ name: string;
+ size: string;
+ isVideo: boolean;
+ theme: "light" | "dark";
+ labelClassName: string;
+ suffix?: string | null;
+}) {
+ return (
+ <>
+ {props.isVideo ? (
+ ({
+ handlers: [
+ { kind: "terminal", render: () => "first" },
+ { kind: "terminal", render: () => "second" },
+ ],
+ fallback: () => "fallback",
+ }),
+ ).toThrowError("Duplicate context presentation handler: terminal");
+ });
+
+ it("rejects a missing handler required by a surface", () => {
+ expect(() =>
+ createContextPresentationRegistry({
+ handlers: [{ kind: "terminal", render: () => "terminal" }],
+ requiredKinds: ["terminal", "review-comment"],
+ fallback: () => "fallback",
+ }),
+ ).toThrowError("Missing context presentation handler: review-comment");
+ });
+
+ it("uses the explicit fallback for unknown, missing, and mismatched records", () => {
+ const registry = createContextPresentationRegistry({
+ handlers: [
+ {
+ kind: "terminal",
+ canRender: (record) => record === "terminal",
+ render: () => "rendered",
+ },
+ ],
+ fallback: (kind) => `fallback:${kind}`,
+ });
+
+ expect(registry.render("terminal", "terminal", undefined)).toBe("rendered");
+ expect(registry.render("terminal", "file", undefined)).toBe("fallback:terminal");
+ expect(registry.render("terminal", undefined, undefined)).toBe("fallback:terminal");
+ expect(registry.render("future-kind", "payload", undefined)).toBe("fallback:future-kind");
+ });
+});
diff --git a/apps/web/src/components/contextPresentationRegistry.ts b/apps/web/src/components/contextPresentationRegistry.ts
new file mode 100644
index 000000000000..885663b34c2b
--- /dev/null
+++ b/apps/web/src/components/contextPresentationRegistry.ts
@@ -0,0 +1,126 @@
+import { COMPOSER_CONTEXT_KINDS, type KnownComposerContextKind } from "@t3tools/contracts";
+
+export interface ContextPresentationCapability {
+ details: "none" | "tooltip" | "popover";
+ expanded: "none" | "inline-block" | "modal";
+ defaultDraftView: "compact" | "expanded";
+}
+
+export interface ContextPresentationDefinition {
+ kind: KnownComposerContextKind;
+ capabilities: ContextPresentationCapability;
+}
+
+const DEFINITIONS = [
+ {
+ kind: "image",
+ capabilities: { details: "tooltip", expanded: "modal", defaultDraftView: "compact" },
+ },
+ {
+ kind: "file",
+ capabilities: { details: "tooltip", expanded: "modal", defaultDraftView: "compact" },
+ },
+ {
+ kind: "terminal",
+ capabilities: { details: "popover", expanded: "none", defaultDraftView: "compact" },
+ },
+ {
+ kind: "element",
+ capabilities: { details: "popover", expanded: "none", defaultDraftView: "compact" },
+ },
+ {
+ kind: "preview-annotation",
+ capabilities: { details: "popover", expanded: "modal", defaultDraftView: "compact" },
+ },
+ {
+ kind: "review-comment",
+ capabilities: { details: "popover", expanded: "none", defaultDraftView: "compact" },
+ },
+ {
+ kind: "mention",
+ capabilities: { details: "none", expanded: "none", defaultDraftView: "compact" },
+ },
+ {
+ kind: "skill",
+ capabilities: { details: "tooltip", expanded: "none", defaultDraftView: "compact" },
+ },
+] as const satisfies ReadonlyArray;
+
+function buildDefinitionRegistry(
+ definitions: ReadonlyArray,
+): ReadonlyMap {
+ const registry = new Map();
+ for (const definition of definitions) {
+ if (registry.has(definition.kind)) {
+ throw new Error(`Duplicate context presentation definition: ${definition.kind}`);
+ }
+ registry.set(definition.kind, definition);
+ }
+ for (const kind of COMPOSER_CONTEXT_KINDS) {
+ if (!registry.has(kind)) {
+ throw new Error(`Missing context presentation definition: ${kind}`);
+ }
+ }
+ return registry;
+}
+
+export const CONTEXT_PRESENTATION_DEFINITIONS = buildDefinitionRegistry(DEFINITIONS);
+
+export function contextPresentationDefinition(
+ kind: KnownComposerContextKind,
+): ContextPresentationDefinition {
+ return CONTEXT_PRESENTATION_DEFINITIONS.get(kind)!;
+}
+
+export interface ContextPresentationHandler {
+ kind: KnownComposerContextKind;
+ canRender?: (record: TRecord, context: TRenderContext) => boolean;
+ render: (
+ record: TRecord,
+ context: TRenderContext,
+ definition: ContextPresentationDefinition,
+ ) => TResult;
+}
+
+export interface ContextPresentationRegistry {
+ definition(kind: KnownComposerContextKind): ContextPresentationDefinition;
+ render(kind: string, record: TRecord | undefined, context: TRenderContext): TResult;
+}
+
+/**
+ * Creates one checked dispatcher for a rendering surface. Definitions are shared; renderers stay
+ * surface-specific so web composer and transcript presentation can differ without drifting on
+ * capability semantics.
+ */
+export function createContextPresentationRegistry(options: {
+ handlers: ReadonlyArray>;
+ requiredKinds?: ReadonlyArray;
+ fallback: (kind: string, record: TRecord | undefined, context: TRenderContext) => TResult;
+}): ContextPresentationRegistry {
+ const handlers = new Map<
+ KnownComposerContextKind,
+ ContextPresentationHandler
+ >();
+ for (const handler of options.handlers) {
+ if (handlers.has(handler.kind)) {
+ throw new Error(`Duplicate context presentation handler: ${handler.kind}`);
+ }
+ handlers.set(handler.kind, handler);
+ }
+ for (const kind of options.requiredKinds ?? []) {
+ if (!handlers.has(kind)) {
+ throw new Error(`Missing context presentation handler: ${kind}`);
+ }
+ }
+
+ return {
+ definition: contextPresentationDefinition,
+ render(kind, record, context) {
+ const handler = handlers.get(kind as KnownComposerContextKind);
+ if (!handler || record === undefined || handler.canRender?.(record, context) === false) {
+ return options.fallback(kind, record, context);
+ }
+ return handler.render(record, context, contextPresentationDefinition(handler.kind));
+ },
+ };
+}
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index b2bbf6aeccbf..73f973bc811a 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -39,6 +39,7 @@ const buttonVariants = cva(
xs: "h-7 gap-1 px-[calc(--spacing(2)-1px)] text-sm sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
},
variant: {
+ chip: "",
default:
"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
destructive:
@@ -75,7 +76,8 @@ function Button({ className, variant, size, render, ...props }: ButtonProps) {
: "button";
const defaultProps = {
- className: cn(buttonVariants({ className, size, variant })),
+ className:
+ variant === "chip" ? cn(className) : cn(buttonVariants({ className, size, variant })),
"data-slot": "button",
type: typeValue,
};
diff --git a/apps/web/src/components/ui/dialog-styles.ts b/apps/web/src/components/ui/dialog-styles.ts
index 15e9e8880742..4b5365b7183c 100644
--- a/apps/web/src/components/ui/dialog-styles.ts
+++ b/apps/web/src/components/ui/dialog-styles.ts
@@ -1,10 +1,22 @@
-const DIALOG_BACKDROP_CLASS =
- "dialog-backdrop fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0";
+const DIALOG_BACKDROP_BASE_CLASS =
+ "fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0";
-const DIALOG_POPUP_CLASS =
- "dialog-glass -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex min-h-0 w-full min-w-0 scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0";
+const DIALOG_BACKDROP_CLASS = `dialog-backdrop ${DIALOG_BACKDROP_BASE_CLASS}`;
+const DIALOG_MEDIA_BACKDROP_CLASS = `${DIALOG_BACKDROP_BASE_CLASS} bg-black/75 backdrop-blur-none`;
+
+const DIALOG_POPUP_BASE_CLASS =
+ "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex min-h-0 w-full min-w-0 scale-[calc(1-0.1*var(--nested-dialogs))] flex-col opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0";
+
+const DIALOG_POPUP_CLASS = `dialog-glass ${DIALOG_POPUP_BASE_CLASS} rounded-2xl border`;
+const DIALOG_MEDIA_POPUP_CLASS = `${DIALOG_POPUP_BASE_CLASS} rounded-none border border-transparent bg-transparent p-0 shadow-none`;
const DIALOG_MOBILE_SHEET_CLASS =
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4";
-export { DIALOG_BACKDROP_CLASS, DIALOG_MOBILE_SHEET_CLASS, DIALOG_POPUP_CLASS };
+export {
+ DIALOG_BACKDROP_CLASS,
+ DIALOG_MEDIA_BACKDROP_CLASS,
+ DIALOG_MOBILE_SHEET_CLASS,
+ DIALOG_POPUP_CLASS,
+ DIALOG_MEDIA_POPUP_CLASS,
+};
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index a96f648803aa..e98e872ef6c0 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -6,6 +6,8 @@ import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import {
DIALOG_BACKDROP_CLASS,
+ DIALOG_MEDIA_BACKDROP_CLASS,
+ DIALOG_MEDIA_POPUP_CLASS,
DIALOG_MOBILE_SHEET_CLASS,
DIALOG_POPUP_CLASS,
} from "~/components/ui/dialog-styles";
@@ -25,11 +27,18 @@ function DialogClose(props: DialogPrimitive.Close.Props) {
return
-
{
expect(restored.styleChanges).toEqual(styleChanges);
expect(restored.elements[0]?.id).toBe("el_1");
});
+ it.each([
+ ["+181", "a.ts L181"],
+ ["+181 to +183", "a.ts L181 to L183"],
+ ["-63", "a.ts L63 (before)"],
+ ["L4", "a.ts L4"],
+ ])("presents review range %s consistently as %s", (rangeLabel, expected) => {
+ expect(
+ reviewCommentContextLabel({
+ id: "review-1",
+ sectionId: "file:src/a.ts",
+ sectionTitle: "File comment",
+ filePath: "src/a.ts",
+ startIndex: 0,
+ endIndex: 0,
+ rangeLabel,
+ text: "",
+ diff: "",
+ }),
+ ).toBe(expected);
+ });
+
+ it("distinguishes a PR summary from a comment on its diff", () => {
+ const summary = {
+ id: "review-1",
+ sectionId: "pull-request:42",
+ sectionTitle: "PR #42",
+ filePath: "PR #42",
+ startIndex: 0,
+ endIndex: 0,
+ rangeLabel: "Improve context chips",
+ text: "Pull request details",
+ diff: "",
+ pullRequest: {
+ number: 42,
+ title: "Improve context chips",
+ url: "https://github.com/pingdotgg/t3code/pull/42",
+ headBranch: "feat/context-chips",
+ baseBranch: "main",
+ state: "open" as const,
+ isDraft: false,
+ },
+ };
+
+ expect(isPullRequestSummaryContext(summary)).toBe(true);
+ expect(reviewCommentContextLabel(summary)).toBe("#42");
+ expect(pullRequestContextDisplayState(summary)).toBe("open");
+ expect(pullRequestContextKindLabel(summary)).toBe("Open pull request");
+ expect(
+ pullRequestContextDisplayState({
+ ...summary,
+ pullRequest: { ...summary.pullRequest, isDraft: true },
+ }),
+ ).toBe("draft");
+ expect(
+ isPullRequestSummaryContext({
+ ...summary,
+ pullRequest: undefined,
+ filePath: "src/a.ts",
+ rangeLabel: "+12",
+ diff: "+const answer = 42;",
+ }),
+ ).toBe(false);
+ });
+
it("builds a preview annotation record with element details and readable style changes", () => {
expect(previewAnnotationContextLabel(annotation)).toBe("Make this bigger");
expect(previewAnnotationContextRecord(annotation, { screenshotContextId: "ann_1" })).toEqual({
diff --git a/apps/web/src/lib/composerContextRecords.ts b/apps/web/src/lib/composerContextRecords.ts
index 0e4ac8597484..8234ad360646 100644
--- a/apps/web/src/lib/composerContextRecords.ts
+++ b/apps/web/src/lib/composerContextRecords.ts
@@ -52,12 +52,53 @@ function clampContextText(value: string, max: number): string {
return `${value.slice(0, Math.max(0, max - TRUNCATION_MARKER.length))}${TRUNCATION_MARKER}`;
}
+type ReviewCommentPresentation = ReviewCommentContext | ReviewCommentContextRecord;
+
function basename(filePath: string): string {
return filePath.split(/[\\/]/).at(-1) ?? filePath;
}
-export function reviewCommentContextLabel(comment: ReviewCommentContext): string {
- return `${basename(comment.filePath)} ${comment.rangeLabel}`;
+export function reviewCommentContextLabel(comment: ReviewCommentPresentation): string {
+ const pullRequestNumber = pullRequestContextNumber(comment);
+ if (isPullRequestSummaryContext(comment) && pullRequestNumber !== null) {
+ return `#${pullRequestNumber}`;
+ }
+ const diffRange = /^([+-])(\d+)(?: to \1(\d+))?$/u.exec(comment.rangeLabel);
+ const rangeLabel = diffRange
+ ? `L${diffRange[2]}${diffRange[3] ? ` to L${diffRange[3]}` : ""}${diffRange[1] === "-" ? " (before)" : ""}`
+ : comment.rangeLabel;
+ return `${basename(comment.filePath)} ${rangeLabel}`;
+}
+
+export function isPullRequestSummaryContext(comment: ReviewCommentPresentation): boolean {
+ if (comment.pullRequest !== undefined) return true;
+ return (
+ comment.sectionId.startsWith("pull-request:") &&
+ comment.diff.trim().length === 0 &&
+ /^PR #\d+$/u.test(comment.filePath)
+ );
+}
+
+function pullRequestContextNumber(comment: ReviewCommentPresentation): number | null {
+ if (comment.pullRequest !== undefined) return comment.pullRequest.number;
+ const legacyNumber = /^PR #(\d+)$/u.exec(comment.filePath)?.[1];
+ return legacyNumber === undefined ? null : Number(legacyNumber);
+}
+
+export type PullRequestContextDisplayState = "open" | "draft" | "merged" | "closed";
+
+export function pullRequestContextDisplayState(
+ comment: ReviewCommentPresentation,
+): PullRequestContextDisplayState | null {
+ const pullRequest = comment.pullRequest;
+ if (pullRequest === undefined) return null;
+ return pullRequest.state === "open" && pullRequest.isDraft ? "draft" : pullRequest.state;
+}
+
+export function pullRequestContextKindLabel(comment: ReviewCommentPresentation): string {
+ const state = pullRequestContextDisplayState(comment);
+ if (state === null) return "Pull request";
+ return `${state[0]!.toUpperCase()}${state.slice(1)} pull request`;
}
export function previewAnnotationContextLabel(annotation: PreviewAnnotationPayload): string {
diff --git a/apps/web/src/reviewCommentContext.test.ts b/apps/web/src/reviewCommentContext.test.ts
index b3a1b0374374..f86e140f3345 100644
--- a/apps/web/src/reviewCommentContext.test.ts
+++ b/apps/web/src/reviewCommentContext.test.ts
@@ -1,9 +1,39 @@
import { parsePatchFiles } from "@pierre/diffs/utils/parsePatchFiles";
import { describe, expect, it } from "vite-plus/test";
-import { buildDiffReviewComment, restoreDiffReviewCommentRange } from "./reviewCommentContext";
+import {
+ buildDiffReviewComment,
+ buildFileReviewComment,
+ formatReviewCommentFence,
+ inferReviewCommentFenceLanguage,
+ restoreDiffReviewCommentRange,
+} from "./reviewCommentContext";
describe("review comment context parsing", () => {
+ it("infers source languages and keeps nested fences inside the selected content", () => {
+ expect(inferReviewCommentFenceLanguage("docs/plan.md")).toBe("md");
+ expect(inferReviewCommentFenceLanguage("src/view.tsx")).toBe("tsx");
+ const content = "# Example\n```ts\nconst value = 1;\n```";
+ expect(formatReviewCommentFence("md", content)).toBe(`\`\`\`\`md\n${content}\n\`\`\`\``);
+ });
+
+ it("keeps attribute-like and closing-block text as data in file comments", () => {
+ const contents = '\n\n```';
+ const comment = buildFileReviewComment({
+ id: "comment-quoted",
+ filePath: 'src/a"&b.ts',
+ startLine: 1,
+ endLine: 3,
+ text: 'Keep "quotes" & .',
+ contents,
+ });
+ expect(comment.filePath).toBe('src/a"&b.ts');
+ expect(comment.text).toBe('Keep "quotes" & .');
+ expect(comment.diff).toBe(contents);
+ expect(formatReviewCommentFence(comment.fenceLanguage!, comment.diff)).toBe(
+ `\`\`\`\`ts\n${contents}\n\`\`\`\``,
+ );
+ });
it("formats mixed diff-side selections with the mobile review-comment contract", () => {
const [fileDiff] = parsePatchFiles(
[
diff --git a/docs/internals/composer-context-references.md b/docs/internals/composer-context-references.md
index 7255a5587a0d..0f86b03e9ebe 100644
--- a/docs/internals/composer-context-references.md
+++ b/docs/internals/composer-context-references.md
@@ -134,9 +134,18 @@ removing a preview screenshot thumbnail removes its annotation and chip.
The transcript resolves a message with `resolveUserMessageContext`: structured context is used as
is, older messages are upgraded in memory. `ChatMarkdown` renders `t3-context://` links through
-`renderContextReference`, which the timeline maps to chips: terminal and element show a tooltip,
-review comments and preview annotations open a popover with the card, unknown kinds render the
-unresolved chip. Mobile renders context links as their labels.
+`renderContextReference`, which the timeline maps to chips through the web context-presentation
+registry. The registry declares compact, details, and expanded capabilities for every known kind,
+rejects duplicate surface handlers, and provides the unresolved fallback. Terminal excerpts,
+elements, review comments, and preview annotations open structured details popovers; images and
+videos use the shared media modal. Mobile renders context links as their labels.
+
+Pull-request summaries currently travel as review-comment records with optional typed
+`pullRequest` metadata. The metadata is a snapshot of the number, title, URL, branches, state, and
+draft flag at attachment time. Web and desktop render the compact `#number` label and derive its
+status tone from that snapshot. Hover shows the snapshot details; activation resolves the URL
+against the current environment and opens the pull request in the thread's right panel. Records
+written before the metadata was added retain their legacy details and neutral pull-request tone.
## Attachments
@@ -153,8 +162,9 @@ keep the thumbnail shelf as their inventory; deleting a chip leaves the image, a
thumbnail that is still referenced asks for confirmation before removing both. Old drafts do not
gain image chips.
-In the transcript an image chip opens the gallery preview and a file chip opens or downloads the
-file. The gallery still shows every image; file rows remain only for files no chip references.
+In the transcript an image chip opens the gallery preview, a video chip opens the media preview,
+and another file chip opens or downloads the file. The gallery still shows every image; file rows
+remain only for files no chip references.
## Clipboard
diff --git a/docs/user/composer.md b/docs/user/composer.md
index 212cb9ee8e24..359e7411c51e 100644
--- a/docs/user/composer.md
+++ b/docs/user/composer.md
@@ -53,6 +53,13 @@ around it.
Select the quote in a draft or sent message to return to its source. If the source
is unavailable or has changed, the saved quote remains readable.
+The chip shows your comment when it has one, or a short quote preview otherwise. Use the pencil
+button to add or change the comment. To remove the citation, place the caret beside its chip and
+delete it like other inline context. Copying, reloading, and restoring a
+[stashed prompt](#prompt-stash) keep each comment
+with its quote, and sending tells the agent which words were quoted and which comment you wrote.
+The quoted text and comment count toward the message limit.
+
Mobile displays saved quotes and comments, but does not create citations or
navigate to their sources.
@@ -114,8 +121,13 @@ provider supports it. Web and desktop also offer compaction from the context met
Context you attach lands where your cursor is, as a chip inside your text: a terminal excerpt,
a review comment from a diff or file, a preview annotation, or a file. You can type before and
after a chip, move it by cutting and pasting, and delete it like a character. Hover a chip for
-its details; in a sent message, select a review comment or preview annotation chip to open the
-full card. Chips read as "Terminal excerpt, Terminal 1 lines 3-4" and similar to screen readers.
+its brief details. Select a terminal excerpt to open its captured output, or select a review
+comment, picked element, or preview annotation to open its full details. Chips read as "Terminal
+excerpt, Terminal 1 lines 3-4" and similar to screen readers.
+
+A pull request appears as its icon and number. Its color reflects whether it was open, draft,
+merged, or closed when it was attached. Hover it to see the title and branches, or select it to
+open that pull request beside the current thread.
Images keep their thumbnail shelf above the text and also get a chip at your cursor, so you can
say exactly which image you mean. Deleting an image chip leaves the image on the shelf; removing
{props.image?.previewUrl ? (
- ) : null}
-
);
}
-/** One inline context chip in a sent message: label always, details by hover or click. */
-function UserMessageContextReferenceChip(props: {
+function UserMessageElementDetails({
+ record,
+}: {
+ record: Extract
+ ) : (
+
+ {visibleElements.length > 0 ? (
+
+ Screenshot unavailable
+
+ )}
+
{props.record.pageTitle?.trim() || props.record.pageUrl || "Preview annotation"}
@@ -2593,140 +2617,424 @@ function UserMessagePreviewAnnotationDetails(props: {
) : null}
+ {visibleElements.map((element) => {
+ const source = element.source;
+ const sourceLabel = source?.fileName
+ ? `${source.fileName}${source.lineNumber === null ? "" : `:${source.lineNumber}`}`
+ : null;
+ return (
+
+ ) : null}
+
+ );
+ })}
+ {(props.record.elements?.length ?? 0) > visibleElements.length ? (
+
+
+ {element.htmlPreview?.trim() ? (
+
+ {element.selector || `<${element.tagName}>`}
+
+ {sourceLabel ? (
+ {sourceLabel}
+ ) : null}
+
+ {element.htmlPreview.trim()}
+
+ ) : null}
+
+ {(props.record.elements?.length ?? 0) - visibleElements.length} more selected
+ elements
+
+ ) : null}
+
+
+ );
+}
+
+interface UserMessageContextRenderContext {
reference: ChatMarkdownContextReference;
- record: KnownComposerContextRecord | undefined;
annotationImage: ChatImageAttachment | null;
attachment: ChatImageAttachment | ChatFileAttachment | null;
+ resolvedTheme: "light" | "dark";
+ copyMarkdown: string;
onExpandImage: (image: ChatImageAttachment) => void;
+ onExpandVideo: (file: ChatFileAttachment) => void;
onOpenFile: (file: ChatFileAttachment) => void;
-}) {
- const { reference, record, attachment } = props;
- const iconClassName = cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5");
- const copyMarkdown = formatComposerContextReference({
- kind: reference.kind,
- contextId: reference.contextId as ComposerContextId,
- label: reference.label,
- });
- if (record?.kind === "image" && attachment && isImageAttachment(attachment)) {
- return (
-
- );
- }
- if (record?.kind === "file" && attachment && isFileAttachment(attachment)) {
- const disabled = attachment.downloadable === false;
- return (
-
- );
- }
- if (record?.kind === "terminal") {
- const tooltipText = record.text.length > 0 ? `${record.label}\n${record.text}` : record.label;
- return (
-
-
+
+
+ {record.pageTitle?.trim() || record.pageUrl}
+
+ {record.pageUrl}
+
+
+
+
+ {record.htmlPreview?.trim() ? (
+
+ {record.selector || `<${record.tagName}>`}
+
+ {sourceLabel ? (
+ {sourceLabel}
+ ) : null}
+
+ {record.htmlPreview.trim()}
+
+ ) : null}
+ {record.styles?.trim() ? (
+
+ {record.styles.trim()}
+
+ ) : null}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {text}
+
+
+
+ );
+}
+
+function ComposerPreviewAnnotationDetails({
+ annotation,
+}: {
+ annotation: PreviewAnnotationPayload;
+}) {
+ const summary = previewAnnotationTooltip(annotation);
+ return (
+
+
+ {comment.text.trim() ? (
+ {comment.filePath}
+
+ {comment.sectionTitle} ยท {comment.rangeLabel}
+
+
+ {comment.text.trim()}
+
+ ) : null}
+ {comment.diff.trim() ? (
+
+ {comment.diff.trim()}
+
+ ) : null}
+
+ {annotation.screenshot?.dataUrl ? (
+ 
+ ) : (
+
+ );
+}
+
function UnresolvedContextChip(props: { label: string }) {
return (
-
+ Screenshot unavailable
+
+ )}
+
+ {summary}
+
+