@tea-agent/loop-agent 0.41.1 → 0.42.0-next.10

package/dist/worker/observe/static/styles.css

@@ -73,8 +73,14 @@ body[data-shell="observe-console"] {
 	color: var(--ink);
 	/* Keep system-ui first for shell contract tests; Chinese fonts follow. */
 	font-family:
-		system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
-		"Noto Sans SC", BlinkMacSystemFont, sans-serif;
+		system-ui,
+		-apple-system,
+		"Segoe UI",
+		"PingFang SC",
+		"Hiragino Sans GB",
+		"Noto Sans SC",
+		BlinkMacSystemFont,
+		sans-serif;
 	font-size: 14px;
 	line-height: 1.5;
 }
@@ -994,10 +1000,9 @@ body[data-shell="observe-console"] .panel h3,
 }
 .feature-decision-row {
 	display: grid;
-	grid-template-columns: minmax(120px, 0.9fr) minmax(88px, 0.55fr) minmax(
-			0,
-			1.6fr
-		) auto;
+	grid-template-columns:
+		minmax(120px, 0.9fr) minmax(88px, 0.55fr) minmax(0, 1.6fr)
+		auto;
 	align-items: center;
 	gap: var(--space-3);
 	padding: 12px 14px;
@@ -1291,12 +1296,14 @@ body.is-resizing-dag-graph {
 	color: var(--body);
 	cursor: pointer;
 }
-.dag-inspector-close:hover,
+.dag-inspector-close:hover:not(:disabled),
 .dag-inspector-close:focus-visible {
 	border-color: var(--orange);
 	color: var(--orange-active);
 	background: var(--orange-soft);
 	outline: none;
+	box-shadow: none;
+	transform: none;
 }
 .dag-inspector-tabs {
 	display: flex;
@@ -1307,13 +1314,17 @@ body.is-resizing-dag-graph {
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-pill);
 	background: var(--surface);
-	width: fit-content;
+	width: 100%;
 	max-width: 100%;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	overscroll-behavior-x: contain;
+	scrollbar-width: thin;
 }
 .dag-inspector-tab {
+	flex: 0 0 auto;
 	min-height: 30px;
-	padding: 0 12px;
+	padding: 0 8px;
 	border: 1px solid transparent;
 	border-radius: var(--radius-pill);
 	background: transparent;
@@ -1322,15 +1333,21 @@ body.is-resizing-dag-graph {
 	font-weight: 700;
 	cursor: pointer;
 }
-.dag-inspector-tab:hover,
+.dag-inspector-tab:hover:not(:disabled),
 .dag-inspector-tab:focus-visible {
 	color: var(--ink);
+	background: transparent;
+	border-color: transparent;
 	outline: none;
+	box-shadow: none;
 }
-.dag-inspector-tab[aria-selected="true"] {
+.dag-inspector-tab[aria-selected="true"],
+.dag-inspector-tab[aria-selected="true"]:hover,
+.dag-inspector-tab[aria-selected="true"]:focus-visible {
 	border-color: transparent;
 	background: var(--ink);
 	color: #fff;
+	box-shadow: none;
 }
 .dag-inspector-content {
 	min-height: 0;
@@ -1947,9 +1964,110 @@ body.is-resizing-dag-graph {
 .process-timeline-toolbar {
 	display: flex;
 	flex-wrap: wrap;
+	align-items: center;
 	gap: 8px;
 	margin-bottom: var(--space-2);
 }
+.process-timeline-autoscroll-dock {
+	position: sticky;
+	top: calc(100% - 42px);
+	z-index: 4;
+	display: flex;
+	justify-content: flex-end;
+	height: 0;
+	margin: 0 2px;
+	pointer-events: none;
+}
+.process-timeline-autoscroll {
+	position: relative;
+	pointer-events: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 7px;
+	width: 36px;
+	height: 36px;
+	padding: 0;
+	border: 1px solid var(--hairline-strong);
+	border-radius: 50%;
+	background: color-mix(in srgb, var(--surface) 94%, var(--canvas));
+	color: var(--body);
+	box-shadow: 0 8px 24px rgb(38 37 30 / 14%);
+	font-size: 14px;
+	cursor: pointer;
+	backdrop-filter: blur(10px);
+}
+.process-timeline-autoscroll::after {
+	position: absolute;
+	right: 0;
+	bottom: calc(100% + 8px);
+	padding: 6px 8px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-sm);
+	background: var(--ink);
+	color: #fff;
+	box-shadow: 0 6px 16px rgb(38 37 30 / 14%);
+	content: attr(data-tooltip);
+	font-size: 11px;
+	font-weight: 650;
+	line-height: 1;
+	white-space: nowrap;
+	opacity: 0;
+	transform: translateY(3px);
+	pointer-events: none;
+	transition: opacity 120ms ease, transform 120ms ease;
+}
+.process-timeline-autoscroll:hover::after,
+.process-timeline-autoscroll:focus-visible::after {
+	opacity: 1;
+	transform: translateY(0);
+}
+.process-timeline-autoscroll:hover,
+.process-timeline-autoscroll:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+	box-shadow: 0 8px 24px rgb(38 37 30 / 16%), 0 0 0 3px var(--orange-soft);
+}
+.process-timeline-autoscroll.is-active {
+	border-color: var(--ink);
+	background: var(--ink);
+	color: #fff;
+}
+.process-timeline-autoscroll.is-active:hover,
+.process-timeline-autoscroll.is-active:focus-visible {
+	border-color: var(--orange);
+	background: var(--ink);
+	color: #fff;
+}
+.process-timeline-autoscroll-signal {
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--muted-soft);
+}
+.process-timeline-autoscroll.is-active .process-timeline-autoscroll-signal {
+	background: var(--orange);
+	box-shadow: 0 0 0 4px rgb(245 78 0 / 16%);
+	animation: process-timeline-live-pulse 1.8s ease-out infinite;
+}
+@keyframes process-timeline-live-pulse {
+	0%, 55%, 100% { box-shadow: 0 0 0 4px rgb(245 78 0 / 16%); }
+	75% { box-shadow: 0 0 0 7px rgb(245 78 0 / 0%); }
+}
+@media (prefers-reduced-motion: reduce) {
+	.process-timeline-autoscroll.is-active .process-timeline-autoscroll-signal {
+		animation: none;
+	}
+	.process-timeline-autoscroll::after {
+		transition: none;
+	}
+}
+.process-timeline-filter-group {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
 .process-timeline-toggle {
 	min-height: 28px;
 	padding: 0 10px;
@@ -2295,6 +2413,152 @@ body.is-resizing-dag-graph {
 	color: var(--danger, #b42318);
 	font-size: 13px;
 }
+.node-transparency-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+}
+.node-transparency-omission {
+	padding: var(--space-3);
+	border: 1px solid var(--hairline);
+	border-left: 3px solid var(--orange);
+	border-radius: var(--radius-md);
+	background: var(--orange-soft);
+}
+.node-transparency-omission h4,
+.node-transparency-omission p {
+	margin: 0;
+}
+.node-transparency-omission p {
+	margin-top: var(--space-2);
+}
+.node-artifact-inventory {
+	margin-bottom: var(--space-3);
+}
+.node-artifact-card {
+	margin-top: var(--space-3);
+	padding: var(--space-3);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--surface-2, #f3f1ec);
+}
+.node-artifact-card.is-consumed {
+	border-left: 3px solid var(--blue, #2563eb);
+}
+.artifact-content-preview {
+	overflow: hidden;
+	margin-top: 10px;
+	border: 1px solid var(--hairline);
+	border-radius: 9px;
+	background: var(--surface);
+}
+.artifact-content-preview > summary {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 36px;
+	padding: 0 10px;
+	color: var(--body);
+	font-size: 11px;
+	font-weight: 800;
+	cursor: pointer;
+	list-style: none;
+}
+.artifact-content-preview > summary::-webkit-details-marker {
+	display: none;
+}
+.artifact-content-preview > summary::after {
+	margin-left: auto;
+	font-size: 14px;
+	content: "⌄";
+	transition: transform var(--transition-fast);
+}
+.artifact-content-preview[open] > summary::after {
+	transform: rotate(180deg);
+}
+.artifact-content-preview > summary:hover,
+.artifact-content-preview > summary:focus-visible {
+	background: var(--canvas-soft);
+	color: var(--ink);
+	outline: none;
+}
+.artifact-content-preview > summary i {
+	color: var(--orange-active);
+	font-size: 15px;
+}
+.artifact-content-preview-body {
+	padding: 10px;
+	border-top: 1px solid var(--hairline);
+	background: color-mix(in srgb, var(--canvas-soft) 52%, var(--surface));
+}
+.artifact-content-preview-body > :first-child {
+	margin-top: 0;
+}
+.artifact-content-preview-body > :last-child {
+	margin-bottom: 0;
+}
+.artifact-content-preview-meta {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 10px;
+	margin-bottom: 8px;
+	color: var(--muted);
+	font-size: 9px;
+}
+.artifact-content-preview-meta code {
+	min-width: 0;
+	overflow-wrap: anywhere;
+	color: var(--ink);
+	font-size: 10px;
+}
+.artifact-content-preview-code,
+.artifact-content-preview-document {
+	max-height: 320px;
+	overflow: auto;
+	overscroll-behavior: contain;
+	border: 1px solid color-mix(in srgb, var(--hairline) 78%, transparent);
+	border-radius: 7px;
+	background: var(--surface);
+}
+.artifact-content-preview-code {
+	margin: 0;
+	padding: 10px;
+	white-space: pre-wrap;
+	word-break: break-word;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 10px;
+	line-height: 1.55;
+}
+.artifact-content-preview-document {
+	padding: 10px;
+}
+.artifact-content-preview-error,
+.artifact-content-preview-unavailable,
+.artifact-content-preview-note {
+	margin: 0;
+	font-size: 10px;
+	line-height: 1.5;
+}
+.artifact-content-preview-error {
+	color: var(--danger, #b42318);
+}
+.artifact-content-preview-unavailable,
+.artifact-content-preview-note {
+	color: var(--muted);
+}
+.artifact-content-preview-note {
+	margin-top: 7px;
+}
+.artifact-content-preview-full-cta {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin: 7px 0 0;
+	font-size: 10px;
+	line-height: 1.5;
+	color: var(--muted);
+}
 .spec-evidence-summary {
 	margin: var(--space-2) 0 0;
 	color: var(--body);
@@ -3644,9 +3908,6 @@ button.copy-command:focus-visible {
 	flex-direction: column;
 	min-height: 0;
 }
-#dag-inspector-panel-prompt-restart:has(.prompt-restart-panel.is-readonly) {
-	overflow: hidden;
-}
 .prompt-restart-panel,
 .prompt-restart-box {
 	display: flex;
@@ -3716,94 +3977,806 @@ button.copy-command:focus-visible {
 	font-size: 12px;
 	line-height: 1.5;
 }
-.prompt-restart-field {
+
+.dag-inspector-content[data-inspector-tab="prompt-restart"] {
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
-	min-width: 0;
+	gap: 14px;
+	background: color-mix(in srgb, var(--canvas-soft) 72%, var(--surface));
 }
-.prompt-restart-field.is-hidden,
-.prompt-restart-prompt-card.is-hidden {
-	display: none;
+.dag-action-page-intro,
+.dag-action-card,
+.dag-action-export-zone {
+	flex: 0 0 auto;
 }
-.prompt-restart-label {
-	color: var(--ink);
-	font-size: 12px;
-	font-weight: 700;
-	letter-spacing: 0.01em;
+.dag-action-page-intro {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 2px 2px 4px;
 }
-.prompt-restart-hint {
+.dag-action-page-intro h4,
+.dag-action-page-intro p {
 	margin: 0;
-	color: var(--muted);
-	font-size: 12px;
-	line-height: 1.45;
 }
-.prompt-restart-candidate-select {
-	display: block;
-	width: 100%;
-	min-width: 0;
+.dag-action-page-intro h4 {
+	margin-top: 2px;
+	font-size: 19px;
+	line-height: 1.25;
 }
-.prompt-restart-candidate-select .custom-select-trigger {
-	width: 100%;
+.dag-action-page-intro p {
+	margin-top: 5px;
+	color: var(--body);
+	font-size: 12px;
 }
-.prompt-restart-candidate-select .custom-select-menu {
-	z-index: 6;
+.dag-action-eyebrow {
+	display: block;
+	color: var(--orange-active);
+	font-size: 9px;
+	font-weight: 800;
+	letter-spacing: 0.13em;
+	text-transform: uppercase;
 }
-.prompt-restart-mode-switch {
-	display: flex;
-	width: fit-content;
-	max-width: 100%;
-	gap: 4px;
-	padding: 4px;
+.dag-action-node-state {
+	flex: 0 0 auto;
+	padding: 4px 8px;
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-pill);
 	background: var(--surface);
-}
-#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option,
-.prompt-restart-mode-option {
-	appearance: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: 0 0 auto;
-	width: auto;
-	min-height: 30px;
-	height: 30px;
-	padding: 0 12px;
-	border: 1px solid transparent;
-	border-radius: var(--radius-pill);
-	background: transparent;
 	color: var(--muted);
-	font-size: 12px;
-	font-weight: 700;
-	line-height: 1;
-	letter-spacing: 0;
-	white-space: nowrap;
-	box-shadow: none;
-	transform: none;
-	cursor: pointer;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 9px;
+	font-weight: 800;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
 }
-#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option:hover,
-#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option:focus-visible,
-.prompt-restart-mode-option:hover,
-.prompt-restart-mode-option:focus-visible {
-	color: var(--ink);
-	background: var(--surface-muted);
-	border-color: transparent;
-	outline: none;
-	box-shadow: none;
-	transform: none;
+.dag-action-card {
+	overflow: hidden;
+	border: 1px solid var(--hairline);
+	border-radius: 13px;
+	background: var(--surface);
+	box-shadow: 0 4px 14px rgb(38 37 30 / 4%);
 }
-#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option.is-selected,
-.prompt-restart-mode-option.is-selected {
-	background: var(--ink);
-	color: #fff;
-	border-color: transparent;
+.dag-action-card-header {
+	display: grid;
+	grid-template-columns: 38px minmax(0, 1fr);
+	gap: 12px;
+	align-items: start;
+	padding: 14px 15px;
+	border-bottom: 1px solid var(--hairline);
+	background: color-mix(in srgb, var(--canvas-soft) 68%, var(--surface));
+}
+.dag-action-card-icon {
+	display: grid;
+	place-items: center;
+	width: 38px;
+	height: 38px;
+	border: 1px solid color-mix(in srgb, var(--orange) 24%, var(--hairline));
+	border-radius: 10px;
+	background: var(--orange-soft);
+	color: var(--orange-active);
+	font-size: 19px;
+}
+.dag-action-card-copy h4,
+.dag-action-card-copy p {
+	margin: 0;
+}
+.dag-action-card-copy h4 {
+	margin-top: 2px;
+	font-size: 14px;
+	line-height: 1.35;
+}
+.dag-action-card-copy p {
+	margin-top: 4px;
+	color: var(--body);
+	font-size: 11px;
+	line-height: 1.5;
+}
+.dag-action-card-body {
+	display: grid;
+	gap: 12px;
+	padding: 14px 15px;
+}
+.dag-action-availability {
+	display: grid;
+	grid-template-columns: 20px minmax(0, 1fr);
+	gap: 9px;
+	align-items: start;
+	padding: 11px 12px;
+	border: 1px solid var(--hairline);
+	border-radius: 10px;
+	background: var(--canvas-soft);
+	color: var(--body);
+}
+.dag-action-availability > i {
+	margin-top: 1px;
+	color: var(--muted);
+	font-size: 17px;
+}
+.dag-action-availability strong,
+.dag-action-availability p {
+	display: block;
+	margin: 0;
+}
+.dag-action-availability strong {
+	color: var(--ink);
+	font-size: 12px;
+}
+.dag-action-availability p {
+	margin-top: 3px;
+	font-size: 11px;
+	line-height: 1.5;
+}
+.dag-action-reason-copy {
+	color: var(--ink);
+}
+.dag-action-availability code {
+	display: inline-block;
+	margin-top: 7px;
+	padding: 2px 6px;
+	border-radius: 5px;
+	background: color-mix(in srgb, var(--ink) 6%, transparent);
+	font-size: 9px;
+}
+.dag-action-availability.is-ready {
+	border-color: color-mix(in srgb, var(--green) 28%, var(--hairline));
+	background: color-mix(in srgb, var(--green) 6%, var(--surface));
+}
+.dag-action-availability.is-ready > i {
+	color: var(--green);
+}
+.dag-action-availability.is-blocked {
+	border-color: color-mix(in srgb, var(--red) 25%, var(--hairline));
+	background: color-mix(in srgb, var(--red) 5%, var(--surface));
+}
+.dag-action-availability.is-blocked > i {
+	color: var(--red);
+}
+.dag-action-form {
+	display: grid;
+	gap: 12px;
+	padding-top: 2px;
+}
+.dag-action-field-label {
+	color: var(--ink);
+	font-size: 11px;
+	font-weight: 800;
+}
+.dag-action-form select,
+.dag-action-form textarea,
+.dag-action-file-input {
+	border: 1px solid var(--hairline-strong);
+	border-radius: 9px;
+	background: var(--surface);
+	color: var(--ink);
+}
+.dag-action-form select {
+	min-height: 38px;
+	padding: 0 10px;
+}
+.dag-action-form textarea {
+	padding: 9px 10px;
+}
+.dag-action-form select:focus-visible,
+.dag-action-form textarea:focus-visible,
+.dag-action-file-input:focus-visible {
+	border-color: var(--orange);
+	outline: 2px solid color-mix(in srgb, var(--orange) 18%, transparent);
+	outline-offset: 1px;
+}
+.dag-action-file-input {
+	width: 100%;
+	padding: 5px;
+	font-size: 11px;
+}
+.dag-action-file-input::file-selector-button {
+	min-height: 30px;
+	margin-right: 9px;
+	padding: 0 10px;
+	border: 1px solid var(--hairline);
+	border-radius: 7px;
+	background: var(--canvas-soft);
+	color: var(--ink);
+	font-weight: 700;
+	cursor: pointer;
+}
+.dag-action-primary,
+.dag-action-secondary {
+	min-height: 39px;
+	padding: 0 14px;
+	border-radius: 9px;
+	font-weight: 800;
+}
+.dag-action-primary {
+	border: 1px solid var(--orange-active);
+	background: var(--orange);
+	color: #fff;
+	box-shadow: 0 4px 12px color-mix(in srgb, var(--orange) 18%, transparent);
+}
+.dag-action-primary:hover:not(:disabled),
+.dag-action-primary:focus-visible {
+	background: var(--orange-active);
+	outline: none;
+	box-shadow:
+		0 4px 12px color-mix(in srgb, var(--orange) 18%, transparent),
+		0 0 0 3px color-mix(in srgb, var(--orange) 15%, transparent);
+}
+.dag-action-secondary {
+	border: 1px solid var(--hairline-strong);
+	background: var(--surface);
+	color: var(--ink);
+}
+.dag-action-secondary:hover:not(:disabled),
+.dag-action-secondary:focus-visible {
+	border-color: var(--ink);
+	outline: none;
+}
+.dag-action-disclosure {
+	overflow: hidden;
+	min-width: 0;
+	max-width: 100%;
+	border: 1px solid var(--hairline);
+	border-radius: 10px;
+	background: var(--surface);
+}
+.dag-action-disclosure summary {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+	padding: 10px 12px;
+	color: var(--body);
+	font-size: 11px;
+	font-weight: 800;
+	cursor: pointer;
+	list-style: none;
+}
+.dag-action-disclosure summary::-webkit-details-marker {
+	display: none;
+}
+.dag-action-disclosure summary::after {
+	margin-left: auto;
+	font-size: 15px;
+	font-weight: 700;
+	content: "⌄";
+	transition: transform var(--transition-fast);
+}
+.dag-action-disclosure[open] summary::after {
+	transform: rotate(180deg);
+}
+.dag-action-disclosure[open] summary {
+	background: color-mix(in srgb, var(--orange) 5%, var(--surface));
+	color: var(--ink);
+}
+.dag-action-disclosure summary:hover,
+.dag-action-disclosure summary:focus-visible {
+	background: var(--canvas-soft);
+	color: var(--ink);
+	outline: none;
+}
+.dag-action-disclosure-body {
+	display: grid;
+	gap: 12px;
+	min-width: 0;
+	max-width: 100%;
+	padding: 12px;
+	border-top: 1px solid var(--hairline);
+}
+.dag-action-export-zone {
+	display: grid;
+	gap: 12px;
+	margin-top: 4px;
+	padding-top: 16px;
+	border-top: 1px dashed var(--hairline-strong);
+}
+.dag-action-export-divider span,
+.dag-action-export-divider p {
+	margin: 0;
+}
+.dag-action-export-divider span {
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 800;
+}
+.dag-action-export-divider p {
+	margin-top: 2px;
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.context-export-box,
+.artifact-revision-box {
+	margin-bottom: 0;
+}
+
+.context-export-box {
+	container-type: inline-size;
+	gap: 18px;
+	padding: 18px;
+	border: 1px solid var(--hairline);
+	border-radius: 14px;
+	background: color-mix(in srgb, var(--canvas-soft) 78%, var(--surface));
+}
+.context-export-heading {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 18px;
+}
+.context-export-heading h4,
+.context-export-heading p {
+	margin: 0;
+}
+.context-export-heading h4 {
+	margin-top: 3px;
+	font-size: 18px;
+	line-height: 1.25;
+}
+.context-export-heading p {
+	margin-top: 6px;
+	max-width: 58ch;
+	color: var(--body);
+	font-size: 13px;
+}
+.context-export-eyebrow {
+	color: var(--orange-active);
+	font-size: 10px;
+	font-weight: 800;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+}
+.context-export-invariant {
+	flex: 0 0 auto;
+	padding: 6px 9px;
+	border: 1px solid color-mix(in srgb, var(--green) 26%, var(--hairline));
+	border-radius: var(--radius-pill);
+	background: color-mix(in srgb, var(--green) 8%, var(--surface));
+	color: var(--green);
+	font-size: 11px;
+	font-weight: 700;
+	white-space: nowrap;
+}
+.context-export-workspace {
+	display: grid;
+	grid-template-columns: minmax(0, 1.25fr) minmax(230px, 0.75fr);
+	gap: 16px;
+	align-items: start;
+}
+.context-export-controls {
+	display: grid;
+	gap: 16px;
+}
+.context-export-fieldset {
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.context-export-fieldset legend {
+	margin-bottom: 8px;
+	padding: 0;
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 800;
+}
+.context-export-target-grid,
+.context-export-profile-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 8px;
+}
+.context-export-choice,
+.context-export-profile-choice {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: start;
+	gap: 9px;
+	min-width: 0;
+	padding: 11px;
+	border: 1px solid var(--hairline);
+	border-radius: 10px;
+	background: var(--surface);
+	cursor: pointer;
+	transition:
+		border-color var(--transition-fast),
+		box-shadow var(--transition-fast),
+		background var(--transition-fast);
+}
+.context-export-choice {
+	grid-template-columns: auto 20px minmax(0, 1fr);
+}
+.context-export-choice:hover,
+.context-export-profile-choice:hover {
+	border-color: var(--hairline-strong);
+	background: var(--canvas-soft);
+}
+.context-export-choice:has(input:checked),
+.context-export-profile-choice:has(input:checked) {
+	border-color: color-mix(in srgb, var(--orange) 58%, var(--hairline));
+	background: var(--orange-soft);
+	box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 16%, transparent);
+}
+.context-export-profile-choice.is-risk:has(input:checked) {
+	border-color: color-mix(in srgb, var(--red) 58%, var(--hairline));
+	background: color-mix(in srgb, var(--red) 7%, var(--surface));
+	box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 15%, transparent);
+}
+.context-export-choice input,
+.context-export-profile-choice input {
+	width: 15px;
+	height: 15px;
+	margin: 2px 0 0;
+	accent-color: var(--orange);
+}
+.context-export-profile-choice.is-risk input {
+	accent-color: var(--red);
+}
+.context-export-choice:has(input:focus-visible),
+.context-export-profile-choice:has(input:focus-visible) {
+	outline: 2px solid color-mix(in srgb, var(--orange) 60%, transparent);
+	outline-offset: 2px;
+}
+.context-export-choice > i {
+	margin-top: 1px;
+	color: var(--orange-active);
+	font-size: 18px;
+	line-height: 1;
+}
+.context-export-choice-copy {
+	display: grid;
+	gap: 3px;
+	min-width: 0;
+}
+.context-export-choice-copy strong,
+.context-export-choice-copy small {
+	display: block;
+}
+.context-export-choice-copy strong {
+	font-size: 12px;
+	line-height: 1.35;
+}
+.context-export-choice-copy small {
+	color: var(--muted);
+	font-size: 11px;
+	line-height: 1.45;
+}
+.context-export-profile-title {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px;
+}
+.context-export-profile-badge {
+	padding: 1px 6px;
+	border-radius: var(--radius-pill);
+	font-size: 9px;
+	font-weight: 800;
+}
+.context-export-profile-badge.is-redacted {
+	background: color-mix(in srgb, var(--green) 12%, var(--surface));
+	color: var(--green);
+}
+.context-export-profile-badge.is-raw {
+	background: color-mix(in srgb, var(--red) 11%, var(--surface));
+	color: var(--red);
+}
+
+.context-export-raw-ack {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: start;
+	gap: 9px;
+	padding: 11px;
+	border: 1px solid color-mix(in srgb, var(--red) 38%, var(--hairline));
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--red) 6%, var(--surface));
+	color: var(--ink);
+	cursor: pointer;
+}
+.context-export-raw-ack[hidden] {
+	display: none;
+}
+.context-export-raw-ack input {
+	width: 15px;
+	height: 15px;
+	margin: 2px 0 0;
+	accent-color: var(--red);
+}
+.context-export-raw-ack span {
+	display: grid;
+	gap: 2px;
+}
+.context-export-raw-ack strong {
+	font-size: 12px;
+}
+.context-export-raw-ack small {
+	color: var(--body);
+	font-size: 11px;
+	line-height: 1.45;
+}
+.context-export-ticket {
+	position: relative;
+	overflow: hidden;
+	min-width: 0;
+	padding: 16px 16px 14px 20px;
+	border-radius: 13px;
+	background: var(--ink);
+	color: #fff;
+	box-shadow: 0 10px 24px rgb(38 37 30 / 12%);
+}
+.context-export-ticket::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 5px;
+	background: var(--orange);
+	content: "";
+}
+.context-export-ticket-top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding-bottom: 12px;
+	border-bottom: 1px dashed rgb(255 255 255 / 22%);
+}
+.context-export-ticket-type,
+.context-export-ticket-safety,
+.context-export-ticket-label {
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 9px;
+	font-weight: 800;
+	letter-spacing: 0.1em;
+}
+.context-export-ticket-type {
+	color: rgb(255 255 255 / 58%);
+}
+.context-export-ticket-safety {
+	padding: 3px 6px;
+	border-radius: var(--radius-pill);
+	background: color-mix(in srgb, var(--green) 36%, transparent);
+	color: #c9f4df;
+	letter-spacing: 0.04em;
+}
+.context-export-ticket-safety.is-risk {
+	background: color-mix(in srgb, var(--red) 45%, transparent);
+	color: #ffd7e1;
+}
+.context-export-ticket-label {
+	display: block;
+	margin-top: 16px;
+	color: rgb(255 255 255 / 52%);
+}
+.context-export-ticket-title {
+	display: block;
+	margin-top: 4px;
+	font-size: 17px;
+	line-height: 1.3;
+}
+.context-export-ticket-rows {
+	display: grid;
+	grid-template-columns: 42px minmax(0, 1fr);
+	gap: 8px 10px;
+	margin: 16px 0 0;
+	font-size: 11px;
+	line-height: 1.45;
+}
+.context-export-ticket-rows dt {
+	color: rgb(255 255 255 / 48%);
+}
+.context-export-ticket-rows dd {
+	min-width: 0;
+	margin: 0;
+	color: rgb(255 255 255 / 86%);
+	overflow-wrap: anywhere;
+}
+.context-export-ticket-rows dd.is-mono {
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 10px;
+}
+.context-export-ticket-foot {
+	margin: 16px 0 0;
+	padding-top: 11px;
+	border-top: 1px dashed rgb(255 255 255 / 22%);
+	color: rgb(255 255 255 / 52%);
+	font-size: 10px;
+	line-height: 1.5;
+}
+.context-export-box > .prompt-restart-actions {
+	justify-content: flex-end;
+}
+.context-export-submit {
+	min-height: 40px;
+	padding: 0 16px;
+	border: 1px solid var(--orange-active);
+	border-radius: 9px;
+	background: var(--orange);
+	color: #fff;
+	font-weight: 800;
+	box-shadow: 0 5px 14px color-mix(in srgb, var(--orange) 22%, transparent);
+}
+.context-export-submit:hover:not(:disabled),
+.context-export-submit:focus-visible {
+	background: var(--orange-active);
+	outline: none;
+	box-shadow:
+		0 5px 14px color-mix(in srgb, var(--orange) 22%, transparent),
+		0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent);
+}
+.context-export-box > .prompt-restart-status:not(:empty) {
+	padding: 10px 12px;
+	border: 1px solid var(--hairline);
+	border-radius: 9px;
+	background: var(--surface);
+}
+
+.node-lineage-intro {
+	padding: var(--space-3);
+	border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--hairline));
+	border-left: 3px solid var(--blue);
+	border-radius: var(--radius-md);
+	background: color-mix(in srgb, var(--blue) 6%, var(--surface));
+}
+.node-lineage-intro h4,
+.node-lineage-intro p {
+	margin: 0;
+}
+.node-lineage-intro p {
+	margin-top: var(--space-2);
+}
+
+@container (max-width: 680px) {
+	.context-export-workspace {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+@media (max-width: 760px) {
+	.dag-action-page-intro {
+		align-items: stretch;
+		flex-direction: column;
+	}
+	.dag-action-node-state {
+		align-self: flex-start;
+	}
+	.dag-action-card-header {
+		grid-template-columns: 34px minmax(0, 1fr);
+		padding: 12px;
+	}
+	.dag-action-card-icon {
+		width: 34px;
+		height: 34px;
+	}
+	.dag-action-card-body {
+		padding: 12px;
+	}
+	.context-export-heading {
+		align-items: stretch;
+		flex-direction: column;
+	}
+	.context-export-invariant {
+		align-self: flex-start;
+	}
+	.context-export-workspace {
+		grid-template-columns: minmax(0, 1fr);
+	}
+	.context-export-target-grid,
+	.context-export-profile-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+	.context-export-box > .prompt-restart-actions {
+		justify-content: stretch;
+	}
+	.context-export-submit {
+		width: 100%;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.dag-action-disclosure summary::after,
+	.context-export-choice,
+	.context-export-profile-choice {
+		transition: none;
+	}
+}
+
+.artifact-revision-plan {
+	display: grid;
+	gap: 10px;
+	margin-top: 12px;
+}
+.prompt-restart-field {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+	max-width: 100%;
+}
+.prompt-restart-field.is-hidden,
+.prompt-restart-prompt-card.is-hidden {
+	display: none;
+}
+.prompt-restart-label {
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.01em;
+}
+.prompt-restart-hint {
+	margin: 0;
+	color: var(--muted);
+	font-size: 12px;
+	line-height: 1.45;
+}
+.prompt-restart-candidate-select {
+	display: block;
+	width: 100%;
+	min-width: 0;
+}
+.prompt-restart-candidate-select .custom-select-trigger {
+	width: 100%;
+}
+.prompt-restart-candidate-select .custom-select-menu {
+	z-index: 6;
+}
+.prompt-restart-mode-switch {
+	display: flex;
+	width: fit-content;
+	max-width: 100%;
+	gap: 4px;
+	padding: 4px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
+}
+#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option,
+.prompt-restart-mode-option {
+	appearance: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 0 0 auto;
+	width: auto;
+	min-height: 30px;
+	height: 30px;
+	padding: 0 12px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-pill);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 700;
+	line-height: 1;
+	letter-spacing: 0;
+	white-space: nowrap;
+	box-shadow: none;
+	transform: none;
+	cursor: pointer;
+}
+#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option:hover,
+#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option:focus-visible,
+.prompt-restart-mode-option:hover,
+.prompt-restart-mode-option:focus-visible {
+	color: var(--ink);
+	background: var(--surface-muted);
+	border-color: transparent;
+	outline: none;
+	box-shadow: none;
+	transform: none;
+}
+#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option.is-selected,
+.prompt-restart-mode-option.is-selected {
+	background: var(--ink);
+	color: #fff;
+	border-color: transparent;
 }
 .prompt-restart-prompt-card {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
+	max-width: 100%;
 	overflow: hidden;
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-lg);
@@ -3814,6 +4787,7 @@ button.copy-command:focus-visible {
 	align-items: flex-start;
 	justify-content: space-between;
 	gap: var(--space-3);
+	min-width: 0;
 	padding: 10px 12px;
 	border-bottom: 1px solid var(--hairline);
 	background: var(--canvas-soft);
@@ -3845,9 +4819,32 @@ button.copy-command:focus-visible {
 	font-size: 11px;
 	line-height: 1.3;
 }
-.prompt-restart-copy-icon {
+.prompt-restart-prompt-head > :first-child {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.prompt-restart-copy-button {
 	flex: 0 0 auto;
-	margin-top: 1px;
+	gap: 6px;
+	width: auto;
+	min-width: 0;
+	height: 32px;
+	padding: 0 10px;
+	border-color: color-mix(in srgb, var(--orange) 32%, var(--hairline));
+	background: var(--orange-soft);
+	color: var(--orange-active);
+	font-size: 11px;
+	font-weight: 800;
+	white-space: nowrap;
+}
+.prompt-restart-copy-button:hover {
+	border-color: color-mix(in srgb, var(--orange) 54%, var(--hairline));
+	background: color-mix(in srgb, var(--orange) 13%, var(--surface));
+}
+.prompt-restart-copy-button.is-copied {
+	border-color: color-mix(in srgb, var(--green) 36%, var(--hairline));
+	background: color-mix(in srgb, var(--green) 9%, var(--surface));
+	color: var(--green);
 }
 .prompt-restart-prompt-actions {
 	display: flex;
@@ -3886,9 +4883,13 @@ button.copy-command:focus-visible {
 	display: none;
 }
 .prompt-restart-readonly {
+	box-sizing: border-box;
+	width: 100%;
+	min-width: 0;
+	max-width: 100%;
 	margin: 0;
 	padding: 14px 16px;
-	overflow: auto;
+	overflow-y: auto;
 	background: var(--canvas-soft);
 	color: var(--ink);
 	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
@@ -3896,6 +4897,8 @@ button.copy-command:focus-visible {
 	line-height: 1.65;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
+	overflow-x: hidden;
+	word-break: break-word;
 	tab-size: 2;
 }
 .prompt-restart-panel.is-readonly .prompt-restart-readonly {
@@ -3908,6 +4911,8 @@ button.copy-command:focus-visible {
 }
 .prompt-restart-textarea {
 	width: 100%;
+	min-width: 0;
+	max-width: 100%;
 	min-height: 8rem;
 	resize: vertical;
 	box-sizing: border-box;
@@ -3921,7 +4926,8 @@ button.copy-command:focus-visible {
 	line-height: 1.65;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
-	overflow-x: auto;
+	word-break: break-word;
+	overflow-x: hidden;
 }
 .prompt-restart-textarea-work {
 	min-height: 10rem;