@adecore/agents-react 0.20.1 → 0.21.0

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -0,0 +1,145 @@
+import clsx from 'clsx';
+import { createContext, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { UiProps } from '@adecore/intelligent-ui';
+import { PreviewCard } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { chatHost } from '../../../../host';
+import { CodeBlock } from '../../CodeBlock';
+import { CodeStreamingContext } from '../../code-streaming';
+import { ImageThumb } from '../../ImageView';
+import { uiChildrenOf, uiNodeLabel, uiNodeText } from '../node-text';
+import type { UiRendererProps } from '../render-context';
+
+// The number of every source by its node id, which the list counts in its own order.
+const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
+
+/* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
+export function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>>) {
+    return (
+        <CodeStreamingContext.Provider value={!node.complete}>
+            <CodeBlock code={uiNodeText(node).replace(/^\n|\n$/g, '')} lang={node.props.language ?? 'text'} />
+        </CodeStreamingContext.Provider>
+    );
+}
+
+/* Its own component, so the host's hook is only called for an image that names an attachment. */
+function AttachedImage({ scopeId, chatId, attachmentId, alt }: { scopeId: string; chatId: string; attachmentId: string; alt: string }) {
+    const source = chatHost().attachments.useUrl(scopeId, chatId, attachmentId);
+    return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full object-contain" />;
+}
+
+/*
+ * An attachment of the chat, never a path or an address the model wrote. An image of the latest
+ * generation stays a quiet square until the daemon resolved it to an attachment.
+ */
+export function ImageRenderer({ node, children, context }: UiRendererProps<UiProps<'Image'>>) {
+    const { t } = useTranslation('agent-chat');
+    const { attachment, alt } = node.props;
+    const caption = uiNodeLabel(node);
+    const name = alt ?? (caption === '' ? t('blocks.image.label') : caption);
+    return (
+        <figure className="flex flex-col items-start gap-1.5">
+            {attachment === undefined ? (
+                <ImageThumb source={{ url: null, failure: t('blocks.image.unavailable') }} alt={name} />
+            ) : (
+                <AttachedImage scopeId={context.scopeId} chatId={context.chatId} attachmentId={attachment} alt={name} />
+            )}
+            {caption !== '' && <figcaption className="px-2 text-xs text-text-muted">{children}</figcaption>}
+        </figure>
+    );
+}
+
+export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>) {
+    const { t } = useTranslation('agent-chat');
+    const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
+    return (
+        <SourceNumbers value={numbers}>
+            <section aria-label={t('blocks.sources')} className="flex flex-col">
+                <span className="px-2 pb-1 text-xs font-medium text-text-muted">{t('blocks.sources')}</span>
+                <ol className="chat-ui-nodes flex flex-col">{children}</ol>
+            </section>
+        </SourceNumbers>
+    );
+}
+
+function domainOf(url: string): string {
+    try {
+        return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+        return url;
+    }
+}
+
+export interface UiSourceCitationProps {
+    /* The number of the Source, as its row in the list counts it. */
+    number: number;
+    title: string;
+    url: string;
+    /* Shows the Source row the number stands for. Without it the number is no button. */
+    onReveal?: () => void;
+    className?: string;
+}
+
+/*
+ * A source number in running text. Resting on it or focusing it shows the title and the domain, and
+ * a tap reveals the row in the list of sources; only that row opens the address, so nothing loads
+ * before a person asks for it.
+ */
+export function UiSourceCitation({ number, title, url, onReveal, className }: UiSourceCitationProps) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <PreviewCard.Root>
+            <PreviewCard.Trigger
+                delay={300}
+                closeDelay={150}
+                render={onReveal === undefined ? <span /> : <button type="button" />}
+                aria-label={onReveal === undefined ? undefined : t('blocks.citation', { number: formatNumber(number), title })}
+                className={clsx(
+                    'inline-flex h-4 min-w-4.5 items-center justify-center rounded-sm bg-text/7 px-1 align-[1px] text-2xs leading-4 text-text-muted tabular-nums',
+                    onReveal !== undefined && 'cursor-pointer hover:bg-text/12 hover:text-text',
+                    className
+                )}
+                onClick={onReveal}
+            >
+                {formatNumber(number)}
+            </PreviewCard.Trigger>
+            <PreviewCard.Popup side="top" align="center" sideOffset={4} className="flex max-w-72 flex-col px-2.5 py-1.5 text-xs">
+                <span className="line-clamp-2 text-text">{title}</span>
+                <span className="truncate text-text-faint">{domainOf(url)}</span>
+            </PreviewCard.Popup>
+        </PreviewCard.Root>
+    );
+}
+
+/*
+ * Opens through the host and loads nothing before, not even an icon. The row itself takes focus
+ * when a citation reveals it, apart from the button that opens it.
+ */
+export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Source'>>) {
+    const number = useContext(SourceNumbers).get(node.id);
+    const { title, url } = node.props;
+    const { openUrl } = context;
+    const face = (
+        <>
+            <span className="w-5 shrink-0 text-right text-text-faint tabular-nums">{number}</span>
+            <span className="min-w-0 truncate text-text">{title}</span>
+            <span className="shrink-0 text-text-faint">{domainOf(url)}</span>
+        </>
+    );
+    return (
+        <li data-ui-source={node.id} tabIndex={-1} className="chat-ui-source scroll-my-2 rounded-md">
+            {openUrl === undefined ? (
+                <span className="flex h-8 items-center gap-2 px-2 text-xs">{face}</span>
+            ) : (
+                <button
+                    type="button"
+                    className="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs hover:bg-surface-hover"
+                    onClick={() => openUrl(url)}
+                >
+                    {face}
+                </button>
+            )}
+        </li>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/data.tsx

@@ -0,0 +1,187 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+import type { UiProps } from '@adecore/intelligent-ui';
+import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
+import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
+import { useBlockLocal } from '../block-local';
+import { uiChildrenOf } from '../node-text';
+import type { UiLiveValue, UiRenderContext, UiRendererProps } from '../render-context';
+import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns, type UiTableCell, type UiTableColumn } from '../table-data';
+import { UI_TONE_TEXT } from '../tones';
+import { UiFallbackPart } from '../UiFallbackPart';
+import { UiLinkChip } from './links';
+
+/* EntityList draws a hairline between its rows from this many on. */
+const DIVIDED_FROM = 7;
+
+/* A number with its unit, where a percent sign hugs the number and every other unit stands apart from it. */
+function withUnit(text: string, unit: string | undefined): string {
+    if (unit === undefined || unit === '') {
+        return text;
+    }
+    return unit === '%' ? `${text}${unit}` : `${text} ${unit}`;
+}
+
+/*
+ * A number that live readings keep up to date. Keyed by its text, so a value that changed mounts
+ * again and lights up once, even when it changes again before the last light settled.
+ */
+function LiveFigure({ text, previous, live, className }: { text: string; previous?: string; live?: UiLiveValue; className?: string }) {
+    const lit = live !== undefined && live.changed && !live.stale && previous !== text;
+    return (
+        <span key={text} className={clsx(live?.stale ? 'text-text-muted' : 'text-text', lit && 'chat-ui-changed', className)}>
+            {text}
+        </span>
+    );
+}
+
+export function StatsRenderer({ children }: UiRendererProps<UiProps<'Stats'>>) {
+    return <div className="chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-2">{children}</div>;
+}
+
+/* The arrow and the number say which way a value went; only a tone says whether that is good. */
+export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>) {
+    const { t } = useTranslation('agent-chat');
+    const { label, value, previous, unit, tone } = node.props;
+    const live = context.liveValue?.(node.id, 'value');
+    const change = previous === undefined ? null : value - previous;
+    const arrow = change === null || change === 0 ? ArrowRight : change > 0 ? ArrowUp : ArrowDown;
+    const from = previous === undefined ? '' : withUnit(formatRounded(previous, 2), unit);
+    // A change from zero has no percentage.
+    const percent = change === null || previous === undefined || previous === 0 ? null : formatPercent(Math.abs((change / previous) * 100));
+    return (
+        <div className="flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5">
+            <span className="truncate text-xs text-text-muted">{label}</span>
+            <LiveFigure
+                text={withUnit(formatRounded(value, 2), unit)}
+                previous={typeof live?.previous === 'number' ? withUnit(formatRounded(live.previous, 2), unit) : undefined}
+                live={live}
+                className="text-lg font-semibold tabular-nums"
+            />
+            {change !== null && (
+                <span className={clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone])}>
+                    <Icon icon={arrow} size={12} className="shrink-0" />
+                    <span className="min-w-0 truncate">
+                        {percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from })}
+                    </span>
+                </span>
+            )}
+        </div>
+    );
+}
+
+export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'EntityList'>>) {
+    return (
+        <KeyValueList.Root divided={uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM} className="chat-ui-nodes px-2">
+            {children}
+        </KeyValueList.Root>
+    );
+}
+
+export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry'>>) {
+    return (
+        <KeyValueList.Item>
+            <KeyValueList.Name>{node.props.label}</KeyValueList.Name>
+            <KeyValueList.Value>{children}</KeyValueList.Value>
+        </KeyValueList.Item>
+    );
+}
+
+function numberText(cell: Extract<UiTableCell, { kind: 'number' }>, unit: string | undefined): string {
+    return cell.as === 'bytes' ? formatBytes(cell.value) : cell.as === 'duration' ? formatDuration(cell.value) : withUnit(formatRounded(cell.value, 2), unit);
+}
+
+function Cell({ value, column, live, context }: { value: unknown; column: UiTableColumn; live?: UiLiveValue; context: UiRenderContext }) {
+    const cell = uiTableCell(value, column);
+    switch (cell.kind) {
+        case 'empty':
+            return null;
+        case 'text':
+            return <>{cell.text}</>;
+        case 'number': {
+            const before = live?.previous === undefined ? undefined : uiTableCell(live.previous, column);
+            return (
+                <LiveFigure
+                    text={numberText(cell, column.unit)}
+                    previous={before?.kind === 'number' ? numberText(before, column.unit) : undefined}
+                    live={live}
+                />
+            );
+        }
+        case 'date':
+            return <time dateTime={new Date(cell.at).toISOString()}>{formatMoment(cell.at)}</time>;
+        case 'file':
+            return <UiLinkChip target={{ type: 'File', path: cell.path }} context={context} />;
+        case 'tag':
+            return (
+                <Pill shape="tag" size="sm">
+                    {cell.text}
+                </Pill>
+            );
+    }
+}
+
+/*
+ * Rows under a sticky head, scrolling inside 320px and sideways when wider than the column. Rows
+ * arrive one by one while the block streams, without animation; past fifty a person asks for the rest.
+ */
+export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'>>) {
+    const { t } = useTranslation('agent-chat');
+    const [all, setAll] = useBlockLocal(context, node.id, () => false);
+    const columns = uiTableColumns(node);
+    if (columns.length === 0) {
+        return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
+    }
+    const { rows } = node.props;
+    const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
+    return (
+        <div className="flex flex-col items-start gap-1.5">
+            <div className="max-h-80 w-full overflow-auto rounded-md border border-border-soft">
+                <table className="w-full border-collapse text-xs tabular-nums">
+                    <thead className="sticky top-0 z-1 bg-surface-hover">
+                        <tr>
+                            {columns.map((column) => (
+                                <th
+                                    key={column.key}
+                                    scope="col"
+                                    className={clsx(
+                                        'h-8 px-2 font-medium whitespace-nowrap text-text-muted',
+                                        isNumericColumn(column) ? 'text-right' : 'text-left'
+                                    )}
+                                >
+                                    {column.title}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {shown.map((row, index) => (
+                            // Rows only ever grow at the end while a block streams, so the place of a row is a stable key.
+                            <tr key={index} className="border-t border-border-soft">
+                                {columns.map((column) => (
+                                    <td
+                                        key={column.key}
+                                        className={clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left')}
+                                    >
+                                        <Cell
+                                            value={row[column.key]}
+                                            column={column}
+                                            live={isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined}
+                                            context={context}
+                                        />
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            {!all && rows.length > UI_TABLE_ROWS && (
+                <Button size="xs" variant="secondary" onClick={() => setAll(true)}>
+                    {t('blocks.table.showAll', { total: formatNumber(rows.length) })}
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/inputs.tsx

@@ -0,0 +1,121 @@
+import { createContext, useContext, type MouseEvent } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import type { UiBinding, UiProps, UiViewNode } from '@adecore/intelligent-ui';
+import { Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { uiChildrenOf, uiNodeLabel } from '../node-text';
+import type { UiRenderContext, UiRendererProps } from '../render-context';
+
+type Scalar = UiProps<'Item'>['value'];
+
+interface ChecklistState {
+    values: readonly Scalar[];
+    enabled: boolean;
+    toggle(value: Scalar): void;
+}
+
+const ChecklistContext = createContext<ChecklistState>({ values: [], enabled: false, toggle: () => undefined });
+
+/*
+ * The binding of an input, or null for a read-only node. An input works once its own node closed and
+ * only through its binding, so the value never leaves the block until a Choice carries it.
+ */
+function bindingOf<Value>(node: UiViewNode<{ value: Value }>, context: UiRenderContext): UiBinding<Value> | null {
+    const binding = node.bindings.value as UiBinding<Value> | undefined;
+    return binding === undefined || !node.complete || context.answer !== null ? null : binding;
+}
+
+/* An input whose node has not closed yet stands at 60% and takes no pointer. */
+const PENDING = 'pointer-events-none opacity-60';
+
+export function ChecklistRenderer({ node, children, context }: UiRendererProps<UiProps<'Checklist'>>) {
+    const binding = bindingOf(node, context);
+    const values = binding?.value ?? node.props.value;
+    const toggle = (value: Scalar): void => {
+        binding?.onValueChange(values.includes(value) ? values.filter((entry) => entry !== value) : [...values, value]);
+    };
+    return (
+        <ChecklistContext value={{ values, enabled: binding !== null, toggle }}>
+            <div className={clsx('chat-ui-nodes flex flex-col', !node.complete && PENDING)}>{children}</div>
+        </ChecklistContext>
+    );
+}
+
+/* The whole row is the label; a link inside it keeps its own click and checks nothing. */
+export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>>) {
+    const list = useContext(ChecklistContext);
+    const { value } = node.props;
+    const toggleRow = (event: MouseEvent<HTMLDivElement>): void => {
+        if (list.enabled && !(event.target as Element).closest('button, a')) {
+            list.toggle(value);
+        }
+    };
+    return (
+        <div
+            className={clsx('flex min-h-8 items-center gap-2 rounded-md px-2 text-sm text-text', list.enabled && 'hover:bg-surface-hover')}
+            onClick={toggleRow}
+        >
+            <Checkbox checked={list.values.includes(value)} onCheckedChange={() => list.toggle(value)} label={uiNodeLabel(node)} disabled={!list.enabled} />
+            <div className="min-w-0 grow">{children}</div>
+        </div>
+    );
+}
+
+export function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>) {
+    const binding = bindingOf(node, context);
+    return (
+        <div className={clsx('flex min-h-7 items-center justify-between gap-3 px-2 text-sm', !node.complete && PENDING)}>
+            <span className="min-w-0 text-text">{children}</span>
+            <Switch
+                checked={binding?.value ?? node.props.value}
+                onCheckedChange={(next) => binding?.onValueChange(next)}
+                label={uiNodeLabel(node)}
+                disabled={binding === null}
+            />
+        </div>
+    );
+}
+
+/* Its children are the label, read as text: the slider writes its own label line. */
+export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slider'>>) {
+    const binding = bindingOf(node, context);
+    const { value, min, max, step, unit } = node.props;
+    return (
+        <Slider
+            value={binding?.value ?? value}
+            onValueChange={(next) => binding?.onValueChange(next)}
+            min={min}
+            max={max}
+            step={step}
+            unit={unit}
+            label={uiNodeLabel(node)}
+            disabled={binding === null}
+            className={clsx('px-2', !node.complete && PENDING)}
+        />
+    );
+}
+
+/* Left aligned, never the full width. Each Option is a segment by its place, since a value may be any scalar. */
+export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Segmented'>>) {
+    const { t } = useTranslation('agent-chat');
+    const binding = bindingOf(node, context);
+    const current = binding?.value ?? node.props.value;
+    const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
+    const picked = options.find((option) => option.value === current)?.id ?? '';
+    return (
+        <div className={clsx('px-2', !node.complete && PENDING)}>
+            <Segmented
+                value={picked}
+                options={options}
+                label={t('blocks.options')}
+                disabled={binding === null}
+                onValueChange={(id) => {
+                    const option = options[Number(id)];
+                    if (option !== undefined) {
+                        binding?.onValueChange(option.value);
+                    }
+                }}
+            />
+        </div>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/links.tsx

@@ -0,0 +1,157 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { FileDiff, GitCommitHorizontal, SquareDashed } from 'lucide-react';
+import type { UiProps } from '@adecore/intelligent-ui';
+import { FileIcon, Icon, Tooltip } from '@adecore/ui';
+import { CHIP_IN_MESSAGE, MENTION_TONE } from '../../chips';
+import type { UiLink, UiLinkTarget, UiRenderContext, UiRendererProps } from '../render-context';
+
+const PLAIN: UiLink = { state: 'plain' };
+
+function baseName(path: string): string {
+    const trimmed = path.replace(/\/+$/, '');
+    return trimmed.slice(trimmed.lastIndexOf('/') + 1) || path;
+}
+
+function plainText(target: UiLinkTarget, link: UiLink): string {
+    switch (target.type) {
+        case 'File':
+            return target.line === undefined ? target.path : `${target.path}:${target.line}`;
+        case 'Diff':
+            return target.path;
+        case 'Commit':
+            return target.sha.slice(0, 7);
+        case 'Node':
+            return link.label ?? target.id;
+    }
+}
+
+function chipFace(target: UiLinkTarget, link: UiLink): { face: ReactNode; hint: string | null } {
+    switch (target.type) {
+        case 'File':
+            return {
+                face: (
+                    <>
+                        <FileIcon path={target.path} size={14} />
+                        <span className="truncate">{baseName(target.path)}</span>
+                        {target.line !== undefined && <span className="opacity-70">:{target.line}</span>}
+                    </>
+                ),
+                hint: target.line === undefined ? target.path : `${target.path}:${target.line}`
+            };
+        case 'Diff':
+            return {
+                face: (
+                    <>
+                        <Icon icon={FileDiff} size={12} />
+                        <span className="truncate">{baseName(target.path)}</span>
+                    </>
+                ),
+                hint: target.path
+            };
+        case 'Commit':
+            return {
+                face: (
+                    <>
+                        <Icon icon={GitCommitHorizontal} size={12} />
+                        <span className="font-mono">{target.sha.slice(0, 7)}</span>
+                    </>
+                ),
+                hint: link.label ?? target.sha
+            };
+        case 'Node':
+            return {
+                face: (
+                    <>
+                        <Icon icon={SquareDashed} size={12} />
+                        <span className="truncate">{link.label ?? target.id}</span>
+                    </>
+                ),
+                hint: null
+            };
+    }
+}
+
+/*
+ * A resource of the host as a chip, the shape a mention has in a message. The host says whether it
+ * can open the target; one it cannot, outside the project or gone, stays mono text with the reason
+ * in a tooltip. A chip fades in, since a link reads as text until the host checked it.
+ */
+export function UiLinkChip({ target, context }: { target: UiLinkTarget; context: UiRenderContext }) {
+    const { t } = useTranslation('agent-chat');
+    const link = context.link?.(target) ?? PLAIN;
+    if (link.state === 'plain') {
+        const reason = link.reason ?? (context.link === undefined ? null : t('blocks.outsideProject'));
+        // Focusable only with a reason, so a keyboard reaches the tooltip.
+        const text = (
+            <span tabIndex={reason === null ? undefined : 0} className="font-mono text-code break-all text-text-muted">
+                {plainText(target, link)}
+            </span>
+        );
+        return reason === null ? text : <Tooltip label={reason}>{text}</Tooltip>;
+    }
+    const { face, hint } = chipFace(target, link);
+    const { openLink } = context;
+    const chip =
+        openLink === undefined ? (
+            <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 starting:opacity-0')}>{face}</span>
+        ) : (
+            <button
+                type="button"
+                className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 hover:brightness-95 starting:opacity-0')}
+                onClick={() => openLink(target)}
+            >
+                {face}
+            </button>
+        );
+    return hint === null ? chip : <Tooltip label={hint}>{chip}</Tooltip>;
+}
+
+/* A link with children is a row: the chip and what the agent says about it. */
+function LinkRow({ target, context, described, children }: { target: UiLinkTarget; context: UiRenderContext; described: boolean; children: ReactNode }) {
+    if (!described) {
+        return <UiLinkChip target={target} context={context} />;
+    }
+    return (
+        <div className="flex min-w-0 items-baseline gap-2 px-2 text-sm">
+            <span className="shrink-0">
+                <UiLinkChip target={target} context={context} />
+            </span>
+            <span className="min-w-0 text-text-muted">{children}</span>
+        </div>
+    );
+}
+
+export function FileRenderer({ node, children, context }: UiRendererProps<UiProps<'File'>>) {
+    const { path, line } = node.props;
+    return (
+        <LinkRow target={{ type: 'File', path, line }} context={context} described={node.children.length > 0}>
+            {children}
+        </LinkRow>
+    );
+}
+
+export function DiffRenderer({ node, children, context }: UiRendererProps<UiProps<'Diff'>>) {
+    return (
+        <LinkRow target={{ type: 'Diff', path: node.props.path }} context={context} described={node.children.length > 0}>
+            {children}
+        </LinkRow>
+    );
+}
+
+export function CommitRenderer({ node, children, context }: UiRendererProps<UiProps<'Commit'>>) {
+    return (
+        <LinkRow target={{ type: 'Commit', sha: node.props.sha }} context={context} described={node.children.length > 0}>
+            {children}
+        </LinkRow>
+    );
+}
+
+export function NodeRenderer({ node, children, context }: UiRendererProps<UiProps<'Node'>>) {
+    return (
+        <LinkRow target={{ type: 'Node', id: node.props.id }} context={context} described={node.children.length > 0}>
+            {children}
+        </LinkRow>
+    );
+}