vibespot 0.4.0 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {

package/ui/chat.js

@@ -78,13 +78,19 @@ function handleWsMessage(msg) {
       statusEngine.textContent = msg.engine || "";
       fetchHsAccountStatus();
 
+      // Populate chat header
+      const chatHeaderTitle = document.getElementById("chat-header-title");
+      const chatHeaderContext = document.getElementById("chat-header-context");
+      if (chatHeaderTitle) chatHeaderTitle.textContent = msg.themeName || "Chat";
+      if (chatHeaderContext) chatHeaderContext.textContent = msg.engine || "";
+
       // Restore chat history from server
       if (msg.messages && msg.messages.length > 0) {
         for (const m of msg.messages) {
           if (m.role === "user") {
-            appendUserMessage(m.content);
+            appendUserMessage(m.content, m.timestamp);
           } else if (m.role === "assistant") {
-            appendRestoredAssistantMessage(m.content);
+            appendRestoredAssistantMessage(m.content, m.timestamp);
           }
         }
         scrollToBottom();
@@ -167,10 +173,25 @@ function sendMessage(text) {
 // Message rendering
 // ---------------------------------------------------------------------------
 
-function appendUserMessage(text) {
+function formatMessageTime(ts) {
+  if (!ts) return "";
+  const d = new Date(ts);
+  return `${d.getHours()}:${d.getMinutes().toString().padStart(2, "0")}`;
+}
+
+function appendUserMessage(text, timestamp) {
+  const time = formatMessageTime(timestamp || Date.now());
   const div = document.createElement("div");
   div.className = "chat-msg chat-msg--user";
-  div.innerHTML = `<div class="chat-msg__bubble">${escapeHtml(text)}</div>`;
+  div.innerHTML = `
+    <div class="chat-msg__content">
+      <div class="chat-msg__header">
+        <span class="chat-msg__sender">You</span>
+        <span class="chat-msg__time">${time}</span>
+      </div>
+      <div class="chat-msg__bubble">${escapeHtml(text)}</div>
+    </div>
+    <div class="chat-msg__avatar chat-msg__avatar--user">Y</div>`;
   messagesEl.appendChild(div);
   scrollToBottom();
 }
@@ -186,9 +207,18 @@ function startStreaming() {
     showGeneratingPreview();
   }
 
+  const time = formatMessageTime(streamStartTime);
   const div = document.createElement("div");
   div.className = "chat-msg chat-msg--assistant chat-msg--streaming";
-  div.innerHTML = `<div class="chat-msg__bubble"></div>`;
+  div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
+    <div class="chat-msg__content">
+      <div class="chat-msg__header">
+        <span class="chat-msg__sender">vibeSpot AI</span>
+        <span class="chat-msg__time">${time}</span>
+      </div>
+      <div class="chat-msg__bubble"></div>
+    </div>`;
   messagesEl.appendChild(div);
   streamingMsgEl = div.querySelector(".chat-msg__bubble");
   scrollToBottom();
@@ -271,11 +301,12 @@ function finishStreaming() {
   if (streamingEl) {
     streamingEl.classList.remove("chat-msg--streaming");
 
-    // Add duration metadata beneath the bubble
+    // Add duration metadata beneath the bubble (inside .chat-msg__content)
     const meta = document.createElement("div");
     meta.className = "chat-msg__meta";
     meta.textContent = durationStr;
-    streamingEl.appendChild(meta);
+    const contentEl = streamingEl.querySelector(".chat-msg__content") || streamingEl;
+    contentEl.appendChild(meta);
   }
 
   // Final render of the full response
@@ -290,11 +321,20 @@ function finishStreaming() {
 }
 
 function appendAssistantError(message) {
+  const time = formatMessageTime(Date.now());
   const div = document.createElement("div");
   div.className = "chat-msg chat-msg--assistant";
-  div.innerHTML = `<div class="chat-msg__bubble" style="border-left: 3px solid var(--error);">
-    <strong>Error:</strong> ${escapeHtml(message)}
-  </div>`;
+  div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
+    <div class="chat-msg__content">
+      <div class="chat-msg__header">
+        <span class="chat-msg__sender">vibeSpot AI</span>
+        <span class="chat-msg__time">${time}</span>
+      </div>
+      <div class="chat-msg__bubble" style="border-left: 3px solid var(--error);">
+        <strong>Error:</strong> ${escapeHtml(message)}
+      </div>
+    </div>`;
   messagesEl.appendChild(div);
   scrollToBottom();
 }
@@ -359,10 +399,16 @@ function setStatus(text) {
 // Restored / system messages
 // ---------------------------------------------------------------------------
 
-function appendRestoredAssistantMessage(text) {
+function appendRestoredAssistantMessage(text, timestamp) {
+  const time = formatMessageTime(timestamp);
   const div = document.createElement("div");
   div.className = "chat-msg chat-msg--assistant";
-  div.innerHTML = `<div class="chat-msg__bubble">${renderMarkdown(text)}</div>`;
+  div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
+    <div class="chat-msg__content">
+      ${time ? `<div class="chat-msg__header"><span class="chat-msg__sender">vibeSpot AI</span><span class="chat-msg__time">${time}</span></div>` : ""}
+      <div class="chat-msg__bubble">${renderMarkdown(text)}</div>
+    </div>`;
   messagesEl.appendChild(div);
 }
 
@@ -713,6 +759,12 @@ document.getElementById("starter-templates").addEventListener("click", (e) => {
   if (btn) sendMessage(btn.dataset.prompt);
 });
 
+// Templates icon in input area — toggle welcome section visibility
+document.getElementById("btn-starter-templates")?.addEventListener("click", () => {
+  const welcome = document.getElementById("chat-welcome");
+  if (welcome) welcome.classList.toggle("hidden");
+});
+
 // Version history
 document.getElementById("btn-history")?.addEventListener("click", toggleHistoryPanel);
 document.getElementById("history-panel-close")?.addEventListener("click", () => {

package/ui/index.html

@@ -288,6 +288,10 @@
         </div>
 
         <div class="chat">
+          <div class="chat__header" id="chat-header">
+            <span class="chat__header-title" id="chat-header-title">Chat</span>
+            <span class="chat__header-context" id="chat-header-context"></span>
+          </div>
           <div class="chat__messages" id="chat-messages">
             <div class="chat__welcome" id="chat-welcome">
               <p>Describe what you want or pick a template to get started.</p>
@@ -302,10 +306,17 @@
             </div>
           </div>
           <div class="chat__input-area">
-            <textarea class="chat__input" id="chat-input" placeholder="Describe your landing page..." rows="1"></textarea>
-            <button class="chat__send" id="chat-send" title="Send (Enter)">
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 10L17 3L10 17L9 11L3 10Z" fill="currentColor"/></svg>
-            </button>
+            <div class="chat__input-wrapper">
+              <textarea class="chat__input" id="chat-input" placeholder="Describe your landing page..." rows="1"></textarea>
+              <div class="chat__input-actions">
+                <button class="chat__input-icon" id="btn-starter-templates" title="Templates">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+                </button>
+                <button class="chat__send" id="chat-send" title="Send (Enter)">
+                  <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M3 10L17 3L10 17L9 11L3 10Z" fill="currentColor"/></svg>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </aside>

package/ui/styles.css

@@ -1221,6 +1221,26 @@ html, body {
   overflow: hidden;
 }
 
+.chat__header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel-solid);
+  flex-shrink: 0;
+}
+.chat__header-title {
+  font-family: var(--font-display);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+}
+.chat__header-context {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
 .chat__messages {
   flex: 1;
   overflow-y: auto;
@@ -1310,6 +1330,9 @@ html, body {
 
 /* Chat messages */
 .chat-msg {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
   margin-bottom: 16px;
   animation: fadeIn 0.2s ease;
 }
@@ -1320,32 +1343,100 @@ html, body {
 }
 
 .chat-msg--user {
-  display: flex;
-  justify-content: flex-end;
+  flex-direction: row-reverse;
+}
+
+.chat-msg--user .chat-msg__header {
+  flex-direction: row-reverse;
 }
 
 .chat-msg--user .chat-msg__bubble {
   background: var(--accent-gradient);
   color: white;
-  border-radius: var(--radius) var(--radius) 2px var(--radius);
+  border-radius: 16px 16px 4px 16px;
   max-width: 85%;
 }
 
 .chat-msg--assistant .chat-msg__bubble {
   background: var(--bg-input);
   color: var(--text);
-  border-radius: var(--radius) var(--radius) var(--radius) 2px;
+  border-radius: 16px 16px 16px 4px;
   max-width: 95%;
   border: 1px solid var(--border);
 }
 
+/* Avatar */
+.chat-msg__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+  font-family: var(--font-display);
+}
+.chat-msg__avatar--user {
+  background: var(--accent-gradient);
+  color: white;
+}
+.chat-msg__avatar--ai {
+  background: var(--accent-dim);
+  color: var(--accent);
+  border: 1px solid var(--accent-glow);
+}
+
+/* Content wrapper */
+.chat-msg__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Header (sender + time) */
+.chat-msg__header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
+  padding: 0 2px;
+}
+.chat-msg__sender {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-dim);
+}
+.chat-msg__time {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
 .chat-msg__bubble {
-  padding: 10px 14px;
+  padding: 12px 16px;
   font-size: 13.5px;
   line-height: 1.6;
   word-wrap: break-word;
 }
 
+/* Streaming cursor */
+.chat-msg--streaming .chat-msg__bubble::after {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 14px;
+  background: var(--accent);
+  border-radius: 1px;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: cursorBlink 0.8s ease infinite;
+}
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
 .chat-msg__bubble p { margin-bottom: 8px; }
 .chat-msg__bubble p:last-child { margin-bottom: 0; }
 
@@ -1419,41 +1510,74 @@ html, body {
 
 /* Chat input */
 .chat__input-area {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
   padding: 12px 16px;
   border-top: 1px solid var(--border);
   background: var(--bg-panel-solid);
 }
 
+.chat__input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 6px 6px 6px 14px;
+  transition: border-color 0.2s;
+}
+.chat__input-wrapper:focus-within {
+  border-color: var(--accent-glow);
+}
+
 .chat__input {
   flex: 1;
   resize: none;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 10px 14px;
-  background: var(--bg-input);
+  border: none;
+  background: transparent;
   color: var(--text);
   font-family: var(--font);
   font-size: 14px;
   line-height: 1.5;
   max-height: 150px;
   outline: none;
-  transition: border-color 0.2s;
+  padding: 6px 0;
 }
-.chat__input:focus { border-color: var(--accent-glow); }
 .chat__input::placeholder { color: var(--text-muted); }
 
+.chat__input-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.chat__input-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 8px;
+  transition: all 0.15s;
+}
+.chat__input-icon:hover {
+  color: var(--accent);
+  background: var(--accent-tint);
+}
+
 .chat__send {
-  width: 38px;
-  height: 38px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--accent-gradient);
   border: none;
-  border-radius: var(--radius);
+  border-radius: 8px;
   color: white;
   cursor: pointer;
   transition: filter 0.15s;