tryassay 0.22.0 → 0.22.2

package/demo/css/style.css

@@ -1,4 +1,4 @@
-/* style.css — Dark theme, grid layout, animations */
+/* style.css — Split-screen layout: chat left, preview right */
 
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -39,126 +39,69 @@ html, body {
 /* === Layout Grid === */
 #app {
   display: grid;
-  grid-template-columns: 1fr 420px;
-  grid-template-rows: 60px 1fr 200px;
+  grid-template-columns: 40% 60%;
+  grid-template-rows: 48px 1fr 36px;
   width: 100%;
   height: 100%;
-  gap: 1px;
 }
 
+/* === Header === */
 #header {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 0 24px;
-  position: relative;
+  justify-content: space-between;
+  padding: 0 20px;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
   z-index: 10;
 }
 
-#orb-container {
-  grid-column: 1;
-  grid-row: 2;
-  position: relative;
-  overflow: hidden;
-}
-
-#timeline-panel {
-  grid-column: 2;
-  grid-row: 2 / 4;
-  background: var(--bg-panel);
-  border-left: 1px solid var(--border);
-  overflow-y: auto;
-  padding: 16px;
+#header-left {
   display: flex;
-  flex-direction: column;
-}
-
-#code-panel {
-  grid-column: 1;
-  grid-row: 3;
-  background: var(--bg-panel);
-  border-top: 1px solid var(--border);
-  overflow: hidden;
-  opacity: 0.3;
-  transition: opacity 0.5s ease;
+  align-items: center;
+  gap: 12px;
 }
 
-#code-panel.active {
-  opacity: 1;
+.header-title {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  letter-spacing: 1px;
 }
 
-/* === Header / Input Bar === */
-#input-bar {
+#header-right {
   display: flex;
   align-items: center;
-  gap: 12px;
-  width: 100%;
-  max-width: 700px;
-}
-
-#input-bar input {
-  flex: 1;
-  background: var(--bg-glass);
-  border: 1px solid var(--border-glow);
-  border-radius: 12px;
-  padding: 10px 20px;
-  color: var(--text-bright);
-  font-family: var(--font-sans);
-  font-size: 14px;
-  outline: none;
-  backdrop-filter: blur(12px);
-  transition: border-color 0.3s, box-shadow 0.3s;
+  gap: 16px;
 }
 
-#input-bar input::placeholder {
+#file-badge {
+  font-family: var(--font-mono);
+  font-size: 12px;
   color: var(--text-dim);
+  background: rgba(6, 182, 212, 0.1);
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(6, 182, 212, 0.15);
+  transition: opacity 0.3s;
 }
 
-#input-bar input:focus {
-  border-color: var(--accent-cyan);
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
-}
-
-#input-bar input:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+#file-badge.hidden {
+  opacity: 0;
+  pointer-events: none;
 }
 
-#input-bar button {
-  background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
-  border: none;
-  border-radius: 10px;
-  padding: 10px 20px;
-  color: #000;
-  font-family: var(--font-sans);
+#file-badge span:last-child {
+  color: var(--accent-cyan);
   font-weight: 600;
-  font-size: 13px;
-  cursor: pointer;
-  transition: transform 0.15s, opacity 0.2s;
-  white-space: nowrap;
-}
-
-#input-bar button:hover {
-  transform: scale(1.03);
 }
 
-#input-bar button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-  transform: none;
-}
-
-/* === Global Clock === */
 .global-clock {
-  position: absolute;
-  right: 80px;
-  top: 50%;
-  transform: translateY(-50%);
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 1px;
+  gap: 4px;
   transition: opacity 0.4s ease;
 }
 
@@ -169,444 +112,471 @@ html, body {
 
 .global-clock .clock-value {
   font-family: var(--font-mono);
-  font-size: 22px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--accent-cyan);
-  letter-spacing: 2px;
-  text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
-}
-
-.global-clock .clock-label {
-  font-size: 9px;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  color: var(--text-dim);
-}
-
-#mute-toggle {
-  position: absolute;
-  right: 24px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--bg-glass);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 6px 10px;
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: 16px;
-  transition: color 0.2s;
-}
-
-#mute-toggle:hover {
-  color: var(--text);
-}
-
-#mute-toggle.muted {
-  color: var(--accent-red);
+  letter-spacing: 1px;
 }
 
-/* === Metrics Bar === */
-#metrics-bar {
+/* === Chat Panel (Left 40%) === */
+#chat-panel {
+  grid-column: 1;
+  grid-row: 2;
   display: flex;
-  gap: 20px;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 12px;
-  flex-shrink: 0;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border);
+  overflow: hidden;
 }
 
-.metric {
+/* Chat messages area */
+#chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 2px;
+  gap: 12px;
 }
 
-.metric-value {
-  font-family: var(--font-mono);
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-bright);
+/* Chat input area (shown during conversation) */
+#chat-input-area {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: rgba(5, 5, 10, 0.8);
+  flex-shrink: 0;
 }
 
-.metric-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--text-dim);
+#chat-input-area.hidden {
+  display: none;
 }
 
-/* === Timeline Steps === */
-#timeline-steps {
+#chat-input-area input {
   flex: 1;
-  overflow-y: auto;
-  padding-right: 4px;
+  background: rgba(20, 20, 30, 0.8);
+  border: 1px solid rgba(100, 200, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px 14px;
+  color: rgba(200, 220, 255, 0.9);
+  font-size: 14px;
+  outline: none;
 }
 
-.timeline-step {
-  position: relative;
-  padding: 12px 12px 12px 32px;
-  margin-bottom: 4px;
-  border-radius: 8px;
-  transition: background 0.3s, border-color 0.3s;
-  border: 1px solid transparent;
+#chat-input-area input:focus {
+  border-color: rgba(100, 200, 255, 0.4);
 }
 
-.timeline-step::before {
-  content: '';
-  position: absolute;
-  left: 12px;
-  top: 16px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--text-dim);
-  transition: background 0.3s, box-shadow 0.3s;
+#chat-input-area button {
+  background: rgba(100, 200, 255, 0.15);
+  border: 1px solid rgba(100, 200, 255, 0.3);
+  border-radius: 8px;
+  padding: 10px 18px;
+  color: rgba(100, 200, 255, 0.9);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
 }
 
-.timeline-step.pending::before {
-  background: var(--text-dim);
+#chat-input-area button:hover {
+  background: rgba(100, 200, 255, 0.25);
 }
 
-.timeline-step.active {
-  background: rgba(6, 182, 212, 0.08);
-  border-color: rgba(6, 182, 212, 0.2);
+/* Attach button */
+#attach-btn {
+  background: none;
+  border: 1px solid rgba(100, 200, 255, 0.2);
+  border-radius: 8px;
+  padding: 8px 10px;
+  color: rgba(100, 200, 255, 0.7);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  transition: all 0.2s;
+  flex-shrink: 0;
 }
 
-.timeline-step.active::before {
-  background: var(--accent-cyan);
-  box-shadow: 0 0 12px var(--accent-cyan);
-  animation: pulse-dot 2s ease-in-out infinite;
+#attach-btn:hover {
+  background: rgba(100, 200, 255, 0.1);
+  border-color: rgba(100, 200, 255, 0.4);
+  color: rgba(100, 200, 255, 0.9);
 }
 
-.timeline-step.completed::before {
-  background: var(--accent-green);
-  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
+/* Attachment preview */
+#attachment-preview {
+  display: flex;
+  gap: 6px;
+  padding: 6px 16px;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--border);
+  background: rgba(5, 5, 10, 0.6);
+  flex-shrink: 0;
 }
 
-.timeline-step.failed::before {
-  background: var(--accent-red);
-  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
+#attachment-preview.hidden {
+  display: none;
 }
 
-.step-header {
-  display: flex;
+.attachment-chip {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  gap: 6px;
+  padding: 4px 10px;
+  background: rgba(100, 200, 255, 0.1);
+  border: 1px solid rgba(100, 200, 255, 0.2);
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: rgba(200, 220, 255, 0.8);
 }
 
-.step-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text);
+.attachment-chip-remove {
+  background: none;
+  border: none;
+  color: rgba(200, 220, 255, 0.5);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
 }
 
-.timeline-step.active .step-name {
-  color: var(--text-bright);
+.attachment-chip-remove:hover {
+  color: var(--accent-red);
 }
 
-.timeline-step.pending .step-name {
-  color: var(--text-dim);
+/* Chat messages */
+.chat-msg {
+  max-width: 90%;
+  animation: chatFadeIn 0.3s ease;
 }
 
-/* Phase duration badge (completed phases) */
-.phase-duration {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--accent-green);
-  background: rgba(34, 197, 94, 0.1);
-  padding: 1px 8px;
-  border-radius: 10px;
-  border: 1px solid rgba(34, 197, 94, 0.15);
-  white-space: nowrap;
-  flex-shrink: 0;
+.chat-msg-architect {
+  align-self: flex-start;
 }
 
-/* Live elapsed counter (active phase) */
-.phase-elapsed-live {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--accent-cyan);
-  background: rgba(6, 182, 212, 0.1);
-  padding: 1px 8px;
-  border-radius: 10px;
-  border: 1px solid rgba(6, 182, 212, 0.15);
-  white-space: nowrap;
-  flex-shrink: 0;
-  animation: pulse-elapsed 2s ease-in-out infinite;
+.chat-msg-user {
+  align-self: flex-end;
 }
 
-@keyframes pulse-elapsed {
-  0%, 100% { opacity: 0.8; }
-  50% { opacity: 1; }
+.chat-msg-text {
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-/* Heartbeat indicator (shows during silence) */
-.heartbeat-indicator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-  padding: 4px 0;
-  opacity: 0;
-  transition: opacity 0.5s ease;
-  height: 0;
-  overflow: hidden;
+.chat-msg-architect .chat-msg-text {
+  background: rgba(100, 200, 255, 0.1);
+  color: rgba(200, 220, 255, 0.9);
+  border-bottom-left-radius: 4px;
 }
 
-.heartbeat-indicator.visible {
-  opacity: 1;
-  height: auto;
+.chat-msg-user .chat-msg-text {
+  background: rgba(100, 200, 255, 0.2);
+  color: rgba(220, 240, 255, 0.95);
+  border-bottom-right-radius: 4px;
 }
 
-.heartbeat-dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent-cyan);
-  animation: heartbeat-pulse 1.2s ease-in-out infinite;
+@keyframes chatFadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes heartbeat-pulse {
-  0%, 100% { transform: scale(1); opacity: 0.4; }
-  25% { transform: scale(1.6); opacity: 1; }
-  35% { transform: scale(0.9); opacity: 0.6; }
-  45% { transform: scale(1.3); opacity: 0.9; }
-  55% { transform: scale(1); opacity: 0.4; }
+/* Chat cards (inline decision cards) */
+.chat-cards {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.step-details {
-  margin-top: 8px;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.4s ease;
+.chat-card {
+  background: rgba(20, 20, 35, 0.8);
+  border: 1px solid rgba(100, 200, 255, 0.15);
+  border-radius: 10px;
+  padding: 12px;
 }
 
-.timeline-step.active .step-details,
-.timeline-step.completed .step-details {
-  max-height: 500px;
+.chat-card-header {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(100, 200, 255, 0.6);
+  margin-bottom: 4px;
 }
 
-.step-task {
+.chat-card-question {
+  font-size: 13px;
+  color: rgba(200, 220, 255, 0.8);
+  margin-bottom: 8px;
+}
+
+.chat-card-options {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-  font-size: 11px;
-  color: var(--text-dim);
+  flex-direction: column;
+  gap: 4px;
 }
 
-.step-task .agent-badge {
-  background: rgba(6, 182, 212, 0.15);
-  color: var(--accent-cyan);
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-family: var(--font-mono);
-  font-size: 10px;
+.chat-card-option {
+  padding: 8px 12px;
+  border: 1px solid rgba(100, 200, 255, 0.1);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-.verification-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 3px 0;
-  font-size: 11px;
-  font-family: var(--font-mono);
+.chat-card-option:hover {
+  background: rgba(100, 200, 255, 0.08);
+  border-color: rgba(100, 200, 255, 0.25);
 }
 
-.verification-item.pass {
-  color: var(--accent-green);
+.chat-card-option.selected {
+  background: rgba(100, 200, 255, 0.15);
+  border-color: rgba(100, 200, 255, 0.4);
 }
 
-.verification-item.fail {
-  color: var(--accent-red);
+.chat-card-option-label {
+  font-size: 13px;
+  color: rgba(200, 220, 255, 0.9);
+  font-weight: 500;
 }
 
-.verification-item .method-badge {
-  font-size: 9px;
-  padding: 0 4px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-dim);
+.chat-card-option-desc {
+  font-size: 11px;
+  color: rgba(200, 220, 255, 0.5);
+  margin-top: 2px;
 }
 
-/* === Code Panel === */
-#code-tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--border);
-  background: rgba(10, 10, 20, 0.5);
-  overflow-x: auto;
-  flex-shrink: 0;
+/* Ready state */
+.chat-ready-summary {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: rgba(80, 200, 120, 0.1);
+  border: 1px solid rgba(80, 200, 120, 0.2);
+  border-radius: 8px;
+  font-size: 13px;
+  color: rgba(80, 200, 120, 0.9);
 }
 
-.code-tab {
-  padding: 8px 16px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-dim);
-  border: none;
-  background: none;
+.chat-build-btn {
+  margin-top: 10px;
+  width: 100%;
+  padding: 12px;
+  background: rgba(80, 200, 120, 0.2);
+  border: 1px solid rgba(80, 200, 120, 0.4);
+  border-radius: 8px;
+  color: rgba(80, 200, 120, 0.95);
+  font-size: 15px;
+  font-weight: 600;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: color 0.2s, border-color 0.2s;
-  white-space: nowrap;
+  transition: all 0.2s;
 }
 
-.code-tab:hover {
-  color: var(--text);
+.chat-build-btn:hover {
+  background: rgba(80, 200, 120, 0.3);
 }
 
-.code-tab.active {
-  color: var(--accent-cyan);
-  border-bottom-color: var(--accent-cyan);
+/* === Preview Panel (Right 60%) === */
+#preview-panel {
+  grid-column: 2;
+  grid-row: 2;
+  position: relative;
+  background: #111;
+  overflow: hidden;
 }
 
-#code-content {
-  padding: 12px 16px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  overflow-y: auto;
-  height: calc(100% - 36px);
-  white-space: pre;
-  color: var(--text);
+#preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #000;
 }
 
-/* Syntax highlighting */
-.code-content .keyword { color: #c678dd; }
-.code-content .string { color: #98c379; }
-.code-content .comment { color: #5c6370; font-style: italic; }
-.code-content .number { color: #d19a66; }
-.code-content .function { color: #61afef; }
-.code-content .type { color: #e5c07b; }
-.code-content .operator { color: #56b6c2; }
-.code-content .punctuation { color: #abb2bf; }
-
-/* === Plan Overlay === */
-#plan-overlay {
-  position: fixed;
+/* Preview overlay — shown over iframe during non-building states */
+#preview-overlay {
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  z-index: 100;
-  pointer-events: none;
-  opacity: 0;
+  background: rgba(10, 10, 15, 0.95);
+  z-index: 5;
   transition: opacity 0.5s ease;
 }
 
-#plan-overlay.visible {
-  opacity: 1;
-  pointer-events: auto;
+/* Hide overlay when building or done — let iframe show through */
+#preview-panel.live #preview-overlay {
+  opacity: 0;
+  pointer-events: none;
 }
 
-.plan-card {
-  background: rgba(10, 10, 30, 0.95);
-  border: 1px solid rgba(6, 182, 212, 0.3);
-  border-radius: 16px;
-  padding: 32px 40px;
-  max-width: 520px;
-  width: 90%;
-  backdrop-filter: blur(20px);
-  box-shadow: 0 0 60px rgba(6, 182, 212, 0.15), 0 0 120px rgba(6, 182, 212, 0.05);
-  animation: plan-enter 0.4s ease-out;
+#preview-status {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--text-dim);
+  text-align: center;
+  max-width: 300px;
+  line-height: 1.6;
 }
 
-@keyframes plan-enter {
-  from { transform: scale(0.9); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
+/* State-specific status styling */
+#preview-status[data-state="cold"] {
+  color: var(--text-dim);
 }
 
-.plan-header {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-bright);
-  margin-bottom: 16px;
-  letter-spacing: 0.5px;
+#preview-status[data-state="cold"]::before {
+  content: '';
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 0 auto 12px;
+  border: 2px solid var(--text-dim);
+  border-top-color: var(--accent-cyan);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
-.plan-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 20px;
+#preview-status[data-state="warm"] {
+  color: var(--accent-cyan);
 }
 
-.plan-meta span {
-  font-family: var(--font-mono);
-  font-size: 12px;
+#preview-status[data-state="building"] {
+  color: var(--accent-amber);
+}
+
+#preview-status[data-state="verifying"] {
   color: var(--accent-cyan);
-  background: rgba(6, 182, 212, 0.1);
-  padding: 4px 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(6, 182, 212, 0.15);
 }
 
-.plan-features {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
+#preview-status[data-state="done"] {
+  color: var(--accent-green);
 }
 
-.plan-feature {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 8px;
-  border: 1px solid var(--border);
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.plan-feature-name {
+/* Download button (shown in DONE state) */
+.preview-download-btn {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  background: rgba(34, 197, 94, 0.2);
+  border: 1px solid rgba(34, 197, 94, 0.4);
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: var(--accent-green);
+  font-family: var(--font-sans);
   font-size: 13px;
-  font-weight: 500;
-  color: var(--text);
+  font-weight: 600;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.2s;
+}
+
+.preview-download-btn:hover {
+  background: rgba(34, 197, 94, 0.3);
 }
 
-.plan-feature-meta {
+/* === Status Bar (Bottom) === */
+#status-bar {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 0 20px;
+  background: rgba(10, 10, 15, 0.95);
+  border-top: 1px solid var(--border);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 12px;
   color: var(--text-dim);
 }
 
-.plan-warnings {
-  margin-bottom: 12px;
+#status-bar span {
+  white-space: nowrap;
+}
+
+#status-phase {
+  color: var(--accent-cyan);
 }
 
-.plan-warning {
+/* === Activity Feed (build progress in chat panel) === */
+.activity-separator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0 8px;
+  font-family: var(--font-mono);
   font-size: 11px;
-  color: var(--accent-amber);
-  padding: 4px 0;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-.plan-warning::before {
-  content: '\26a0\fe0f ';
+.activity-separator::before,
+.activity-separator::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
 }
 
-.plan-auto {
+.activity-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 8px;
+  font-family: var(--font-mono);
   font-size: 12px;
+  line-height: 1.6;
   color: var(--text-dim);
+  animation: activityFadeIn 0.2s ease;
+}
+
+@keyframes activityFadeIn {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.activity-icon {
+  flex-shrink: 0;
+  width: 14px;
   text-align: center;
-  margin-top: 12px;
-  animation: pulse-text 1.5s ease-in-out infinite;
 }
 
-@keyframes pulse-text {
-  0%, 100% { opacity: 0.5; }
-  50% { opacity: 1; }
+.activity-text {
+  word-break: break-all;
+}
+
+/* Activity item types */
+.activity-phase {
+  color: var(--accent-cyan);
+}
+
+.activity-file {
+  color: var(--accent-green);
+}
+
+.activity-file .activity-icon {
+  color: #4ade80;
+}
+
+.activity-success {
+  color: var(--accent-green);
+}
+
+.activity-warn {
+  color: var(--accent-amber);
+}
+
+.activity-error {
+  color: var(--accent-red);
 }
 
 /* === Completion Overlay === */
@@ -623,6 +593,7 @@ html, body {
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s ease;
+  background: rgba(0, 0, 0, 0.7);
 }
 
 #completion-overlay.visible {
@@ -631,551 +602,239 @@ html, body {
 }
 
 .completion-card {
-  background: rgba(10, 10, 30, 0.95);
+  position: relative;
+  background: rgba(10, 10, 30, 0.98);
   border: 1px solid rgba(34, 197, 94, 0.3);
   border-radius: 16px;
-  padding: 40px 48px;
-  max-width: 440px;
+  padding: 32px 40px;
+  max-width: 460px;
   width: 90%;
-  backdrop-filter: blur(20px);
-  box-shadow: 0 0 60px rgba(34, 197, 94, 0.15), 0 0 120px rgba(34, 197, 94, 0.05);
-  animation: plan-enter 0.4s ease-out;
   text-align: center;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 0 60px rgba(34, 197, 94, 0.1);
 }
 
-.completion-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
+.completion-close-btn {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 24px;
+  cursor: pointer;
+  padding: 4px 8px;
   line-height: 1;
+  border-radius: 4px;
+  transition: color 0.2s, background 0.2s;
 }
 
-.completion-icon.success {
-  color: var(--accent-green);
-  text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
+.completion-close-btn:hover {
+  color: var(--text-bright);
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.completion-icon.partial {
-  color: var(--accent-amber);
-  text-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
+.completion-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
 }
 
+.completion-icon.success { color: var(--accent-green); }
+.completion-icon.partial { color: var(--accent-amber); }
+
 .completion-header {
   font-size: 20px;
   font-weight: 600;
   color: var(--text-bright);
-  margin-bottom: 4px;
-  letter-spacing: 0.5px;
+  margin-bottom: 8px;
 }
 
 .completion-app-name {
-  font-family: var(--font-mono);
   font-size: 14px;
-  color: var(--accent-cyan);
-  margin-bottom: 20px;
+  color: var(--text-dim);
+  margin-bottom: 16px;
 }
 
 .completion-metrics {
   display: flex;
   justify-content: center;
-  gap: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
   margin-bottom: 24px;
-}
-
-.completion-metrics span {
   font-family: var(--font-mono);
   font-size: 12px;
-  color: var(--text-dim);
-  background: rgba(255, 255, 255, 0.04);
-  padding: 4px 10px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
+  color: var(--accent-cyan);
 }
 
-.completion-launch-btn {
-  display: block;
-  width: 100%;
-  padding: 14px 24px;
-  background: linear-gradient(135deg, var(--accent-green), #16a34a);
-  border: none;
-  border-radius: 10px;
-  color: #000;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  font-size: 15px;
-  cursor: pointer;
-  transition: transform 0.15s, opacity 0.2s, box-shadow 0.3s;
-  margin-bottom: 12px;
-}
-
-.completion-launch-btn:hover {
-  transform: scale(1.02);
-  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
-}
-
-.completion-launch-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.completion-launch-btn.ready {
-  background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
-  animation: glow-border 2s ease-in-out infinite;
-}
-
-.completion-status {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--text-dim);
-  min-height: 20px;
-}
-
-.launch-url {
-  color: var(--accent-cyan);
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.launch-url:hover {
-  text-decoration: underline;
-  text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
-}
-
-/* === Animations === */
-@keyframes pulse-dot {
-  0%, 100% { box-shadow: 0 0 8px var(--accent-cyan); }
-  50% { box-shadow: 0 0 20px var(--accent-cyan), 0 0 40px rgba(6, 182, 212, 0.3); }
-}
-
-@keyframes glow-border {
-  0%, 100% { border-color: rgba(6, 182, 212, 0.2); }
-  50% { border-color: rgba(6, 182, 212, 0.5); }
-}
-
-@keyframes typewriter-cursor {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-.cursor-blink::after {
-  content: '\2588';
-  animation: typewriter-cursor 0.8s step-end infinite;
-  color: var(--accent-cyan);
-}
-
-/* === Scrollbar === */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-/* === Question Cards (Plan Mode) === */
-.plan-questions-card {
-  max-width: 560px;
-  max-height: 85vh;
-  overflow-y: auto;
-}
-
-.plan-questions-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.plan-questions-header .plan-header {
-  margin-bottom: 0;
-}
-
-.plan-round {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-dim);
-  background: rgba(255, 255, 255, 0.04);
-  padding: 4px 10px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-}
-
-.confidence-meter {
-  margin-bottom: 20px;
-}
-
-.confidence-bar {
-  height: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.confidence-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
-  transition: width 0.5s ease;
-}
-
-.confidence-label {
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  margin-top: 6px;
-}
-
-.plan-questions {
+.completion-actions {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.question-card {
-  padding: 0;
-}
-
-.question-header {
-  display: inline-block;
-  background: rgba(6, 182, 212, 0.15);
-  color: var(--accent-cyan);
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
-  font-family: var(--font-mono);
-  font-weight: 500;
-}
-
-.question-text {
-  font-size: 0.95rem;
-  color: var(--text-bright);
-  font-weight: 500;
-  margin-bottom: 6px;
-  line-height: 1.4;
-}
-
-.select-hint {
-  color: var(--text-dim);
-  font-size: 0.75rem;
+  gap: 12px;
+  justify-content: center;
   margin-bottom: 8px;
-  font-style: italic;
 }
 
-.question-options {
+.completion-action-btn {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 6px;
-}
-
-.question-option {
-  cursor: pointer;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 10px 20px;
   border-radius: 8px;
-  padding: 12px 16px;
-  transition: all 0.2s ease;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.question-option:hover {
-  border-color: rgba(6, 182, 212, 0.3);
-  background: rgba(6, 182, 212, 0.05);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform 0.15s, opacity 0.2s;
+  border: none;
 }
 
-.question-option.selected {
-  border-color: var(--accent-cyan);
-  background: rgba(6, 182, 212, 0.1);
-  box-shadow: 0 0 12px rgba(6, 182, 212, 0.1);
+.completion-action-btn:hover {
+  transform: scale(1.03);
 }
 
-.option-label {
-  font-weight: 600;
-  color: var(--text-bright);
-  font-size: 0.95rem;
+.completion-action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
 }
 
-.option-description {
-  color: var(--text-dim);
-  font-size: 0.8rem;
-  margin-top: 2px;
-  line-height: 1.4;
+.completion-action-icon {
+  font-size: 16px;
 }
 
-.confirm-selections-btn {
-  width: 100%;
-  padding: 12px;
-  background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
+.completion-download-btn {
+  background: linear-gradient(135deg, var(--accent-green), #16a34a);
   color: #000;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 1rem;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  margin-top: 20px;
-  transition: all 0.2s;
 }
 
-.confirm-selections-btn:hover:not(:disabled) {
-  transform: scale(1.01);
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
+.completion-github-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-bright);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.confirm-selections-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-  transform: none;
+.completion-github-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
 }
 
-.refining-state {
-  text-align: center;
-  padding: 32px;
+.completion-status {
+  margin-top: 12px;
+  font-size: 12px;
   color: var(--text-dim);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-}
-
-.refining-spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--accent-cyan);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ── Chat Interface ── */
-.chat-container {
+/* GitHub form inside completion modal */
+.github-form {
+  text-align: left;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  max-height: 80vh;
-  background: rgba(10, 10, 15, 0.95);
-  border: 1px solid rgba(100, 200, 255, 0.15);
-  border-radius: 12px;
-  overflow: hidden;
-  max-width: 600px;
-  margin: 5vh auto 0;
+  gap: 10px;
 }
 
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
+.github-form-row {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
 }
 
-.chat-msg {
-  max-width: 85%;
-  animation: chatFadeIn 0.3s ease;
-}
-
-.chat-msg-architect {
-  align-self: flex-start;
-}
-
-.chat-msg-user {
-  align-self: flex-end;
-}
-
-.chat-msg-text {
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.chat-msg-architect .chat-msg-text {
-  background: rgba(100, 200, 255, 0.1);
-  color: rgba(200, 220, 255, 0.9);
-  border-bottom-left-radius: 4px;
-}
-
-.chat-msg-user .chat-msg-text {
-  background: rgba(100, 200, 255, 0.2);
-  color: rgba(220, 240, 255, 0.95);
-  border-bottom-right-radius: 4px;
-}
-
-.chat-input-bar {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid rgba(100, 200, 255, 0.1);
-  background: rgba(5, 5, 10, 0.8);
+.github-form-row label {
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
 }
 
-.chat-input-bar input {
+.github-form-row input[type="text"] {
   flex: 1;
-  background: rgba(20, 20, 30, 0.8);
-  border: 1px solid rgba(100, 200, 255, 0.2);
-  border-radius: 8px;
-  padding: 10px 14px;
-  color: rgba(200, 220, 255, 0.9);
-  font-size: 14px;
+  background: rgba(20, 20, 40, 0.8);
+  border: 1px solid var(--border-glow);
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: var(--text-bright);
+  font-family: var(--font-mono);
+  font-size: 13px;
   outline: none;
 }
 
-.chat-input-bar input:focus {
-  border-color: rgba(100, 200, 255, 0.4);
+.github-form-row input[type="text"]:focus {
+  border-color: var(--accent-cyan);
 }
 
-.chat-input-bar button {
-  background: rgba(100, 200, 255, 0.15);
-  border: 1px solid rgba(100, 200, 255, 0.3);
-  border-radius: 8px;
-  padding: 10px 20px;
-  color: rgba(100, 200, 255, 0.9);
+.github-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
 }
 
-.chat-input-bar button:hover {
-  background: rgba(100, 200, 255, 0.25);
+.github-toggle input[type="checkbox"] {
+  accent-color: var(--accent-cyan);
 }
 
-/* Chat cards (inline) */
-.chat-cards {
-  margin-top: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.chat-card {
-  background: rgba(20, 20, 35, 0.8);
-  border: 1px solid rgba(100, 200, 255, 0.15);
-  border-radius: 10px;
-  padding: 12px;
+.github-user {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
 }
 
-.chat-card-header {
+.completion-github-push-btn {
+  background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
+  color: #000;
+  padding: 8px 16px;
   font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: rgba(100, 200, 255, 0.6);
-  margin-bottom: 4px;
 }
 
-.chat-card-question {
+.github-success {
+  color: var(--accent-green);
   font-size: 13px;
-  color: rgba(200, 220, 255, 0.8);
-  margin-bottom: 8px;
-}
-
-.chat-card-options {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.chat-card-option {
-  padding: 8px 12px;
-  border: 1px solid rgba(100, 200, 255, 0.1);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
 }
 
-.chat-card-option:hover {
-  background: rgba(100, 200, 255, 0.08);
-  border-color: rgba(100, 200, 255, 0.25);
-}
-
-.chat-card-option.selected {
-  background: rgba(100, 200, 255, 0.15);
-  border-color: rgba(100, 200, 255, 0.4);
-}
-
-.chat-card-option-label {
-  font-size: 13px;
-  color: rgba(200, 220, 255, 0.9);
-  font-weight: 500;
+.github-link {
+  color: var(--accent-cyan);
+  text-decoration: none;
 }
 
-.chat-card-option-desc {
-  font-size: 11px;
-  color: rgba(200, 220, 255, 0.5);
-  margin-top: 2px;
+.github-link:hover {
+  text-decoration: underline;
 }
 
-/* Ready state */
-.chat-ready-summary {
-  margin-top: 8px;
-  padding: 8px 12px;
-  background: rgba(80, 200, 120, 0.1);
-  border: 1px solid rgba(80, 200, 120, 0.2);
-  border-radius: 8px;
-  font-size: 13px;
-  color: rgba(80, 200, 120, 0.9);
+.github-error {
+  color: var(--accent-red);
+  font-size: 12px;
 }
 
-.chat-build-btn {
-  margin-top: 10px;
-  width: 100%;
-  padding: 12px;
-  background: rgba(80, 200, 120, 0.2);
-  border: 1px solid rgba(80, 200, 120, 0.4);
-  border-radius: 8px;
-  color: rgba(80, 200, 120, 0.95);
-  font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
+/* === Scrollbar === */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
-.chat-build-btn:hover {
-  background: rgba(80, 200, 120, 0.3);
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-/* Hide header input bar during chat */
-#header.chat-active #input-bar {
-  display: none;
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
 }
 
-@keyframes chatFadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 /* === Responsive === */
 @media (max-width: 900px) {
   #app {
     grid-template-columns: 1fr;
-    grid-template-rows: 60px 300px 1fr 200px;
+    grid-template-rows: 48px 1fr 50vh 36px;
   }
-  #orb-container {
+  #chat-panel {
     grid-column: 1;
     grid-row: 2;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
   }
-  #timeline-panel {
+  #preview-panel {
     grid-column: 1;
     grid-row: 3;
-    border-left: none;
-    border-top: 1px solid var(--border);
-  }
-  #code-panel {
-    grid-column: 1;
-    grid-row: 4;
   }
 }