@flowdular/sandbox 0.2.0

package/src/styles.css

@@ -0,0 +1,1573 @@
+/* Sandbox shell. Layout only: every colour, size, and font comes from the
+   @flowdular/sdk/ui tokens so the preview matches the real application. */
+
+.sandbox {
+	display: flex;
+	/* Application bar, an optional notice, the session bar, then the work. The
+	   bars take what they need and the work takes the rest, whatever number of
+	   bars this view has, so a long transcript never pushes the composer off the
+	   screen. */
+	flex-direction: column;
+	height: 100vh;
+	min-width: 0;
+	overflow: hidden;
+	background: var(--surface);
+}
+
+.sandbox__body,
+.sandbox > .sandbox__scroll {
+	flex: 1 1 auto;
+	min-height: 0;
+}
+
+.sandbox__notice {
+	padding: 12px 18px 0;
+}
+
+.sandbox__notice:empty {
+	display: none;
+}
+
+.sandbox__bar {
+	display: flex;
+	flex: 0 0 auto;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	min-height: var(--topbar-h);
+	padding: 0 16px;
+	background: var(--surface);
+	border-bottom: 1px solid var(--line);
+}
+
+.sandbox__brand {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0;
+	font-family: var(--font-sans);
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--ink);
+	letter-spacing: -0.01em;
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+}
+
+/* Workspace and connection, the only global controls beside the brand. */
+.workspace-menu {
+	position: relative;
+}
+
+.workspace-menu__button {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	max-width: 320px;
+	padding: 8px 12px;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--r-lg);
+	cursor: pointer;
+	transition: background var(--t-fast) var(--ease);
+}
+
+.workspace-menu__button:hover,
+.workspace-menu__button[aria-expanded='true'] {
+	background: var(--surface-2);
+}
+
+.workspace-menu__label {
+	display: grid;
+	min-width: 0;
+	text-align: left;
+}
+
+.workspace-menu__label b {
+	font-size: var(--text-md);
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.workspace-menu__label small {
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.workspace-menu__panel {
+	position: absolute;
+	top: calc(100% + 6px);
+	right: 0;
+	z-index: 40;
+	width: 300px;
+}
+
+/* One session, its state, and the actions that belong to it. */
+.session-bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 18px;
+	background: var(--surface);
+	border-bottom: 1px solid var(--line-2);
+}
+
+.session-bar__back {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 8px 4px 4px;
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--ink-3);
+	background: transparent;
+	border: 0;
+	border-radius: var(--r);
+	cursor: pointer;
+}
+
+.session-bar__back:hover {
+	color: var(--ink);
+	background: var(--surface-2);
+}
+
+.session-bar__back svg {
+	transform: rotate(90deg);
+}
+
+.session-bar__title {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 8px;
+	min-width: 0;
+}
+
+.session-bar__add {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 6px;
+	font-family: var(--font-sans);
+	font-size: var(--text-xs);
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+	background: transparent;
+	border: 0;
+	border-radius: var(--r-sm);
+	cursor: pointer;
+	transition: color var(--t-fast) var(--ease);
+}
+
+.session-bar__add:hover:not(:disabled) {
+	color: var(--primary);
+}
+
+.session-bar__add:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.session-bar__title b {
+	font-size: var(--text-md);
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.session-bar__title small {
+	flex: none;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+.sandbox__spacer {
+	flex: 1;
+}
+
+/* The conversation is the page. The work card floats over it on the right,
+   inside the same surface, instead of sitting in a separate panel. */
+.sandbox__body {
+	--sandbox-preview-width: clamp(
+		calc(var(--sidebar-w) * 1.5),
+		38vw,
+		calc(var(--sidebar-w) * 2.4)
+	);
+	position: relative;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	min-width: 0;
+	min-height: 0;
+}
+
+.sandbox__chat {
+	display: grid;
+	grid-template-rows: minmax(0, 1fr) auto;
+	min-width: 0;
+	min-height: 0;
+}
+
+.sandbox__side {
+	position: absolute;
+	inset: 0 0 0 auto;
+	z-index: 1;
+	width: var(--sandbox-preview-width);
+	display: grid;
+	grid-template-rows: minmax(0, 1fr);
+	min-width: 0;
+	min-height: 0;
+	padding: 18px 18px 18px 0;
+}
+
+@media (min-width: 1101px) {
+	/* The card overlays the chat surface, but never its text or controls. */
+	.sandbox__chat > .sandbox__scroll,
+	.sandbox__chat > .chat__composer {
+		padding-right: calc(var(--sandbox-preview-width) + var(--content-pad));
+	}
+}
+
+@media (max-width: 1100px) {
+	.sandbox__body {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.sandbox__side {
+		display: none;
+	}
+}
+
+.sandbox__pane-head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 18px;
+	background: var(--surface);
+	border-bottom: 1px solid var(--line-2);
+}
+
+.sandbox__pane-title {
+	font-size: var(--text-sm);
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+}
+
+/* Controls in a pane header stay compact so the header reads as a header. */
+.workbench__head .ui-select,
+.work-card__head .ui-select,
+.sandbox__pane-head .ui-select {
+	width: auto;
+	min-width: 150px;
+	max-width: 220px;
+}
+
+.sandbox__scroll {
+	min-height: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 18px;
+}
+
+.sandbox__column {
+	width: min(760px, 100%);
+	margin: 0 auto;
+}
+
+/* Chat */
+.chat {
+	display: grid;
+	align-content: start;
+	gap: 10px;
+}
+
+.chat__turn {
+	display: grid;
+	gap: 6px;
+	padding: 12px 14px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-md);
+}
+
+.chat__turn--user {
+	background: var(--primary-tint);
+	border-color: var(--primary-soft);
+}
+
+.chat__meta {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	font-size: var(--text-xs);
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+}
+
+/* Which module an entry belongs to, quiet enough to ignore in a session that
+   only has one. */
+.chat__module {
+	font-size: var(--text-xs);
+	font-weight: 500;
+	letter-spacing: 0;
+	text-transform: none;
+	color: var(--ink-3);
+}
+
+.chat__text {
+	margin: 0;
+	font-size: var(--text-md);
+	line-height: 1.55;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.chat__events {
+	display: grid;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.chat__event {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+.chat__event-text {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.chat__event--error {
+	color: var(--danger);
+}
+
+.chat__composer {
+	display: grid;
+	justify-items: center;
+	gap: 8px;
+	padding: 12px 14px;
+	background: var(--surface);
+	border-top: 1px solid var(--line);
+}
+
+.chat__composer > * {
+	width: min(760px, 100%);
+}
+
+.chat__composer-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+}
+
+.chat__composer-status {
+	margin: 0;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+/* Role and agent sit with the send action, as quiet underlined pickers rather
+   than boxed controls that compete with the conversation. */
+.chat__picker {
+	height: 26px;
+	padding: 0 22px 0 2px;
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--ink-2);
+	appearance: none;
+	background-color: transparent;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364738F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 2px center;
+	background-size: 14px;
+	border: 0;
+	border-bottom: 1px solid var(--line);
+	border-radius: 0;
+	cursor: pointer;
+	transition: border-color var(--t-fast) var(--ease);
+}
+
+.chat__picker:hover {
+	border-bottom-color: var(--ink-3);
+}
+
+.chat__picker:focus-visible {
+	border-bottom-color: var(--primary);
+	outline: 0;
+}
+
+/* A handoff is the orchestrator speaking, not a specialist: it names who works
+   next and carries the action that starts them. */
+.chat__handoff {
+	display: grid;
+	gap: 8px;
+	padding: 12px 14px;
+	background: var(--surface);
+	border: 1px dashed var(--line);
+	border-left: 3px solid var(--primary);
+	border-radius: var(--r-md);
+}
+
+.chat__handoff--question,
+.chat__handoff--approval {
+	background: var(--warning-bg);
+	border-color: var(--warning-line);
+	border-left-color: var(--warning);
+}
+
+.chat__handoff--blocked {
+	border-left-color: var(--danger);
+}
+
+.chat__handoff--review {
+	border-left-color: var(--success);
+}
+
+.chat__handoff .ui-form__actions {
+	margin-left: 0;
+}
+
+/* The specification the operator approves, and what the session changed in it.
+   Long lists stay readable: they wrap, they never scroll sideways, and only an
+   identifier is monospaced. */
+.spec-review {
+	display: grid;
+	gap: 10px;
+	padding: 12px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-md);
+	min-width: 0;
+}
+
+.spec-review__head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	font-size: var(--text-sm);
+}
+
+.spec-review__path {
+	font-size: var(--text-xs);
+	color: var(--ink-3);
+	overflow-wrap: anywhere;
+}
+
+.spec-review__block {
+	display: grid;
+	gap: 6px;
+	min-width: 0;
+}
+
+.spec-review__title {
+	margin: 0;
+	font-size: var(--text-xs);
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+}
+
+.spec-review__text,
+.spec-review__empty {
+	margin: 0;
+	font-size: var(--text-sm);
+	line-height: 1.5;
+	overflow-wrap: anywhere;
+}
+
+.spec-review__empty {
+	color: var(--ink-3);
+}
+
+.spec-review__facts {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	gap: 2px 10px;
+	margin: 0;
+	font-size: var(--text-sm);
+}
+
+.spec-review__facts dt {
+	color: var(--ink-3);
+}
+
+.spec-review__facts dd {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+
+.spec-review__changes,
+.spec-review__list {
+	display: grid;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	font-size: var(--text-sm);
+}
+
+.spec-review__change,
+.spec-review__item {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 6px;
+	padding: 3px 6px;
+	border-radius: var(--r-sm);
+	overflow-wrap: anywhere;
+}
+
+.spec-review__scenario {
+	display: grid;
+	gap: 2px;
+	padding: 6px;
+	border-radius: var(--r-sm);
+	overflow-wrap: anywhere;
+}
+
+.spec-review__change--added,
+.spec-review__item--added {
+	background: var(--success-bg);
+}
+
+.spec-review__change--removed,
+.spec-review__item--removed {
+	background: var(--danger-bg);
+}
+
+.spec-review__change--changed,
+.spec-review__item--changed {
+	background: var(--warning-bg);
+}
+
+.spec-review__sign {
+	font-family: var(--font-mono);
+	font-weight: 600;
+	color: var(--ink-3);
+}
+
+.spec-review__field {
+	font-size: var(--text-xs);
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+}
+
+.spec-review__value {
+	color: var(--ink-2);
+}
+
+.spec-review__ask {
+	display: grid;
+	gap: 8px;
+}
+
+/* The specification as text, for the operator who would rather fix it than
+   describe it. */
+.spec-editor {
+	display: grid;
+	grid-template-rows: auto auto minmax(0, 1fr);
+	gap: 8px;
+	height: 100%;
+	padding: 12px;
+}
+
+.spec-editor__bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	font-size: var(--text-sm);
+}
+
+.spec-editor__error {
+	margin: 0;
+	font-size: var(--text-sm);
+	color: var(--danger);
+}
+
+.spec-editor__notice {
+	margin: 0;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+.spec-editor__text {
+	min-height: 60vh;
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	line-height: 1.5;
+	white-space: pre;
+	resize: none;
+}
+
+/* A recovery action, kept quiet: it sits under a turn and only offers to roll
+   the workspace back to that point. */
+.chat__restore {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+
+.chat__restore-toggle,
+.chat__restore-go,
+.chat__restore-cancel {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 6px;
+	font-family: var(--font-sans);
+	font-size: var(--text-xs);
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+	background: transparent;
+	border: 0;
+	border-radius: var(--r-sm);
+	cursor: pointer;
+	transition: color var(--t-fast) var(--ease);
+}
+
+.chat__restore-toggle:hover,
+.chat__restore-go:hover:not(:disabled),
+.chat__restore-cancel:hover:not(:disabled) {
+	color: var(--primary);
+}
+
+.chat__restore-go:disabled,
+.chat__restore-cancel:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.chat__restore-ask {
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+.chat__restore-error {
+	width: 100%;
+	font-size: var(--text-sm);
+	color: var(--danger);
+}
+
+.chat__auto {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+	white-space: nowrap;
+}
+
+.chat__selection {
+	display: grid;
+	gap: 4px;
+	padding: 8px 10px;
+	font-size: var(--text-sm);
+	background: var(--primary-tint);
+	border: 1px solid var(--primary-soft);
+	border-radius: var(--r);
+}
+
+/* The attachment strip sits above the textarea: one chip per file, an image
+   thumbnail or a file icon, its name, its size, and a remove control. */
+.chat__attachments {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.chat__attachment {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	max-width: 240px;
+	padding: 4px 6px 4px 4px;
+	background: var(--surface-2);
+	border: 1px solid var(--line);
+	border-radius: var(--r);
+}
+
+.chat__attachment--error {
+	border-color: var(--danger);
+	background: var(--danger-bg);
+}
+
+.chat__attachment-thumb {
+	flex: none;
+	width: 40px;
+	height: 40px;
+	object-fit: cover;
+	border-radius: var(--r-sm);
+	background: var(--surface);
+}
+
+.chat__attachment-thumb--file {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ink-3);
+	border: 1px solid var(--line);
+}
+
+.chat__attachment-info {
+	display: grid;
+	gap: 2px;
+	min-width: 0;
+}
+
+.chat__attachment-name {
+	overflow: hidden;
+	font-size: var(--text-sm);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.chat__attachment-size {
+	font-size: var(--text-xs);
+	color: var(--ink-3);
+}
+
+.chat__attachment-remove {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	color: var(--ink-3);
+	background: transparent;
+	border: 0;
+	border-radius: var(--r-sm);
+	cursor: pointer;
+	transition: color var(--t-fast) var(--ease);
+}
+
+.chat__attachment-remove:hover {
+	color: var(--danger);
+}
+
+.chat__attachment-error {
+	width: 100%;
+	font-size: var(--text-sm);
+	color: var(--danger);
+}
+
+/* The attach button matches the quiet composer pickers, and the file input it
+   opens stays out of the layout. */
+.chat__attach {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	color: var(--ink-2);
+	background: transparent;
+	border: 1px solid var(--line);
+	border-radius: var(--r-sm);
+	cursor: pointer;
+	transition:
+		color var(--t-fast) var(--ease),
+		border-color var(--t-fast) var(--ease);
+}
+
+.chat__attach:hover:not(:disabled) {
+	color: var(--primary);
+	border-color: var(--primary);
+}
+
+.chat__attach:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.chat__attach-input {
+	display: none;
+}
+
+/* The work card: preview or code, floating on the right of the conversation.
+   A click opens the same content full screen. */
+.work-card {
+	position: relative;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	min-width: 0;
+	min-height: 0;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow:
+		0 1px 2px rgb(16 24 40 / 6%),
+		0 18px 40px rgb(16 24 40 / 8%);
+	overflow: hidden;
+	transition:
+		box-shadow var(--t-base) var(--ease),
+		border-color var(--t-base) var(--ease);
+}
+
+.work-card:hover {
+	border-color: var(--primary-soft);
+	box-shadow:
+		0 1px 2px rgb(16 24 40 / 8%),
+		0 24px 52px rgb(16 24 40 / 12%);
+}
+
+.work-card__head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 12px;
+	border-bottom: 1px solid var(--line-2);
+}
+
+.work-card__stage {
+	position: relative;
+	min-width: 0;
+	min-height: 0;
+	background: var(--surface-2);
+	overflow: hidden;
+}
+
+.work-card__stage--code {
+	overflow-y: auto;
+	background: var(--bg);
+}
+
+/* The preview renders at a real workspace width and is scaled to the card, so
+   the card shows the true desktop layout instead of a narrow rendering. */
+.work-card__viewport {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+}
+
+.work-card__viewport .preview-frame {
+	width: 1440px;
+	height: 900px;
+	transform-origin: top left;
+}
+
+.work-card__open {
+	position: absolute;
+	inset: 0;
+	z-index: 2;
+	display: grid;
+	place-items: center;
+	padding: 0;
+	background: transparent;
+	border: 0;
+	cursor: zoom-in;
+}
+
+.work-card__hint {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 10px;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--ink-0);
+	background: rgb(16 24 40 / 72%);
+	border-radius: var(--r);
+	opacity: 0;
+	transition: opacity var(--t-base) var(--ease);
+}
+
+.work-card__open:hover .work-card__hint,
+.work-card__open:focus-visible .work-card__hint {
+	opacity: 1;
+}
+
+.work-card__foot {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 12px;
+	border-top: 1px solid var(--line-2);
+}
+
+/* Full-screen workbench: the same preview at working size, or the diff. */
+.workbench {
+	position: fixed;
+	inset: 0;
+	z-index: 80;
+	display: grid;
+	place-items: center;
+	padding: 24px;
+	background: rgb(12 18 34 / 55%);
+}
+
+.workbench__panel {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	width: min(1600px, 100%);
+	height: min(960px, 100%);
+	min-width: 0;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
+	overflow: hidden;
+}
+
+.workbench__head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 14px;
+	border-bottom: 1px solid var(--line);
+}
+
+.workbench__body {
+	position: relative;
+	min-width: 0;
+	min-height: 0;
+	background: var(--surface-2);
+	overflow: hidden;
+}
+
+.workbench__body--scroll {
+	overflow-y: auto;
+	background: var(--bg);
+}
+
+.preview-frame {
+	width: 100%;
+	height: 100%;
+	border: 0;
+	background: var(--surface);
+}
+
+.preview-frame__wrap {
+	position: relative;
+	min-height: 0;
+	background: var(--surface-2);
+}
+
+.preview-frame__wrap--selecting::after {
+	position: absolute;
+	inset: 0;
+	content: '';
+	border: 2px dashed var(--primary);
+	pointer-events: none;
+}
+
+/* Eject: a delivery screen, not a banner. */
+.eject__panel {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	width: min(560px, 100%);
+	max-height: min(680px, 100%);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
+	overflow: hidden;
+}
+
+.eject__head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 14px 18px;
+	border-bottom: 1px solid var(--line-2);
+}
+
+.eject__title {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: var(--text-lg);
+	font-weight: 600;
+}
+
+.eject__body {
+	display: grid;
+	align-content: start;
+	gap: 14px;
+	min-height: 0;
+	padding: 18px;
+	overflow-y: auto;
+}
+
+.eject__lead {
+	margin: 0;
+	font-size: var(--text-md);
+}
+
+.eject__steps {
+	display: grid;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.eject__step {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-size: var(--text-md);
+	color: var(--ink-3);
+}
+
+.eject__step--passed {
+	color: var(--ink);
+}
+
+.eject__step--failed {
+	color: var(--danger);
+}
+
+.eject__step--note {
+	color: var(--warning);
+}
+
+.eject__error {
+	display: block;
+	max-height: 40vh;
+	overflow: auto;
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.eject__step--running {
+	color: var(--primary-hover);
+}
+
+.eject__step-dot {
+	width: 6px;
+	height: 6px;
+	background: var(--ink-4);
+	border-radius: 50%;
+}
+
+.eject__step-icon {
+	display: inline-grid;
+	place-items: center;
+	width: 22px;
+	height: 22px;
+	background: var(--surface-2);
+	border-radius: 50%;
+}
+
+.eject__step--passed .eject__step-icon {
+	color: var(--success);
+	background: var(--success-bg);
+}
+
+.eject__step--failed .eject__step-icon {
+	color: var(--danger);
+	background: var(--danger-bg);
+}
+
+.eject__step-icon--spin {
+	color: var(--primary);
+	background: var(--primary-tint);
+	animation: eject-spin 1.1s linear infinite;
+}
+
+@keyframes eject-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.eject__step-icon--spin {
+		animation: none;
+	}
+}
+
+.eject__step-label {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.eject__step-detail {
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+	overflow-wrap: anywhere;
+}
+
+.eject__done {
+	display: grid;
+	gap: 4px;
+	padding: 14px 16px;
+	background: var(--success-bg);
+	border: 1px solid var(--success-line);
+	border-radius: var(--r);
+}
+
+.eject__body .ui-checkbox {
+	margin-top: 4px;
+	padding-top: 10px;
+	border-top: 1px solid var(--line-2);
+}
+
+.eject__foot {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 12px 18px;
+	border-top: 1px solid var(--line-2);
+}
+
+/* GitHub delivery settings use the same calm, three-part modal anatomy as the
+   eject plan. Secrets stay write-only and the form remains scannable. */
+.github-settings__panel {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	width: min(720px, 100%);
+	max-height: min(760px, 100%);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
+	overflow: hidden;
+}
+
+.github-settings__head,
+.github-settings__foot {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 14px 18px;
+}
+
+.github-settings__head {
+	border-bottom: 1px solid var(--line-2);
+}
+
+.github-settings__title {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: var(--text-lg);
+	font-weight: 600;
+}
+
+.github-settings__body {
+	display: grid;
+	gap: 14px;
+	min-height: 0;
+	padding: 18px;
+	overflow-y: auto;
+}
+
+.github-settings__body > .ui-help {
+	margin: 0;
+}
+
+.github-settings__foot {
+	justify-content: flex-end;
+	border-top: 1px solid var(--line-2);
+}
+
+/* Session picker */
+.sessions {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 18px;
+	width: min(calc(var(--sidebar-w) * 5), 100%);
+	margin: 0 auto;
+	padding: 8px 0 24px;
+}
+
+.sessions > * {
+	min-width: 0;
+}
+
+.sessions__actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5em;
+}
+
+.sessions__head {
+	display: grid;
+	gap: 6px;
+}
+
+.sessions__head h1 {
+	margin: 0;
+	font-size: var(--text-2xl);
+	letter-spacing: -0.01em;
+}
+
+.sessions__head p {
+	margin: 0;
+	font-size: var(--text-md);
+	color: var(--ink-3);
+}
+
+.sessions__start {
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
+}
+
+.sessions__brief {
+	min-height: 108px;
+	font-size: var(--text-base);
+	line-height: 1.55;
+	resize: vertical;
+}
+
+.sessions__composer {
+	display: grid;
+	gap: 10px;
+	padding: 16px;
+}
+
+.sessions__composer-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.sessions__blocked {
+	display: grid;
+	gap: 6px;
+	margin: 12px 0 0;
+	padding: 0;
+	list-style: none;
+}
+
+.sessions__blocked li {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+.sessions__team {
+	margin: 10px 0 0;
+}
+
+.sessions__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 12px;
+}
+
+.sessions__toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+/* The card opens the session; its actions sit in a corner of their own so a
+   click on the menu never opens the session by accident. */
+.session-card {
+	position: relative;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	transition:
+		border-color var(--t-base) var(--ease),
+		box-shadow var(--t-base) var(--ease),
+		transform var(--t-base) var(--ease);
+}
+
+.session-card:hover {
+	border-color: var(--primary-soft);
+	box-shadow: 0 8px 20px rgb(16 24 40 / 8%);
+	transform: translateY(-1px);
+}
+
+.session-card--archived {
+	opacity: 0.72;
+}
+
+.session-card__open {
+	display: grid;
+	align-content: start;
+	gap: 10px;
+	width: 100%;
+	padding: 16px 44px 16px 16px;
+	font: inherit;
+	color: inherit;
+	text-align: left;
+	background: transparent;
+	border: 0;
+	border-radius: var(--r-lg);
+	cursor: pointer;
+}
+
+.session-card__actions {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+}
+
+.session-card__menu {
+	display: grid;
+	width: 28px;
+	height: 28px;
+	place-items: center;
+	color: var(--ink-3);
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--r);
+	cursor: pointer;
+}
+
+.session-card__menu:hover,
+.session-card__menu[aria-expanded='true'] {
+	color: var(--ink);
+	background: var(--surface-2);
+	border-color: var(--line);
+}
+
+.session-card__panel {
+	position: absolute;
+	top: calc(100% + 4px);
+	right: 0;
+	z-index: 30;
+	width: 260px;
+}
+
+.session-card__confirm {
+	margin: 0;
+	padding: 6px 8px 10px;
+}
+
+.session-card__title {
+	display: grid;
+	gap: 2px;
+	min-width: 0;
+}
+
+.session-card__title b {
+	font-size: var(--text-base);
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+
+.session-card__title small {
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+	overflow-wrap: anywhere;
+}
+
+.session-card__meta {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+
+.session-card__meta small {
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+.session-card__foot {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+}
+
+/* Diff */
+.diff {
+	display: grid;
+	gap: 12px;
+	min-width: 0;
+}
+
+.diff__group {
+	display: grid;
+	gap: 12px;
+	min-width: 0;
+}
+
+/* One header per module, so a session that spans modules reads as grouped
+   files instead of one long list. */
+.diff__module {
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+	padding: 0 2px;
+}
+
+.diff__file {
+	min-width: 0;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-md);
+	overflow: hidden;
+}
+
+.diff__file-head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	background: var(--surface-2);
+	border-bottom: 1px solid var(--line);
+}
+
+.diff__path {
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	overflow-wrap: anywhere;
+}
+
+.diff__stat {
+	font-family: var(--font-mono);
+	font-size: var(--text-xs);
+}
+
+.diff__stat--add {
+	color: var(--success);
+}
+
+.diff__stat--del {
+	color: var(--danger);
+}
+
+.diff__hunk {
+	overflow-x: auto;
+	border-top: 1px solid var(--line-2);
+}
+
+.diff__hunk-header {
+	padding: 4px 12px;
+	font-family: var(--font-mono);
+	font-size: var(--text-xs);
+	color: var(--ink-3);
+	background: var(--surface-2);
+}
+
+.diff__line {
+	display: grid;
+	grid-template-columns: 48px 1fr;
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	line-height: 1.5;
+	white-space: pre;
+}
+
+.diff__line--add {
+	background: var(--success-bg);
+}
+
+.diff__line--del {
+	background: var(--danger-bg);
+}
+
+.diff__gutter {
+	padding: 0 8px;
+	color: var(--ink-4);
+	text-align: right;
+	user-select: none;
+}
+
+.diff__code {
+	padding: 0 12px;
+	overflow-wrap: normal;
+}
+
+/* Syntax tokens, tuned for both diff backgrounds. */
+.tok-keyword {
+	color: var(--primary-hover);
+	font-weight: 500;
+}
+
+.tok-string {
+	color: var(--success);
+}
+
+.tok-comment {
+	color: var(--ink-4);
+	font-style: italic;
+}
+
+.tok-number {
+	color: var(--warning);
+}
+
+.tok-type {
+	color: var(--brand-weft);
+}
+
+/* Connect screen */
+.connect {
+	display: grid;
+	place-items: center;
+	min-height: 100vh;
+	padding: 32px 16px;
+	background: var(--bg);
+}
+
+.connect__card {
+	width: min(560px, 100%);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+}
+
+.connect__head {
+	display: grid;
+	gap: 6px;
+	padding: 22px 24px 0;
+}
+
+.connect__head h1 {
+	margin: 0;
+	font-size: var(--text-2xl);
+}
+
+.connect__head p {
+	margin: 0;
+	font-size: var(--text-md);
+	color: var(--ink-3);
+}