Add a multi-window board so Generate stays live while refs feed vision.

Keep action buttons only on the latest patch, spin Apply+Generate while busy, and greet on first open.

Co-authored-by: Cursor <cursoragent@cursor.com>

Assets/assistent.css

@@ -24,12 +24,46 @@
 }
 
 .sa-image-pane {
-    flex: 0 0 var(--sa-image-width, 34%);
-    max-width: 40%;
-    min-width: 11rem;
+    flex: 0 0 var(--sa-image-width, 42%);
+    max-width: 56%;
+    min-width: 14rem;
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.45rem;
+}
+
+.sa-board-head {
+    display: flex;
+    align-items: baseline;
+    gap: 0.45rem;
+    min-height: 1.6rem;
+}
+
+.sa-board-title {
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: 0.78rem;
+}
+
+.sa-board-hint {
+    flex: 1;
+    font-size: 0.75rem;
+    opacity: 0.55;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sa-board {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(7.5rem, 1fr);
+    gap: 0.4rem;
+    min-height: 16rem;
+    outline: none;
 }
 
 .sa-splitter {
@@ -47,6 +81,123 @@
     background: color-mix(in srgb, currentColor 35%, transparent);
 }
 
+.sa-slot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background:
+        radial-gradient(ellipse at 30% 20%, color-mix(in srgb, currentColor 8%, transparent), transparent 55%),
+        color-mix(in srgb, currentColor 4%, transparent);
+    min-height: 7.5rem;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.sa-slot.sa-has-image {
+    border-style: solid;
+}
+
+.sa-slot.sa-selected {
+    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
+    border-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+
+.sa-slot.sa-dragover {
+    border-color: color-mix(in srgb, currentColor 70%, transparent);
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
+}
+
+.sa-slot.sa-slot-gen {
+    grid-column: 1 / -1;
+    min-height: 10rem;
+}
+
+.sa-board.sa-board-many .sa-slot.sa-slot-gen {
+    grid-column: auto;
+    min-height: 7.5rem;
+}
+
+.sa-slot img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.sa-slot-bar {
+    position: absolute;
+    top: 0.3rem;
+    left: 0.3rem;
+    right: 0.3rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.sa-slot-bar > * {
+    pointer-events: auto;
+}
+
+.sa-slot-chip {
+    padding: 0.12rem 0.4rem;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    background: color-mix(in srgb, currentColor 18%, transparent);
+    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
+}
+
+.sa-slot-chip.sa-live {
+    background: color-mix(in srgb, #6ee7a8 28%, transparent);
+}
+
+.sa-slot-attach {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: 0.7rem;
+    opacity: 0.85;
+    background: color-mix(in srgb, currentColor 14%, transparent);
+    border-radius: 999px;
+    padding: 0.08rem 0.35rem;
+}
+
+.sa-slot-busy {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, #000 35%, transparent);
+    z-index: 3;
+}
+
+.sa-add-cell {
+    border: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.55;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.sa-add-cell:hover {
+    opacity: 0.9;
+}
+
 .sa-image-frame {
     position: relative;
     flex: 1;
@@ -427,6 +578,51 @@
     margin-top: 0.45rem;
 }
 
+.sa-patch-stale {
+    margin-top: 0.4rem;
+    font-size: 0.78rem;
+    opacity: 0.5;
+    font-style: italic;
+}
+
+.sa-btn-gen {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.sa-btn-gen:disabled {
+    opacity: 0.65;
+    pointer-events: none;
+}
+
+.sa-spinner-btn {
+    width: 0.7rem;
+    height: 0.7rem;
+    border-width: 2px;
+}
+
+.sa-msg.sa-welcome {
+    align-self: stretch;
+    max-width: 100%;
+    background: color-mix(in srgb, currentColor 6%, transparent);
+    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+}
+
+.sa-welcome-title {
+    font-weight: 650;
+    margin-bottom: 0.35rem;
+}
+
+.sa-welcome ul {
+    margin: 0.2rem 0 0;
+    padding-left: 1.1rem;
+}
+
+.sa-welcome li {
+    margin: 0.15rem 0;
+}
+
 .sa-danger {
     opacity: 0.85;
 }
@@ -534,9 +730,12 @@
     .sa-image-pane {
         flex: 0 0 auto;
         max-width: none;
-        max-height: 38%;
+        max-height: 46%;
         width: 100% !important;
     }
+    .sa-slot.sa-slot-gen {
+        grid-column: auto;
+    }
     .sa-splitter {
         display: none;
     }