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

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

@@ -0,0 +1,14 @@
+import type { ForgeRunRow as ForgeRunRowData } from '../../presentation.ts';
+/**
+ * ForgeRunDetail — one aggregate run and its append-only suite attempts.
+ * associated pull request.
+ */
+interface Props {
+    run: ForgeRunRowData;
+    /** Deep link to the associated pull request (when `run.prNumber` is set). */
+    prHref?: string;
+}
+declare const ForgeRunDetail: import("svelte").Component<Props, {}, "">;
+type ForgeRunDetail = ReturnType<typeof ForgeRunDetail>;
+export default ForgeRunDetail;
+//# sourceMappingURL=ForgeRunDetail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForgeRunDetail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForgeRunDetail.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG3E;;;GAGG;AACH,UAAU,KAAK;IACd,GAAG,EAAE,eAAe,CAAC;IACrB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsGF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/ForgeRunStatusBadge.svelte

@@ -0,0 +1,94 @@
+<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 Clock3 from '@lucide/svelte/icons/clock-3';
+	import type { Component } from 'svelte';
+	import type { ForgeRunState } from '../../presentation.js';
+
+	/**
+	 * ForgeRunStatusBadge — a colored pill reflecting a forge-actions run outcome
+	 * (`pending` = yellow, `success` = green, `failure` = red, `error` = amber) with a matching lucide
+	 * icon. Presentational, data-in. Uses explicit semantic colors (not a kit
+	 * `Badge` variant) because the three terminal states map to green/red/amber,
+	 * which the variant set does not cover.
+	 */
+	interface Props {
+		state: ForgeRunState;
+		/** Hide the leading icon (label only). */
+		hideIcon?: boolean;
+	}
+
+	let { state, hideIcon = false }: Props = $props();
+
+	const icons = {
+		queued: Clock3,
+		provisioning: Clock3,
+		running: Clock3,
+		cancelling: Clock3,
+		succeeded: CircleCheck,
+		failed: CircleX,
+		cancelled: CircleX,
+		error: CircleAlert
+	} satisfies Record<ForgeRunState, Component>;
+
+	const labels = {
+		queued: 'Queued',
+		provisioning: 'Provisioning',
+		running: 'Running',
+		cancelling: 'Cancelling',
+		succeeded: 'Succeeded',
+		failed: 'Failed',
+		cancelled: 'Cancelled',
+		error: 'Error'
+	} satisfies Record<ForgeRunState, string>;
+
+	let current = $derived<ForgeRunState>(icons[state] ? state : 'error');
+	let Icon = $derived(icons[current]);
+</script>
+
+<span class="forge-run-badge" data-state={current}>
+	{#if !hideIcon}
+		<Icon class="size-3" />
+	{/if}
+	{labels[current]}
+</span>
+
+<style>
+	.forge-run-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.1rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		line-height: 1.4;
+		border-radius: 9999px;
+		border: 1px solid transparent;
+		white-space: nowrap;
+	}
+	.forge-run-badge[data-state='succeeded'] {
+		color: var(--success-ink, var(--success));
+		background: color-mix(in oklab, var(--success) 18%, transparent);
+		border-color: color-mix(in oklab, var(--success) 40%, transparent);
+	}
+	.forge-run-badge[data-state='queued'],
+	.forge-run-badge[data-state='provisioning'],
+	.forge-run-badge[data-state='running'],
+	.forge-run-badge[data-state='cancelling'] {
+		color: var(--warning-ink, var(--warning));
+		background: color-mix(in oklab, var(--warning) 18%, transparent);
+		border-color: color-mix(in oklab, var(--warning) 40%, transparent);
+	}
+	.forge-run-badge[data-state='failed'],
+	.forge-run-badge[data-state='cancelled'] {
+		color: var(--destructive-ink, var(--destructive));
+		background: color-mix(in oklab, var(--destructive) 16%, transparent);
+		border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+	}
+	.forge-run-badge[data-state='error'] {
+		color: var(--warning-ink, var(--warning));
+		background: color-mix(in oklab, var(--warning) 16%, transparent);
+		border-color: color-mix(in oklab, var(--warning) 40%, transparent);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+import type { ForgeRunState } from '../../presentation.ts';
+/**
+ * ForgeRunStatusBadge — a colored pill reflecting a forge-actions run outcome
+ * (`pending` = yellow, `success` = green, `failure` = red, `error` = amber) with a matching lucide
+ * icon. Presentational, data-in. Uses explicit semantic colors (not a kit
+ * `Badge` variant) because the three terminal states map to green/red/amber,
+ * which the variant set does not cover.
+ */
+interface Props {
+    state: ForgeRunState;
+    /** Hide the leading icon (label only). */
+    hideIcon?: boolean;
+}
+declare const ForgeRunStatusBadge: Component<Props, {}, "">;
+type ForgeRunStatusBadge = ReturnType<typeof ForgeRunStatusBadge>;
+export default ForgeRunStatusBadge;
+//# sourceMappingURL=ForgeRunStatusBadge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForgeRunStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForgeRunStatusBadge.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG1D;;;;;;GAMG;AACH,UAAU,KAAK;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAiDF,QAAA,MAAM,mBAAmB,0BAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ForgeRunsList.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import ForgeRunStatusBadge from './ForgeRunStatusBadge.svelte';
+	import type { ForgeRunRow } from '../../presentation.js';
+
+	/**
+	 * ForgeRunsList — a GitHub-Actions-style table of recorded forge-CI runs. One
+	 * row per aggregate: state badge, pipeline id + required contexts, short sha, an optional
+	 * PR link, the started timestamp, and the run duration. Presentational: the
+	 * parent supplies rows + optional href builders (run detail, PR link). When
+	 * there are no runs it renders the empty state.
+	 */
+	interface Props {
+		runs: ForgeRunRow[];
+		/** Builds the destination href for a run row (run detail). Optional. */
+		hrefFor?: (run: ForgeRunRow) => string;
+		/** Builds the destination href for a run's PR link. Optional. */
+		prHrefFor?: (prNumber: number) => string;
+		/** Shown when there are no runs. */
+		emptyText?: string;
+	}
+
+	let {
+		runs,
+		hrefFor,
+		prHrefFor,
+		emptyText = 'No action runs yet'
+	}: Props = $props();
+
+	/** Short 7-char commit form (rendered verbatim; never re-hashes). */
+	function shortSha(sha: string): string {
+		return sha.length > 7 ? sha.slice(0, 7) : sha;
+	}
+
+	/** Format a millisecond wall-clock as a compact duration (e.g. `1m 12s`). */
+	function formatDuration(ms: number | null | undefined): string {
+		if (ms == null || ms < 0) return '—';
+		if (ms < 1000) return `${ms}ms`;
+		const totalSeconds = Math.round(ms / 1000);
+		const minutes = Math.floor(totalSeconds / 60);
+		const seconds = totalSeconds % 60;
+		return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+	}
+</script>
+
+{#if runs.length === 0}
+	<p class="forge-runs__empty">{emptyText}</p>
+{:else}
+	<div class="forge-runs">
+		<table class="forge-runs__table">
+			<thead>
+				<tr>
+					<th class="forge-runs__th forge-runs__th--state">Status</th>
+					<th class="forge-runs__th">Pipeline</th>
+					<th class="forge-runs__th">Commit</th>
+					<th class="forge-runs__th">PR</th>
+					<th class="forge-runs__th">Started</th>
+					<th class="forge-runs__th forge-runs__th--num">Duration</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each runs as run (run.id)}
+					<tr class="forge-runs__row">
+						<td class="forge-runs__cell">
+							<ForgeRunStatusBadge state={run.state} />
+						</td>
+						<td class="forge-runs__cell forge-runs__cell--job">
+							{#if hrefFor}
+								<a class="forge-runs__job" href={hrefFor(run)}>{run.pipelineId}</a>
+							{:else}
+								<span class="forge-runs__job">{run.pipelineId}</span>
+							{/if}
+							<span class="forge-runs__context">
+								{run.requiredContexts.length} required {run.requiredContexts.length === 1 ? 'context' : 'contexts'}
+							</span>
+						</td>
+						<td class="forge-runs__cell">
+							<code class="forge-runs__sha" title={run.sha}>{shortSha(run.sha)}</code>
+						</td>
+						<td class="forge-runs__cell">
+							{#if run.prNumber != null}
+								{#if prHrefFor}
+									<a class="forge-runs__pr" href={prHrefFor(run.prNumber)}>#{run.prNumber}</a>
+								{:else}
+									<span class="forge-runs__pr">#{run.prNumber}</span>
+								{/if}
+							{:else}
+								<span class="forge-runs__muted">—</span>
+							{/if}
+						</td>
+						<td class="forge-runs__cell forge-runs__cell--time">
+							{run.startedAt ?? '—'}
+						</td>
+						<td class="forge-runs__cell forge-runs__cell--num">
+							{formatDuration(run.durationMs)}
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{/if}
+
+<style>
+	.forge-runs {
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		overflow: hidden;
+	}
+	.forge-runs__table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.8125rem;
+	}
+	.forge-runs__th {
+		text-align: left;
+		font-weight: 600;
+		font-size: 0.6875rem;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: var(--muted-foreground);
+		padding: 0.5rem 0.875rem;
+		background: var(--muted);
+		border-bottom: 1px solid var(--border);
+	}
+	.forge-runs__th--num {
+		text-align: right;
+	}
+	.forge-runs__row {
+		border-bottom: 1px solid var(--border);
+	}
+	.forge-runs__row:last-child {
+		border-bottom: none;
+	}
+	.forge-runs__cell {
+		padding: 0.5rem 0.875rem;
+		vertical-align: middle;
+		color: var(--foreground);
+	}
+	.forge-runs__cell--num {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+		color: var(--muted-foreground);
+	}
+	.forge-runs__cell--time {
+		color: var(--muted-foreground);
+		white-space: nowrap;
+	}
+	.forge-runs__cell--job {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		min-width: 0;
+	}
+	.forge-runs__job {
+		font-weight: 600;
+		color: var(--foreground);
+		text-decoration: none;
+	}
+	a.forge-runs__job:hover {
+		color: var(--primary);
+	}
+	.forge-runs__context {
+		font-size: 0.6875rem;
+		color: var(--muted-foreground);
+	}
+	.forge-runs__sha {
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+	}
+	.forge-runs__pr {
+		color: var(--primary);
+		text-decoration: none;
+	}
+	a.forge-runs__pr:hover {
+		text-decoration: underline;
+	}
+	.forge-runs__muted {
+		color: var(--muted-foreground);
+	}
+	.forge-runs__empty {
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+		padding: 1rem 0;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { ForgeRunRow } from '../../presentation.ts';
+/**
+ * ForgeRunsList — a GitHub-Actions-style table of recorded forge-CI runs. One
+ * row per aggregate: state badge, pipeline id + required contexts, short sha, an optional
+ * PR link, the started timestamp, and the run duration. Presentational: the
+ * parent supplies rows + optional href builders (run detail, PR link). When
+ * there are no runs it renders the empty state.
+ */
+interface Props {
+    runs: ForgeRunRow[];
+    /** Builds the destination href for a run row (run detail). Optional. */
+    hrefFor?: (run: ForgeRunRow) => string;
+    /** Builds the destination href for a run's PR link. Optional. */
+    prHrefFor?: (prNumber: number) => string;
+    /** Shown when there are no runs. */
+    emptyText?: string;
+}
+declare const ForgeRunsList: import("svelte").Component<Props, {}, "">;
+type ForgeRunsList = ReturnType<typeof ForgeRunsList>;
+export default ForgeRunsList;
+//# sourceMappingURL=ForgeRunsList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForgeRunsList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForgeRunsList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGxD;;;;;;GAMG;AACH,UAAU,KAAK;IACd,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,wEAAwE;IACxE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,MAAM,CAAC;IACvC,iEAAiE;IACjE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AA2FF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/InlineReplyBox.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import ForgeMarkdownComposer from './ForgeMarkdownComposer.svelte';
+	import { settleSubmit, submitFailureMessage } from '../submit-outcome.js';
+
+	/**
+	 * InlineReplyBox — a compact Monaco Markdown reply composer with submit.
+	 * Controlled-optional: it owns its own draft state and clears on a resolved
+	 * submit. Presentational — it does not post; `onSubmit` returns a promise so
+	 * the host owns persistence. Rejected submits render the host's error message.
+	 * By default the editor activates on intent so a page with many review threads
+	 * does not construct a Monaco model/view for every unopened reply box.
+	 */
+	interface Props {
+		placeholder?: string;
+		submitLabel?: string;
+		/** Called with the trimmed draft; resolve to clear, reject to keep. */
+		onSubmit: (body: string) => void | Promise<void>;
+		/** Optional cancel affordance (e.g. collapse the box). */
+		onCancel?: () => void;
+		/** Compact single-purpose variant (smaller paddings). */
+		compact?: boolean;
+		/** Render the editor immediately when a parent already captured intent. */
+		deferActivation?: boolean;
+	}
+
+	let {
+		placeholder = 'Leave a comment…',
+		submitLabel = 'Comment',
+		onSubmit,
+		onCancel,
+		compact = false,
+		deferActivation = true
+	}: Props = $props();
+
+	let draft = $state('');
+	let active = $state(untrack(() => !deferActivation));
+	let submitting = $state(false);
+	let submitError = $state<string | null>(null);
+
+	let canSubmit = $derived(draft.trim().length > 0 && !submitting);
+
+	async function submit() {
+		const body = draft.trim();
+		if (!body || submitting) return;
+		submitting = true;
+		submitError = null;
+		const outcome = await settleSubmit(onSubmit, body);
+		submitting = false;
+		if (outcome.failed) {
+			submitError = submitFailureMessage(outcome);
+			return;
+		}
+		draft = '';
+		active = false;
+	}
+
+	function cancel() {
+		draft = '';
+		submitError = null;
+		active = false;
+		onCancel?.();
+	}
+
+</script>
+
+<div class="forge-reply" class:forge-reply--compact={compact}>
+	{#if active}
+		<ForgeMarkdownComposer
+			bind:code={draft}
+			{placeholder}
+			ariaLabel={submitLabel === 'Reply' ? 'Reply in Markdown' : 'Comment in Markdown'}
+			{compact}
+			disabled={submitting}
+		/>
+		<div class="forge-reply__actions">
+			<Button variant="ghost" size="sm" onclick={cancel} disabled={submitting}>Cancel</Button>
+			<Button size="sm" onclick={submit} disabled={!canSubmit}>
+				{submitting ? 'Posting…' : submitLabel}
+			</Button>
+		</div>
+	{:else}
+		<Button
+			type="button"
+			variant="outline"
+			size="sm"
+			class="w-full justify-start text-muted-foreground"
+			onclick={() => (active = true)}
+		>
+			{placeholder}
+		</Button>
+	{/if}
+	{#if submitError}
+		<p class="forge-reply__error" role="alert">{submitError}</p>
+	{/if}
+</div>
+
+<style>
+	.forge-reply {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.forge-reply__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+	}
+	.forge-reply__error {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--destructive);
+	}
+</style>

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

@@ -0,0 +1,24 @@
+/**
+ * InlineReplyBox — a compact Monaco Markdown reply composer with submit.
+ * Controlled-optional: it owns its own draft state and clears on a resolved
+ * submit. Presentational — it does not post; `onSubmit` returns a promise so
+ * the host owns persistence. Rejected submits render the host's error message.
+ * By default the editor activates on intent so a page with many review threads
+ * does not construct a Monaco model/view for every unopened reply box.
+ */
+interface Props {
+    placeholder?: string;
+    submitLabel?: string;
+    /** Called with the trimmed draft; resolve to clear, reject to keep. */
+    onSubmit: (body: string) => void | Promise<void>;
+    /** Optional cancel affordance (e.g. collapse the box). */
+    onCancel?: () => void;
+    /** Compact single-purpose variant (smaller paddings). */
+    compact?: boolean;
+    /** Render the editor immediately when a parent already captured intent. */
+    deferActivation?: boolean;
+}
+declare const InlineReplyBox: import("svelte").Component<Props, {}, "">;
+type InlineReplyBox = ReturnType<typeof InlineReplyBox>;
+export default InlineReplyBox;
+//# sourceMappingURL=InlineReplyBox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineReplyBox.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InlineReplyBox.svelte.ts"],"names":[],"mappings":"AASC;;;;;;;GAOG;AACH,UAAU,KAAK;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAuEF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/IssueDetail.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+	import IssueStateBadge from './IssueStateBadge.svelte';
+	import LabelChip from './LabelChip.svelte';
+	import UserChip from './UserChip.svelte';
+	// Aliased to avoid colliding with the Svelte-generated component type, which
+	// the compiler names after the file (`IssueDetail`): an identical name on the
+	// imported prop type produces a broken (type-only) default export in the
+	// emitted `.svelte.d.ts`.
+	import type { IssueDetail as IssueDetailData } from '../../presentation.js';
+
+	/**
+	 * IssueDetail — the header + body of an issue. Title, number, state badge,
+	 * author byline, and a markdown body via kit `MarkdownRenderer`. A `sidebar`
+	 * snippet renders meta (assignees/labels/milestone) supplied by the host; a
+	 * `footer` snippet hosts the comment thread / reply box. Presentational.
+	 */
+	interface Props {
+		issue: IssueDetailData;
+		/** Right-rail meta content (assignees, milestone, participants…). */
+		sidebar?: Snippet;
+		/** Content rendered below the body (comment thread, reply box…). */
+		footer?: Snippet;
+	}
+
+	let { issue, sidebar, footer }: Props = $props();
+</script>
+
+<article class="forge-issue-detail">
+	<header class="forge-issue-detail__header">
+		<h1 class="forge-issue-detail__title">
+			{issue.title}
+			<span class="forge-issue-detail__number">#{issue.number}</span>
+		</h1>
+		<div class="forge-issue-detail__subhead">
+			<IssueStateBadge state={issue.state} />
+			{#if issue.author}
+				<span class="forge-issue-detail__byline">
+					<strong>{issue.author.name}</strong>
+					{#if issue.createdAt}opened this issue {issue.createdAt}{/if}
+				</span>
+			{/if}
+		</div>
+	</header>
+
+	<div class="forge-issue-detail__layout">
+		<div class="forge-issue-detail__body">
+			<div class="forge-issue-detail__card">
+				{#if issue.author}
+					<div class="forge-issue-detail__author">
+						<UserChip user={issue.author} size="md" />
+					</div>
+				{/if}
+				{#if issue.body}
+					<MarkdownRenderer content={issue.body} />
+				{:else}
+					<p class="forge-issue-detail__nobody">No description provided.</p>
+				{/if}
+			</div>
+			{#if footer}
+				{@render footer()}
+			{/if}
+		</div>
+
+		<aside class="forge-issue-detail__sidebar">
+			{#if sidebar}
+				{@render sidebar()}
+			{:else}
+				{#if issue.assignees && issue.assignees.length > 0}
+					<section class="forge-issue-detail__section">
+						<h3>Assignees</h3>
+						<div class="forge-issue-detail__assignees">
+							{#each issue.assignees as a (a.id ?? a.name)}
+								<UserChip user={a} size="sm" />
+							{/each}
+						</div>
+					</section>
+				{/if}
+				{#if issue.labels && issue.labels.length > 0}
+					<section class="forge-issue-detail__section">
+						<h3>Labels</h3>
+						<div class="forge-issue-detail__labels">
+							{#each issue.labels as label (label.name)}
+								<LabelChip {label} />
+							{/each}
+						</div>
+					</section>
+				{/if}
+			{/if}
+		</aside>
+	</div>
+</article>
+
+<style>
+	.forge-issue-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	.forge-issue-detail__title {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0;
+		line-height: 1.2;
+	}
+	.forge-issue-detail__number {
+		color: var(--muted-foreground);
+		font-weight: 400;
+	}
+	.forge-issue-detail__subhead {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		margin-top: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--muted-foreground);
+	}
+	.forge-issue-detail__layout {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 16rem;
+		gap: 1.5rem;
+		align-items: start;
+	}
+	.forge-issue-detail__body {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		min-width: 0;
+	}
+	.forge-issue-detail__card {
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		padding: 0.875rem 1rem;
+	}
+	.forge-issue-detail__author {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		margin-bottom: 0.625rem;
+		padding-bottom: 0.5rem;
+		border-bottom: 1px solid var(--border);
+	}
+	.forge-issue-detail__nobody {
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+		font-style: italic;
+		margin: 0;
+	}
+	.forge-issue-detail__sidebar {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	.forge-issue-detail__section h3 {
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: var(--muted-foreground);
+		margin: 0 0 0.4rem;
+	}
+	.forge-issue-detail__labels,
+	.forge-issue-detail__assignees {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+	}
+	@media (max-width: 768px) {
+		.forge-issue-detail__layout {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { IssueDetail as IssueDetailData } from '../../presentation.ts';
+/**
+ * IssueDetail — the header + body of an issue. Title, number, state badge,
+ * author byline, and a markdown body via kit `MarkdownRenderer`. A `sidebar`
+ * snippet renders meta (assignees/labels/milestone) supplied by the host; a
+ * `footer` snippet hosts the comment thread / reply box. Presentational.
+ */
+interface Props {
+    issue: IssueDetailData;
+    /** Right-rail meta content (assignees, milestone, participants…). */
+    sidebar?: Snippet;
+    /** Content rendered below the body (comment thread, reply box…). */
+    footer?: Snippet;
+}
+declare const IssueDetail: import("svelte").Component<Props, {}, "">;
+type IssueDetail = ReturnType<typeof IssueDetail>;
+export default IssueDetail;
+//# sourceMappingURL=IssueDetail.svelte.d.ts.map