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

package/dist/svelte/components/ComparisonCard.svelte

@@ -0,0 +1,331 @@
+<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 Zap from '@lucide/svelte/icons/zap';
+	import type { ComparisonCardData } from '../../presentation.js';
+
+	/**
+	 * ComparisonCard — TOON Milestone Lane B2 comparison card.
+	 *
+	 * Implements F11 contract: reusable Forge-owned comparison card mounted on
+	 * PR pages. Data-in presentational component displaying efficiency deltas
+	 * (bytes, tokens, latency) and F13 round-trip fidelity per surface.
+	 */
+	interface Props {
+		card: ComparisonCardData;
+		computing?: boolean;
+	}
+
+	let { card, computing = false }: Props = $props();
+
+	function formatDelta(delta?: number): string {
+		if (delta === undefined || Number.isNaN(delta)) return '—';
+		const sign = delta > 0 ? '+' : '';
+		return `${sign}${delta.toFixed(1)}%`;
+	}
+
+	function formatLatencyDelta(delta?: number): string {
+		if (delta === undefined || Number.isNaN(delta)) return '—';
+		const sign = delta > 0 ? '+' : '';
+		return `${sign}${delta.toFixed(2)}ms`;
+	}
+
+	let isPass = $derived(card.verdict === 'pass');
+	let isFail = $derived(card.verdict === 'fail');
+</script>
+
+<section class="forge-comparison" class:forge-comparison--fail={isFail} class:forge-comparison--pass={isPass}>
+	<header class="forge-comparison__head">
+		<div class="forge-comparison__title-group">
+			<span class="forge-comparison__icon">
+				{#if computing}
+					<LoaderCircle class="size-4 animate-spin text-muted-foreground" />
+				{:else if isPass}
+					<CircleCheck class="size-4 text-success" />
+				{:else if isFail}
+					<CircleX class="size-4 text-destructive" />
+				{:else}
+					<Zap class="size-4 text-primary" />
+				{/if}
+			</span>
+			<span class="forge-comparison__title">Encoding Comparison</span>
+			<span class="forge-comparison__profile-badge">{card.profile}</span>
+		</div>
+		<div class="forge-comparison__verdict" data-verdict={card.verdict}>
+			{#if computing}
+				Computing…
+			{:else if isPass}
+				Eligible
+			{:else if isFail}
+				Locked (F13)
+			{:else}
+				Advisory
+			{/if}
+		</div>
+	</header>
+
+	{#if computing}
+		<div class="forge-comparison__empty">
+			<LoaderCircle class="size-5 animate-spin text-muted-foreground" />
+			<span>Computing encoding matrix comparison against baseline…</span>
+		</div>
+	{:else if card.deltas.length === 0}
+		<div class="forge-comparison__empty">
+			<span>No surface deltas recorded for this run.</span>
+		</div>
+	{:else}
+		<details open class="forge-comparison__breakdown">
+			<summary class="forge-comparison__summary">
+				<span>Surface Breakdown ({card.deltas.length})</span>
+			</summary>
+			<div class="forge-comparison__table-wrap">
+				<table class="forge-comparison__table">
+					<thead>
+						<tr>
+							<th>Surface</th>
+							<th>Encoder</th>
+							<th>Bytes Δ</th>
+							<th>Tokens Δ</th>
+							<th>Latency Δ</th>
+							<th>Fidelity</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each card.deltas as delta (delta.surface + delta.encoder)}
+							<tr>
+								<td class="forge-comparison__surface">{delta.surface}</td>
+								<td class="forge-comparison__encoder">{delta.encoder}</td>
+								<td
+									class="forge-comparison__delta"
+									class:forge-comparison__delta--good={delta.bytesDelta !== undefined && delta.bytesDelta < 0}
+									class:forge-comparison__delta--bad={delta.bytesDelta !== undefined && delta.bytesDelta > 0}
+								>
+									{formatDelta(delta.bytesDelta)}
+								</td>
+								<td
+									class="forge-comparison__delta"
+									class:forge-comparison__delta--good={delta.tokensDelta !== undefined && delta.tokensDelta < 0}
+									class:forge-comparison__delta--bad={delta.tokensDelta !== undefined && delta.tokensDelta > 0}
+								>
+									{formatDelta(delta.tokensDelta)}
+								</td>
+								<td
+									class="forge-comparison__delta"
+									class:forge-comparison__delta--good={delta.latencyDelta !== undefined && delta.latencyDelta < 0}
+									class:forge-comparison__delta--bad={delta.latencyDelta !== undefined && delta.latencyDelta > 0}
+								>
+									{formatLatencyDelta(delta.latencyDelta)}
+								</td>
+								<td>
+									<span class="forge-comparison__badge" data-state={delta.fidelity}>
+										{delta.fidelity === 'pass' ? 'PASS' : 'FAIL'}
+									</span>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</details>
+	{/if}
+
+	<footer class="forge-comparison__foot">
+		<span class="forge-comparison__baseline">
+			{#if card.baselineRef?.ref}
+				Baseline: <span class="font-mono">{card.baselineRef.ref}</span>
+			{:else}
+				Baseline: establishing
+			{/if}
+		</span>
+
+		<div class="forge-comparison__links">
+			{#if card.links.compareUrl}
+				<a
+					class="forge-comparison__link"
+					href={card.links.compareUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+				>
+					<span>Compare view</span>
+					<ExternalLink class="size-3" />
+				</a>
+			{/if}
+			{#if card.links.runs && card.links.runs.length > 0}
+				<a
+					class="forge-comparison__link"
+					href={card.links.runs[0]}
+					target="_blank"
+					rel="noreferrer noopener"
+				>
+					<span>Run details</span>
+					<ExternalLink class="size-3" />
+				</a>
+			{/if}
+		</div>
+	</footer>
+</section>
+
+<style>
+	.forge-comparison {
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--border);
+		border-left: 3px solid var(--primary);
+		border-radius: 0.5rem;
+		background: var(--card);
+		font-size: 0.8125rem;
+	}
+	.forge-comparison--pass {
+		border-left-color: var(--success);
+	}
+	.forge-comparison--fail {
+		border-left-color: var(--destructive);
+	}
+	.forge-comparison__head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.forge-comparison__title-group {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		font-weight: 600;
+		color: var(--foreground);
+	}
+	.forge-comparison__icon {
+		display: inline-flex;
+		align-items: center;
+	}
+	.forge-comparison__profile-badge {
+		font-size: 0.7rem;
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-weight: 500;
+		padding: 0.1rem 0.35rem;
+		border-radius: 0.25rem;
+		background: var(--muted);
+		color: var(--muted-foreground);
+	}
+	.forge-comparison__verdict {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		padding: 0.1rem 0.45rem;
+		border-radius: 0.25rem;
+		background: var(--muted);
+		color: var(--muted-foreground);
+	}
+	.forge-comparison__verdict[data-verdict='pass'] {
+		background: color-mix(in srgb, var(--success) 15%, transparent);
+		color: var(--success);
+	}
+	.forge-comparison__verdict[data-verdict='fail'] {
+		background: color-mix(in srgb, var(--destructive) 15%, transparent);
+		color: var(--destructive);
+	}
+	.forge-comparison__empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 1rem;
+		color: var(--muted-foreground);
+	}
+	.forge-comparison__breakdown {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+	.forge-comparison__summary {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		cursor: pointer;
+		user-select: none;
+		margin-bottom: 0.25rem;
+	}
+	.forge-comparison__summary:hover {
+		color: var(--foreground);
+	}
+	.forge-comparison__table-wrap {
+		overflow-x: auto;
+	}
+	.forge-comparison__table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.8125rem;
+	}
+	.forge-comparison__table th {
+		text-align: left;
+		padding: 0.25rem 0.5rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		border-bottom: 1px solid var(--border);
+	}
+	.forge-comparison__table td {
+		padding: 0.3rem 0.5rem;
+		border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+	}
+	.forge-comparison__surface {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-weight: 500;
+		color: var(--foreground);
+	}
+	.forge-comparison__encoder {
+		color: var(--muted-foreground);
+	}
+	.forge-comparison__delta {
+		font-family: var(--font-mono, ui-monospace, monospace);
+	}
+	.forge-comparison__delta--good {
+		color: var(--success);
+	}
+	.forge-comparison__delta--bad {
+		color: var(--destructive);
+	}
+	.forge-comparison__badge {
+		display: inline-block;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		padding: 0.05rem 0.35rem;
+		border-radius: 0.2rem;
+	}
+	.forge-comparison__badge[data-state='pass'] {
+		background: color-mix(in srgb, var(--success) 15%, transparent);
+		color: var(--success);
+	}
+	.forge-comparison__badge[data-state='fail'] {
+		background: color-mix(in srgb, var(--destructive) 15%, transparent);
+		color: var(--destructive);
+	}
+	.forge-comparison__foot {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-top: 0.3rem;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+		border-top: 1px solid var(--border);
+	}
+	.forge-comparison__links {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+	.forge-comparison__link {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--muted-foreground);
+		text-decoration: none;
+	}
+	.forge-comparison__link:hover {
+		color: var(--foreground);
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { ComparisonCardData } from '../../presentation.ts';
+/**
+ * ComparisonCard — TOON Milestone Lane B2 comparison card.
+ *
+ * Implements F11 contract: reusable Forge-owned comparison card mounted on
+ * PR pages. Data-in presentational component displaying efficiency deltas
+ * (bytes, tokens, latency) and F13 round-trip fidelity per surface.
+ */
+interface Props {
+    card: ComparisonCardData;
+    computing?: boolean;
+}
+declare const ComparisonCard: import("svelte").Component<Props, {}, "">;
+type ComparisonCard = ReturnType<typeof ComparisonCard>;
+export default ComparisonCard;
+//# sourceMappingURL=ComparisonCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ComparisonCard.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG/D;;;;;;GAMG;AACH,UAAU,KAAK;IACd,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAmIF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/ForgeMarkdownComposer.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import TabbedMarkdownEditor from '@vibesdotdev/kit/components/code/TabbedMarkdownEditor';
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+
+	type SizeInput = string | number | undefined;
+	type ComposerMode = 'edit' | 'preview';
+
+	/**
+	 * ForgeMarkdownComposer — the shared Forge authoring surface.
+	 *
+	 * Markdown is edited with VibesKit's Monaco-backed editor and previewed with
+	 * the same MarkdownRenderer used for published Forge content. Fenced code
+	 * therefore gets the blessed lightweight syntax-highlighting path in preview,
+	 * while the editor keeps Monaco's Markdown language support.
+	 */
+	interface Props {
+		code?: string;
+		mode?: ComposerMode;
+		name?: string;
+		id?: string;
+		required?: boolean;
+		disabled?: boolean;
+		form?: string;
+		placeholder?: string;
+		ariaLabel?: string;
+		minHeight?: SizeInput;
+		compact?: boolean;
+		deferMount?: boolean;
+		showFullscreen?: boolean;
+	}
+
+	let {
+		code = $bindable(''),
+		mode = $bindable<ComposerMode>('edit'),
+		name = undefined,
+		id = undefined,
+		required = undefined,
+		disabled = false,
+		form = undefined,
+		placeholder = 'Write in Markdown…',
+		ariaLabel = 'Markdown editor',
+		minHeight = undefined,
+		compact = false,
+		deferMount = true,
+		showFullscreen = !compact
+	}: Props = $props();
+
+	const resolvedMinHeight = $derived(minHeight ?? (compact ? 128 : 220));
+	const lineNumbers: 'off' | 'on' = $derived(compact ? 'off' : 'on');
+	const renderLineHighlight: 'none' | 'line' = $derived(compact ? 'none' : 'line');
+	const editorProps = $derived({
+		name,
+		id,
+		required,
+		disabled,
+		readOnly: disabled,
+		form,
+		ariaLabel,
+		showFullscreen,
+		fullscreenTitle: ariaLabel,
+		editorOptions: {
+			lineNumbers,
+			lineNumbersMinChars: compact ? 0 : 3,
+			glyphMargin: false,
+			folding: !compact,
+			renderLineHighlight,
+			padding: { top: 12, bottom: 12 }
+		}
+	});
+</script>
+
+{#snippet renderPreview(markdown: string)}
+	{#if markdown.trim()}
+		<MarkdownRenderer content={markdown} />
+	{:else}
+		<p class="forge-composer__empty">Nothing to preview yet.</p>
+	{/if}
+{/snippet}
+
+<TabbedMarkdownEditor
+	bind:code
+	bind:value={mode}
+	preview={renderPreview}
+	editorMinHeight={resolvedMinHeight}
+	editorPlaceholder={placeholder}
+	editorResizable={!compact}
+	editorCanCopy={false}
+	editorDeferMount={deferMount}
+	{disabled}
+	{editorProps}
+	tabsListClass="w-fit"
+	previewWrapperClass={compact ? 'min-h-32 p-3' : 'min-h-56 p-4'}
+/>
+
+<style>
+	.forge-composer__empty {
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+type SizeInput = string | number | undefined;
+type ComposerMode = 'edit' | 'preview';
+/**
+ * ForgeMarkdownComposer — the shared Forge authoring surface.
+ *
+ * Markdown is edited with VibesKit's Monaco-backed editor and previewed with
+ * the same MarkdownRenderer used for published Forge content. Fenced code
+ * therefore gets the blessed lightweight syntax-highlighting path in preview,
+ * while the editor keeps Monaco's Markdown language support.
+ */
+interface Props {
+    code?: string;
+    mode?: ComposerMode;
+    name?: string;
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    form?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    minHeight?: SizeInput;
+    compact?: boolean;
+    deferMount?: boolean;
+    showFullscreen?: boolean;
+}
+declare const ForgeMarkdownComposer: import("svelte").Component<Props, {}, "code" | "mode">;
+type ForgeMarkdownComposer = ReturnType<typeof ForgeMarkdownComposer>;
+export default ForgeMarkdownComposer;
+//# sourceMappingURL=ForgeMarkdownComposer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForgeMarkdownComposer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForgeMarkdownComposer.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAC7C,KAAK,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvC;;;;;;;GAOG;AACH,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AA8DF,QAAA,MAAM,qBAAqB,wDAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/ForgeRunDetail.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import GitCommitHorizontal from '@lucide/svelte/icons/git-commit-horizontal';
+	import ForgeRunStatusBadge from './ForgeRunStatusBadge.svelte';
+	// Aliased to avoid colliding with the Svelte-generated component type, which
+	// the compiler names after the file (`ForgeRunDetail`): an identical name on
+	// the imported prop type produces a broken (type-only) default export in the
+	// emitted `.svelte.d.ts`.
+	import type { ForgeRunRow as ForgeRunRowData } from '../../presentation.js';
+
+	/**
+	 * 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;
+	}
+
+	let { run, prHref }: Props = $props();
+
+	function shortSha(sha: string): string {
+		return sha.length > 7 ? sha.slice(0, 7) : sha;
+	}
+
+	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>
+
+<article class="forge-run-detail">
+	<header class="forge-run-detail__header">
+		<h1 class="forge-run-detail__title">{run.pipelineId}</h1>
+		<div class="forge-run-detail__subhead">
+			<ForgeRunStatusBadge state={run.state} />
+			{#if run.event}<span class="forge-run-detail__event">{run.event}</span>{/if}
+			{#if run.prNumber != null}
+				{#if prHref}
+					<a class="forge-run-detail__pr" href={prHref}>#{run.prNumber}</a>
+				{:else}
+					<span class="forge-run-detail__pr">#{run.prNumber}</span>
+				{/if}
+			{/if}
+		</div>
+	</header>
+
+	{#if run.summary}
+		<p class="forge-run-detail__description">{run.summary}</p>
+	{/if}
+
+	<dl class="forge-run-detail__meta">
+		<div class="forge-run-detail__field">
+			<dt>Commit</dt>
+			<dd>
+				<code class="forge-run-detail__sha" title={run.sha}>
+					<GitCommitHorizontal class="size-3.5" />
+					{shortSha(run.sha)}
+				</code>
+			</dd>
+		</div>
+		<div class="forge-run-detail__field">
+			<dt>Started</dt>
+			<dd>{run.startedAt ?? '—'}</dd>
+		</div>
+		<div class="forge-run-detail__field">
+			<dt>Completed</dt>
+			<dd>{run.finishedAt ?? '—'}</dd>
+		</div>
+		<div class="forge-run-detail__field">
+			<dt>Duration</dt>
+			<dd>{formatDuration(run.durationMs)}</dd>
+		</div>
+	</dl>
+
+	{#if run.attempts?.length}
+		<section class="forge-run-detail__logs" aria-label="Suite attempts">
+			<h2 class="forge-run-detail__logs-title">Suite attempts</h2>
+			<div class="forge-run-detail__attempts">
+				{#each run.attempts as attempt (attempt.id)}
+					<article class="forge-run-detail__attempt">
+						<div>
+							<strong>{attempt.context}</strong>
+							<span>{attempt.runnerId} · {attempt.executorId} · attempt {attempt.ordinal}</span>
+						</div>
+						<ForgeRunStatusBadge state={attempt.state} />
+						{#if attempt.failureSummary}
+							<p>{attempt.failureSummary}</p>
+						{/if}
+						{#if attempt.logsRef}
+							<a href={attempt.logsRef}>Logs</a>
+						{/if}
+						{#if attempt.artifactsRef}
+							<a href={attempt.artifactsRef}>Artifacts</a>
+						{/if}
+					</article>
+				{/each}
+			</div>
+		</section>
+	{/if}
+</article>
+
+<style>
+	.forge-run-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	.forge-run-detail__title {
+		font-size: 1.375rem;
+		font-weight: 600;
+		margin: 0;
+		line-height: 1.2;
+		word-break: break-word;
+	}
+	.forge-run-detail__subhead {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--muted-foreground);
+	}
+	.forge-run-detail__event {
+		font-size: 0.75rem;
+	}
+	.forge-run-detail__pr {
+		color: var(--primary);
+		text-decoration: none;
+	}
+	.forge-run-detail__pr:hover {
+		text-decoration: underline;
+	}
+	.forge-run-detail__description {
+		margin: 0;
+		font-size: 0.9375rem;
+		color: var(--foreground);
+	}
+	.forge-run-detail__meta {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+		gap: 0.75rem 1.5rem;
+		margin: 0;
+		padding: 0.875rem 1rem;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+	}
+	.forge-run-detail__field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+		min-width: 0;
+	}
+	.forge-run-detail__field dt {
+		font-size: 0.6875rem;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: var(--muted-foreground);
+	}
+	.forge-run-detail__field dd {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--foreground);
+		word-break: break-word;
+	}
+	.forge-run-detail__sha {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	}
+	.forge-run-detail__logs {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.forge-run-detail__logs-title {
+		font-size: 0.6875rem;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		font-weight: 600;
+		color: var(--muted-foreground);
+		margin: 0;
+	}
+	.forge-run-detail__attempts {
+		display: grid;
+		gap: 0.5rem;
+	}
+	.forge-run-detail__attempt {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		gap: 0.35rem 0.75rem;
+		padding: 0.75rem 0.875rem;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+	}
+	.forge-run-detail__attempt div {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		min-width: 0;
+	}
+	.forge-run-detail__attempt span,
+	.forge-run-detail__attempt p {
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		margin: 0;
+	}
+</style>