@growthub/cli 0.3.58 → 0.3.60

package/assets/worker-kits/growthub-zernio-social-v1/studio/src/views/Sequences.jsx

@@ -0,0 +1,160 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../api.js';
+import { useApp } from '../App.jsx';
+
+export default function Sequences({ onNavigate }) {
+  const { showToast } = useApp();
+  const [sequences, setSequences] = useState([]);
+  const [loading, setLoading]     = useState(true);
+  const [toggling, setToggling]   = useState(null);
+  const [expanded, setExpanded]   = useState(null);
+
+  const load = useCallback(() => {
+    api.getSequences()
+      .then(d => setSequences(d.sequences || d.data || []))
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(load, [load]);
+
+  const toggle = async (seq) => {
+    const id = seq._id || seq.id;
+    const isActive = seq.status === 'active';
+    setToggling(id);
+    try {
+      if (isActive) {
+        await api.pauseSequence(id);
+        showToast('Sequence paused');
+      } else {
+        await api.activateSequence(id);
+        showToast('Sequence activated ✓');
+      }
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setToggling(null);
+    }
+  };
+
+  if (loading) return <div className="loading-row"><span className="spinner" />Loading sequences…</div>;
+
+  if (!sequences.length) return (
+    <div>
+      <div className="empty">
+        <div className="empty-icon">🔀</div>
+        <div className="empty-msg">No sequences found.<br />Sequences auto-enroll contacts into multi-step follow-up flows after they trigger a comment rule.</div>
+      </div>
+
+      <div className="card mt12" style={{ maxWidth: 600 }}>
+        <div className="section-title mb12">How Sequences Work with Comment Rules</div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {[
+            { step: '1', icon: '💬', title: 'Comment trigger fires', desc: 'Someone comments "X" on your post' },
+            { step: '2', icon: '📩', title: 'Instant reply + DM', desc: 'Comment Rule sends the lead magnet immediately' },
+            { step: '3', icon: '🔀', title: 'Contact enrolled in sequence', desc: 'Commenter auto-enrolled into a follow-up nurture sequence' },
+            { step: '4', icon: '📬', title: 'Automated follow-ups', desc: 'Day 1: "Did you get a chance to check it out?" · Day 3: Case study · Day 7: Offer' },
+          ].map(s => (
+            <div key={s.step} className="row" style={{ gap: 14, alignItems: 'flex-start' }}>
+              <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--accentb)', border: '1px solid var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: 'var(--accentl)', flexShrink: 0 }}>
+                {s.step}
+              </div>
+              <div>
+                <div style={{ fontWeight: 500, fontSize: 13 }}>{s.icon} {s.title}</div>
+                <div style={{ fontSize: 12, color: 'var(--muted)' }}>{s.desc}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div style={{ marginTop: 16, fontSize: 12, color: 'var(--muted)' }}>
+          Create sequences in the Zernio dashboard, then they appear here for activation management.
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div>
+      <div className="row mb16" style={{ justifyContent: 'space-between' }}>
+        <div>
+          <div className="section-title" style={{ marginBottom: 2 }}>{sequences.length} Sequence{sequences.length !== 1 ? 's' : ''}</div>
+          <div style={{ fontSize: 12, color: 'var(--muted)' }}>Multi-step follow-up flows enrolled from comment automations</div>
+        </div>
+        <button className="btn btn-ghost btn-sm" onClick={load}>↻ Refresh</button>
+      </div>
+
+      {sequences.map(seq => {
+        const id       = seq._id || seq.id;
+        const isActive = seq.status === 'active';
+        const steps    = seq.steps || seq.messages || [];
+        const isExpanded = expanded === id;
+
+        return (
+          <div key={id} className="seq-card">
+            <div className="seq-header">
+              <div className="row" style={{ gap: 10 }}>
+                <span style={{ fontWeight: 600 }}>{seq.name || seq.title || id}</span>
+                <span className={`badge ${isActive ? 'badge-green' : 'badge-neutral'}`}>{seq.status || 'unknown'}</span>
+              </div>
+              <div className="row" style={{ gap: 8 }}>
+                <button className="btn btn-ghost btn-sm" onClick={() => setExpanded(e => e === id ? null : id)}>
+                  {isExpanded ? 'Hide Steps' : `${steps.length} Steps`}
+                </button>
+                <div className="toggle-wrap" onClick={() => !toggling && toggle(seq)}>
+                  <div className={`toggle ${isActive ? 'on' : ''}`} />
+                  <span className="toggle-label">{toggling === id ? '…' : (isActive ? 'On' : 'Off')}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="seq-meta">
+              {seq.enrolledCount !== undefined && <span>👥 {seq.enrolledCount} enrolled</span>}
+              {seq.completedCount !== undefined && <span>✅ {seq.completedCount} completed</span>}
+              {seq.trigger && <span>🎯 Trigger: <span style={{ fontFamily: 'monospace', color: 'var(--accentl)' }}>{seq.trigger}</span></span>}
+              {seq.createdAt && <span>Created {new Date(seq.createdAt).toLocaleDateString()}</span>}
+            </div>
+
+            {seq.description && (
+              <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10 }}>{seq.description}</div>
+            )}
+
+            {isExpanded && steps.length > 0 && (
+              <div className="seq-steps">
+                {steps.map((step, i) => (
+                  <div key={i} className="seq-step">
+                    <span className="seq-step-num">{i + 1}</span>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontWeight: 500, marginBottom: 2 }}>
+                        {step.type === 'send_dm' ? '📩' : step.type === 'reply_comment' ? '💬' : '📬'}{' '}
+                        {step.name || step.type || 'Step'}
+                        {step.delayDays ? <span style={{ color: 'var(--muted)', fontWeight: 400 }}> · Day {step.delayDays}</span> : null}
+                        {step.delayHours ? <span style={{ color: 'var(--muted)', fontWeight: 400 }}> · +{step.delayHours}h</span> : null}
+                      </div>
+                      {step.content && (
+                        <div style={{ fontSize: 11, color: 'var(--muted)', fontStyle: 'italic' }}>
+                          "{step.content.slice(0, 100)}{step.content.length > 100 ? '…' : ''}"
+                        </div>
+                      )}
+                    </div>
+                    <span className={`badge ${step.status === 'active' ? 'badge-green' : 'badge-neutral'}`} style={{ fontSize: 10 }}>
+                      {step.status || 'active'}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {isExpanded && !steps.length && (
+              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 6 }}>No steps defined for this sequence.</div>
+            )}
+          </div>
+        );
+      })}
+
+      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--muted)' }}>
+        Sequences use <span style={{ fontFamily: 'monospace', color: 'var(--accentl)' }}>POST /api/v1/sequences/:id/activate</span> and <span style={{ fontFamily: 'monospace', color: 'var(--accentl)' }}>/pause</span>. Link sequences to comment rules in <span style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => onNavigate?.('commentrules')}>Comment Rules →</span>
+      </div>
+    </div>
+  );
+}

package/assets/worker-kits/growthub-zernio-social-v1/studio/src/views/Templates.jsx

@@ -0,0 +1,275 @@
+import { useState, useEffect } from 'react';
+import {
+  getTemplates, saveTemplate, deleteTemplate,
+  exportTemplates, importTemplates, previewTemplate,
+  TEMPLATE_TYPES, VARIABLES, seedIfEmpty, forceSeed,
+} from '../lib/templates.js';
+import { useApp } from '../App.jsx';
+
+const BADGE_CLASS = { blue: 'badge-blue', purple: 'badge-purple', green: 'badge-green' };
+
+const EMPTY_FORM = { name: '', type: 'both', body: '', replyBody: '', dmBody: '' };
+
+export default function Templates({ onNavigate }) {
+  const { showToast } = useApp();
+  const [templates, setTemplates] = useState([]);
+  const [filter, setFilter]       = useState('all');
+  const [editing, setEditing]     = useState(null);
+  const [form, setForm]           = useState(EMPTY_FORM);
+  const [previewing, setPreviewing] = useState(null);
+
+  useEffect(() => {
+    seedIfEmpty();
+    setTemplates(getTemplates());
+  }, []);
+
+  const refresh = () => setTemplates(getTemplates());
+
+  const openNew  = () => { setForm(EMPTY_FORM); setEditing('new'); setPreviewing(null); };
+  const openEdit = (t) => {
+    setForm({ name: t.name, type: t.type, body: t.body || '', replyBody: t.replyBody || '', dmBody: t.dmBody || '', id: t.id });
+    setEditing(t.id);
+    setPreviewing(null);
+  };
+  const cancel = () => { setEditing(null); setForm(EMPTY_FORM); };
+
+  const save = () => {
+    if (!form.name.trim()) { showToast('Template name required', false); return; }
+    if (form.type === 'both' && (!form.replyBody.trim() || !form.dmBody.trim())) {
+      showToast('Both reply and DM body required for "Reply + DM" type', false); return;
+    }
+    if (form.type !== 'both' && !form.body.trim()) {
+      showToast('Message body required', false); return;
+    }
+    saveTemplate({ ...form });
+    refresh();
+    cancel();
+    showToast('Template saved ✓');
+  };
+
+  const del = (id) => {
+    if (!confirm('Delete this template? Any rules using it will need to be updated.')) return;
+    deleteTemplate(id);
+    refresh();
+    showToast('Template deleted');
+  };
+
+  const insertVar = (token, field) => {
+    setForm(f => ({ ...f, [field]: (f[field] || '') + token }));
+  };
+
+  const handleImport = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      try {
+        importTemplates(ev.target.result);
+        refresh();
+        showToast('Templates imported ✓');
+      } catch (err) {
+        showToast(err.message, false);
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  };
+
+  const visible = filter === 'all' ? templates : templates.filter(t => t.type === filter);
+
+  return (
+    <div>
+      <div className="row mb16" style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: 10 }}>
+        <div>
+          <div style={{ fontWeight: 600, marginBottom: 4 }}>Template Library</div>
+          <div style={{ fontSize: 12, color: 'var(--muted)' }}>Saved messages for auto-reply comments and DM lead magnets</div>
+        </div>
+        <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
+          <label className="btn btn-ghost btn-sm" style={{ cursor: 'pointer' }}>
+            Import
+            <input type="file" accept=".json" style={{ display: 'none' }} onChange={handleImport} />
+          </label>
+          <button
+            className="btn btn-ghost btn-sm"
+            title="Reset to all 9 Growthub lead magnet templates"
+            onClick={() => { if (confirm('Load all 9 Growthub lead magnet templates? This will overwrite current templates.')) { forceSeed(); refresh(); showToast('Growthub templates loaded ✓'); } }}
+          >
+            ⚡ Load Growthub Templates
+          </button>
+          <button className="btn btn-ghost btn-sm" onClick={exportTemplates} disabled={!templates.length}>Export</button>
+          <button className="btn btn-primary btn-sm" onClick={openNew}>+ New Template</button>
+        </div>
+      </div>
+
+      <div className="filter-bar">
+        {[['all','All'], ['both','Reply + DM'], ['reply_comment','Reply Only'], ['send_dm','DM Only']].map(([v, l]) => (
+          <button key={v} className={`filter-btn ${filter === v ? 'active' : ''}`} onClick={() => setFilter(v)}>{l}</button>
+        ))}
+      </div>
+
+      {editing && (
+        <div className="rule-form mb24">
+          <div style={{ fontWeight: 600, marginBottom: 16 }}>
+            {editing === 'new' ? '+ New Template' : 'Edit Template'}
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 180px', gap: 12, marginBottom: 12 }}>
+            <div className="field" style={{ marginBottom: 0 }}>
+              <label>Template Name</label>
+              <input className="input" placeholder="e.g. Lead Magnet — Free Guide" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
+            </div>
+            <div className="field" style={{ marginBottom: 0 }}>
+              <label>Type</label>
+              <select className="select" value={form.type} onChange={e => setForm(f => ({ ...f, type: e.target.value }))}>
+                <option value="both">Reply + DM</option>
+                <option value="reply_comment">Reply Only</option>
+                <option value="send_dm">DM Only</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={{ marginBottom: 10 }}>
+            <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 6 }}>Insert variable</div>
+            <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
+              {VARIABLES.map(v => (
+                <span
+                  key={v.token}
+                  className="tpl-var"
+                  title={v.desc}
+                  onClick={() => insertVar(v.token, form.type === 'both' ? 'dmBody' : 'body')}
+                >
+                  {v.token}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {form.type === 'both' ? (
+            <div className="both-fields">
+              <div className="field" style={{ marginBottom: 0 }}>
+                <label>💬 Public Reply (comment)</label>
+                <textarea
+                  className="textarea"
+                  style={{ minHeight: 90 }}
+                  placeholder="e.g. Check your DMs, {{firstName}}! 📩"
+                  value={form.replyBody}
+                  onChange={e => setForm(f => ({ ...f, replyBody: e.target.value }))}
+                />
+                <div className="char-count">{form.replyBody.length} chars</div>
+              </div>
+              <div className="field" style={{ marginBottom: 0 }}>
+                <label>📩 DM Body (private)</label>
+                <textarea
+                  className="textarea"
+                  style={{ minHeight: 90 }}
+                  placeholder="Hey {{firstName}}! Here's your free guide..."
+                  value={form.dmBody}
+                  onChange={e => setForm(f => ({ ...f, dmBody: e.target.value }))}
+                />
+                <div className="char-count">{form.dmBody.length} chars</div>
+              </div>
+            </div>
+          ) : (
+            <div className="field" style={{ marginBottom: 0 }}>
+              <label>{form.type === 'send_dm' ? '📩 DM Body' : '💬 Reply Body'}</label>
+              <textarea
+                className="textarea"
+                style={{ minHeight: 120 }}
+                placeholder={form.type === 'send_dm' ? 'Hey {{firstName}}! Here\'s your free guide...' : 'Thanks for your interest! Check your DMs 📩'}
+                value={form.body}
+                onChange={e => setForm(f => ({ ...f, body: e.target.value }))}
+              />
+              <div className="char-count">{form.body.length} chars</div>
+            </div>
+          )}
+
+          {(form.body || form.dmBody || form.replyBody) && (
+            <div style={{ marginTop: 12 }}>
+              <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 6 }}>Preview (sample values)</div>
+              <div className="preview-box">
+                {form.type === 'both'
+                  ? `💬 ${previewTemplate(form.replyBody)}\n\n📩 ${previewTemplate(form.dmBody)}`
+                  : previewTemplate(form.body)}
+              </div>
+            </div>
+          )}
+
+          <div className="row-end mt12">
+            <button className="btn btn-ghost btn-sm" onClick={cancel}>Cancel</button>
+            <button className="btn btn-primary btn-sm" onClick={save}>Save Template</button>
+          </div>
+        </div>
+      )}
+
+      {!visible.length && (
+        <div className="empty">
+          <div className="empty-icon">📝</div>
+          <div className="empty-msg">
+            {filter === 'all' ? 'No templates yet. Create your first reply or DM template.' : `No ${filter} templates.`}
+          </div>
+        </div>
+      )}
+
+      <div className="tpl-grid">
+        {visible.map(t => {
+          const meta = TEMPLATE_TYPES[t.type] || TEMPLATE_TYPES.both;
+          const body = t.type === 'both'
+            ? `💬 ${t.replyBody || ''}\n\n📩 ${t.dmBody || ''}`
+            : (t.body || '');
+          return (
+            <div key={t.id} className={`tpl-card ${previewing === t.id ? 'selected' : ''}`}>
+              <div className="tpl-type-row">
+                <span className="tpl-type-icon">{meta.icon}</span>
+                <span className="tpl-name">{t.name}</span>
+                <span className={`badge badge-${BADGE_CLASS[meta.color]}`}>{meta.label}</span>
+              </div>
+
+              {t.keyword_hint && (
+                <div style={{ fontSize: 11, color: 'var(--muted)' }}>
+                  🔑 Trigger: <span style={{ color: 'var(--accentl)', fontFamily: 'monospace' }}>{t.keyword_hint}</span>
+                </div>
+              )}
+              <div className="tpl-body">{body}</div>
+
+              {previewing === t.id && (
+                <div>
+                  <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 5 }}>Preview</div>
+                  <div className="preview-box" style={{ fontSize: 12, maxHeight: 'none' }}>{previewTemplate(body)}</div>
+                </div>
+              )}
+
+              <div className="tpl-footer">
+                <button className="btn btn-ghost btn-xs" onClick={() => setPreviewing(p => p === t.id ? null : t.id)}>
+                  {previewing === t.id ? 'Hide' : 'Preview'}
+                </button>
+                <button className="btn btn-secondary btn-xs" onClick={() => openEdit(t)}>Edit</button>
+                <button
+                  className="btn btn-ghost btn-xs"
+                  onClick={() => {
+                    navigator.clipboard.writeText(body);
+                    showToast('Copied ✓');
+                  }}
+                >Copy</button>
+                <button className="btn btn-danger btn-xs" style={{ marginLeft: 'auto' }} onClick={() => del(t.id)}>✕</button>
+              </div>
+
+              {t.createdAt && (
+                <div style={{ fontSize: 10, color: 'var(--muted)' }}>
+                  {new Date(t.createdAt).toLocaleDateString()}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {templates.length > 0 && !editing && (
+        <div className="row mt12" style={{ justifyContent: 'flex-end' }}>
+          <button className="btn btn-primary btn-sm" onClick={() => onNavigate && onNavigate('commentrules')}>
+            Use in Comment Rules →
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/assets/worker-kits/growthub-zernio-social-v1/studio/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173, open: true },
+});

package/assets/worker-kits/growthub-zernio-social-v1/workers/zernio-social-operator/CLAUDE.md

@@ -140,13 +140,13 @@ validation-checklist.md
 
 These files define the execution environment, platform constraints, and output contract. Do not improvise around them.
 
-If the user is pairing this kit with the Postiz UI shell (a.k.a. `growthub-postiz-social-v1` running as the presentation layer while Zernio is the engine), also read:
+If the user is working on the exported Growthub UI shell that ships with this worker kit, also read:
 
 ```text
-docs/postiz-ui-shell-integration.md
+docs/growthub-agentic-social-platform-ui-shell.md
 ```
 
-That document defines the 7-module bridge (provider override, post submission, queue sync, caption surface, platform coverage config, env/secret surface, CLI entry point). Treat it as authoritative whenever a request references Postiz.
+That document defines the exported-workspace UI-shell truth: launch flow, API wiring, comment automation scope, and validation sequence. Treat it as authoritative whenever a request references the Growthub social UI shell.
 
 ---