vibespot 1.1.0 → 1.2.0

package/ui/styles.css

@@ -270,10 +270,218 @@ body { display: flex; }
   margin-top: 6px;
 }
 
+/* "Continue where you left off" — recent projects card list */
+.setup__recent {
+  margin-bottom: 28px;
+}
+.setup__recent-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.setup__recent-title {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+.setup__recent-all {
+  font-size: 12px;
+  background: none;
+  border: 0;
+  color: var(--accent);
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+}
+.setup__recent-all:hover { text-decoration: underline; }
+.setup__recent-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+}
+.setup__recent-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, transform 0.1s;
+}
+.setup__recent-card:hover {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+.setup__recent-card:active { transform: translateY(1px); }
+.setup__recent-card-bubble {
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--accent-tint);
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+}
+.setup__recent-card-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.setup__recent-card-name {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.setup__recent-card-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Primary "describe-it" prompt card */
+.setup__prompt-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 14px 14px 10px;
+  margin-bottom: 14px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.setup__prompt-card:focus-within {
+  border-color: var(--accent-glow);
+  box-shadow: 0 0 0 3px var(--accent-tint);
+}
+.setup__prompt-input {
+  width: 100%;
+  min-height: 72px;
+  resize: vertical;
+  background: transparent;
+  border: 0;
+  outline: none;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.5;
+  padding: 0;
+}
+.setup__prompt-input::placeholder { color: var(--text-muted); }
+.setup__prompt-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+}
+.setup__prompt-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.setup__prompt-submit {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+}
+.setup__prompt-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.setup__prompt-submit-icon {
+  font-size: 11px;
+  line-height: 1;
+  transform: rotate(90deg);
+  display: inline-block;
+}
+
+/* Secondary "Start from Template" path */
+.setup__secondary {
+  margin-bottom: 18px;
+}
+.setup__secondary-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: transparent;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+.setup__secondary-btn:hover {
+  border-color: var(--accent);
+  background: var(--accent-tint);
+}
+.setup__secondary-icon {
+  font-size: 18px;
+  color: var(--accent);
+  opacity: 0.85;
+  flex-shrink: 0;
+}
+.setup__secondary-label {
+  font-size: 14px;
+  font-weight: 500;
+  flex: 1;
+}
+.setup__secondary-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* "More ways to start" disclosure */
+.setup__more {
+  margin-top: 4px;
+}
+.setup__more-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: 0;
+  padding: 4px 0;
+  color: var(--text-dim);
+  font-family: var(--font);
+  font-size: 13px;
+  cursor: pointer;
+}
+.setup__more-toggle:hover { color: var(--text); }
+.setup__more-chevron {
+  display: inline-block;
+  font-size: 10px;
+  line-height: 1;
+  transition: transform 0.2s;
+}
+.setup__more-toggle--open .setup__more-chevron { transform: rotate(180deg); }
+.setup__more-panel {
+  margin-top: 10px;
+  animation: panelSlideIn 0.15s ease-out;
+}
+
 /* Action buttons grid */
 .setup__actions {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
   gap: 10px;
   margin-bottom: 16px;
 }
@@ -295,7 +503,7 @@ body { display: flex; }
 }
 .setup__action-btn:hover {
   border-color: var(--accent);
-  background: var(--bg-card);
+  background: var(--bg-hover);
 }
 .setup__action-btn.active {
   border-color: var(--accent);
@@ -366,7 +574,7 @@ body { display: flex; }
 }
 .setup__pill:hover {
   border-color: var(--accent);
-  background: var(--bg-card);
+  background: var(--bg-hover);
 }
 .setup__pill__meta {
   font-size: 11px;
@@ -463,7 +671,7 @@ body { display: flex; }
 .figma-summary__section-tag {
   font-size: 11px;
   padding: 2px 8px;
-  background: var(--bg-card);
+  background: var(--bg-hover);
   border: 1px solid var(--border);
   border-radius: 10px;
   color: var(--text-muted);
@@ -632,6 +840,21 @@ body { display: flex; }
   margin-bottom: 36px;
 }
 
+.dashboard__section--inverse {
+  padding: 14px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.dashboard__section--inverse .dashboard__section-header {
+  margin-bottom: 12px;
+}
+
+.dashboard__section--inverse .dashboard__section-hint {
+  flex: 1;
+}
+
 .dashboard__section-header {
   display: flex;
   align-items: center;
@@ -665,86 +888,215 @@ body { display: flex; }
   padding: 16px 0;
 }
 
-/* Page type cards */
-.dashboard__page-types {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-}
-
-.page-type-card {
+/* Import analysis */
+.inverse-summary {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 20px 12px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  text-align: center;
-}
-
-.page-type-card:hover {
-  border-color: var(--accent);
-  background: var(--accent-tint);
+  gap: 12px;
 }
 
-.page-type-card__icon {
-  color: var(--text-dim);
-  transition: color 0.15s ease;
+.inverse-summary__stats {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
 }
 
-.page-type-card:hover .page-type-card__icon {
-  color: var(--accent);
+.inverse-stat {
+  min-width: 0;
+  padding: 10px 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
 }
 
-.page-type-card__label {
-  font-size: 13px;
-  font-weight: 500;
+.inverse-stat__value {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 18px;
+  font-weight: 600;
   color: var(--text);
+  line-height: 1;
 }
 
-.page-type-card__desc {
+.inverse-stat__label {
+  display: block;
+  margin-top: 5px;
   font-size: 11px;
   color: var(--text-dim);
-  line-height: 1.3;
 }
 
-/* Template list */
-.dashboard__template-item {
+.inverse-block {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  margin-bottom: 6px;
-  transition: border-color 0.15s ease;
+  gap: 12px;
 }
 
-.dashboard__template-item:hover {
-  border-color: var(--border-hover);
+.inverse-block__label {
+  width: 80px;
+  flex-shrink: 0;
+  color: var(--text-dim);
+  font-size: 12px;
 }
 
-.dashboard__template-badge {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  padding: 2px 8px;
-  border-radius: var(--radius-pill);
-  background: var(--bg-hover);
-  color: var(--text-dim);
+.inverse-swatches,
+.inverse-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
 }
 
-.dashboard__template-badge--landing_page { background: rgba(232,97,58,0.15); color: var(--accent); }
-.dashboard__template-badge--blog_post { background: rgba(59,130,246,0.15); color: #3b82f6; }
-.dashboard__template-badge--website_page { background: rgba(74,222,128,0.15); color: #4ade80; }
-.dashboard__template-badge--module_only { background: rgba(168,85,247,0.15); color: #a855f7; }
+.inverse-swatch {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
+}
 
-.dashboard__template-label {
-  flex: 1;
+.inverse-tag {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 4px 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+.inverse-findings {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.inverse-findings--empty {
+  padding: 10px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.inverse-finding {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 10px;
+  align-items: start;
+  padding: 9px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-left-width: 3px;
+  border-radius: var(--radius-sm);
+}
+
+.inverse-finding--error { border-left-color: var(--error); }
+.inverse-finding--warning { border-left-color: var(--warning); }
+.inverse-finding--info { border-left-color: var(--accent); }
+
+.inverse-finding__severity {
+  color: var(--text-dim);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.inverse-finding__message {
+  min-width: 0;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.inverse-findings__more {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* Page type cards */
+.dashboard__page-types {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.page-type-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 12px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: center;
+}
+
+.page-type-card:hover {
+  border-color: var(--accent);
+  background: var(--accent-tint);
+}
+
+.page-type-card__icon {
+  color: var(--text-dim);
+  transition: color 0.15s ease;
+}
+
+.page-type-card:hover .page-type-card__icon {
+  color: var(--accent);
+}
+
+.page-type-card__label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.page-type-card__desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.3;
+}
+
+/* Template list */
+.dashboard__template-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  margin-bottom: 6px;
+  transition: border-color 0.15s ease;
+}
+
+.dashboard__template-item:hover {
+  border-color: var(--border-hover);
+}
+
+.dashboard__template-badge {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  background: var(--bg-hover);
+  color: var(--text-dim);
+}
+
+.dashboard__template-badge--landing_page { background: rgba(232,97,58,0.15); color: var(--accent); }
+.dashboard__template-badge--blog_post { background: rgba(59,130,246,0.15); color: #3b82f6; }
+.dashboard__template-badge--website_page { background: rgba(74,222,128,0.15); color: #4ade80; }
+.dashboard__template-badge--module_only { background: rgba(168,85,247,0.15); color: #a855f7; }
+
+.dashboard__template-label {
+  flex: 1;
   font-size: 14px;
   color: var(--text);
   white-space: nowrap;
@@ -1016,6 +1368,17 @@ body { display: flex; }
   .dashboard__page-types {
     grid-template-columns: repeat(2, 1fr);
   }
+  .inverse-summary__stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .inverse-block {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .inverse-block__label {
+    width: auto;
+  }
 }
 
 /* ================================================================
@@ -1462,6 +1825,36 @@ body { display: flex; }
   color: var(--accent);
 }
 
+.select-mode-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  margin-left: 8px;
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text-muted);
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.select-mode-toggle:hover { color: var(--text-dim); border-color: var(--border-hover); }
+.select-mode-toggle[aria-pressed="true"] {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.select-mode-toggle[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.preview.preview--select-mode .browser-chrome__frame { cursor: crosshair; }
+
 /* ================================================================
    LAYOUT (side-by-side chat + preview)
    ================================================================ */
@@ -1894,6 +2287,25 @@ body { display: flex; }
 
 .module-item__name { flex: 1; }
 
+/* Change indicator dot — shown next to modules edited in the last generation.
+   Hidden by default; revealed via .module-item--changed (set by chat.js). */
+.module-item__changed-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+  flex-shrink: 0;
+  opacity: 0;
+  transform: scale(0.4);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  pointer-events: none;
+}
+.module-item--changed .module-item__changed-dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
 .module-item__edit {
   opacity: 0;
   color: var(--accent);
@@ -1992,6 +2404,57 @@ body { display: flex; }
   line-height: 1.5;
 }
 
+/* Starter template grid (setup panel) */
+.starter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 10px;
+}
+.starter-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+.starter-card:hover {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+.starter-card.selected {
+  border-color: var(--accent);
+  background: var(--accent-bg, rgba(232, 97, 58, 0.08));
+}
+.starter-card__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+.starter-card__desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+.starter-card__meta {
+  font-size: 10px;
+  color: var(--text-muted);
+  opacity: 0.7;
+  margin-top: 2px;
+}
+.starter-create {
+  margin-top: 12px;
+  animation: panelSlideIn 0.15s ease-out;
+}
+.starter-create__label {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0 0 8px;
+}
+
 .chat__starters {
   display: flex;
   flex-wrap: wrap;
@@ -2016,6 +2479,82 @@ body { display: flex; }
   color: var(--accent-hover);
 }
 
+/* Rich starter button — two-line label + description, used in chat welcome */
+.chat__starters--rich {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  max-width: 360px;
+  margin: 0 auto;
+}
+.starter-btn--rich {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 10px 14px;
+  text-align: left;
+}
+.starter-btn--rich .starter-btn__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+.starter-btn--rich .starter-btn__desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+.starter-btn--rich:hover .starter-btn__label {
+  color: var(--accent-hover);
+}
+
+/* Smart suggestion chips — shown below the chat input after a generation */
+.chat__suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+  animation: chatSuggestionsIn 0.18s ease-out;
+}
+.chat__suggestions.hidden {
+  display: none;
+}
+.chat__suggestion-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 12px;
+  line-height: 1.3;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, color 0.2s;
+}
+.chat__suggestion-chip::before {
+  content: "✨";
+  font-size: 10px;
+  opacity: 0.7;
+}
+.chat__suggestion-chip:hover {
+  border-color: var(--accent-glow);
+  background: var(--accent-tint);
+  color: var(--accent-hover);
+}
+.chat__suggestion-chip:focus-visible {
+  outline: 2px solid var(--accent-glow);
+  outline-offset: 2px;
+}
+
+@keyframes chatSuggestionsIn {
+  from { opacity: 0; transform: translateY(2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .chat__section-label {
   font-size: 11px;
   font-weight: 600;
@@ -2146,6 +2685,7 @@ body { display: flex; }
   font-size: 13.5px;
   line-height: 1.6;
   word-wrap: break-word;
+  overflow: hidden;
 }
 
 
@@ -2207,107 +2747,360 @@ body { display: flex; }
   flex-shrink: 0;
 }
 
-/* Agentic pipeline step progress */
-.pipeline-steps {
+/* Agentic pipeline — horizontal stepper */
+.pipeline-stepper {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 6px 2px 4px;
+  max-width: 100%;
+}
+
+.pipeline-stage {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 6px;
-  padding: 4px 0;
+  flex: 1 1 0;
+  min-width: 0;
+  text-align: center;
+  position: relative;
 }
 
-.pipeline-step {
+.pipeline-stage__indicator {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
   display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  font-size: 13px;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-elevated, rgba(255,255,255,0.04));
+  border: 1.5px solid var(--border);
   color: var(--text-muted);
-  flex-wrap: wrap;
-  margin-top: 6px;
+  position: relative;
+  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
+}
+
+.pipeline-stage__icon,
+.pipeline-stage__check {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 220ms ease, transform 220ms ease;
 }
 
-/* Steps inside the steps container don't need extra margin (container has gap) */
-.pipeline-steps > .pipeline-step {
-  margin-top: 0;
+.pipeline-stage__icon svg,
+.pipeline-stage__check svg {
+  width: 16px;
+  height: 16px;
 }
 
-.pipeline-step--active {
-  color: var(--accent);
+.pipeline-stage__check {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.pipeline-stage__label {
+  font-size: 11.5px;
+  color: var(--text-dim);
   font-weight: 500;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+  transition: color 220ms ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
-.pipeline-step--active .pipeline-step__icon {
-  animation: spin 0.8s linear infinite;
-  display: inline-block;
+/* Connector between stages — fills as progress advances */
+.pipeline-stage__connector {
+  flex: 0 1 16px;
+  height: 2px;
+  margin-top: 15px; /* visually align with the indicator center (32px / 2 - 1) */
+  background: var(--border);
+  border-radius: 1px;
+  position: relative;
+  overflow: hidden;
+  min-width: 4px;
+}
+
+.pipeline-stage__connector::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 420ms ease;
+}
+
+.pipeline-stage__connector--filled::after {
+  transform: scaleX(1);
 }
 
-.pipeline-step--done {
+/* Active stage: pulsing accent ring + spinning icon */
+.pipeline-stage--active .pipeline-stage__indicator {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-tint, rgba(232,97,58,0.06));
+  box-shadow: 0 0 0 0 var(--accent-glow, rgba(232,97,58,0.3));
+  animation: pipelineStagePulse 1.6s ease-in-out infinite;
+}
+
+.pipeline-stage--active .pipeline-stage__icon {
+  animation: pipelineIconSpin 2.4s linear infinite;
+}
+
+.pipeline-stage--active .pipeline-stage__label {
+  color: var(--accent);
+}
+
+@keyframes pipelineStagePulse {
+  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow, rgba(232,97,58,0.3)); }
+  50%      { box-shadow: 0 0 0 6px transparent; }
+}
+
+@keyframes pipelineIconSpin {
+  to { transform: rotate(360deg); }
+}
+
+/* Done stage: filled, swap icon for checkmark with a pop */
+.pipeline-stage--done .pipeline-stage__indicator {
+  background: var(--success, #4ade80);
+  border-color: var(--success, #4ade80);
+  color: var(--bg-panel-solid, #131110);
+  animation: pipelineStagePop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.pipeline-stage--done .pipeline-stage__icon {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.pipeline-stage--done .pipeline-stage__check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.pipeline-stage--done .pipeline-stage__label {
   color: var(--success, #4ade80);
 }
 
-.pipeline-step--done .pipeline-step__icon {
-  animation: none;
-  display: inline-block;
+@keyframes pipelineStagePop {
+  0%   { transform: scale(0.92); }
+  60%  { transform: scale(1.12); }
+  100% { transform: scale(1); }
 }
 
-.pipeline-step--done .pipeline-step__icon::after {
-  content: "";
+/* Failed stage: red ring */
+.pipeline-stage--failed .pipeline-stage__indicator {
+  background: var(--error, #ef4444);
+  border-color: var(--error, #ef4444);
+  color: #fff;
 }
 
-.pipeline-step__decision {
-  width: 100%;
+.pipeline-stage--failed .pipeline-stage__label {
+  color: var(--error, #ef4444);
+}
+
+/* Detail line — current sub-label / decision */
+.pipeline-detail {
+  font-size: 12px;
+  color: var(--text-dim);
+  padding: 2px 0 0;
+  min-height: 1.4em;
+  white-space: pre-line;
+}
+
+.pipeline-detail--in {
+  animation: pipelineDetailIn 220ms ease;
+}
+
+@keyframes pipelineDetailIn {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.pipeline-detail-summary {
   font-size: 11.5px;
   color: var(--text-dim);
-  padding-left: 20px;
-  margin-top: 2px;
+  padding: 4px 0 0;
+}
+
+.pipeline-detail-summary > summary {
+  cursor: pointer;
+  user-select: none;
+}
+
+.pipeline-detail-summary__row {
+  padding: 3px 0 0 14px;
   white-space: pre-line;
 }
 
-/* Module progress cards during parallel generation */
+/* Module progress cards during parallel generation — skeleton variant */
 .pipeline-modules {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 6px 0 2px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px;
+  padding: 8px 0 2px;
 }
 
 .pipeline-module-card {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  border-radius: 4px;
+  position: relative;
+  padding: 8px 10px;
+  border-radius: 6px;
   font-size: 12px;
-  background: var(--surface-elevated, rgba(255,255,255,0.05));
+  background: var(--surface-elevated, rgba(255,255,255,0.04));
   border: 1px solid var(--border);
+  overflow: hidden;
+  transition: border-color 220ms ease, background 220ms ease;
+}
+
+.pipeline-module-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.pipeline-module-card__name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pipeline-module-card__status {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.75;
+  flex: 0 0 auto;
+}
+
+/* Mini progress bar — indeterminate during work, full on complete */
+.pipeline-module-card__progress {
+  height: 2px;
+  margin-top: 8px;
+  background: var(--border);
+  border-radius: 1px;
+  overflow: hidden;
+}
+
+.pipeline-module-card__progress-bar {
+  height: 100%;
+  width: 30%;
+  background: var(--accent);
+  border-radius: 1px;
+  transform: translateX(-100%);
+}
+
+/* Skeleton text rows — shown only while in flight */
+.pipeline-module-card__skeleton {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.pipeline-module-card__skeleton-row {
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(
+    90deg,
+    var(--border) 0%,
+    var(--border-hover) 50%,
+    var(--border) 100%
+  );
+  background-size: 200% 100%;
+  animation: pipelineSkeletonShimmer 1.4s ease-in-out infinite;
+}
+
+.pipeline-module-card__skeleton-row--lg { width: 90%; }
+.pipeline-module-card__skeleton-row--md { width: 75%; }
+.pipeline-module-card__skeleton-row--sm { width: 50%; }
+
+@keyframes pipelineSkeletonShimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+.pipeline-module-card--queued .pipeline-module-card__skeleton-row {
+  animation-play-state: paused;
+  opacity: 0.5;
 }
 
-.pipeline-module-card--generating {
+.pipeline-module-card--generating,
+.pipeline-module-card--validating {
   border-color: var(--accent);
-  color: var(--accent);
+}
+
+.pipeline-module-card--generating .pipeline-module-card__progress-bar,
+.pipeline-module-card--validating .pipeline-module-card__progress-bar,
+.pipeline-module-card--retrying .pipeline-module-card__progress-bar {
+  animation: pipelineProgressIndeterminate 1.6s ease-in-out infinite;
+}
+
+.pipeline-module-card--retrying {
+  border-color: var(--warning, #f59e0b);
+}
+
+.pipeline-module-card--retrying .pipeline-module-card__progress-bar {
+  background: var(--warning, #f59e0b);
 }
 
 .pipeline-module-card--complete {
   border-color: var(--success, #4ade80);
+}
+
+.pipeline-module-card--complete .pipeline-module-card__skeleton {
+  display: none;
+}
+
+.pipeline-module-card--complete .pipeline-module-card__progress {
+  background: transparent;
+}
+
+.pipeline-module-card--complete .pipeline-module-card__progress-bar {
+  width: 100%;
+  transform: translateX(0);
+  background: var(--success, #4ade80);
+}
+
+.pipeline-module-card--complete .pipeline-module-card__status {
   color: var(--success, #4ade80);
 }
 
 .pipeline-module-card--failed {
   border-color: var(--error, #ef4444);
-  color: var(--error, #ef4444);
 }
 
-.pipeline-module-card--retrying {
-  border-color: var(--warning, #f59e0b);
-  color: var(--warning, #f59e0b);
+.pipeline-module-card--failed .pipeline-module-card__skeleton {
+  display: none;
 }
 
-.pipeline-module-card__name {
-  font-weight: 500;
+.pipeline-module-card--failed .pipeline-module-card__progress-bar {
+  width: 100%;
+  transform: translateX(0);
+  background: var(--error, #ef4444);
 }
 
-.pipeline-module-card__status {
-  font-size: 11px;
-  opacity: 0.8;
+.pipeline-module-card--failed .pipeline-module-card__status {
+  color: var(--error, #ef4444);
+}
+
+@keyframes pipelineProgressIndeterminate {
+  0%   { transform: translateX(-100%); width: 30%; }
+  50%  { width: 50%; }
+  100% { transform: translateX(330%); width: 30%; }
+}
+
+/* Restored history view: hide skeleton + progress placeholders */
+.pipeline-modules--restored .pipeline-module-card__progress,
+.pipeline-modules--restored .pipeline-module-card__skeleton {
+  display: none;
 }
 
 .pipeline-answer {
@@ -2325,21 +3118,73 @@ body { display: flex; }
   font-weight: 500;
 }
 
-.pipeline-stats--partial {
-  color: var(--warning, #f59e0b);
+.pipeline-stats--partial {
+  color: var(--warning, #f59e0b);
+}
+
+.pipeline-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 0 0;
+  font-size: 12px;
+  color: var(--text-muted, #999);
+  font-variant-numeric: tabular-nums;
+}
+
+.pipeline-timer {
+  flex: 0 0 auto;
+}
+
+.pipeline-estimate {
+  flex: 0 0 auto;
+  color: var(--text-dim);
 }
 
-.pipeline-timer {
-  font-size: 12px;
-  color: var(--text-muted, #999);
-  padding: 6px 0 0;
+/* Mobile / narrow chat panes — flex-wrap stepper, single-column module grid */
+@media (max-width: 520px) {
+  .pipeline-stepper {
+    flex-wrap: wrap;
+    row-gap: 12px;
+  }
+  .pipeline-stage {
+    flex: 1 1 22%;
+    min-width: 0;
+  }
+  .pipeline-stage__label {
+    font-size: 10.5px;
+  }
+  .pipeline-stage__connector {
+    flex: 0 0 8px;
+    min-width: 8px;
+  }
+  .pipeline-modules {
+    grid-template-columns: 1fr;
+  }
+  .pipeline-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
 }
 
-.pipeline-modules-restored {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 6px 0;
+/* Reduced motion — disable spinners and shimmer */
+@media (prefers-reduced-motion: reduce) {
+  .pipeline-stage--active .pipeline-stage__indicator,
+  .pipeline-stage--active .pipeline-stage__icon,
+  .pipeline-module-card__skeleton-row,
+  .pipeline-module-card--generating .pipeline-module-card__progress-bar,
+  .pipeline-module-card--validating .pipeline-module-card__progress-bar,
+  .pipeline-module-card--retrying .pipeline-module-card__progress-bar,
+  .pipeline-stage--done .pipeline-stage__indicator {
+    animation: none !important;
+  }
+  .pipeline-stage__connector::after,
+  .pipeline-detail--in {
+    transition: none !important;
+    animation: none !important;
+  }
 }
 
 .chat-msg__meta {
@@ -4531,3 +5376,343 @@ body { display: flex; }
 }
 .plan-pane__discard:hover { opacity: 1; color: var(--danger, #d43); }
 .plan-pane__approve { font-weight: 600; }
+
+/* ---- Plan-mode template picker ---- */
+.plan-templates {
+  padding: 32px 24px 16px;
+  max-width: 760px;
+  margin: 0 auto;
+}
+.plan-templates__title {
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 8px;
+  color: var(--text);
+}
+.plan-templates__hint {
+  margin: 0 0 20px;
+  color: var(--text-dim);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.plan-templates__error {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.25);
+  border-radius: var(--radius-sm);
+  color: var(--error);
+  font-size: 12px;
+}
+.plan-templates--loading .plan-templates__hint {
+  text-align: center;
+  padding: 32px 0;
+}
+.plan-templates__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 10px;
+}
+.plan-template {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 14px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+  color: var(--text);
+}
+.plan-template:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
+}
+.plan-template:active { transform: translateY(1px); }
+.plan-template.is-loading {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.plan-template__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--accent-tint);
+  color: var(--accent);
+}
+.plan-template__icon svg {
+  width: 18px;
+  height: 18px;
+}
+.plan-template__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.plan-template__label {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text);
+}
+.plan-template__desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.4;
+}
+.plan-template--blank .plan-template__icon {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-dim);
+}
+
+/* ============================================================
+   Marketplace publication dialog (VIB-58)
+   ============================================================ */
+.marketplace-dialog {
+  width: 640px;
+  max-width: 92vw;
+  max-height: 82vh;
+  display: flex;
+  flex-direction: column;
+}
+.marketplace-body {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 12px;
+  padding-right: 4px;
+}
+.marketplace-summary {
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  margin-bottom: 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+}
+.marketplace-summary--ok { border-color: rgba(50, 180, 100, 0.4); }
+.marketplace-summary--fail { border-color: rgba(220, 80, 80, 0.4); }
+.marketplace-summary__counts {
+  margin-top: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.marketplace-pill {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-panel-solid);
+  color: var(--text-muted);
+}
+.marketplace-pill--error { color: #d44; border-color: rgba(220, 80, 80, 0.5); }
+.marketplace-pill--warn { color: #d9a300; border-color: rgba(217, 163, 0, 0.5); }
+.marketplace-pill--info { color: var(--text-dim); }
+.marketplace-section { margin-top: 14px; }
+.marketplace-section h4 {
+  margin: 0 0 6px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+}
+.marketplace-findings {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.marketplace-finding {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  background: var(--bg-input);
+  font-size: 13px;
+  overflow-wrap: break-word;
+}
+.marketplace-finding--error { border-left: 3px solid #d44; }
+.marketplace-finding--warning { border-left: 3px solid #d9a300; }
+.marketplace-finding--info { border-left: 3px solid var(--border); }
+.marketplace-finding__file {
+  display: inline-block;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-right: 6px;
+}
+.marketplace-finding__msg { color: var(--text); }
+.marketplace-finding__fix {
+  margin-top: 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.marketplace-fix-result {
+  margin-bottom: 12px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.marketplace-fix-result ul { margin: 4px 0 8px 18px; padding: 0; }
+.marketplace-listing-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+.marketplace-listing-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.marketplace-listing-form input,
+.marketplace-listing-form select,
+.marketplace-listing-form textarea {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 6px 8px;
+  color: var(--text);
+  font: inherit;
+}
+.marketplace-listing-form textarea { resize: vertical; }
+
+/* ---------------------------------------------------------------- History Timeline */
+/* Compact horizontal version-history strip above the chat input.   */
+.history-timeline {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-panel-solid);
+  flex-shrink: 0;
+  min-height: 32px;
+  max-height: 32px;
+}
+.history-timeline.hidden { display: none; }
+
+.history-timeline__nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.history-timeline__nav:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: var(--border-hover);
+}
+.history-timeline__nav:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.history-timeline__track {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.history-timeline__track::-webkit-scrollbar { display: none; }
+
+.history-timeline__entry {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  height: 20px;
+  padding: 0 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.history-timeline__entry:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: var(--border-hover);
+}
+.history-timeline__entry--current {
+  background: var(--accent-tint);
+  border-color: var(--accent-glow);
+  color: var(--text);
+}
+.history-timeline__entry--initial {
+  font-style: italic;
+}
+.history-timeline__entry-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  flex-shrink: 0;
+}
+.history-timeline__entry--current .history-timeline__entry-dot {
+  background: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+.history-timeline__entry-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.history-timeline__tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  z-index: 50;
+  max-width: 280px;
+  padding: 8px 10px;
+  background: var(--bg-panel-solid);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--text);
+  pointer-events: none;
+}
+.history-timeline__tooltip.hidden { display: none; }
+.history-timeline__tooltip-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+  word-break: break-word;
+}
+.history-timeline__tooltip-meta {
+  color: var(--text-dim);
+  font-size: 10px;
+}
+.history-timeline__tooltip-modules {
+  margin-top: 4px;
+  color: var(--text-dim);
+  font-size: 10px;
+}