vibespot 0.9.2 → 0.9.3

package/ui/dialog.js

@@ -114,3 +114,139 @@ function vibePrompt(title, defaultValue, placeholder) {
     });
   });
 }
+
+// ---------------------------------------------------------------------------
+// Feedback form → HubSpot Forms API
+// ---------------------------------------------------------------------------
+
+const _FEEDBACK_PORTAL = "144870572";
+const _FEEDBACK_FORM   = "4f18572f-a3ec-4193-bcfd-a373f54d86d2";
+let _feedbackCooldown = false;
+
+/**
+ * Show a feedback dialog that submits to a HubSpot form.
+ * @returns {Promise<void>}
+ */
+function vibeFeedback() {
+  if (_feedbackCooldown) {
+    return vibeAlert("Please wait a moment before submitting another report.", "Cooldown");
+  }
+
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    overlay.innerHTML = `
+      <div class="confirm-dialog" style="max-width:440px">
+        <div class="confirm-dialog__title">Submit Feedback</div>
+        <div style="display:flex;flex-direction:column;gap:10px;margin:12px 0">
+          <label style="font-size:13px;color:var(--text-dim)">Type
+            <select data-role="type" style="display:block;width:100%;margin-top:4px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:13px">
+              <option value="Bug Report">Bug Report</option>
+              <option value="Feature Request">Feature Request</option>
+              <option value="Comment">Comment</option>
+            </select>
+          </label>
+          <label style="font-size:13px;color:var(--text-dim)">Email (optional)
+            <input type="email" data-role="email" placeholder="you@example.com" style="display:block;width:100%;margin-top:4px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:13px;box-sizing:border-box" />
+          </label>
+          <label style="font-size:13px;color:var(--text-dim)">Message
+            <textarea data-role="message" rows="5" maxlength="2000" placeholder="Describe the issue or idea..." style="display:block;width:100%;margin-top:4px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:13px;resize:vertical;font-family:inherit;box-sizing:border-box"></textarea>
+          </label>
+        </div>
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--secondary" data-action="cancel">Cancel</button>
+          <button class="btn btn--primary" data-action="submit">Submit</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    const typeEl = overlay.querySelector('[data-role="type"]');
+    const emailEl = overlay.querySelector('[data-role="email"]');
+    const msgEl = overlay.querySelector('[data-role="message"]');
+    const submitBtn = overlay.querySelector('[data-action="submit"]');
+
+    setTimeout(() => msgEl.focus(), 50);
+
+    const close = () => { overlay.remove(); resolve(); };
+
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", close);
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+
+    submitBtn.addEventListener("click", async () => {
+      const message = msgEl.value.trim();
+      if (!message) { msgEl.style.borderColor = "var(--error)"; msgEl.focus(); return; }
+
+      submitBtn.disabled = true;
+      submitBtn.textContent = "Sending...";
+
+      try {
+        const res = await fetch(
+          `https://api.hsforms.com/submissions/v3/integration/submit/${_FEEDBACK_PORTAL}/${_FEEDBACK_FORM}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              fields: [
+                { name: "report_type", value: typeEl.value },
+                { name: "email", value: emailEl.value },
+                { name: "message", value: message },
+              ],
+              context: { pageUri: window.location.href, pageName: "vibespot" },
+            }),
+          }
+        );
+        if (!res.ok) throw new Error("HTTP " + res.status);
+        close();
+        _feedbackCooldown = true;
+        setTimeout(() => { _feedbackCooldown = false; }, 30000);
+        await vibeAlert("Thank you! Your feedback has been submitted.", "Feedback Sent");
+      } catch (err) {
+        submitBtn.disabled = false;
+        submitBtn.textContent = "Submit";
+        await vibeAlert("Failed to submit: " + err.message, "Error");
+      }
+    });
+  });
+}
+
+/**
+ * Show a large scrollable content viewer dialog with rendered markdown.
+ * Uses the `marked` library (loaded via vendor/marked.umd.js).
+ * @param {string} content — markdown text to display
+ * @param {string} [title] — dialog title
+ * @returns {Promise<void>}
+ */
+function vibeViewContent(content, title) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+
+    const dialog = document.createElement("div");
+    dialog.className = "confirm-dialog confirm-dialog--wide";
+
+    if (title) {
+      dialog.innerHTML = '<div class="confirm-dialog__title">' + esc(title) + '</div>';
+    }
+
+    const body = document.createElement("div");
+    body.className = "confirm-dialog__content-view md-body";
+    body.innerHTML = typeof marked !== "undefined" ? marked.parse(content) : esc(content);
+    dialog.appendChild(body);
+
+    const actions = document.createElement("div");
+    actions.className = "confirm-dialog__actions";
+    actions.innerHTML = '<button class="btn btn--primary" data-action="ok">Close</button>';
+    dialog.appendChild(actions);
+
+    overlay.appendChild(dialog);
+    document.body.appendChild(overlay);
+
+    const close = () => { overlay.remove(); resolve(); };
+    overlay.querySelector('[data-action="ok"]').addEventListener("click", close);
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+    document.addEventListener("keydown", function onKey(e) {
+      if (e.key === "Escape") { document.removeEventListener("keydown", onKey); close(); }
+    });
+  });
+}

package/ui/index.html

@@ -44,7 +44,10 @@
       <div class="topbar__logo-icon"><svg viewBox="0 0 512 512" width="18" height="18"><path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="currentColor"/></svg></div>
       <span class="topbar__brand-name">vibeSpot</span>
     </div>
-    <div style="margin-left:auto">
+    <div style="margin-left:auto; display:flex; align-items:center; gap:4px">
+      <button class="btn btn--ghost btn--sm" id="feedback-btn" title="Submit feedback" onclick="vibeFeedback()">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="vertical-align:-2px;margin-right:4px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Feedback
+      </button>
       <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
         <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
         <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -156,6 +159,9 @@
         <span class="topbar__project-pill" id="dashboard-theme-name"></span>
       </div>
       <div class="topbar__right">
+        <button class="topbar__icon-btn" title="Submit feedback" onclick="vibeFeedback()">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        </button>
         <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
           <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
           <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -209,6 +215,8 @@
               <span class="brand-asset-upload__icon" id="brand-icon-brandvoice">+</span>
               <span class="brand-asset-upload__label">brandvoice.md</span>
             </label>
+            <button class="btn btn--sm btn--outline" id="btn-extract-design" title="Auto-extract design system from this theme's CSS and modules">Extract from Theme</button>
+            <button class="btn btn--sm btn--outline" id="btn-import-reference" title="Import design from another HubSpot theme or local folder">Import Reference</button>
           </div>
         </section>
 
@@ -307,6 +315,9 @@
         </div>
       </div>
       <div class="topbar__right">
+        <button class="topbar__icon-btn" title="Submit feedback" onclick="vibeFeedback()">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        </button>
         <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
           <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
           <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -400,6 +411,11 @@
       <div class="resize-handle" id="resize-handle"></div>
 
       <main class="panel panel--right" id="panel-right">
+        <div class="view-toggle" id="view-toggle">
+          <button class="view-toggle__btn active" data-view="preview">Preview</button>
+          <button class="view-toggle__btn" data-view="code">Code</button>
+        </div>
+
         <div class="preview" id="preview-container">
           <div class="browser-chrome" id="browser-chrome">
             <div class="browser-chrome__bar">
@@ -413,6 +429,24 @@
             <iframe id="preview-frame" class="browser-chrome__frame" sandbox="allow-scripts allow-same-origin"></iframe>
           </div>
         </div>
+
+        <div class="code-view hidden" id="code-view">
+          <div class="code-view__sidebar">
+            <div class="code-view__sidebar-header">Files</div>
+            <div class="code-view__file-list" id="code-file-list"></div>
+          </div>
+          <div class="code-view__editor">
+            <div class="code-view__editor-header">
+              <span class="code-view__filename" id="code-filename">Select a file</span>
+              <div class="code-view__editor-actions">
+                <span class="code-view__dirty-dot hidden" id="code-dirty-dot" title="Unsaved changes"></span>
+                <button class="btn btn--sm btn--accent" id="code-save-btn" disabled>Save</button>
+              </div>
+            </div>
+            <div class="code-view__editor-area" id="code-editor-area"></div>
+          </div>
+        </div>
+
         <aside class="history-panel hidden" id="history-panel">
           <div class="history-panel__header">
             <h3>Version History</h3>
@@ -469,6 +503,8 @@
 
   </div><!-- /app-body -->
 
+  <script src="/vendor/marked.umd.js"></script>
+  <script src="/vendor/codemirror-bundle.global.js"></script>
   <script src="/dialog.js"></script>
   <script src="/setup.js"></script>
   <script src="/dashboard.js"></script>
@@ -477,5 +513,6 @@
   <script src="/chat.js"></script>
   <script src="/preview.js"></script>
   <script src="/field-editor.js"></script>
+  <script src="/code-editor.js"></script>
 </body>
 </html>

package/ui/styles.css

@@ -51,7 +51,7 @@
   --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);
   --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
   --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
-  --overlay-bg: rgba(0,0,0,0.6);
+  --overlay-bg: rgba(0,0,0,0.75);
   --scrollbar-thumb: rgba(255,255,255,0.08);
   --scrollbar-hover: rgba(255,255,255,0.14);
   --bg-deep: #0a0a0a;
@@ -88,7 +88,7 @@
   --shadow-sm: 0 4px 16px rgba(0,0,0,0.08);
   --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
   --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
-  --overlay-bg: rgba(0,0,0,0.3);
+  --overlay-bg: rgba(0,0,0,0.5);
   --scrollbar-thumb: rgba(0,0,0,0.12);
   --scrollbar-hover: rgba(0,0,0,0.2);
   --bg-deep: #f0efed;
@@ -686,9 +686,9 @@ body { display: flex; }
   background: none;
   border: none;
   color: var(--text-muted);
-  font-size: 18px;
+  font-size: 24px;
   cursor: pointer;
-  padding: 0 4px;
+  padding: 0 6px;
   opacity: 0;
   transition: opacity 0.15s, color 0.15s;
 }
@@ -701,6 +701,25 @@ body { display: flex; }
   color: var(--error);
 }
 
+.dashboard__template-clone {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0 6px;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.dashboard__template-item:hover .dashboard__template-clone {
+  opacity: 1;
+}
+
+.dashboard__template-clone:hover {
+  color: var(--accent);
+}
+
 /* Module library chips */
 .dashboard__module-library {
   display: flex;
@@ -783,6 +802,8 @@ body { display: flex; }
 /* Brand asset upload */
 .dashboard__brand-assets {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 12px;
 }
 
@@ -819,6 +840,23 @@ body { display: flex; }
   color: var(--success);
 }
 
+.brand-asset-view {
+  font-size: 11px;
+  padding: 2px 6px;
+  margin-left: 4px;
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+.brand-asset-view:hover {
+  opacity: 1;
+}
+
 .brand-asset-upload__label {
   font-size: 13px;
   color: var(--text);
@@ -996,6 +1034,31 @@ body { display: flex; }
   border-color: var(--border-hover);
 }
 
+.btn--outline {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+.btn--outline:hover {
+  color: var(--text);
+  border-color: var(--accent);
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.btn--accent {
+  background: var(--accent);
+  color: #fff;
+  border: 1px solid var(--accent);
+}
+.btn--accent:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+.btn--accent:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
 .btn--danger {
   background: var(--error);
   color: var(--text-on-accent);
@@ -1025,6 +1088,69 @@ body { display: flex; }
   max-width: 90vw;
   box-shadow: var(--shadow-lg);
 }
+.confirm-dialog--wide {
+  width: 640px;
+  max-width: 90vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+.confirm-dialog__content-view {
+  flex: 1;
+  overflow-y: auto;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-muted);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 16px;
+  max-height: 60vh;
+}
+
+/* Rendered markdown inside content viewer */
+.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
+  color: var(--text);
+  margin: 1.2em 0 0.4em;
+  line-height: 1.3;
+}
+.md-body h1 { font-size: 18px; }
+.md-body h2 { font-size: 15px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
+.md-body h3 { font-size: 13px; }
+.md-body h4 { font-size: 12px; color: var(--text-muted); }
+.md-body h1:first-child, .md-body h2:first-child { margin-top: 0; }
+.md-body p { margin: 0.5em 0; }
+.md-body ul { margin: 0.4em 0; padding-left: 1.4em; }
+.md-body li { margin: 0.2em 0; }
+.md-body strong { color: var(--text); font-weight: 600; }
+.md-body hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
+.md-body code {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--accent);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: var(--font-mono, 'SF Mono', SFMono-Regular, Consolas, monospace);
+  font-size: 0.9em;
+}
+.md-body pre {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+  margin: 0.6em 0;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
+}
+.md-body pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
 .confirm-dialog__title {
   font-size: 16px;
   font-weight: 600;
@@ -1221,6 +1347,7 @@ body { display: flex; }
 .panel--right {
   flex: 1;
   display: flex;
+  flex-direction: column;
   position: relative;
   background: var(--bg-deep);
 }
@@ -1236,6 +1363,151 @@ body { display: flex; }
   background: var(--accent);
 }
 
+/* ================================================================
+   VIEW TOGGLE (Preview / Code tabs)
+   ================================================================ */
+.view-toggle {
+  display: flex;
+  gap: 2px;
+  padding: 6px 12px;
+  background: var(--bg-panel-solid);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.view-toggle__btn {
+  padding: 4px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-dim);
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.view-toggle__btn:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+.view-toggle__btn.active {
+  background: var(--bg-input);
+  color: var(--text);
+}
+
+/* ================================================================
+   CODE VIEW (file browser + editor)
+   ================================================================ */
+.code-view {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+.code-view__sidebar {
+  width: 200px;
+  min-width: 160px;
+  border-right: 1px solid var(--border);
+  background: var(--bg-panel-solid);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+.code-view__sidebar-header {
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+}
+.code-view__file-group {
+  border-bottom: 1px solid var(--border);
+}
+.code-view__group-header {
+  padding: 8px 14px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+.code-view__file-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px 5px 22px;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.1s;
+}
+.code-view__file-item:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.code-view__file-item--active {
+  background: var(--bg-input);
+  color: var(--accent);
+}
+.code-view__file-item--active:hover {
+  color: var(--accent);
+}
+.code-view__file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Editor area */
+.code-view__editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.code-view__editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel-solid);
+  flex-shrink: 0;
+}
+.code-view__filename {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono, 'SF Mono', SFMono-Regular, Consolas, monospace);
+}
+.code-view__editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.code-view__dirty-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+.code-view__editor-area {
+  flex: 1;
+  overflow: auto;
+  background: var(--bg-deep);
+}
+
+/* CodeMirror overrides */
+.code-view__editor-area .cm-editor {
+  height: 100%;
+}
+.code-view__editor-area .cm-editor .cm-scroller {
+  overflow: auto;
+  font-family: var(--font-mono, 'SF Mono', SFMono-Regular, Consolas, monospace);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.code-view__editor-area .cm-editor.cm-focused {
+  outline: none;
+}
+
 /* ================================================================
    MODULE BAR (button at top of left panel)
    ================================================================ */