diff --git a/artifacts/studio2-display-ux/REJECT-current-bench.png b/artifacts/studio2-display-ux/REJECT-current-bench.png
new file mode 100644
index 0000000..5e5886e
Binary files /dev/null and b/artifacts/studio2-display-ux/REJECT-current-bench.png differ
diff --git a/artifacts/studio2-display-ux/TARGET-classic-layout.png b/artifacts/studio2-display-ux/TARGET-classic-layout.png
new file mode 100644
index 0000000..4ce0604
Binary files /dev/null and b/artifacts/studio2-display-ux/TARGET-classic-layout.png differ
diff --git a/assets/css/display.css b/assets/css/display.css
index 27d5e78..2d66e08 100644
--- a/assets/css/display.css
+++ b/assets/css/display.css
@@ -1,343 +1,645 @@
-/* AIGen display tokens — Classic | Studio
- Apply on [data-display] wrapper. Do not fork components.
- Copied from studio2-display-ux/tokens/display.css */
+/* Pixel grid tokens — Classic | Studio. Match TARGET-classic-layout.png */
:root,
[data-display='studio'] {
- --bg: #0e0e10;
- --bg-raise: #161618;
- --bg-slot: #1c1c1f;
+ --bg: #0b0b0d;
+ --panel: #141416;
+ --panel-raise: #1a1a1d;
--line: #2a2a2e;
--text: #f3f1ea;
--muted: #9a9588;
--amber: #f5a524;
- --amber-dim: #c4841c;
+ --amber-on: #1a1204;
+ --chip-bg: #2a2418;
+ --chip-line: #5a4a28;
+ --chip-text: #e8c37a;
+ --success: #7dda6f;
--radius: 8px;
- --chrome-gap: 16px;
- --rail-h: 40px;
- --card-pad: 14px;
- --header-h: 52px;
+ --page-gap: 12px;
+ --field-gap: 12px;
+ --header-h: 48px;
+ --rail-task-h: 40px;
+ --rail-model-h: 36px;
+ --left-w: 260px;
+ --right-w: 280px;
--type: 14px;
--type-sm: 12px;
+ --type-label: 11px;
}
[data-display='classic'] {
- --chrome-gap: 8px;
- --rail-h: 32px;
- --card-pad: 10px;
- --header-h: 44px;
+ --field-gap: 8px;
--type: 13px;
}
[data-display] {
background: var(--bg);
color: var(--text);
+ font-family: ui-sans-serif, system-ui, sans-serif;
font-size: var(--type);
}
-[data-display] .display-app {
- display: flex;
- min-height: 100%;
- flex-direction: column;
- gap: var(--chrome-gap);
- padding: var(--chrome-gap);
+/* Skin toggles */
+[data-display='classic'] .rail-task,
+[data-display='classic'] .rail-model,
+[data-display='classic'] .identity-slots,
+[data-display='classic'] .eye-viewer,
+[data-display='classic'] .eye-tile {
+ display: none !important;
+}
+[data-display='studio'] .classic-task-model,
+[data-display='studio'] .viewer-lock-bar {
+ display: none !important;
}
-[data-display] .display-top {
+.bench-root {
display: flex;
+ height: 100dvh;
+ max-height: 100dvh;
+ flex-direction: column;
+ overflow: hidden;
+ background: var(--bg);
+ color: var(--text);
+}
+
+.bench-header {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
height: var(--header-h);
min-height: var(--header-h);
- flex-wrap: wrap;
- align-items: center;
- gap: 12px;
- border: 1px solid var(--line);
- border-radius: var(--radius);
- background: var(--bg-raise);
+ flex-shrink: 0;
+ border-bottom: 1px solid var(--line);
padding: 0 12px;
+ background: var(--bg);
}
-[data-display] .display-brand {
+.bench-brand {
font-weight: 650;
letter-spacing: 0.02em;
}
-[data-display] .display-grow {
- flex: 1;
+.bench-crumb {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--muted);
+ font-size: var(--type-sm);
}
-[data-display] .display-nav {
+.bench-crumb select {
+ max-width: 14rem;
+ border: 0;
+ background: transparent;
+ color: var(--text);
+ font: inherit;
+ outline: none;
+ cursor: pointer;
+}
+
+.bench-header-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 14px;
+}
+
+.bench-nav {
display: flex;
gap: 14px;
font-size: var(--type-sm);
color: var(--muted);
}
-[data-display] .display-nav a {
+.bench-nav a {
color: inherit;
- outline: none;
+ text-decoration: none;
}
-[data-display] .display-nav a:hover,
-[data-display] .display-nav a.router-link-active {
- color: var(--text);
+.bench-nav a:hover,
+.bench-nav a.router-link-active {
+ color: var(--amber);
font-weight: 600;
}
-[data-display] .display-nav a:focus-visible {
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
- border-radius: 4px;
-}
-
-[data-display] .identity-header,
-[data-display] .classic-hide,
-[data-display] .identity-slots {
- display: flex;
- flex-wrap: wrap;
+.gpu-chip {
+ display: inline-flex;
align-items: center;
- gap: 10px;
+ gap: 8px;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ background: var(--panel-raise);
+ padding: 8px 12px;
font-size: var(--type-sm);
- color: var(--muted);
+ color: var(--text);
}
-[data-display] .identity-slots {
- flex-direction: column;
- align-items: flex-start;
- margin-top: 8px;
+.gpu-chip .dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 999px;
+ background: var(--muted);
}
-[data-display] .identity-slots .hint {
- margin: 6px 0 0;
- font-size: 11px;
- color: var(--muted);
+.gpu-chip[data-tone='ready'] .dot { background: var(--success); }
+.gpu-chip[data-tone='busy'] .dot { background: var(--amber); animation: pulse 1.2s infinite; }
+
+@keyframes pulse {
+ 50% { opacity: 0.45; }
}
-[data-display] .rail {
+.rail {
display: flex;
+ flex-shrink: 0;
flex-wrap: wrap;
gap: 6px;
+ padding: 0 12px;
}
-[data-display] .seg {
- height: var(--rail-h);
- cursor: pointer;
+.rail-task { min-height: var(--rail-task-h); align-items: center; padding-top: 8px; }
+.rail-model { min-height: var(--rail-model-h); align-items: center; padding-bottom: 8px; }
+
+.seg {
+ height: 36px;
border: 1px solid var(--line);
border-radius: var(--radius);
- background: var(--bg-slot);
- padding: 0 12px;
+ background: var(--panel);
+ padding: 0 14px;
color: var(--muted);
font-size: var(--type);
+ font-weight: 600;
+ text-transform: capitalize;
outline: none;
+ cursor: pointer;
}
-[data-display] .seg:focus-visible {
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
-}
+.rail-model .seg { height: 32px; font-weight: 500; }
-[data-display] .seg[aria-pressed='true'] {
+.seg[aria-pressed='true'] {
border-color: var(--amber);
- background: #2a1f0c;
- color: var(--amber);
+ background: var(--amber);
+ color: var(--amber-on);
}
-[data-display] .seg:disabled,
-[data-display] .seg[aria-disabled='true'] {
- cursor: not-allowed;
+.seg:disabled {
opacity: 0.45;
+ cursor: not-allowed;
}
-[data-display] .classic-selects {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
+.seg:focus-visible {
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);
}
-[data-display] .classic-selects select {
- height: var(--rail-h);
- border: 1px solid var(--line);
- border-radius: var(--radius);
- background: var(--bg-slot);
- padding: 0 8px;
- color: var(--text);
- outline: none;
-}
-
-[data-display] .classic-selects select:focus-visible {
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
-}
-
-[data-display] .display-grid {
+.bench-grid {
display: grid;
flex: 1;
- gap: var(--chrome-gap);
- min-width: 0;
+ min-height: 0;
+ grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
+ gap: var(--page-gap);
+ padding: var(--page-gap);
}
-@media (min-width: 1280px) {
- [data-display] .display-grid {
- grid-template-columns: minmax(14rem, 15rem) minmax(0, 1fr) minmax(16rem, 18rem);
- }
- [data-display] .display-grid--music {
- grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
- }
-}
-
-[data-display] .display-col {
- min-width: 0;
- border: 1px solid var(--line);
- border-radius: var(--radius);
- background: var(--bg-raise);
- padding: var(--card-pad);
-}
-
-[data-display] .display-viewer {
- position: relative;
- display: grid;
- min-height: 320px;
- place-items: center;
- overflow: hidden;
- border: 1px solid var(--line);
- border-radius: var(--radius);
- background: #111;
- color: var(--muted);
-}
-
-[data-display] .eye-viewer {
- position: absolute;
- top: 8px;
- right: 8px;
- z-index: 10;
- border: 1px solid var(--line);
- border-radius: 6px;
- background: #000a;
- padding: 4px;
- color: var(--text);
- outline: none;
-}
-
-[data-display] .eye-viewer:focus-visible,
-[data-display] .eye-tile:focus-visible {
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
-}
-
-[data-display] .display-strip {
+.bench-panel {
display: flex;
- gap: 8px;
- margin-top: 10px;
- max-width: 100%;
- overflow-x: auto;
-}
-
-[data-display] .display-tile {
- position: relative;
- width: 72px;
- height: 48px;
- flex-shrink: 0;
+ min-width: 0;
+ min-height: 0;
+ flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
- border-radius: 6px;
- background: #222;
-}
-
-[data-display] .display-tile[data-active='true'] {
- border-color: var(--amber);
-}
-
-[data-display] .eye-tile {
- position: absolute;
- top: 2px;
- right: 2px;
- display: grid;
- width: 16px;
- height: 16px;
- place-items: center;
- border: 0;
- border-radius: 3px;
- background: #000a;
- padding: 0;
- color: var(--text);
- outline: none;
-}
-
-[data-display] .display-cta {
- width: 100%;
- height: 44px;
- margin-top: 10px;
- cursor: pointer;
- border: 0;
border-radius: var(--radius);
- background: var(--amber);
- color: #1a1204;
- font-weight: 700;
- outline: none;
+ background: var(--panel);
}
-[data-display] .display-cta:focus-visible {
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
+.bench-scroll {
+ flex: 1;
+ min-height: 0;
+ overflow: auto;
+ padding: 12px;
}
-[data-display] .display-cta:disabled {
- cursor: not-allowed;
- opacity: 0.5;
+.inspector {
+ display: flex;
+ flex-direction: column;
+ gap: var(--field-gap);
}
-[data-display] .display-field {
+.field-label {
+ display: block;
+ margin-bottom: 4px;
+ color: var(--muted);
+ font-size: var(--type-label);
+ text-transform: none;
+}
+
+.field-control {
width: 100%;
+ height: 36px;
border: 1px solid var(--line);
border-radius: var(--radius);
- background: var(--bg-slot);
- padding: 8px;
+ background: var(--panel-raise);
+ padding: 0 10px;
color: var(--text);
font: inherit;
outline: none;
}
-[data-display] .display-field:focus-visible {
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
+.field-control:focus-visible,
+.field-area:focus-visible {
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);
}
-[data-display] .display-gpu-pill {
+.field-area {
+ width: 100%;
+ min-height: 88px;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ background: var(--panel-raise);
+ padding: 8px 10px;
+ color: var(--text);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 13px;
+ line-height: 1.4;
+ resize: vertical;
+ outline: none;
+}
+
+.neg-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.neg-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ border: 1px solid var(--chip-line);
+ border-radius: 999px;
+ background: var(--chip-bg);
+ padding: 4px 10px;
+ color: var(--chip-text);
+ font-size: var(--type-sm);
+}
+
+.neg-chip button {
+ border: 0;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+ opacity: 0.75;
+}
+
+.seed-row {
+ display: flex;
+ gap: 8px;
+}
+
+.seed-row .field-control { flex: 1; }
+
+.dice-btn {
+ display: grid;
+ width: 36px;
+ height: 36px;
+ place-items: center;
+ flex-shrink: 0;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ background: var(--panel-raise);
+ color: var(--text);
+ cursor: pointer;
+}
+
+.viewer-lock-bar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+ padding: 8px 10px;
+ border-bottom: 1px solid var(--line);
+ color: var(--muted);
+ font-size: var(--type-sm);
+}
+
+.center-stack {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+ flex-direction: column;
+}
+
+.viewer-frame {
+ position: relative;
+ display: grid;
+ flex: 1;
+ min-height: 360px;
+ place-items: center;
+ overflow: hidden;
+ background: #0a0a0c;
+}
+
+.viewer-frame img,
+.viewer-frame video {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+}
+
+.eye-viewer {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 5;
+ display: grid;
+ width: 28px;
+ height: 28px;
+ place-items: center;
+ border: 1px solid var(--line);
+ border-radius: 6px;
+ background: #000a;
+ cursor: pointer;
+}
+
+.filmstrip {
+ display: flex;
+ flex-shrink: 0;
+ gap: 8px;
+ height: 80px;
+ align-items: center;
+ overflow-x: auto;
+ border-top: 1px solid var(--line);
+ padding: 8px 10px;
+ background: var(--panel);
+}
+
+.tile {
+ position: relative;
+ width: 96px;
+ height: 64px;
+ flex-shrink: 0;
+ overflow: hidden;
+ border: 2px solid transparent;
+ border-radius: 6px;
+ background: #222;
+}
+
+@media (min-width: 1440px) {
+ .tile { width: 120px; height: 80px; }
+ .filmstrip { height: 96px; }
+}
+
+.tile[data-active='true'] {
+ border-color: var(--amber);
+}
+
+.tile button.pick {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ background: transparent;
+ padding: 0;
+ cursor: pointer;
+}
+
+.tile img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.tile .eye-tile,
+.tile .tile-trash {
+ position: absolute;
+ top: 3px;
+ right: 3px;
+ display: grid;
+ width: 18px;
+ height: 18px;
+ place-items: center;
+ border: 0;
+ border-radius: 4px;
+ background: #000a;
+ color: var(--text);
+ cursor: pointer;
+}
+
+.tile .tile-trash { right: 22px; }
+
+.transport {
+ display: flex;
+ height: 28px;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: space-between;
+ border-top: 1px solid var(--line);
+ padding: 0 10px;
+ color: var(--muted);
+ font-size: var(--type-sm);
+ font-variant-numeric: tabular-nums;
+}
+
+.transport .ops {
+ display: flex;
+ gap: 8px;
+}
+
+.transport button {
+ border: 0;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+}
+
+.queue-col {
+ display: flex;
+ min-height: 0;
+ flex-direction: column;
+}
+
+.queue-head {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 12px 8px;
+ font-weight: 650;
+}
+
+.queue-badge {
+ display: inline-grid;
+ min-width: 1.25rem;
+ height: 1.25rem;
+ place-items: center;
+ border-radius: 999px;
+ background: var(--amber);
+ color: var(--amber-on);
+ font-size: 11px;
+ font-weight: 700;
+}
+
+.queue-list {
+ flex: 1;
+ min-height: 0;
+ overflow: auto;
+ padding: 0 12px 12px;
+}
+
+.job-card {
+ margin-bottom: 8px;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ background: var(--panel-raise);
+ padding: 10px;
+ cursor: pointer;
+}
+
+.job-card[data-active='true'] {
+ border-width: 2px;
+ border-color: var(--amber);
+}
+
+.job-id {
+ color: var(--muted);
+ font-size: var(--type-sm);
+}
+
+.job-title {
+ margin-top: 2px;
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.job-meta {
+ margin-top: 4px;
+ color: var(--muted);
+ font-size: var(--type-sm);
+}
+
+.job-status {
+ display: flex;
+ margin-top: 8px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ font-size: var(--type-sm);
+}
+
+.job-status .left {
display: inline-flex;
align-items: center;
gap: 6px;
+}
+
+.job-status .dot {
+ width: 7px;
+ height: 7px;
border-radius: 999px;
- border: 1px solid #2d4a2a;
- background: #142016;
- padding: 4px 10px;
- font-size: var(--type-sm);
- color: #b8e0a8;
+ background: var(--success);
}
-[data-display] .display-gpu-pill[data-tone='busy'] {
- border-color: color-mix(in srgb, var(--amber) 40%, transparent);
- background: #2a1f0c;
- color: var(--amber);
+.job-status[data-state='queued'] .dot,
+.job-status[data-state='waiting'] .dot {
+ background: var(--muted);
}
-[data-display] .display-gpu-pill[data-tone='idle'],
-[data-display] .display-gpu-pill[data-tone='off'] {
- border-color: var(--line);
- background: var(--bg-slot);
+.kebab {
+ border: 0;
+ background: transparent;
color: var(--muted);
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
}
-/* Skin toggles — keep after base rules so display:none wins */
-[data-display='classic'] .rail-task,
-[data-display='classic'] .rail-model {
- display: none !important;
+.queue-foot {
+ flex-shrink: 0;
+ border-top: 1px solid var(--line);
+ padding: 12px;
}
-[data-display='studio'] .classic-selects {
- display: none !important;
+
+.generate-cta {
+ display: inline-flex;
+ width: 100%;
+ height: 44px;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ border: 0;
+ border-radius: var(--radius);
+ background: var(--amber);
+ color: var(--amber-on);
+ font-size: 15px;
+ font-weight: 700;
+ cursor: pointer;
}
-[data-display='classic'] .identity-slots {
- display: none !important;
+
+.generate-cta:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
}
-[data-display='studio'] .identity-header {
- display: none !important;
+
+.queue-foot .tiny {
+ margin-top: 8px;
+ text-align: center;
+ color: var(--muted);
+ font-size: 11px;
}
-[data-display='classic'] .eye-tile,
-[data-display='classic'] .eye-viewer {
- display: none !important;
+
+.queue-foot .tiny button {
+ border: 0;
+ background: transparent;
+ color: inherit;
+ text-decoration: underline;
+ cursor: pointer;
}
-[data-display='studio'] .classic-hide {
- display: none !important;
+
+.slot-block { width: 100%; }
+
+.slot-thumb {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ background: #0a0a0c;
+ cursor: pointer;
+}
+
+.slot-thumb--hero { height: 148px; }
+.slot-thumb--slot { height: 96px; }
+.slot-thumb--empty {
+ height: 72px;
+ border-style: dashed;
+ color: var(--muted);
+ font-size: var(--type-sm);
+}
+
+.slot-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.slot-caption {
+ margin-top: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--muted);
+ font-size: var(--type-sm);
+}
+
+.slot-upload {
+ display: inline-block;
+ margin-top: 4px;
+ color: var(--amber);
+ font-size: var(--type-sm);
+ cursor: pointer;
+}
+
+.placeholder-still {
+ color: var(--muted);
+ font-size: var(--type-sm);
}
diff --git a/components/studio2/AssetSlot.vue b/components/studio2/AssetSlot.vue
index 00e5579..146f028 100644
--- a/components/studio2/AssetSlot.vue
+++ b/components/studio2/AssetSlot.vue
@@ -1,8 +1,24 @@
-
+
+
{{ label }}
+
+
{{ assetLabel(asset) }}
+
+
diff --git a/public/icons/display/lock.svg b/public/icons/display/lock.svg
index 991bd2e..e506dd8 100644
--- a/public/icons/display/lock.svg
+++ b/public/icons/display/lock.svg
@@ -1,4 +1,4 @@
-