tryassay 0.21.2 → 0.22.1

package/demo/css/style.css

@@ -0,0 +1,840 @@
+/* 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');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg: #0a0a0a;
+  --bg-panel: rgba(15, 15, 25, 0.85);
+  --bg-glass: rgba(20, 20, 40, 0.6);
+  --border: rgba(255, 255, 255, 0.06);
+  --border-glow: rgba(255, 255, 255, 0.12);
+  --text: #e0e0e0;
+  --text-dim: #6b7280;
+  --text-bright: #ffffff;
+  --accent-blue: #1e3a5f;
+  --accent-cyan: #06b6d4;
+  --accent-amber: #f59e0b;
+  --accent-green: #22c55e;
+  --accent-red: #ef4444;
+  --accent-white: #ffffff;
+  --font-mono: 'JetBrains Mono', monospace;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+
+/* === Layout Grid === */
+#app {
+  display: grid;
+  grid-template-columns: 40% 60%;
+  grid-template-rows: 48px 1fr 36px;
+  width: 100%;
+  height: 100%;
+}
+
+/* === Header === */
+#header {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+  z-index: 10;
+}
+
+#header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-title {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  letter-spacing: 1px;
+}
+
+#header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+#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;
+}
+
+#file-badge.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#file-badge span:last-child {
+  color: var(--accent-cyan);
+  font-weight: 600;
+}
+
+.global-clock {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: opacity 0.4s ease;
+}
+
+.global-clock.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.global-clock .clock-value {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  letter-spacing: 1px;
+}
+
+/* === Chat Panel (Left 40%) === */
+#chat-panel {
+  grid-column: 1;
+  grid-row: 2;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border);
+  overflow: hidden;
+}
+
+/* Chat messages area */
+#chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 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;
+}
+
+#chat-input-area.hidden {
+  display: none;
+}
+
+#chat-input-area input {
+  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;
+  outline: none;
+}
+
+#chat-input-area input:focus {
+  border-color: rgba(100, 200, 255, 0.4);
+}
+
+#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;
+}
+
+#chat-input-area button:hover {
+  background: rgba(100, 200, 255, 0.25);
+}
+
+/* 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;
+}
+
+#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);
+}
+
+/* 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;
+}
+
+#attachment-preview.hidden {
+  display: none;
+}
+
+.attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  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);
+}
+
+.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;
+}
+
+.attachment-chip-remove:hover {
+  color: var(--accent-red);
+}
+
+/* Chat messages */
+.chat-msg {
+  max-width: 90%;
+  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;
+}
+
+@keyframes chatFadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Chat cards (inline decision cards) */
+.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;
+}
+
+.chat-card-header {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(100, 200, 255, 0.6);
+  margin-bottom: 4px;
+}
+
+.chat-card-question {
+  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;
+}
+
+.chat-card-option-desc {
+  font-size: 11px;
+  color: rgba(200, 220, 255, 0.5);
+  margin-top: 2px;
+}
+
+/* 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);
+}
+
+.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;
+}
+
+.chat-build-btn:hover {
+  background: rgba(80, 200, 120, 0.3);
+}
+
+/* === Preview Panel (Right 60%) === */
+#preview-panel {
+  grid-column: 2;
+  grid-row: 2;
+  position: relative;
+  background: #111;
+  overflow: hidden;
+}
+
+#preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #000;
+}
+
+/* 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;
+  background: rgba(10, 10, 15, 0.95);
+  z-index: 5;
+  transition: opacity 0.5s ease;
+}
+
+/* Hide overlay when building or done — let iframe show through */
+#preview-panel.live #preview-overlay {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#preview-status {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--text-dim);
+  text-align: center;
+  max-width: 300px;
+  line-height: 1.6;
+}
+
+/* State-specific status styling */
+#preview-status[data-state="cold"] {
+  color: var(--text-dim);
+}
+
+#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;
+}
+
+#preview-status[data-state="warm"] {
+  color: var(--accent-cyan);
+}
+
+#preview-status[data-state="building"] {
+  color: var(--accent-amber);
+}
+
+#preview-status[data-state="verifying"] {
+  color: var(--accent-cyan);
+}
+
+#preview-status[data-state="done"] {
+  color: var(--accent-green);
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 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: 600;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.2s;
+}
+
+.preview-download-btn:hover {
+  background: rgba(34, 197, 94, 0.3);
+}
+
+/* === 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: 12px;
+  color: var(--text-dim);
+}
+
+#status-bar span {
+  white-space: nowrap;
+}
+
+#status-phase {
+  color: var(--accent-cyan);
+}
+
+/* === 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(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.activity-separator::before,
+.activity-separator::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.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;
+}
+
+.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 === */
+#completion-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+#completion-overlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.completion-card {
+  position: relative;
+  background: rgba(10, 10, 30, 0.98);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-radius: 16px;
+  padding: 32px 40px;
+  max-width: 460px;
+  width: 90%;
+  text-align: center;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 0 60px rgba(34, 197, 94, 0.1);
+}
+
+.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-close-btn:hover {
+  color: var(--text-bright);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.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: 8px;
+}
+
+.completion-app-name {
+  font-size: 14px;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+}
+
+.completion-metrics {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 24px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent-cyan);
+}
+
+.completion-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.completion-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform 0.15s, opacity 0.2s;
+  border: none;
+}
+
+.completion-action-btn:hover {
+  transform: scale(1.03);
+}
+
+.completion-action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.completion-action-icon {
+  font-size: 16px;
+}
+
+.completion-download-btn {
+  background: linear-gradient(135deg, var(--accent-green), #16a34a);
+  color: #000;
+}
+
+.completion-github-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-bright);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.completion-github-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.completion-status {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+/* GitHub form inside completion modal */
+.github-form {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.github-form-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.github-form-row label {
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.github-form-row input[type="text"] {
+  flex: 1;
+  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;
+}
+
+.github-form-row input[type="text"]:focus {
+  border-color: var(--accent-cyan);
+}
+
+.github-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.github-toggle input[type="checkbox"] {
+  accent-color: var(--accent-cyan);
+}
+
+.github-user {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.completion-github-push-btn {
+  background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
+  color: #000;
+  padding: 8px 16px;
+  font-size: 12px;
+}
+
+.github-success {
+  color: var(--accent-green);
+  font-size: 13px;
+}
+
+.github-link {
+  color: var(--accent-cyan);
+  text-decoration: none;
+}
+
+.github-link:hover {
+  text-decoration: underline;
+}
+
+.github-error {
+  color: var(--accent-red);
+  font-size: 12px;
+}
+
+/* === 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);
+}
+
+/* === Responsive === */
+@media (max-width: 900px) {
+  #app {
+    grid-template-columns: 1fr;
+    grid-template-rows: 48px 1fr 50vh 36px;
+  }
+  #chat-panel {
+    grid-column: 1;
+    grid-row: 2;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  #preview-panel {
+    grid-column: 1;
+    grid-row: 3;
+  }
+}