cozyclay 1.9.0 → 2.0.0

package/src/shell/agent-glass.css

@@ -0,0 +1,296 @@
+/* The Agent inside the floating-glass shell (#570 follow-up). Unlayered and
+   rooted at the shell, so it outranks src/workflow/agent-panel.css (layer
+   legacy) here and leaves the Workflow builder's own look alone. Colours come
+   from the theme tokens (src/styles/themes.css), so light and dark follow.
+
+   The panel is a conversation first: a 44px head of icon buttons, the
+   transcript taking every spare pixel, and one composer field whose controls
+   sit inside it. Who is signed in lives in the ⋯ menu, the activity line only
+   speaks when something is happening, and cards are quiet tinted surfaces
+   instead of bordered boxes. */
+
+.app[data-shell="glass"] .studio-agent-inspector .agent-panel {
+	font: 400 12.5px/1.5 var(--sans);
+	color: var(--text-1);
+}
+
+/* ------------------------------------------------------------------ head */
+.app[data-shell="glass"] .studio-agent-inspector .agent-header {
+	gap: 2px;
+	height: 44px;
+	min-height: 44px;
+	padding: 0 44px 0 14px;
+	border: 0;
+	background: none;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-title { font: 600 13px var(--sans); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-status-dot { display: none; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-icon-button {
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border: 0;
+	border-radius: 14px;
+	background: none;
+	color: var(--text-2);
+	transition: background-color .12s ease, color .12s ease;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-icon-button:hover:not([disabled]),
+.app[data-shell="glass"] .studio-agent-inspector .agent-icon-button[aria-expanded="true"] { background: var(--chip-fill); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-collapse { top: 8px; right: 8px; }
+
+/* ⋯ menu, with the account at its top. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-menu,
+.app[data-shell="glass"] .studio-agent-inspector .agent-history-popover {
+	min-width: 200px;
+	padding: 4px;
+	border: 0;
+	border-radius: 12px;
+	background: var(--surface-raised);
+	box-shadow: var(--panel-shadow-outer);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-menu button,
+.app[data-shell="glass"] .studio-agent-inspector .agent-history-item {
+	height: 30px;
+	padding: 0 10px;
+	border-radius: 8px;
+	color: var(--text-1);
+	font: 400 12.5px var(--sans);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-menu button:hover,
+.app[data-shell="glass"] .studio-agent-inspector .agent-history-item:hover { background: var(--chip-fill); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-account {
+	flex-wrap: wrap;
+	gap: 6px;
+	margin: 0 0 4px;
+	padding: 8px 10px 10px;
+	border: 0;
+	box-shadow: inset 0 -1px 0 var(--hairline);
+	background: none;
+	color: var(--text-2);
+	font-size: 12px;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-plan-badge {
+	padding: 1px 6px;
+	border: 0;
+	border-radius: 6px;
+	background: var(--chip-fill);
+	color: var(--text-2);
+	font: 600 9.5px var(--sans);
+	letter-spacing: .04em;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-account-reset { margin-left: 0; flex-basis: 100%; color: var(--text-3); font-size: 11px; }
+
+/* One-line notices: words under the head, not a filled band. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-toast {
+	padding: 0 14px 6px;
+	border: 0;
+	background: none;
+	color: var(--text-3);
+	font-size: 11.5px;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-toast.alert { color: var(--danger); background: none; }
+
+/* ------------------------------------------------------------ transcript */
+.app[data-shell="glass"] .studio-agent-inspector .agent-transcript { gap: 14px; padding: 6px 14px 12px; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-bubble {
+	padding: 7px 11px;
+	border: 0;
+	border-radius: 14px 14px 4px 14px;
+	background: var(--select-tint);
+	color: var(--text-1);
+	font-size: 12.5px;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-assistant-text { color: var(--text-1); font-size: 12.5px; line-height: 1.55; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-caret { color: var(--select); }
+
+/* Empty state: a short line and the suggestions, no box around them. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-state-card {
+	gap: 4px;
+	margin: 0;
+	padding: 8px 0 0;
+	border: 0;
+	background: none;
+	text-align: left;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-state-card h3 { color: var(--text-1); font: 600 13px var(--sans); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-state-card p { color: var(--text-2); font-size: 12px; line-height: 1.5; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-suggestions { gap: 4px; margin-top: 10px; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-chip {
+	padding: 7px 10px;
+	border: 0;
+	border-radius: 10px;
+	background: var(--field-fill);
+	color: var(--text-1);
+	font-size: 12px;
+	line-height: 1.35;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-chip:hover { background: var(--chip-fill); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-primary-button {
+	padding: 7px 14px;
+	border: 0;
+	border-radius: 15px;
+	background: var(--select);
+	color: var(--on-select);
+	font: 600 12px var(--sans);
+}
+
+/* Cards: tinted surfaces with a hairline, in the theme's ink. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-card,
+.app[data-shell="glass"] .studio-agent-inspector .agent-job-card,
+.app[data-shell="glass"] .studio-agent-inspector .agent-receipt-card,
+.app[data-shell="glass"] .studio-agent-inspector .agent-failure-card,
+.app[data-shell="glass"] .studio-agent-inspector .agent-paused {
+	border: 0;
+	border-radius: 12px;
+	background: var(--card-fill);
+	box-shadow: var(--card-ring);
+	color: var(--text-1);
+	font-size: 12px;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-card.failed,
+.app[data-shell="glass"] .studio-agent-inspector .agent-failure-card,
+.app[data-shell="glass"] .studio-agent-inspector .agent-job-card[data-job-state="stale_environment"] {
+	background: color-mix(in srgb, var(--danger) 6%, transparent);
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-paused {
+	background: color-mix(in srgb, #d9a23b 9%, transparent);
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9a23b 28%, transparent);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-job-card[data-job-state="installed"] {
+	background: color-mix(in srgb, var(--ok) 7%, transparent);
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-error,
+.app[data-shell="glass"] .studio-agent-inspector .agent-failure-card .agent-error {
+	border-top: 1px solid var(--hairline);
+	background: none;
+	color: var(--text-1);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-failure-code,
+.app[data-shell="glass"] .studio-agent-inspector .agent-tool-elapsed,
+.app[data-shell="glass"] .studio-agent-inspector .agent-tool-detail {
+	color: var(--text-3);
+	font: 500 11px var(--sans);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-failure-code { color: var(--danger); text-transform: none; letter-spacing: 0; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-tool-badge { border: 0; background: var(--chip-fill); color: var(--text-2); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-image-actions button,
+.app[data-shell="glass"] .studio-agent-inspector .agent-image-actions a,
+.app[data-shell="glass"] .studio-agent-inspector .agent-paused-actions button,
+.app[data-shell="glass"] .studio-agent-inspector .agent-error-actions button,
+.app[data-shell="glass"] .studio-agent-inspector .agent-job-actions button {
+	border: 0;
+	border-radius: 13px;
+	background: var(--chip-fill);
+	color: var(--text-1);
+	font: 500 11.5px var(--sans);
+}
+
+/* -------------------------------------------- activity: only when busy */
+.app[data-shell="glass"] .studio-agent-inspector .agent-activity {
+	min-height: 0;
+	padding: 0 16px 6px;
+	border: 0;
+	background: none;
+	color: var(--text-2);
+	font-size: 11.5px;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-activity[data-agent-activity-kind="idle"] { display: none; }
+
+/* ------------------------------------------------------------- composer */
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer {
+	gap: 6px;
+	padding: 0 10px 10px;
+	border: 0;
+	background: none;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-field {
+	display: flex;
+	flex-direction: column;
+	padding: 8px 6px 6px 12px;
+	border-radius: 14px;
+	background: var(--field-fill);
+	transition: box-shadow .12s ease;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-field:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--select) 55%, transparent); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer textarea {
+	height: 40px;
+	padding: 0 6px 0 0;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	color: var(--text-1);
+	font: 400 12.5px/1.5 var(--sans);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer textarea::placeholder { color: var(--text-3); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer-controls { gap: 2px; margin: 4px 0 0 -6px; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-attach-chip {
+	display: grid;
+	place-items: center;
+	flex: none;
+	width: 26px;
+	height: 26px;
+	padding: 0;
+	border: 0;
+	border-radius: 13px;
+	background: none;
+	color: var(--text-2);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-attach-chip:hover:not([disabled]) { background: var(--chip-fill); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-attach-chip[aria-pressed="true"] { background: var(--select-tint); color: var(--select); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-attach-chip[disabled] { opacity: .35; cursor: default; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-attach-thumb { width: 16px; height: 11px; border: 0; border-radius: 2px; background: var(--select); }
+/* Model and effort read as quiet words with a caret, not boxed fields. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-model-select {
+	-webkit-appearance: none;
+	appearance: none;
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 132px;
+	height: 26px;
+	padding: 0 18px 0 8px;
+	border: 0;
+	border-radius: 13px;
+	background: none url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%238e8e96' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4 5 6.5 7.5 4'/%3E%3C/svg%3E") right 6px center / 9px no-repeat;
+	color: var(--text-2);
+	font: 500 11.5px var(--sans);
+	text-overflow: ellipsis;
+	cursor: pointer;
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-model-select:hover { background-color: var(--chip-fill); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-effort-select { flex: none; max-width: none; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-model-select optgroup,
+.app[data-shell="glass"] .studio-agent-inspector .agent-model-select option { background: var(--surface-raised); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-send {
+	display: grid;
+	place-items: center;
+	flex: none;
+	width: 28px;
+	height: 28px;
+	margin-left: 2px;
+	padding: 0;
+	border: 0;
+	border-radius: 14px;
+	background: var(--select);
+	color: var(--on-select);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-send[disabled] { background: var(--chip-fill); color: var(--text-3); opacity: 1; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-send.stop,
+.app[data-shell="glass"] .studio-agent-inspector .agent-send.agent-steer {
+	width: auto;
+	padding: 0 12px;
+	font: 600 11.5px var(--sans);
+}
+.app[data-shell="glass"] .studio-agent-inspector .agent-send.stop { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-attachment { border: 0; border-radius: 8px; box-shadow: var(--card-ring); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-attachment-notice { color: var(--text-2); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer[data-agent-dropping="true"] { background: none; box-shadow: none; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer[data-agent-dropping="true"] .agent-field { box-shadow: inset 0 0 0 1px var(--select); background: var(--select-tint); }
+
+/* Provider keys: the same quiet rows. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-keys { margin: 0 10px 8px; border: 0; border-radius: 12px; background: var(--card-fill); box-shadow: var(--card-ring); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-key-input { border: 0; border-radius: 8px; background: var(--field-fill); color: var(--text-1); }

package/src/shell/dock.css

@@ -0,0 +1,93 @@
+/* Restate the global layer order: this sheet can load before styles.css. */
+@layer tokens, legacy, shell, regions;
+
+@layer regions {
+	/* v2 bottom dock (G10/G11): Content | Log on the left at 620 px, the
+	   Sequencer filling the rest. Collapsing Content leaves its 36 px header as
+	   a full-width row and hands the Sequencer the whole width. */
+	.app:not([data-embed-mode]) .bottom-window.v2-dock {
+		--dock-content-width: 620px;
+		--dock-header-height: 36px;
+		--dock-handle-hit: 7px;
+		--dock-handle-line: 1px;
+		position: relative;
+		display: grid;
+		grid-template-columns: var(--dock-content-width) minmax(0, 1fr);
+		grid-template-rows: minmax(0, 1fr);
+		gap: var(--dock-handle-line);
+		height: 100%;
+		border: 0;
+		background: var(--surface-0, #070708);
+	}
+
+	.app:not([data-embed-mode]) .v2-dock > .assets-pane {
+		grid-column: 1;
+		grid-row: 1;
+		height: auto;
+		min-height: 0;
+		max-height: none;
+		min-width: 0;
+		padding: 0;
+		overflow: hidden;
+		background: var(--surface-panel, #151517);
+	}
+
+	/* The Sequencer follows the dock's height instead of its own 330 px
+	   floor, so a resized dock keeps the transport in view and the lanes
+	   scroll inside it. */
+	.app:not([data-embed-mode]) .v2-dock > .bottom-timeline {
+		--timeline-height: 100%;
+		--tl-v2-height: 0px;
+		grid-column: 2;
+		grid-row: 1;
+	}
+
+	.app:not([data-embed-mode]) .v2-dock[data-content-collapsed] {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: var(--dock-header-height) minmax(0, 1fr);
+	}
+
+	.app:not([data-embed-mode]) .v2-dock[data-content-collapsed] > .bottom-timeline {
+		grid-column: 1;
+		grid-row: 2;
+	}
+
+	/* The dock owns its resize edge now; the shell's older splitter used a
+	   [110 px, 58vh] range and would fight this one over the same pixels. */
+	.app:not([data-embed-mode]) .studio-dock-slot > .timeline-splitter {
+		display: none;
+	}
+
+	.app:not([data-embed-mode]) .v2-dock-resize {
+		position: absolute;
+		z-index: 8;
+		top: calc(var(--dock-handle-hit) / -2);
+		left: 0;
+		right: 0;
+		height: var(--dock-handle-hit);
+		cursor: row-resize;
+		touch-action: none;
+		outline: none;
+	}
+
+	.app:not([data-embed-mode]) .v2-dock-resize::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: calc((var(--dock-handle-hit) - var(--dock-handle-line)) / 2);
+		height: var(--dock-handle-line);
+		background: transparent;
+		transition: background-color .12s ease;
+	}
+
+	.app:not([data-embed-mode]) .v2-dock-resize:hover::after,
+	.app:not([data-embed-mode]) .v2-dock-resize:focus-visible::after,
+	body.resize-timeline .app:not([data-embed-mode]) .v2-dock-resize::after {
+		background: var(--select, #e8a33d);
+	}
+
+	.app[data-embed-mode] .v2-dock-resize {
+		display: none;
+	}
+}