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

package/dist/svelte/components/PRTimeline.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
+	import MessageSquare from '@lucide/svelte/icons/message-square';
+	import GitCommitIcon from '@lucide/svelte/icons/git-commit-horizontal';
+	import Eye from '@lucide/svelte/icons/eye';
+	import Tag from '@lucide/svelte/icons/tag';
+	import GitMerge from '@lucide/svelte/icons/git-merge';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+	import type { Component } from 'svelte';
+	import UserChip from './UserChip.svelte';
+	import type { TimelineEvent, TimelineEventKind } from '../../presentation.js';
+
+	/**
+	 * PRTimeline — a vertical event feed for a pull request / issue (opened,
+	 * commented, committed, reviewed, labeled, merged, closed, reopened). Each
+	 * row shows an icon, actor, and a short summary. Presentational.
+	 */
+	interface Props {
+		events: TimelineEvent[];
+		/** Label announced for the timeline region. */
+		ariaLabel?: string;
+		/** Rendered when no timeline events are present. */
+		emptyLabel?: string;
+	}
+
+	let {
+		events,
+		ariaLabel = 'Pull request timeline',
+		emptyLabel = 'No timeline events yet.'
+	}: Props = $props();
+
+	const icons = {
+		opened: GitPullRequest,
+		commented: MessageSquare,
+		committed: GitCommitIcon,
+		reviewed: Eye,
+		labeled: Tag,
+		merged: GitMerge,
+		closed: CircleX,
+		reopened: RotateCcw
+	} satisfies Record<TimelineEventKind, Component>;
+
+	const defaultSummary = {
+		opened: 'opened this',
+		commented: 'commented',
+		committed: 'added a commit',
+		reviewed: 'reviewed these changes',
+		labeled: 'updated labels',
+		merged: 'merged this',
+		closed: 'closed this',
+		reopened: 'reopened this'
+	} satisfies Record<TimelineEventKind, string>;
+
+	const eventLabels = {
+		opened: 'Opened',
+		commented: 'Comment',
+		committed: 'Commit',
+		reviewed: 'Review',
+		labeled: 'Label',
+		merged: 'Merged',
+		closed: 'Closed',
+		reopened: 'Reopened'
+	} satisfies Record<TimelineEventKind, string>;
+</script>
+
+{#if events.length === 0}
+	<div class="forge-timeline forge-timeline--empty" aria-label={ariaLabel}>
+		<span class="forge-timeline__icon forge-timeline__icon--empty">
+			<GitPullRequest class="size-3.5" aria-hidden="true" />
+		</span>
+		<span class="forge-timeline__empty-text">{emptyLabel}</span>
+	</div>
+{:else}
+	<ol class="forge-timeline" aria-label={ariaLabel}>
+		{#each events as event (event.id)}
+			{@const Icon = icons[event.kind] ?? MessageSquare}
+			<li class="forge-timeline__row" data-kind={event.kind}>
+				<span class="forge-timeline__icon" data-kind={event.kind}>
+					<Icon class="size-3.5" aria-hidden="true" />
+				</span>
+				<span class="forge-timeline__text">
+					<span class="forge-timeline__kind">{eventLabels[event.kind] ?? event.kind}</span>
+					<span class="forge-timeline__summary">
+						{#if event.actor}<UserChip user={event.actor} size="xs" />{/if}
+						{event.summary ?? defaultSummary[event.kind] ?? ''}
+						{#if event.at}<span class="forge-timeline__time">· {event.at}</span>{/if}
+					</span>
+				</span>
+			</li>
+		{/each}
+	</ol>
+{/if}
+
+<style>
+	.forge-timeline {
+		list-style: none;
+		margin: 0;
+		padding: 0 0 0 0.5rem;
+		position: relative;
+	}
+	.forge-timeline--empty {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		padding: 0.5rem 0 0.5rem 0.5rem;
+		color: var(--muted-foreground);
+	}
+	.forge-timeline::before {
+		content: '';
+		position: absolute;
+		left: 1.1rem;
+		top: 0.5rem;
+		bottom: 0.5rem;
+		width: 1px;
+		background: var(--border);
+	}
+	.forge-timeline__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.625rem;
+		padding: 0.4rem 0;
+		position: relative;
+	}
+	.forge-timeline__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 9999px;
+		background: var(--muted);
+		color: var(--muted-foreground);
+		flex: 0 0 auto;
+		z-index: 1;
+	}
+	.forge-timeline__icon--empty {
+		background: var(--background);
+		border: 1px dashed var(--border);
+	}
+	.forge-timeline__icon[data-kind='merged'] {
+		background: var(--primary);
+		color: var(--primary-foreground);
+	}
+	.forge-timeline__icon[data-kind='closed'] {
+		background: color-mix(in srgb, var(--destructive) 12%, transparent);
+		color: var(--destructive);
+	}
+	.forge-timeline__icon[data-kind='reopened'],
+	.forge-timeline__icon[data-kind='opened'] {
+		background: color-mix(in srgb, var(--success) 12%, transparent);
+		color: var(--success);
+	}
+	.forge-timeline__icon[data-kind='reviewed'] {
+		background: color-mix(in srgb, var(--primary) 10%, transparent);
+		color: var(--primary);
+	}
+	.forge-timeline__text {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.3rem 0.45rem;
+		min-width: 0;
+		font-size: 0.8125rem;
+		line-height: 1.45;
+		color: var(--foreground);
+	}
+	.forge-timeline__kind {
+		border: 1px solid var(--border);
+		border-radius: 9999px;
+		padding: 0.05rem 0.4rem;
+		color: var(--muted-foreground);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		line-height: 1.3;
+		text-transform: uppercase;
+	}
+	.forge-timeline__summary {
+		min-width: 0;
+	}
+	.forge-timeline__time {
+		color: var(--muted-foreground);
+	}
+	.forge-timeline__empty-text {
+		font-size: 0.8125rem;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+import type { TimelineEvent } from '../../presentation.ts';
+/**
+ * PRTimeline — a vertical event feed for a pull request / issue (opened,
+ * commented, committed, reviewed, labeled, merged, closed, reopened). Each
+ * row shows an icon, actor, and a short summary. Presentational.
+ */
+interface Props {
+    events: TimelineEvent[];
+    /** Label announced for the timeline region. */
+    ariaLabel?: string;
+    /** Rendered when no timeline events are present. */
+    emptyLabel?: string;
+}
+declare const PRTimeline: Component<Props, {}, "">;
+type PRTimeline = ReturnType<typeof PRTimeline>;
+export default PRTimeline;
+//# sourceMappingURL=PRTimeline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PRTimeline.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PRTimeline.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,uBAAuB,CAAC;AAG7E;;;;GAIG;AACH,UAAU,KAAK;IACd,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAuFF,QAAA,MAAM,UAAU,0BAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/ProjectCard.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import FolderKanban from '@lucide/svelte/icons/folder-kanban';
+	import GitBranch from '@lucide/svelte/icons/git-branch';
+	import CircleDot from '@lucide/svelte/icons/circle-dot';
+	import Lock from '@lucide/svelte/icons/lock';
+	import { Badge } from '@vibesdotdev/kit/components';
+	import type { ProjectSummary } from '../../presentation.js';
+
+	/**
+	 * ProjectCard — a single project tile for the projects list. Shows the name,
+	 * optional slug/description, a visibility marker, and the repo / open-issue
+	 * roll-up counts the host route supplies. Links via `hrefFor`. Presentational,
+	 * data-in props — no fetching here.
+	 */
+	interface Props {
+		project: ProjectSummary;
+		/** Builds the destination href for the project tile. */
+		hrefFor: (project: ProjectSummary) => string;
+	}
+
+	let { project, hrefFor }: Props = $props();
+
+	let isPrivate = $derived((project.visibility ?? 'private') !== 'public');
+</script>
+
+<a class="forge-project-card" href={hrefFor(project)}>
+	<div class="forge-project-card__head">
+		<span class="forge-project-card__icon">
+			<FolderKanban class="size-4" />
+		</span>
+		<span class="forge-project-card__name">{project.name}</span>
+		{#if project.slug}
+			<span class="forge-project-card__slug">{project.slug}</span>
+		{/if}
+		<span class="forge-project-card__spacer"></span>
+		{#if isPrivate}
+			<Badge variant="outline" class="gap-1">
+				<Lock class="size-3" />
+				Private
+			</Badge>
+		{:else}
+			<Badge variant="secondary">Public</Badge>
+		{/if}
+	</div>
+
+	{#if project.description}
+		<p class="forge-project-card__desc">{project.description}</p>
+	{/if}
+
+	<div class="forge-project-card__meta">
+		<span class="forge-project-card__stat" title="Member repositories">
+			<GitBranch class="size-3.5" />
+			{project.repoCount ?? 0}
+			{(project.repoCount ?? 0) === 1 ? 'repo' : 'repos'}
+		</span>
+		<span class="forge-project-card__stat" title="Open issues and pull requests">
+			<CircleDot class="size-3.5" />
+			{project.openCount ?? 0} open
+		</span>
+		{#if project.status && project.status !== 'active'}
+			<span class="forge-project-card__status">{project.status}</span>
+		{/if}
+		{#if project.updatedAt}
+			<span class="forge-project-card__updated">updated {project.updatedAt}</span>
+		{/if}
+	</div>
+</a>
+
+<style>
+	.forge-project-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.875rem 1rem;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		background: var(--background);
+		text-decoration: none;
+		color: inherit;
+	}
+	.forge-project-card:hover {
+		border-color: var(--primary);
+	}
+	.forge-project-card__head {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.forge-project-card__icon {
+		display: inline-flex;
+		color: var(--muted-foreground);
+		flex: 0 0 auto;
+	}
+	.forge-project-card__name {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--foreground);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.forge-project-card__slug {
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+		font-family: var(--font-mono, ui-monospace, monospace);
+	}
+	.forge-project-card__spacer {
+		flex: 1 1 auto;
+	}
+	.forge-project-card__desc {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--muted-foreground);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+	.forge-project-card__meta {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.875rem;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+	}
+	.forge-project-card__stat {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+	}
+	.forge-project-card__status {
+		text-transform: capitalize;
+	}
+	.forge-project-card__updated {
+		margin-left: auto;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { ProjectSummary } from '../../presentation.ts';
+/**
+ * ProjectCard — a single project tile for the projects list. Shows the name,
+ * optional slug/description, a visibility marker, and the repo / open-issue
+ * roll-up counts the host route supplies. Links via `hrefFor`. Presentational,
+ * data-in props — no fetching here.
+ */
+interface Props {
+    project: ProjectSummary;
+    /** Builds the destination href for the project tile. */
+    hrefFor: (project: ProjectSummary) => string;
+}
+declare const ProjectCard: import("svelte").Component<Props, {}, "">;
+type ProjectCard = ReturnType<typeof ProjectCard>;
+export default ProjectCard;
+//# sourceMappingURL=ProjectCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ProjectCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG3D;;;;;GAKG;AACH,UAAU,KAAK;IACd,OAAO,EAAE,cAAc,CAAC;IACxB,wDAAwD;IACxD,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,MAAM,CAAC;CAC7C;AA8DF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/PullRequestList.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import MessageSquare from '@lucide/svelte/icons/message-square';
+	import GitCompareArrows from '@lucide/svelte/icons/git-compare-arrows';
+	import { Avatar, AvatarImage, AvatarFallback } from '@vibesdotdev/kit/components';
+	import { EmptyState } from '@vibesdotdev/kit/components/layout';
+	import PRStatusBadge from './PRStatusBadge.svelte';
+	import LabelChip from './LabelChip.svelte';
+	import type { PullRequestSummary, Label } from '../../presentation.js';
+
+	/**
+	 * PullRequestList — a GitHub-style list of pull requests. Mirrors
+	 * {@link IssueList} but renders a {@link PRStatusBadge} (open / merged /
+	 * closed / draft) and the `source → target` ref pair for each row. Each row
+	 * links via `hrefFor`. Presentational: the parent supplies rows + href
+	 * builder.
+	 */
+	interface Props {
+		pulls: PullRequestSummary[];
+		/** Builds the destination href for a PR row. */
+		hrefFor: (pr: PullRequestSummary) => string;
+		/** Optional click handler for a label chip. */
+		onLabelClick?: (label: Label) => void;
+		/** Shown when there are no pull requests. */
+		emptyText?: string;
+	}
+
+	let { pulls, hrefFor, onLabelClick, emptyText = 'No pull requests yet.' }: Props = $props();
+
+	function initials(name: string): string {
+		return name
+			.split(/\s+/)
+			.map((p) => p[0])
+			.filter(Boolean)
+			.slice(0, 2)
+			.join('')
+			.toUpperCase();
+	}
+</script>
+
+{#if pulls.length === 0}
+	<div class="forge-pr-list__empty">
+		<EmptyState icon="lucide:git-pull-request" title={emptyText} />
+	</div>
+{:else}
+	<ul class="forge-pr-list">
+		{#each pulls as pr (pr.number)}
+			<li class="forge-pr-list__row">
+				<div class="forge-pr-list__state">
+					<PRStatusBadge state={pr.state} hideIcon />
+				</div>
+				<div class="forge-pr-list__main">
+					<a class="forge-pr-list__title" href={hrefFor(pr)}>
+						{pr.title}
+					</a>
+					{#if pr.labels && pr.labels.length > 0}
+						<span class="forge-pr-list__labels">
+							{#each pr.labels as label (label.name)}
+								<LabelChip {label} onClick={onLabelClick} />
+							{/each}
+						</span>
+					{/if}
+					<span class="forge-pr-list__meta">
+						#{pr.number}
+						<span class="forge-pr-list__refs">
+							<GitCompareArrows class="size-3" />
+							{pr.sourceRef} → {pr.targetRef}
+						</span>{#if pr.updatedAt}
+							· updated {pr.updatedAt}{/if}
+					</span>
+				</div>
+				<div class="forge-pr-list__aside">
+					{#if pr.commentCount}
+						<span class="forge-pr-list__comments" title="{pr.commentCount} comments">
+							<MessageSquare class="size-3.5" />
+							{pr.commentCount}
+						</span>
+					{/if}
+					{#if pr.author}
+						<Avatar class="size-6">
+							{#if pr.author.avatarUrl}
+								<AvatarImage src={pr.author.avatarUrl} alt={pr.author.name} />
+							{/if}
+							<AvatarFallback class="text-[0.6rem]">{initials(pr.author.name)}</AvatarFallback>
+						</Avatar>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	.forge-pr-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		overflow: hidden;
+	}
+	.forge-pr-list__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75rem;
+		padding: 0.625rem 0.875rem;
+		border-bottom: 1px solid var(--border);
+	}
+	.forge-pr-list__row:last-child {
+		border-bottom: none;
+	}
+	.forge-pr-list__state {
+		padding-top: 0.1rem;
+	}
+	.forge-pr-list__main {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.forge-pr-list__title {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--foreground);
+		text-decoration: none;
+	}
+	.forge-pr-list__title:hover {
+		color: var(--primary);
+	}
+	.forge-pr-list__labels {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+	}
+	.forge-pr-list__meta {
+		display: inline-flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.35rem;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+	}
+	.forge-pr-list__refs {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-family: var(--font-mono, ui-monospace, monospace);
+	}
+	.forge-pr-list__aside {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		flex: 0 0 auto;
+	}
+	.forge-pr-list__comments {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.2rem;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+	}
+	.forge-pr-list__empty {
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+		padding: 1rem 0;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { PullRequestSummary, Label } from '../../presentation.ts';
+/**
+ * PullRequestList — a GitHub-style list of pull requests. Mirrors
+ * {@link IssueList} but renders a {@link PRStatusBadge} (open / merged /
+ * closed / draft) and the `source → target` ref pair for each row. Each row
+ * links via `hrefFor`. Presentational: the parent supplies rows + href
+ * builder.
+ */
+interface Props {
+    pulls: PullRequestSummary[];
+    /** Builds the destination href for a PR row. */
+    hrefFor: (pr: PullRequestSummary) => string;
+    /** Optional click handler for a label chip. */
+    onLabelClick?: (label: Label) => void;
+    /** Shown when there are no pull requests. */
+    emptyText?: string;
+}
+declare const PullRequestList: import("svelte").Component<Props, {}, "">;
+type PullRequestList = ReturnType<typeof PullRequestList>;
+export default PullRequestList;
+//# sourceMappingURL=PullRequestList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PullRequestList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PullRequestList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGtE;;;;;;GAMG;AACH,UAAU,KAAK;IACd,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,gDAAgD;IAChD,OAAO,EAAE,CAAC,EAAE,EAAE,kBAAkB,KAAK,MAAM,CAAC;IAC5C,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AA+EF,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/ReviewThread.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import FileCode from '@lucide/svelte/icons/file-code';
+	import History from '@lucide/svelte/icons/history';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import { Badge } from '@vibesdotdev/kit/components';
+	import CommentThread from './CommentThread.svelte';
+	import type { ReviewThreadData } from '../../presentation.js';
+
+	/**
+	 * ReviewThread — a CommentThread anchored to a diff location
+	 * `{path,line,side}`, with outdated + resolved markers. The substrate is the
+	 * same CommentThread used for issue comments; this wraps it with the code
+	 * anchor header. Presentational — `onReply` returns a promise.
+	 */
+	interface Props {
+		thread: ReviewThreadData;
+		/** Reply handler scoped to this thread; resolve to clear the box. */
+		onReply?: (body: string) => void | Promise<void>;
+	}
+
+	let { thread, onReply }: Props = $props();
+
+	let anchorLabel = $derived(
+		`${thread.anchor.path}:${thread.anchor.line}${thread.anchor.side ? ` (${thread.anchor.side})` : ''}`
+	);
+</script>
+
+<section class="forge-review" class:forge-review--outdated={thread.outdated}>
+	<header class="forge-review__anchor">
+		<FileCode class="size-3.5" />
+		<code class="forge-review__path">{anchorLabel}</code>
+		{#if thread.outdated}
+			<Badge variant="outline" class="gap-1">
+				<History class="size-3" />
+				Outdated
+			</Badge>
+		{/if}
+		{#if thread.resolved}
+			<Badge variant="secondary" class="gap-1">
+				<CircleCheck class="size-3" />
+				Resolved
+			</Badge>
+		{/if}
+	</header>
+	<div class="forge-review__body">
+		<CommentThread
+			comments={thread.comments}
+			onReply={thread.resolved ? undefined : onReply}
+			replyPlaceholder="Reply…"
+			replyLabel="Reply"
+			compact
+		/>
+	</div>
+</section>
+
+<style>
+	.forge-review {
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		overflow: hidden;
+	}
+	.forge-review--outdated {
+		opacity: 0.85;
+	}
+	.forge-review__anchor {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.4rem 0.625rem;
+		background: var(--muted);
+		border-bottom: 1px solid var(--border);
+		font-size: 0.75rem;
+	}
+	.forge-review__path {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		color: var(--foreground);
+	}
+	.forge-review__body {
+		padding: 0.625rem;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { ReviewThreadData } from '../../presentation.ts';
+/**
+ * ReviewThread — a CommentThread anchored to a diff location
+ * `{path,line,side}`, with outdated + resolved markers. The substrate is the
+ * same CommentThread used for issue comments; this wraps it with the code
+ * anchor header. Presentational — `onReply` returns a promise.
+ */
+interface Props {
+    thread: ReviewThreadData;
+    /** Reply handler scoped to this thread; resolve to clear the box. */
+    onReply?: (body: string) => void | Promise<void>;
+}
+declare const ReviewThread: import("svelte").Component<Props, {}, "">;
+type ReviewThread = ReturnType<typeof ReviewThread>;
+export default ReviewThread;
+//# sourceMappingURL=ReviewThread.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewThread.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReviewThread.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG7D;;;;;GAKG;AACH,UAAU,KAAK;IACd,MAAM,EAAE,gBAAgB,CAAC;IACzB,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACjD;AA2CF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}