@adecore/editor-react 0.0.1 → 0.17.0-beta.2

package/dist/use-problem-counts.js

@@ -0,0 +1,20 @@
+import { useMemo, useSyncExternalStore } from 'react';
+const NONE = { error: 0, warning: 0, info: 0 };
+function countsStore(language) {
+    let current = language?.diagnostics.counts() ?? NONE;
+    return {
+        get: () => {
+            const next = language?.diagnostics.counts() ?? NONE;
+            if (next.error !== current.error || next.warning !== current.warning || next.info !== current.info) {
+                current = next;
+            }
+            return current;
+        },
+        subscribe: (listener) => language?.diagnostics.onChange(listener) ?? (() => undefined)
+    };
+}
+/* How many errors, warnings and infos the file has, said again when the servers report. */
+export function useProblemCounts(language) {
+    const store = useMemo(() => countsStore(language), [language]);
+    return useSyncExternalStore(store.subscribe, store.get);
+}

package/dist/view-state.d.ts

@@ -0,0 +1,21 @@
+import type { EditorFolds, FoldRole } from '@adecore/editor';
+export interface RevealLineRequest {
+    readonly line: number;
+}
+export interface ViewState {
+    readonly scrollTop: number;
+    readonly line: number;
+    readonly column: number;
+    readonly folds: EditorFolds;
+}
+export declare const viewStates: Map<string, ViewState>;
+export declare function openingPlace(reveal: RevealLineRequest | null, last: ViewState | undefined, placeholderScroll: number, foldDefaults: readonly FoldRole[]): {
+    line?: number;
+    column?: number;
+    scrollTop?: number;
+    folds?: EditorFolds;
+    foldDefaults?: readonly FoldRole[];
+};
+export declare function followViewStates(endpointId: string, from: string, to: string): void;
+export declare function viewStateKey(key: string): string;
+export declare function forgetMovesFrom(key: string): void;

package/dist/view-state.js

@@ -0,0 +1,63 @@
+function endpointKey(namespace, path) {
+    return `${namespace}:${path}`;
+}
+/* Where each file's editor was when it went, so switching tabs or a node scrolling back into view opens it there again. Per window, never stored. */
+export const viewStates = new Map();
+/*
+ * A line asked for wins; otherwise where this file's editor last was, and for a file opened the first time, where the
+ * viewer before it was scrolled and with the kinds of fold the settings choose folded. What was folded comes back
+ * whichever way it opens.
+ */
+export function openingPlace(reveal, last, placeholderScroll, foldDefaults) {
+    const folds = last === undefined ? { foldDefaults } : { folds: last.folds };
+    if (reveal !== null) {
+        return { line: reveal.line, ...folds };
+    }
+    if (last !== undefined) {
+        return { line: last.line, column: last.column, scrollTop: last.scrollTop, ...folds };
+    }
+    return { scrollTop: placeholderScroll, ...folds };
+}
+/* Where a place the editors know by the key it had goes now: a file, or the files of a folder that moved. */
+const moves = [];
+function movedKey(key, from, to) {
+    if (key === from) {
+        return to;
+    }
+    return key.startsWith(`${from}/`) ? `${to}${key.slice(from.length)}` : null;
+}
+/*
+ * A file or folder moved, so where its editors were follows it. An editor that is still open writes its place once
+ * more under the key it mounted with as it closes, which `viewStateKey` sends to the new one; a new editor on the
+ * old path forgets the move.
+ */
+export function followViewStates(endpointId, from, to) {
+    const oldKey = endpointKey(endpointId, from);
+    const newKey = endpointKey(endpointId, to);
+    for (const [key, state] of [...viewStates]) {
+        const target = movedKey(key, oldKey, newKey);
+        if (target !== null) {
+            viewStates.delete(key);
+            viewStates.set(target, state);
+        }
+    }
+    moves.push({ from: oldKey, to: newKey });
+}
+/* The key an editor that mounted under `key` leaves its place under. */
+export function viewStateKey(key) {
+    for (const { from, to } of moves) {
+        const target = movedKey(key, from, to);
+        if (target !== null) {
+            return target;
+        }
+    }
+    return key;
+}
+/* An editor mounts under `key`, which is a file of its own again whatever moved away from there. */
+export function forgetMovesFrom(key) {
+    for (let i = moves.length - 1; i >= 0; i--) {
+        if (movedKey(key, moves[i].from, moves[i].to) !== null) {
+            moves.splice(i, 1);
+        }
+    }
+}

package/dist/word-diff.d.ts

@@ -0,0 +1 @@
+export declare function replacedWords(removed: readonly string[], added: readonly string[]): Array<Array<[number, number]>>;

package/dist/word-diff.js

@@ -0,0 +1,32 @@
+import { diffLines } from '@adecore/merge';
+/* A word, a run of spaces or one other character, so a change inside a line is found by word and not by letter. */
+const TOKEN = /\w+|\s+|[^\w\s]/g;
+/*
+ * The character ranges of each removed line that the added lines changed, `[start, end)` per line, for
+ * the stronger tint on the words a change replaced. Lines are only compared when as many were added as
+ * removed, since then each removed line has the line it became; any other change has no such pairing
+ * and draws no words.
+ */
+export function replacedWords(removed, added) {
+    return removed.map((line, index) => (removed.length === added.length ? replacedRanges(line, added[index]) : []));
+}
+function replacedRanges(removed, added) {
+    const before = removed.match(TOKEN) ?? [];
+    const after = added.match(TOKEN) ?? [];
+    const starts = [];
+    let offset = 0;
+    for (const token of before) {
+        starts.push(offset);
+        offset += token.length;
+    }
+    starts.push(offset);
+    const ranges = [];
+    for (const change of diffLines(before, after)) {
+        const text = removed.slice(starts[change.baseStart], starts[change.baseEnd]);
+        if (text.trim() !== '') {
+            const start = starts[change.baseStart] + (text.length - text.trimStart().length);
+            ranges.push([start, start + text.trim().length]);
+        }
+    }
+    return ranges;
+}

package/dist/workspace-edit.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from '@adecore/editor';
+import { type ApplyWorkspaceEditResult, type RenameFile, type TextEdit, type WorkspaceEdit } from '@adecore/lsp';
+import type { DiskText } from './host-types.ts';
+export interface StagedFile {
+    readonly path: string;
+    readonly disk: DiskText;
+    readonly text: string;
+}
+export interface ProjectFiles {
+    read(path: string): Promise<DiskText | null>;
+    stage(files: readonly StagedFile[]): void;
+    save(files: readonly StagedFile[]): Promise<string | null>;
+    rename(from: string, to: string): Promise<string | null>;
+}
+export interface WorkspaceEditHost {
+    editorOf(uri: string): Editor | undefined;
+    readonly files: ProjectFiles | null;
+}
+export declare function entriesOf(edit: WorkspaceEdit): Map<string, TextEdit[][]> | null;
+export declare function renamesOf(edit: WorkspaceEdit): RenameFile[];
+export declare function applyWorkspaceEdit(edit: WorkspaceEdit, host: WorkspaceEditHost): Promise<ApplyWorkspaceEditResult>;

package/dist/workspace-edit.js

@@ -0,0 +1,147 @@
+import { applyTextEdits, fileUriToPath } from '@adecore/lsp';
+function refused(failureReason) {
+    return { applied: false, failureReason };
+}
+/* The steps of an edit; null when it creates or deletes a file, which an edit is not applied with. */
+function stepsOf(edit) {
+    const steps = [];
+    for (const change of edit.documentChanges ?? []) {
+        if ('textDocument' in change) {
+            steps.push({ kind: 'edits', uri: change.textDocument.uri, edits: change.edits });
+        }
+        else if (change.kind === 'rename') {
+            steps.push({ kind: 'rename', oldUri: change.oldUri, newUri: change.newUri });
+        }
+        else {
+            return null;
+        }
+    }
+    if (edit.documentChanges === undefined) {
+        for (const [uri, edits] of Object.entries(edit.changes ?? {})) {
+            steps.push({ kind: 'edits', uri, edits });
+        }
+    }
+    return steps;
+}
+/* The text edits of an edit per document, as the entries a document has in it; null when it creates or deletes a file. */
+export function entriesOf(edit) {
+    const steps = stepsOf(edit);
+    if (steps === null) {
+        return null;
+    }
+    const entries = new Map();
+    for (const step of steps) {
+        if (step.kind === 'edits') {
+            entries.set(step.uri, [...(entries.get(step.uri) ?? []), step.edits]);
+        }
+    }
+    return entries;
+}
+/* The files an edit moves, which a preview of lines cannot show. */
+export function renamesOf(edit) {
+    return (edit.documentChanges ?? []).filter((change) => 'kind' in change && change.kind === 'rename');
+}
+function contentChangeOf(edit) {
+    return { range: edit.range, text: edit.newText };
+}
+/*
+ * Applies an LSP workspace edit on the client, step by step in the order it says. A file an editor holds takes
+ * its edits as one undo step. Any other file gets its new text as an unsaved draft that a person saves, and
+ * nothing is written to disk on a server's word alone, unless the edit also moves a file: the edits and the
+ * move are then one change, so every file is saved through the machine and the move is made there. The
+ * edit is checked against every text first, so one that does not fit changes nothing.
+ */
+export async function applyWorkspaceEdit(edit, host) {
+    const steps = stepsOf(edit);
+    if (steps === null) {
+        return refused('Creating and deleting files is not supported yet');
+    }
+    const planned = await plan(steps, host);
+    if (typeof planned === 'string') {
+        return refused(planned);
+    }
+    const moving = planned.some((item) => item.kind === 'rename');
+    const staged = [];
+    for (const item of planned) {
+        if (item.kind === 'rename') {
+            const reason = await host.files.rename(item.oldPath, item.newPath);
+            if (reason !== null) {
+                return refused(reason);
+            }
+            continue;
+        }
+        if (item.after === item.before) {
+            continue;
+        }
+        const editor = host.editorOf(item.uri);
+        if (editor) {
+            // The edits stay apart, so the caret and what is drawn over the text stay where they were between them.
+            if (!editor.applyEdits(item.edits.map(contentChangeOf))) {
+                return refused(`${item.uri} is read only`);
+            }
+            continue;
+        }
+        const path = fileUriToPath(item.uri);
+        if (path === null || item.disk === null) {
+            continue;
+        }
+        const file = { path, disk: item.disk, text: item.after };
+        if (!moving) {
+            staged.push(file);
+            continue;
+        }
+        const reason = await host.files.save([file]);
+        if (reason !== null) {
+            return refused(reason);
+        }
+    }
+    if (staged.length > 0) {
+        host.files?.stage(staged);
+    }
+    return { applied: true };
+}
+/* Reads every text the edit needs and works out what each step leaves, or says why it does not fit. */
+async function plan(steps, host) {
+    const texts = new Map();
+    // A file that has moved is read where it still stands: nothing moves until the plan is made.
+    const origins = new Map();
+    const planned = [];
+    for (const step of steps) {
+        if (step.kind === 'rename') {
+            const oldPath = fileUriToPath(step.oldUri);
+            const newPath = fileUriToPath(step.newUri);
+            if (oldPath === null || newPath === null || host.files === null) {
+                return `${step.oldUri} cannot be moved from here`;
+            }
+            origins.set(step.newUri, origins.get(step.oldUri) ?? step.oldUri);
+            planned.push({ kind: 'rename', oldPath, newPath });
+            continue;
+        }
+        const source = origins.get(step.uri) ?? step.uri;
+        if (!texts.has(source)) {
+            const editor = host.editorOf(source);
+            if (editor) {
+                texts.set(source, { text: editor.getText(), disk: null });
+            }
+            else {
+                const path = fileUriToPath(source);
+                const disk = path === null || host.files === null ? null : await host.files.read(path);
+                if (disk === null) {
+                    return `${source} cannot be read as text`;
+                }
+                texts.set(source, { text: disk.text, disk });
+            }
+        }
+        const held = texts.get(source);
+        let after;
+        try {
+            after = applyTextEdits(held.text, step.edits);
+        }
+        catch (error) {
+            return error instanceof Error ? error.message : String(error);
+        }
+        planned.push({ kind: 'edits', uri: step.uri, edits: step.edits, before: held.text, after, disk: held.disk });
+        texts.set(source, { text: after, disk: held.disk });
+    }
+    return planned;
+}

package/package.json

@@ -1,11 +1,83 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.0.1",
-  "description": "Placeholder for the first release.",
+  "version": "0.17.0-beta.2",
+  "type": "module",
+  "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
+  "author": "Bas Milius",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/basmilius/adecore.git",
     "directory": "packages/editor-react"
+  },
+  "bugs": {
+    "url": "https://github.com/basmilius/adecore/issues"
+  },
+  "homepage": "https://adecore.dev/editor-react/",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/test-support.ts",
+    "LICENSE",
+    "!src/test-setup.ts"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./models": {
+      "source": "./src/models.ts",
+      "types": "./dist/models.d.ts",
+      "default": "./dist/models.js"
+    },
+    "./testing": {
+      "source": "./src/testing.ts",
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    },
+    "./editor-react.css": {
+      "source": "./src/editor-react.css",
+      "default": "./dist/editor-react.css"
+    },
+    "./locales/*.json": {
+      "source": "./src/locales/*.json",
+      "default": "./dist/locales/*.json"
+    }
+  },
+  "scripts": {
+    "build": "bun scripts/build.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test --conditions=source"
+  },
+  "dependencies": {
+    "@adecore/editor": "0.17.0-beta.2",
+    "@adecore/lsp": "0.17.0-beta.2",
+    "@adecore/merge": "0.17.0-beta.2",
+    "zustand": "^5.0.15",
+    "lucide-react": "^1.47.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "remark-breaks": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@adecore/ui": "^0.17.0-beta.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "i18next": "^26.4.2",
+    "react-i18next": "^17.0.15"
+  },
+  "devDependencies": {
+    "@adecore/ui": "workspace:*",
+    "@types/bun": "^1.4.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "^7.0.2"
   }
 }

package/src/AnchoredPopup.tsx

@@ -0,0 +1,51 @@
+import { useLayoutEffect, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import type { EditorRect } from '@adecore/editor';
+import { placePopup, type PlaceOptions } from './popup-placement.ts';
+
+export interface AnchoredPopupProps {
+    /* The character the popup belongs to, in the page's pixels. */
+    rect: EditorRect;
+    className?: string;
+    children: ReactNode;
+    placement?: PlaceOptions;
+    onPointerEnter?(): void;
+    onPointerLeave?(): void;
+}
+
+/*
+ * A card next to a character of the editor, in a layer of the page itself: a canvas puts a scale on its
+ * nodes, and a card inside one would be drawn at that scale and cut off by the node's edge. It is
+ * placed from the character's screen rectangle, so it is right at any zoom, and it never leaves the window.
+ */
+export function AnchoredPopup({ rect, className, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps) {
+    const element = useRef<HTMLDivElement>(null);
+
+    // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
+    useLayoutEffect(() => {
+        const popup = element.current;
+        if (popup === null) {
+            return;
+        }
+        popup.style.maxHeight = '';
+        const size = { width: popup.offsetWidth, height: popup.offsetHeight };
+        const placed = placePopup(rect, size, { width: window.innerWidth, height: window.innerHeight }, placement);
+        popup.style.left = `${Math.round(placed.left)}px`;
+        popup.style.top = `${Math.round(placed.top)}px`;
+        popup.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
+        popup.style.visibility = 'visible';
+    });
+
+    return createPortal(
+        <div
+            ref={element}
+            className={`fixed top-0 left-0 z-(--z-popup) overflow-y-auto rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`}
+            style={{ visibility: 'hidden' }}
+            onPointerEnter={onPointerEnter}
+            onPointerLeave={onPointerLeave}
+        >
+            {children}
+        </div>,
+        document.body
+    );
+}

package/src/AttributionCard.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { EditorMarkColor, EditorRect } from '@adecore/editor';
+import { AnchoredPopup } from './AnchoredPopup.tsx';
+
+export interface AttributionCardProps {
+    rect: EditorRect;
+    title: string;
+    subtitle?: string;
+    metadata?: ReactNode;
+    prompt?: string;
+    color?: EditorMarkColor;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    onHold?(inside: boolean): void;
+}
+
+export function AttributionCard({ rect, title, subtitle, metadata, prompt, color, icon, actions, onHold }: AttributionCardProps) {
+    return (
+        <AnchoredPopup rect={rect} className="flex w-105 flex-col text-xs" onPointerEnter={() => onHold?.(true)} onPointerLeave={() => onHold?.(false)}>
+            <div className="flex flex-col gap-2 px-3 pt-3 pb-2.5">
+                <div className="flex items-center gap-2">
+                    <span className="flex shrink-0 items-center" style={{ color: color?.startsWith('--') ? `var(${color})` : color }}>
+                        {icon ?? <span className="size-2 rounded-full bg-current" />}
+                    </span>
+                    <span className="shrink-0 text-sm font-semibold text-text">{title}</span>
+                    {subtitle !== undefined && <span className="min-w-0 truncate text-sm text-text-muted">{subtitle}</span>}
+                </div>
+                {metadata !== undefined && <div className="text-text-muted">{metadata}</div>}
+                {prompt !== undefined && prompt !== '' && (
+                    <q className="line-clamp-4 rounded-md bg-surface-hover px-2.5 py-2 text-sm leading-4.5 text-text select-text">{prompt}</q>
+                )}
+            </div>
+            {actions !== undefined && <div className="flex gap-1 border-t border-border px-1.5 py-1.25">{actions}</div>}
+        </AnchoredPopup>
+    );
+}

package/src/BaselineStatus.tsx

@@ -0,0 +1,20 @@
+import { CircleCheck, Sparkles, TriangleAlert } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+import type { Baseline, BaselineLevel } from './hover-content.ts';
+
+const BASELINE_MARKS: Record<BaselineLevel, { icon: typeof CircleCheck; color: string }> = {
+    widely: { icon: CircleCheck, color: 'text-status-idle' },
+    newly: { icon: Sparkles, color: 'text-status-running' },
+    limited: { icon: TriangleAlert, color: 'text-status-needs-you' }
+};
+
+/* Where a web feature stands across browsers, as one line under a CSS property. */
+export function BaselineStatus({ baseline }: { baseline: Baseline }) {
+    const { icon, color } = BASELINE_MARKS[baseline.level];
+    return (
+        <div className="flex items-start gap-1.5 text-xs/[18px] text-text-muted select-text">
+            <Icon icon={icon} size={14} className={`mt-px shrink-0 ${color}`} />
+            <span className="min-w-0">{baseline.text}</span>
+        </div>
+    );
+}

package/src/ChangeReview.tsx

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useRef, type ReactNode } from 'react';
+import type { Editor } from '@adecore/editor';
+import { diffSegments, emphasisOf } from './proposal-model.ts';
+
+export interface ChangeReviewProps {
+    editor: Editor;
+    selected: string;
+    proposal: string;
+    startLine?: number;
+    actions?: ReactNode;
+    className?: string;
+    label: string;
+}
+
+export function ChangeReview({ editor, selected, proposal, startLine = 1, actions, className, label }: ChangeReviewProps) {
+    const code = useRef<HTMLDivElement>(null);
+    useLayoutEffect(() => {
+        const element = code.current;
+        if (element === null) {
+            return;
+        }
+        element.replaceChildren();
+        for (const segment of diffSegments(selected, proposal, startLine)) {
+            const row = element.ownerDocument.createElement('div');
+            element.append(row);
+            editor.renderCode(row, segment.text, {
+                firstLine: segment.firstLine,
+                ...(segment.kind === 'same'
+                    ? {}
+                    : { sign: segment.kind === 'removed' ? '-' : '+', color: segment.kind === 'removed' ? '--editor-deleted' : '--editor-added' }),
+                faded: segment.kind === 'removed',
+                emphasis: emphasisOf(segment)
+            });
+        }
+        return () => element.replaceChildren();
+    }, [editor, selected, proposal, startLine]);
+    return (
+        <section className={className} aria-label={label}>
+            <div ref={code} />
+            {actions}
+        </section>
+    );
+}

package/src/CodeAuthorsCard.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GitCommitHorizontal, User, Users } from 'lucide-react';
+import { Button, Icon, Popover, Separator, Tooltip, useNow } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { relativeTime } from './relative-time.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import type { AuthorsView } from './popups.ts';
+
+const MINUTE_MS = 60_000;
+
+/*
+ * Who wrote a declaration, by lines, and the newest commit that touched it. It opens beside the entry that
+ * was pressed and closes on Escape or a press anywhere else; Escape hands the keyboard back to the editor.
+ */
+export function CodeAuthorsCard({ language, view }: { language: EditorLanguage; view: AuthorsView }) {
+    const { t } = useTranslation('editor');
+    const now = Math.floor(useNow(MINUTE_MS) / 1000);
+    const { authors, uncommittedLines, latest } = view.authorship;
+    const anchor = useMemo(() => {
+        const { left, top, right, bottom } = view.anchor;
+        return { getBoundingClientRect: () => new DOMRect(left, top, right - left, bottom - top) };
+    }, [view.anchor]);
+
+    return (
+        <Popover.Root open onOpenChange={(open, details) => !open && language.codeVision.closeAuthors(details.reason === 'escape-key')}>
+            <Popover.Popup anchor={anchor} side="bottom" align="start" sideOffset={4} className="flex w-72 flex-col gap-2 p-3 text-xs">
+                <Popover.Title className="flex items-center gap-1.5 font-medium text-text">
+                    <Icon icon={authors.length > 1 ? Users : User} size={14} className="shrink-0 text-text-muted" />
+                    <span className="min-w-0 truncate">{view.name}</span>
+                </Popover.Title>
+                <ul className="flex flex-col gap-1">
+                    {authors.map((author) => (
+                        <li key={author.name} className="flex items-baseline gap-2">
+                            <Tooltip label={author.email}>
+                                <span className="min-w-0 grow truncate text-text">{author.name}</span>
+                            </Tooltip>
+                            <span className="shrink-0 text-text-muted">
+                                {t('language.codeVision.lines', { count: author.lines, formatted: formatNumber(author.lines) })}
+                            </span>
+                        </li>
+                    ))}
+                    {uncommittedLines > 0 && (
+                        <li className="flex items-baseline gap-2 text-text-muted">
+                            <span className="min-w-0 grow truncate">{t('language.codeVision.uncommitted')}</span>
+                            <span className="shrink-0">
+                                {t('language.codeVision.lines', { count: uncommittedLines, formatted: formatNumber(uncommittedLines) })}
+                            </span>
+                        </li>
+                    )}
+                </ul>
+                {latest !== null && (
+                    <>
+                        <Separator />
+                        <div className="flex flex-col gap-1">
+                            <span className="text-text-muted">{t('language.codeVision.latest')}</span>
+                            <span className="text-text select-text">{latest.summary}</span>
+                            <span className="flex items-center gap-1.5 text-text-muted">
+                                <span className="font-mono select-text">{latest.shortHash}</span>
+                                <span className="min-w-0 truncate">{latest.author}</span>
+                                <span className="shrink-0">{relativeTime(latest.at, now)}</span>
+                            </span>
+                        </div>
+                        {view.openCommit !== null && (
+                            <div className="flex justify-end">
+                                <Popover.Close
+                                    render={
+                                        <Button size="xs" variant="secondary" onClick={view.openCommit}>
+                                            <Icon icon={GitCommitHorizontal} size={14} />
+                                            {t('language.codeVision.showCommit')}
+                                        </Button>
+                                    }
+                                />
+                            </div>
+                        )}
+                    </>
+                )}
+            </Popover.Popup>
+        </Popover.Root>
+    );
+}