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

package/dist/svelte/components/StackMap.svelte

@@ -0,0 +1,470 @@
+<script lang="ts">
+	import ArrowDown from '@lucide/svelte/icons/arrow-down';
+	import Check from '@lucide/svelte/icons/check';
+	import CircleAlert from '@lucide/svelte/icons/circle-alert';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import GitBranch from '@lucide/svelte/icons/git-branch';
+	import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import ShieldCheck from '@lucide/svelte/icons/shield-check';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import PRStatusBadge from './PRStatusBadge.svelte';
+	import type { ForgePrStackMemberView, ForgePrStackView } from '../../presentation.js';
+
+	/**
+	 * StackMap — the canonical visual explanation of a pull-request stack.
+	 * Members render in landing order (bottom layer first), with the exact head,
+	 * CI/review evidence, and blockers required to understand whether the chain
+	 * is safe to restack or merge. Presentational only: the host owns links,
+	 * loading, authorization, and mutations.
+	 */
+	interface Props {
+		stack: ForgePrStackView;
+		/** Builds a PR href. Without one, titles render as text (useful in embeds). */
+		hrefFor?: (member: ForgePrStackMemberView) => string;
+		/** Highlights the layer containing the detail page currently being viewed. */
+		currentPullRequestNumber?: number;
+		/** Tightens spacing for an embedded PR-detail summary. */
+		compact?: boolean;
+	}
+
+	let { stack, hrefFor, currentPullRequestNumber, compact = false }: Props = $props();
+
+	let members = $derived([...stack.members].sort((a, b) => a.position - b.position));
+
+	const stateLabels = {
+		active: 'Active',
+		merging: 'Merging',
+		merged: 'Merged',
+		dissolved: 'Dissolved'
+	} satisfies Record<ForgePrStackView['state'], string>;
+
+	const healthLabels = {
+		clean: 'Clean',
+		'restack-required': 'Restack required',
+		conflicted: 'Conflicted'
+	} satisfies Record<ForgePrStackView['health'], string>;
+
+	function ciLabel(member: ForgePrStackMemberView): string {
+		if (!member.ciStatus) return 'CI not reported';
+		return {
+			pending: 'CI pending',
+			success: 'CI passed',
+			failure: 'CI failed',
+			error: 'CI error'
+		}[member.ciStatus];
+	}
+
+	function approvalLabel(member: ForgePrStackMemberView): string {
+		if (member.requiredApprovals === undefined) {
+			return member.approvalCount === undefined
+				? 'Reviews not reported'
+				: `${member.approvalCount} approved`;
+		}
+		return `${member.approvalCount ?? 0}/${member.requiredApprovals} approved`;
+	}
+
+	function shortSha(sha: string | undefined): string {
+		return sha?.slice(0, 12) ?? 'head unavailable';
+	}
+</script>
+
+<section
+	class="forge-stack-map"
+	class:forge-stack-map--compact={compact}
+	aria-labelledby={`forge-stack-${stack.id}-title`}
+>
+	<header class="forge-stack-map__header">
+		<div class="forge-stack-map__heading">
+			<p class="forge-stack-map__eyebrow">Pull request stack #{stack.stackNumber}</p>
+			<h2 id={`forge-stack-${stack.id}-title`}>
+				{members.length} layers into <code>{stack.trunkRef}</code>
+			</h2>
+		</div>
+		<div class="forge-stack-map__badges" aria-label="Stack status">
+			<Badge variant="outline">{stateLabels[stack.state]}</Badge>
+			<span class="forge-stack-map__health" data-health={stack.health}>
+				{#if stack.health === 'clean'}
+					<Check class="size-3" />
+				{:else if stack.health === 'conflicted'}
+					<CircleX class="size-3" />
+				{:else}
+					<CircleAlert class="size-3" />
+				{/if}
+				{healthLabels[stack.health]}
+			</span>
+		</div>
+	</header>
+
+	<div class="forge-stack-map__policy">
+		<span>
+			<ShieldCheck class="size-3.5" />
+			{stack.landingPolicy === 'batch-allowed'
+				? 'Batch landing allowed'
+				: 'Land one layer at a time'}
+		</span>
+		<span>Revision {stack.revision}</span>
+	</div>
+
+	<p class="forge-stack-map__order">
+		Landing order
+		<ArrowDown class="size-3.5" />
+	</p>
+
+	<ol class="forge-stack-map__layers" aria-label="Stack layers in bottom-to-top landing order">
+		{#each members as member, index (member.pullRequestId)}
+			<li
+				class="forge-stack-map__layer"
+				class:forge-stack-map__layer--current={member.pullRequestNumber ===
+					currentPullRequestNumber}
+				aria-current={member.pullRequestNumber === currentPullRequestNumber ? 'step' : undefined}
+			>
+				<div class="forge-stack-map__rail" aria-hidden="true">
+					<span>{index + 1}</span>
+				</div>
+				<article class="forge-stack-map__card">
+					<div class="forge-stack-map__layer-header">
+						<div class="forge-stack-map__layer-title">
+							<span class="forge-stack-map__layer-label">
+								Layer {index + 1}{index === 0 ? ' · lands first' : ''}
+							</span>
+							{#if hrefFor}
+								<a href={hrefFor(member)}>
+									<GitPullRequest class="size-4" />
+									#{member.pullRequestNumber}
+									{member.title}
+								</a>
+							{:else}
+								<strong>
+									<GitPullRequest class="size-4" />
+									#{member.pullRequestNumber}
+									{member.title}
+								</strong>
+							{/if}
+						</div>
+						<PRStatusBadge state={member.state} hideIcon />
+					</div>
+
+					<div class="forge-stack-map__refs">
+						<GitBranch class="size-3.5" />
+						<code>{member.sourceRef}</code>
+						<span aria-hidden="true">→</span>
+						<code>{member.targetRef}</code>
+					</div>
+
+					<div class="forge-stack-map__evidence">
+						<span data-ci={member.ciStatus ?? 'unknown'}>
+							{#if member.ciStatus === 'success'}
+								<Check class="size-3.5" />
+							{:else if member.ciStatus === 'failure' || member.ciStatus === 'error'}
+								<CircleX class="size-3.5" />
+							{:else}
+								<LoaderCircle class="size-3.5" />
+							{/if}
+							{ciLabel(member)}
+						</span>
+						<span>
+							<ShieldCheck class="size-3.5" />
+							{approvalLabel(member)}
+						</span>
+						<code title={member.headSha ?? 'Head SHA unavailable'}>{shortSha(member.headSha)}</code>
+					</div>
+
+					{#if member.blockers.length > 0}
+						<ul
+							class="forge-stack-map__blockers"
+							aria-label={`Blockers for pull request ${member.pullRequestNumber}`}
+						>
+							{#each member.blockers as blocker, blockerIndex (`${blockerIndex}:${blocker}`)}
+								<li><CircleAlert class="size-3.5" /> {blocker}</li>
+							{/each}
+						</ul>
+					{/if}
+				</article>
+			</li>
+		{/each}
+	</ol>
+</section>
+
+<style>
+	.forge-stack-map {
+		--stack-rail: color-mix(in oklab, var(--primary) 45%, var(--border));
+		padding: 1rem;
+		border: 1px solid var(--border);
+		border-radius: 0.75rem;
+		background: color-mix(in oklab, var(--card) 96%, var(--primary) 4%);
+	}
+
+	.forge-stack-map__header,
+	.forge-stack-map__policy,
+	.forge-stack-map__layer-header,
+	.forge-stack-map__refs,
+	.forge-stack-map__evidence,
+	.forge-stack-map__health,
+	.forge-stack-map__order {
+		display: flex;
+		align-items: center;
+	}
+
+	.forge-stack-map__header {
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	.forge-stack-map__heading {
+		min-width: 0;
+	}
+
+	.forge-stack-map__eyebrow {
+		margin: 0 0 0.2rem;
+		color: var(--muted-foreground);
+		font-size: 0.7rem;
+		font-weight: 650;
+		letter-spacing: 0.055em;
+		text-transform: uppercase;
+	}
+
+	.forge-stack-map h2 {
+		margin: 0;
+		font-size: 1.05rem;
+		font-weight: 650;
+	}
+
+	.forge-stack-map code {
+		font-family: var(--font-mono, ui-monospace, monospace);
+	}
+
+	.forge-stack-map__badges {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.4rem;
+		flex-wrap: wrap;
+	}
+
+	.forge-stack-map__health {
+		gap: 0.3rem;
+		padding: 0.14rem 0.48rem;
+		border: 1px solid currentColor;
+		border-radius: 999px;
+		font-size: 0.72rem;
+		font-weight: 650;
+	}
+
+	.forge-stack-map__health[data-health='clean'] {
+		color: var(--success-ink, var(--success));
+		background: color-mix(in oklab, var(--success) 12%, transparent);
+	}
+
+	.forge-stack-map__health[data-health='restack-required'] {
+		color: var(--warning-ink, var(--warning));
+		background: color-mix(in oklab, var(--warning) 12%, transparent);
+	}
+
+	.forge-stack-map__health[data-health='conflicted'] {
+		color: var(--destructive-ink, var(--destructive));
+		background: color-mix(in oklab, var(--destructive) 10%, transparent);
+	}
+
+	.forge-stack-map__policy {
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-top: 0.85rem;
+		padding-top: 0.7rem;
+		border-top: 1px solid var(--border);
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+	}
+
+	.forge-stack-map__policy span:first-child {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.forge-stack-map__order {
+		gap: 0.3rem;
+		margin: 0.9rem 0 0.45rem 2.55rem;
+		color: var(--muted-foreground);
+		font-size: 0.69rem;
+		font-weight: 650;
+		letter-spacing: 0.045em;
+		text-transform: uppercase;
+	}
+
+	.forge-stack-map__layers {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.forge-stack-map__layer {
+		display: grid;
+		grid-template-columns: 2rem minmax(0, 1fr);
+		gap: 0.55rem;
+		position: relative;
+	}
+
+	.forge-stack-map__rail {
+		display: flex;
+		justify-content: center;
+		position: relative;
+	}
+
+	.forge-stack-map__rail::after {
+		content: '';
+		position: absolute;
+		top: 1.65rem;
+		bottom: -0.35rem;
+		width: 2px;
+		background: var(--stack-rail);
+	}
+
+	.forge-stack-map__layer:last-child .forge-stack-map__rail::after {
+		display: none;
+	}
+
+	.forge-stack-map__rail span {
+		display: grid;
+		place-items: center;
+		position: relative;
+		z-index: 1;
+		width: 1.55rem;
+		height: 1.55rem;
+		margin-top: 0.65rem;
+		border: 2px solid var(--stack-rail);
+		border-radius: 999px;
+		background: var(--card);
+		color: var(--foreground);
+		font-size: 0.69rem;
+		font-weight: 700;
+	}
+
+	.forge-stack-map__card {
+		min-width: 0;
+		margin-bottom: 0.6rem;
+		padding: 0.65rem 0.75rem;
+		border: 1px solid var(--border);
+		border-radius: 0.55rem;
+		background: var(--card);
+	}
+
+	.forge-stack-map__layer--current .forge-stack-map__card {
+		border-color: color-mix(in oklab, var(--primary) 65%, var(--border));
+		box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 18%, transparent);
+	}
+
+	.forge-stack-map__layer-header {
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.75rem;
+	}
+
+	.forge-stack-map__layer-title {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+		min-width: 0;
+	}
+
+	.forge-stack-map__layer-label {
+		color: var(--muted-foreground);
+		font-size: 0.68rem;
+		font-weight: 600;
+	}
+
+	.forge-stack-map__layer-title a,
+	.forge-stack-map__layer-title strong {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.38rem;
+		min-width: 0;
+		color: var(--foreground);
+		font-size: 0.88rem;
+		font-weight: 650;
+		text-decoration: none;
+	}
+
+	.forge-stack-map__layer-title a:hover {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 0.18em;
+	}
+
+	.forge-stack-map__refs {
+		gap: 0.3rem;
+		margin-top: 0.42rem;
+		color: var(--muted-foreground);
+		font-size: 0.7rem;
+		min-width: 0;
+	}
+
+	.forge-stack-map__refs code {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.forge-stack-map__evidence {
+		gap: 0.65rem;
+		flex-wrap: wrap;
+		margin-top: 0.48rem;
+		color: var(--muted-foreground);
+		font-size: 0.69rem;
+	}
+
+	.forge-stack-map__evidence span {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.forge-stack-map__evidence [data-ci='success'] {
+		color: var(--success-ink, var(--success));
+	}
+
+	.forge-stack-map__evidence [data-ci='failure'],
+	.forge-stack-map__evidence [data-ci='error'] {
+		color: var(--destructive-ink, var(--destructive));
+	}
+
+	.forge-stack-map__blockers {
+		list-style: none;
+		margin: 0.55rem 0 0;
+		padding: 0.45rem 0.55rem;
+		border-radius: 0.4rem;
+		background: color-mix(in oklab, var(--destructive) 8%, transparent);
+		color: var(--destructive-ink, var(--destructive));
+		font-size: 0.7rem;
+	}
+
+	.forge-stack-map__blockers li {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.3rem;
+	}
+
+	.forge-stack-map--compact {
+		padding: 0.8rem;
+	}
+
+	.forge-stack-map--compact .forge-stack-map__card {
+		padding-block: 0.52rem;
+	}
+
+	@media (max-width: 640px) {
+		.forge-stack-map__header,
+		.forge-stack-map__policy {
+			align-items: flex-start;
+			flex-direction: column;
+		}
+
+		.forge-stack-map__badges {
+			justify-content: flex-start;
+		}
+
+		.forge-stack-map__evidence {
+			gap: 0.42rem 0.65rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { ForgePrStackMemberView, ForgePrStackView } from '../../presentation.ts';
+/**
+ * StackMap — the canonical visual explanation of a pull-request stack.
+ * Members render in landing order (bottom layer first), with the exact head,
+ * CI/review evidence, and blockers required to understand whether the chain
+ * is safe to restack or merge. Presentational only: the host owns links,
+ * loading, authorization, and mutations.
+ */
+interface Props {
+    stack: ForgePrStackView;
+    /** Builds a PR href. Without one, titles render as text (useful in embeds). */
+    hrefFor?: (member: ForgePrStackMemberView) => string;
+    /** Highlights the layer containing the detail page currently being viewed. */
+    currentPullRequestNumber?: number;
+    /** Tightens spacing for an embedded PR-detail summary. */
+    compact?: boolean;
+}
+declare const StackMap: import("svelte").Component<Props, {}, "">;
+type StackMap = ReturnType<typeof StackMap>;
+export default StackMap;
+//# sourceMappingURL=StackMap.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackMap.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StackMap.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGrF;;;;;;GAMG;AACH,UAAU,KAAK;IACd,KAAK,EAAE,gBAAgB,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,MAAM,CAAC;IACrD,8EAA8E;IAC9E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAsKF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/StatusCheckList.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import CircleAlert from '@lucide/svelte/icons/circle-alert';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import type { Component } from 'svelte';
+	import type { StatusCheckRow, StatusCheckState } from '../../presentation.js';
+
+	/**
+	 * StatusCheckList — the forge-actions CI status-checks for a pull request,
+	 * mirroring the review/verdict list UI: one row per check with a state icon,
+	 * the `context` name, an optional description, and a deep link to the run logs.
+	 *
+	 * A roll-up header summarises the aggregate (worst-of) so the merge panel can
+	 * say "All checks passed" / "1 failing check" at a glance. Presentational:
+	 * data-in props, no fetch. When `checks` is empty the component renders nothing
+	 * (a repo with no `.forge/actions.yml` shows no checks panel — back-compat).
+	 */
+	interface Props {
+		checks: StatusCheckRow[];
+	}
+
+	let { checks }: Props = $props();
+
+	const icons = {
+		success: CircleCheck,
+		failure: CircleX,
+		error: CircleAlert,
+		pending: LoaderCircle
+	} satisfies Record<StatusCheckState, Component>;
+
+	const labels = {
+		success: 'Passed',
+		failure: 'Failed',
+		error: 'Errored',
+		pending: 'Pending'
+	} satisfies Record<StatusCheckState, string>;
+
+	// Worst-of aggregate (mirrors aggregateStatusChecks on the app side): an error
+	// wins; else a failure; else pending; else success.
+	let aggregate = $derived<StatusCheckState | undefined>(
+		checks.length === 0
+			? undefined
+			: checks.some((c) => c.state === 'error')
+				? 'error'
+				: checks.some((c) => c.state === 'failure')
+					? 'failure'
+					: checks.some((c) => c.state === 'pending')
+						? 'pending'
+						: 'success'
+	);
+
+	let blockingCount = $derived(checks.filter((c) => c.state !== 'success').length);
+
+	let summary = $derived(
+		aggregate === 'success'
+			? `All ${checks.length} ${checks.length === 1 ? 'check' : 'checks'} passed`
+			: aggregate === 'pending'
+				? `${blockingCount} ${blockingCount === 1 ? 'check' : 'checks'} pending`
+				: `${blockingCount} ${blockingCount === 1 ? 'check' : 'checks'} must pass before merging`
+	);
+</script>
+
+{#if checks.length > 0 && aggregate}
+	{@const SummaryIcon = icons[aggregate]}
+	<section class="forge-checks" class:forge-checks--ok={aggregate === 'success'}>
+		<header class="forge-checks__head">
+			<span class="forge-checks__head-icon" data-state={aggregate}>
+				<SummaryIcon class="size-4" />
+			</span>
+			<span class="forge-checks__summary">{summary}</span>
+		</header>
+		<ul class="forge-checks__list">
+			{#each checks as check (check.context)}
+				{@const Icon = icons[check.state] ?? CircleAlert}
+				<li class="forge-checks__row">
+					<span class="forge-checks__icon" data-state={check.state}>
+						<Icon class="size-3.5" />
+					</span>
+					<span class="forge-checks__body">
+						<span class="forge-checks__context">{check.context}</span>
+						{#if check.description}
+							<span class="forge-checks__desc">{check.description}</span>
+						{/if}
+					</span>
+					<span class="forge-checks__state" data-state={check.state}>
+						{labels[check.state] ?? check.state}
+					</span>
+					{#if check.targetUrl}
+						<a
+							class="forge-checks__link"
+							href={check.targetUrl}
+							target="_blank"
+							rel="noreferrer noopener"
+							aria-label={`Open logs for ${check.context}`}
+						>
+							<ExternalLink class="size-3.5" />
+						</a>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</section>
+{/if}
+
+<style>
+	.forge-checks {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--border);
+		border-left: 3px solid var(--destructive);
+		border-radius: 0.5rem;
+		background: var(--card);
+	}
+	.forge-checks--ok {
+		border-left-color: var(--success);
+	}
+	.forge-checks__head {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		font-weight: 600;
+		font-size: 0.9rem;
+		color: var(--foreground);
+	}
+	.forge-checks__summary {
+		line-height: 1.2;
+	}
+	.forge-checks__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+	}
+	.forge-checks__row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.3rem 0;
+		font-size: 0.8125rem;
+		border-top: 1px solid var(--border);
+	}
+	.forge-checks__row:first-child {
+		border-top: none;
+	}
+	.forge-checks__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+	}
+	.forge-checks__head-icon[data-state='success'],
+	.forge-checks__icon[data-state='success'] {
+		color: var(--success);
+	}
+	.forge-checks__head-icon[data-state='failure'],
+	.forge-checks__head-icon[data-state='error'],
+	.forge-checks__icon[data-state='failure'],
+	.forge-checks__icon[data-state='error'] {
+		color: var(--destructive);
+	}
+	.forge-checks__head-icon[data-state='pending'],
+	.forge-checks__icon[data-state='pending'] {
+		color: var(--muted-foreground);
+	}
+	.forge-checks__body {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+	.forge-checks__context {
+		font-weight: 500;
+		color: var(--foreground);
+		font-family: var(--font-mono, ui-monospace, monospace);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.forge-checks__desc {
+		color: var(--muted-foreground);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.forge-checks__state {
+		flex: 0 0 auto;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+	}
+	.forge-checks__state[data-state='success'] {
+		color: var(--success);
+	}
+	.forge-checks__state[data-state='failure'],
+	.forge-checks__state[data-state='error'] {
+		color: var(--destructive);
+	}
+	.forge-checks__link {
+		display: inline-flex;
+		align-items: center;
+		color: var(--muted-foreground);
+		flex: 0 0 auto;
+	}
+	.forge-checks__link:hover {
+		color: var(--foreground);
+	}
+</style>