@vibesdotdev/forge 0.0.0-stage → 1.0.0-rc.5

package/dist/svelte/components/ReviewableDiff.svelte

@@ -0,0 +1,430 @@
+<script lang="ts">
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import FileIcon from '@lucide/svelte/icons/file';
+	import MessageSquarePlus from '@lucide/svelte/icons/message-square-plus';
+	import { CodeTokenizedLine } from '@vibesdotdev/kit/components/code';
+	import type { Diff, DiffFile, DiffLine } from '@vibesdotdev/git-operations/browse';
+	import ReviewThread from './ReviewThread.svelte';
+	import InlineReplyBox from './InlineReplyBox.svelte';
+	import type { ReviewThreadData, ReviewAnchor } from '../../presentation.js';
+
+	/**
+	 * ReviewableDiff — a PR-review wrapper around an already-fetched {@link Diff}.
+	 *
+	 * Renders a unified diff with VibesKit's lightweight read-only tokenization
+	 * (Monaco is reserved for active editors) and layers code review on top:
+	 *   - each non-empty diff line is clickable; clicking opens an
+	 *     `InlineReplyBox` anchored to that line's `{path,line,side}` and calls
+	 *     `onComment(anchor, body)`;
+	 *   - existing `ReviewThreadData[]` are rendered inline beneath the line they
+	 *     anchor to (keyed by `path` + `line` + `side`), each with an
+	 *     `InlineReplyBox` wired to `onReply(threadId, body)`.
+	 *
+	 * Purely presentational + no-fetch: the host owns persistence and passes the
+	 * resolved threads back in. `onComment` / `onReply` return promises so the box
+	 * clears on a resolved submit and keeps the draft on reject.
+	 */
+	interface Props {
+		diff: Diff;
+		/** Existing review threads to render inline at their anchors. */
+		threads?: ReviewThreadData[];
+		/**
+		 * The commit SHA newly-anchored comments are tied to (the PR head). Passed
+		 * back to the host on `onComment` so it can persist `reviewCommitSha`.
+		 */
+		commitSha?: string;
+		/**
+		 * Post a NEW review comment anchored to a diff line. The host persists it
+		 * (with `reviewState: 'commented'`) and feeds the resulting thread back via
+		 * `threads`. Resolve to close the inline box.
+		 */
+		onComment?: (anchor: ReviewAnchor, body: string) => void | Promise<void>;
+		/** Reply to an EXISTING thread (by thread id). Resolve to clear the box. */
+		onReply?: (threadId: string, body: string) => void | Promise<void>;
+		/** Read-only mode: render threads but suppress the click-to-comment affordance. */
+		readonly?: boolean;
+	}
+
+	let { diff, threads = [], commitSha, onComment, onReply, readonly = false }: Props = $props();
+
+	const signClass = (kind: DiffLine['kind']) =>
+		kind === 'add' ? 'git-diff__ln--add' : kind === 'del' ? 'git-diff__ln--del' : '';
+	const sign = (kind: DiffLine['kind']) => (kind === 'add' ? '+' : kind === 'del' ? '-' : ' ');
+
+	// A diff line maps to a review side + a line number on that side:
+	//   - 'add'/'context' anchor to the NEW side (newLineNo);
+	//   - 'del' anchors to the OLD side (oldLineNo).
+	function lineAnchor(path: string, line: DiffLine): ReviewAnchor | null {
+		const side: 'old' | 'new' = line.kind === 'del' ? 'old' : 'new';
+		const no = side === 'old' ? line.oldLineNo : line.newLineNo;
+		if (no == null) return null;
+		return { path, line: no, side, commitSha };
+	}
+
+	// Stable key for matching threads to a line.
+	const anchorKey = (path: string, lineNo: number, side: 'old' | 'new') =>
+		JSON.stringify([path, side, lineNo]);
+
+	// Index threads by anchor key for O(1) lookup at render. A line can carry
+	// several threads (multiple distinct discussions on the same line).
+	const threadsByAnchor = $derived.by(() => {
+		const m = new Map<string, ReviewThreadData[]>();
+		for (const t of threads) {
+			const side = t.anchor.side ?? 'new';
+			const key = anchorKey(t.anchor.path, t.anchor.line, side);
+			const list = m.get(key);
+			if (list) list.push(t);
+			else m.set(key, [t]);
+		}
+		return m;
+	});
+
+	// Per-file collapse state, keyed by path; default expanded.
+	let collapsed = $state<Record<string, boolean>>({});
+	const toggle = (path: string) => {
+		collapsed = { ...collapsed, [path]: !collapsed[path] };
+	};
+
+	// Which line (by anchor key) currently has an open new-comment box.
+	let openComposer = $state<string | null>(null);
+
+	function composerKeyFor(path: string, line: DiffLine): string | null {
+		const anchor = lineAnchor(path, line);
+		if (!anchor) return null;
+		return anchorKey(anchor.path, anchor.line, anchor.side ?? 'new');
+	}
+
+	function startComment(path: string, line: DiffLine) {
+		if (readonly || !onComment) return;
+		const key = composerKeyFor(path, line);
+		if (!key) return;
+		openComposer = openComposer === key ? null : key;
+	}
+
+	async function submitComment(anchor: ReviewAnchor, body: string) {
+		await onComment?.(anchor, body);
+		openComposer = null;
+	}
+
+	const canComment = $derived(!readonly && Boolean(onComment));
+</script>
+
+<div class="git-diff">
+	<div class="git-diff__toolbar">
+		<span class="git-diff__summary">
+			{diff.files.length}
+			{diff.files.length === 1 ? 'file' : 'files'} changed
+		</span>
+	</div>
+
+	{#if diff.truncated}
+		<p class="git-diff__truncated">Diff truncated — some files are not shown.</p>
+	{/if}
+
+	{#each diff.files as file (file.path)}
+		{@const isCollapsed = collapsed[file.path] ?? false}
+		<section class="git-diff__file">
+			<button
+				type="button"
+				class="git-diff__file-header"
+				aria-expanded={!isCollapsed}
+				onclick={() => toggle(file.path)}
+			>
+				{#if isCollapsed}
+					<ChevronRight class="size-4 text-muted-foreground" />
+				{:else}
+					<ChevronDown class="size-4 text-muted-foreground" />
+				{/if}
+				<FileIcon class="size-4 text-muted-foreground" />
+				<span class="git-diff__path">
+					{#if file.status === 'renamed' && file.oldPath}
+						<span class="git-diff__oldpath">{file.oldPath}</span> →
+					{/if}
+					{file.path}
+				</span>
+				<span class="git-diff__badge git-diff__badge--{file.status}">{file.status}</span>
+				{#if file.binary}
+					<span class="git-diff__badge git-diff__badge--binary">binary</span>
+				{/if}
+				<span class="git-diff__counts">
+					<span class="git-diff__add">+{file.additions}</span>
+					<span class="git-diff__del">-{file.deletions}</span>
+				</span>
+			</button>
+
+			{#if !isCollapsed}
+				{#if file.binary}
+					<p class="git-diff__binary-note">Binary file not shown.</p>
+				{:else if file.hunks.length === 0}
+					<p class="git-diff__binary-note">No changes to display.</p>
+				{:else}
+					<table class="git-diff__table">
+						<tbody>
+							{#each file.hunks as hunk, hi (hi)}
+								<tr class="git-diff__hunk-header">
+									<td class="git-diff__gutter" aria-hidden="true"></td>
+									<td class="git-diff__gutter" aria-hidden="true"></td>
+									<td class="git-diff__code">{hunk.header}</td>
+								</tr>
+								{#each hunk.lines as line, li (li)}
+									{@const key = composerKeyFor(file.path, line)}
+									{@const lineThreads = key ? threadsByAnchor.get(key) : undefined}
+									{@const commentable = canComment && key != null}
+									<tr
+										class="git-diff__ln {signClass(line.kind)}"
+										class:git-diff__ln--commentable={commentable}
+									>
+										<td class="git-diff__num">{line.oldLineNo ?? ''}</td>
+										<td class="git-diff__num">{line.newLineNo ?? ''}</td>
+										<td class="git-diff__code">
+											{#if commentable}
+												<button
+													type="button"
+													class="git-diff__add-comment"
+													title="Comment on line"
+													aria-label="Comment on this line"
+													onclick={() => startComment(file.path, line)}
+												>
+													<MessageSquarePlus class="size-3" />
+												</button>
+											{/if}
+											<span class="git-diff__sign">{sign(line.kind)}</span><CodeTokenizedLine
+												code={line.content}
+												filename={file.path}
+												class="git-diff__tokens"
+											/>
+										</td>
+									</tr>
+
+									{#if lineThreads && lineThreads.length}
+										<tr class="git-diff__thread-row">
+											<td class="git-diff__num" aria-hidden="true"></td>
+											<td class="git-diff__num" aria-hidden="true"></td>
+											<td class="git-diff__thread-cell">
+												{#each lineThreads as thread (thread.id)}
+													<div class="git-diff__thread">
+														<ReviewThread
+															{thread}
+															onReply={onReply
+																? (body) => onReply!(thread.id, body)
+																: undefined}
+														/>
+													</div>
+												{/each}
+											</td>
+										</tr>
+									{/if}
+
+									{#if key && openComposer === key}
+										{@const anchor = lineAnchor(file.path, line)}
+										{#if anchor}
+											<tr class="git-diff__thread-row">
+												<td class="git-diff__num" aria-hidden="true"></td>
+												<td class="git-diff__num" aria-hidden="true"></td>
+												<td class="git-diff__thread-cell">
+													<div class="git-diff__composer">
+														<InlineReplyBox
+															compact
+															deferActivation={false}
+															placeholder="Add a review comment…"
+															submitLabel="Add comment"
+															onSubmit={(body) => submitComment(anchor, body)}
+															onCancel={() => (openComposer = null)}
+														/>
+													</div>
+												</td>
+											</tr>
+										{/if}
+									{/if}
+								{/each}
+							{/each}
+						</tbody>
+					</table>
+				{/if}
+			{/if}
+		</section>
+	{/each}
+
+	{#if diff.files.length === 0}
+		<p class="git-diff__empty">No changes.</p>
+	{/if}
+</div>
+
+<style>
+	.git-diff {
+		font-size: 0.8125rem;
+	}
+	.git-diff__toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		margin-bottom: 0.75rem;
+	}
+	.git-diff__summary {
+		color: var(--muted-foreground);
+	}
+	.git-diff__truncated,
+	.git-diff__empty {
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+	.git-diff__file {
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		overflow: hidden;
+		margin-bottom: 0.75rem;
+	}
+	.git-diff__file-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		background: var(--muted);
+		border: none;
+		border-bottom: 1px solid var(--border);
+		cursor: pointer;
+		text-align: left;
+	}
+	.git-diff__path {
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.8125rem;
+	}
+	.git-diff__oldpath {
+		color: var(--muted-foreground);
+		text-decoration: line-through;
+	}
+	.git-diff__badge {
+		font-size: 0.625rem;
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+		padding: 0.05rem 0.35rem;
+		border-radius: 9999px;
+		border: 1px solid var(--border);
+		color: var(--muted-foreground);
+	}
+	.git-diff__badge--added {
+		color: var(--success-ink, var(--success));
+		border-color: color-mix(in oklab, var(--success) 40%, transparent);
+		background: color-mix(in oklab, var(--success) 14%, transparent);
+	}
+	.git-diff__badge--deleted {
+		color: var(--destructive-ink, var(--destructive));
+		border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+		background: color-mix(in oklab, var(--destructive) 14%, transparent);
+	}
+	.git-diff__badge--renamed {
+		color: var(--warning-ink, var(--warning));
+		border-color: color-mix(in oklab, var(--warning) 40%, transparent);
+		background: color-mix(in oklab, var(--warning) 14%, transparent);
+	}
+	.git-diff__badge--binary {
+		color: var(--info-ink, var(--info));
+		border-color: color-mix(in oklab, var(--info) 40%, transparent);
+		background: color-mix(in oklab, var(--info) 14%, transparent);
+	}
+	.git-diff__counts {
+		margin-left: auto;
+		display: inline-flex;
+		gap: 0.4rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	}
+	.git-diff__add {
+		color: var(--success-ink, var(--success));
+	}
+	.git-diff__del {
+		color: var(--destructive-ink, var(--destructive));
+	}
+	.git-diff__binary-note {
+		margin: 0;
+		padding: 0.75rem;
+		color: var(--muted-foreground);
+	}
+	.git-diff__table {
+		width: 100%;
+		border-collapse: collapse;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.75rem;
+		line-height: 1.5;
+		tab-size: 4;
+	}
+	.git-diff__num {
+		width: 1%;
+		min-width: 2.5rem;
+		padding: 0 0.5rem;
+		text-align: right;
+		color: var(--muted-foreground);
+		user-select: none;
+		vertical-align: top;
+		border-right: 1px solid var(--border);
+	}
+	.git-diff__code {
+		position: relative;
+		padding: 0 0.5rem;
+		white-space: pre-wrap;
+		word-break: break-word;
+		vertical-align: top;
+	}
+	.git-diff__sign {
+		display: inline-block;
+		width: 1ch;
+		user-select: none;
+	}
+	.git-diff__hunk-header td {
+		background: var(--muted);
+		color: var(--muted-foreground);
+	}
+	.git-diff__ln--add,
+	.git-diff__ln--add .git-diff__code {
+		background: color-mix(in oklab, var(--success) 16%, transparent);
+	}
+	.git-diff__ln--add .git-diff__num {
+		background: color-mix(in oklab, var(--success) 24%, transparent);
+	}
+	.git-diff__ln--del,
+	.git-diff__ln--del .git-diff__code {
+		background: color-mix(in oklab, var(--destructive) 14%, transparent);
+	}
+	.git-diff__ln--del .git-diff__num {
+		background: color-mix(in oklab, var(--destructive) 22%, transparent);
+	}
+	.git-diff__ln--commentable .git-diff__code {
+		cursor: default;
+	}
+	/* Show the add-comment affordance on row hover only. */
+	.git-diff__add-comment {
+		position: absolute;
+		left: -0.65rem;
+		top: 50%;
+		transform: translateY(-50%);
+		display: none;
+		align-items: center;
+		justify-content: center;
+		width: 1.1rem;
+		height: 1.1rem;
+		padding: 0;
+		border: none;
+		border-radius: 0.25rem;
+		background: var(--primary);
+		color: #fff;
+		cursor: pointer;
+	}
+	.git-diff__ln--commentable:hover .git-diff__add-comment {
+		display: inline-flex;
+	}
+	.git-diff__thread-cell {
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
+		background: var(--muted);
+		border-top: 1px solid var(--border);
+		font-family: var(--font-sans, system-ui, sans-serif);
+		white-space: normal;
+	}
+	.git-diff__thread + .git-diff__thread {
+		margin-top: 0.5rem;
+	}
+	.git-diff__composer {
+		max-width: 42rem;
+	}
+</style>

package/dist/svelte/components/ReviewableDiff.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Diff } from '@vibesdotdev/git-operations/browse';
+import type { ReviewThreadData, ReviewAnchor } from '../../presentation.ts';
+/**
+ * ReviewableDiff — a PR-review wrapper around an already-fetched {@link Diff}.
+ *
+ * Renders a unified diff with VibesKit's lightweight read-only tokenization
+ * (Monaco is reserved for active editors) and layers code review on top:
+ *   - each non-empty diff line is clickable; clicking opens an
+ *     `InlineReplyBox` anchored to that line's `{path,line,side}` and calls
+ *     `onComment(anchor, body)`;
+ *   - existing `ReviewThreadData[]` are rendered inline beneath the line they
+ *     anchor to (keyed by `path` + `line` + `side`), each with an
+ *     `InlineReplyBox` wired to `onReply(threadId, body)`.
+ *
+ * Purely presentational + no-fetch: the host owns persistence and passes the
+ * resolved threads back in. `onComment` / `onReply` return promises so the box
+ * clears on a resolved submit and keeps the draft on reject.
+ */
+interface Props {
+    diff: Diff;
+    /** Existing review threads to render inline at their anchors. */
+    threads?: ReviewThreadData[];
+    /**
+     * The commit SHA newly-anchored comments are tied to (the PR head). Passed
+     * back to the host on `onComment` so it can persist `reviewCommitSha`.
+     */
+    commitSha?: string;
+    /**
+     * Post a NEW review comment anchored to a diff line. The host persists it
+     * (with `reviewState: 'commented'`) and feeds the resulting thread back via
+     * `threads`. Resolve to close the inline box.
+     */
+    onComment?: (anchor: ReviewAnchor, body: string) => void | Promise<void>;
+    /** Reply to an EXISTING thread (by thread id). Resolve to clear the box. */
+    onReply?: (threadId: string, body: string) => void | Promise<void>;
+    /** Read-only mode: render threads but suppress the click-to-comment affordance. */
+    readonly?: boolean;
+}
+declare const ReviewableDiff: import("svelte").Component<Props, {}, "">;
+type ReviewableDiff = ReturnType<typeof ReviewableDiff>;
+export default ReviewableDiff;
+//# sourceMappingURL=ReviewableDiff.svelte.d.ts.map

package/dist/svelte/components/ReviewableDiff.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewableDiff.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReviewableDiff.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAsB,MAAM,oCAAoC,CAAC;AAGnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG3E;;;;;;;;;;;;;;;GAeG;AACH,UAAU,KAAK;IACd,IAAI,EAAE,IAAI,CAAC;IACX,iEAAiE;IACjE,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAiMF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}