@growthub/cli 0.3.59 → 0.3.60

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

@@ -0,0 +1,185 @@
+import { useState, useEffect } from 'react';
+import { api, PROFILE_ID } from '../api.js';
+import { useApp } from '../App.jsx';
+
+const PLT_ICON = { twitter:'𝕏', linkedin:'in', instagram:'📸', facebook:'f', tiktok:'🎵', youtube:'▶', bluesky:'🦋', threads:'@', reddit:'r/', pinterest:'P', telegram:'✈', whatsapp:'W' };
+const CHAR_LIMIT = { twitter: 280, bluesky: 300, threads: 500, pinterest: 500, linkedin: 3000, instagram: 2200, tiktok: 2200, facebook: 63206, youtube: 5000, telegram: 4096, whatsapp: 1024 };
+
+export default function Compose({ onNavigate }) {
+  const { accounts, showToast } = useApp();
+  const [content, setContent]     = useState('');
+  const [selected, setSelected]   = useState([]);
+  const [mode, setMode]           = useState('time'); // 'time' | 'queue'
+  const [schedTime, setSchedTime] = useState('');
+  const [queues, setQueues]       = useState([]);
+  const [queueId, setQueueId]     = useState('');
+  const [mediaFile, setMediaFile] = useState(null);
+  const [mediaId, setMediaId]     = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [banner, setBanner]       = useState(null);
+
+  useEffect(() => {
+    if (!PROFILE_ID) return;
+    api.getQueues(PROFILE_ID)
+      .then(d => setQueues(d.queues || []))
+      .catch(() => {});
+  }, []);
+
+  const toggle = (a) => {
+    setSelected(s => s.find(x => x._id === a._id) ? s.filter(x => x._id !== a._id) : [...s, a]);
+  };
+
+  const charLimit = () => {
+    if (!selected.length) return null;
+    const mins = selected.map(a => CHAR_LIMIT[a.platform] || 9999);
+    return Math.min(...mins);
+  };
+  const limit = charLimit();
+  const over  = limit && content.length > limit;
+
+  const uploadIfNeeded = async () => {
+    if (!mediaFile) return null;
+    const res = await api.uploadMedia(mediaFile);
+    return res.mediaId || res._id;
+  };
+
+  const submit = async () => {
+    if (!content.trim()) { showToast('Add a caption first', false); return; }
+    if (!selected.length) { showToast('Select at least one platform', false); return; }
+    if (mode === 'time' && !schedTime) { showToast('Pick a schedule time or switch to Queue mode', false); return; }
+    if (mode === 'queue' && !queueId) { showToast('Select a queue', false); return; }
+
+    setSubmitting(true);
+    setBanner(null);
+
+    try {
+      let uploadedMediaId = mediaId;
+      if (mediaFile && !mediaId) {
+        uploadedMediaId = await uploadIfNeeded();
+        setMediaId(uploadedMediaId);
+      }
+
+      const platforms = selected.map(a => ({ platform: a.platform, accountId: a._id || a.accountId }));
+      const ikey = `compose-${Date.now()}`;
+      const body = { profileId: PROFILE_ID, content, platforms };
+
+      if (mode === 'time') body.scheduledFor = new Date(schedTime).toISOString();
+      else body.queueId = queueId;
+
+      if (uploadedMediaId) body.media = [{ mediaId: uploadedMediaId }];
+
+      const res = await api.createPost(body, ikey);
+      setBanner({ ok: true, msg: `✓ Post scheduled! ID: ${res.id || res._id || 'created'}` });
+      showToast('Post scheduled ✓');
+      setContent('');
+      setSelected([]);
+      setSchedTime('');
+      setMediaFile(null);
+      setMediaId('');
+    } catch (e) {
+      setBanner({ ok: false, msg: `✗ ${e.message}` });
+      showToast(e.message, false);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: 700 }}>
+      {banner && (
+        <div className={`banner ${banner.ok ? 'banner-ok' : 'banner-err'}`}>{banner.msg}</div>
+      )}
+
+      <div className="card mb16">
+        <div className="field">
+          <label>Caption</label>
+          <textarea
+            className="textarea"
+            placeholder="Write your post…"
+            value={content}
+            onChange={e => setContent(e.target.value)}
+          />
+          {limit && (
+            <div className={`char-count ${over ? 'char-over' : ''}`}>
+              {content.length} / {limit}{over ? ' — over limit for selected platforms' : ''}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="card mb16">
+        <div className="field" style={{ marginBottom: 0 }}>
+          <label>Platforms</label>
+          {!accounts.length ? (
+            <div style={{ color: 'var(--muted)', fontSize: 13 }}>No accounts connected.</div>
+          ) : (
+            <div className="plat-row">
+              {accounts.map(a => (
+                <span
+                  key={a._id}
+                  className={`plat-toggle ${selected.find(x => x._id === a._id) ? 'selected' : ''}`}
+                  onClick={() => toggle(a)}
+                >
+                  {PLT_ICON[a.platform] || a.platform} {a.displayName || a.username}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="card mb16">
+        <div className="field">
+          <label>Scheduling Mode</label>
+          <div className="row mb8">
+            <button className={`btn btn-sm ${mode === 'time' ? 'btn-primary' : 'btn-ghost'}`} onClick={() => setMode('time')}>Specific Time</button>
+            <button className={`btn btn-sm ${mode === 'queue' ? 'btn-primary' : 'btn-ghost'}`} onClick={() => setMode('queue')}>Add to Queue</button>
+          </div>
+        </div>
+
+        {mode === 'time' ? (
+          <div className="field" style={{ marginBottom: 0 }}>
+            <label>Schedule At</label>
+            <input className="input" type="datetime-local" value={schedTime} onChange={e => setSchedTime(e.target.value)} />
+          </div>
+        ) : (
+          <div className="field" style={{ marginBottom: 0 }}>
+            <label>Queue</label>
+            {queues.length ? (
+              <select className="select" value={queueId} onChange={e => setQueueId(e.target.value)}>
+                <option value="">— select queue —</option>
+                {queues.map(q => (
+                  <option key={q._id} value={q._id}>{q.name}</option>
+                ))}
+              </select>
+            ) : (
+              <div style={{ color: 'var(--muted)', fontSize: 13 }}>No queues defined. <span style={{ color: 'var(--accentl)', cursor: 'pointer' }} onClick={() => onNavigate('queues')}>Create one →</span></div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="card mb16">
+        <div className="field" style={{ marginBottom: 0 }}>
+          <label>Media (optional)</label>
+          <input
+            className="input"
+            type="file"
+            accept="image/*,video/*"
+            style={{ cursor: 'pointer', padding: '7px 12px' }}
+            onChange={e => { setMediaFile(e.target.files[0] || null); setMediaId(''); }}
+          />
+          {mediaFile && <div style={{ fontSize: 12, color: 'var(--dim)', marginTop: 5 }}>{mediaFile.name} — will upload on submit</div>}
+          {mediaId && <div style={{ fontSize: 12, color: 'var(--greenl)', marginTop: 5 }}>Uploaded: {mediaId}</div>}
+        </div>
+      </div>
+
+      <div className="row-end">
+        <button className="btn btn-secondary" onClick={() => { setContent(''); setSelected([]); setSchedTime(''); setMediaFile(null); setBanner(null); }}>Clear</button>
+        <button className="btn btn-primary" onClick={submit} disabled={submitting || over}>
+          {submitting ? <><span className="spinner" style={{ marginRight: 7 }} />Scheduling…</> : 'Schedule Post'}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { api, PROFILE_ID } from '../api.js';
+import { useApp } from '../App.jsx';
+
+const PLT_ICON = { twitter:'𝕏', linkedin:'in', instagram:'📸', facebook:'f', tiktok:'🎵', youtube:'▶', bluesky:'🦋', threads:'@', reddit:'r/', pinterest:'P', telegram:'✈', whatsapp:'W' };
+const PLT_BG   = { twitter:'#000', linkedin:'#0077b5', instagram:'#e1306c', facebook:'#1877f2', tiktok:'#010101', youtube:'#ff0000', bluesky:'#0085ff', threads:'#101010', reddit:'#ff4500', pinterest:'#e60023', telegram:'#0088cc', whatsapp:'#25d366' };
+
+export default function Dashboard({ onNavigate }) {
+  const { accounts, profile, showToast } = useApp();
+  const [scheduled, setScheduled] = useState(null);
+  const [queues, setQueues]       = useState(null);
+  const [loading, setLoading]     = useState(true);
+
+  useEffect(() => {
+    if (!PROFILE_ID) { setLoading(false); return; }
+    Promise.all([
+      api.getPosts(PROFILE_ID, 'scheduled'),
+      api.getQueues(PROFILE_ID),
+    ])
+      .then(([posts, qs]) => {
+        setScheduled((posts.posts || []).length);
+        setQueues((qs.queues || []).length);
+      })
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div>
+      <div className="stats-grid">
+        <div className="stat-card">
+          <div className="stat-label">Profile</div>
+          <div className="stat-value" style={{ fontSize: 18, paddingTop: 4 }}>{profile?.name || '—'}</div>
+          <div className="stat-sub">{PROFILE_ID || 'not set'}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Accounts</div>
+          <div className="stat-value">{accounts.length}</div>
+          <div className="stat-sub">connected platforms</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Scheduled</div>
+          <div className="stat-value">{loading ? '…' : scheduled ?? '—'}</div>
+          <div className="stat-sub">pending posts</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Queues</div>
+          <div className="stat-value">{loading ? '…' : queues ?? '—'}</div>
+          <div className="stat-sub">recurring slots</div>
+        </div>
+      </div>
+
+      <div className="row mb16" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <div className="section-title" style={{ marginBottom: 0 }}>Connected Platforms</div>
+        <button className="btn btn-ghost btn-sm" onClick={() => onNavigate('accounts')}>View all →</button>
+      </div>
+
+      {!accounts.length && !loading && (
+        <div className="empty"><div className="empty-icon">🔗</div><div className="empty-msg">No accounts connected on this profile</div></div>
+      )}
+
+      {accounts.map(a => (
+        <div key={a._id || a.accountId} className="account-card">
+          <div className="platform-icon" style={{ background: PLT_BG[a.platform] || '#3f3f46', color: '#fff' }}>
+            {PLT_ICON[a.platform] || a.platform?.[0]?.toUpperCase()}
+          </div>
+          <div className="acc-info">
+            <div className="acc-name">{a.displayName || a.username}</div>
+            <div className="acc-handle">{a.platform} · @{a.username}</div>
+          </div>
+          <span className="badge badge-green">Active</span>
+        </div>
+      ))}
+
+      <hr className="divider" />
+
+      <div className="section-title mb8">Quick Actions</div>
+      <div className="row">
+        <button className="btn btn-primary" onClick={() => onNavigate('compose')}>✏️ New Post</button>
+        <button className="btn btn-secondary" onClick={() => onNavigate('scheduled')}>📅 View Scheduled</button>
+        <button className="btn btn-secondary" onClick={() => onNavigate('queues')}>🔄 Manage Queues</button>
+        <button className="btn btn-secondary" onClick={() => onNavigate('inbox')}>💬 Inbox</button>
+        <button className="btn btn-secondary" onClick={() => onNavigate('analytics')}>📊 Analytics</button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,144 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api, PROFILE_ID } from '../api.js';
+import { useApp } from '../App.jsx';
+
+export default function Inbox() {
+  const { showToast } = useApp();
+  const [conversations, setConversations] = useState([]);
+  const [loading, setLoading]             = useState(true);
+  const [selected, setSelected]           = useState(null);
+  const [thread, setThread]               = useState(null);
+  const [threadLoading, setThreadLoading] = useState(false);
+  const [reply, setReply]                 = useState('');
+  const [sending, setSending]             = useState(false);
+
+  const loadInbox = useCallback(() => {
+    if (!PROFILE_ID) { setLoading(false); return; }
+    api.getInbox(PROFILE_ID)
+      .then(d => setConversations(d.conversations || d.inbox || []))
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(loadInbox, [loadInbox]);
+
+  const selectConv = async (conv) => {
+    setSelected(conv);
+    setThread(null);
+    setReply('');
+    setThreadLoading(true);
+    try {
+      const data = await api.getConversation(conv._id || conv.id);
+      setThread(data);
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setThreadLoading(false);
+    }
+  };
+
+  const sendReply = async () => {
+    if (!reply.trim()) return;
+    if (!selected) return;
+    setSending(true);
+    try {
+      await api.replyConversation(selected._id || selected.id, { content: reply });
+      showToast('Reply sent ✓');
+      setReply('');
+      selectConv(selected);
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (loading) return <div className="loading-row"><span className="spinner" />Loading inbox…</div>;
+
+  if (!conversations.length) return (
+    <div className="empty">
+      <div className="empty-icon">💬</div>
+      <div className="empty-msg">Inbox is empty. DMs, comments, and reviews will appear here.</div>
+    </div>
+  );
+
+  const msgs = thread?.messages || thread?.replies || [];
+
+  return (
+    <div className="inbox-layout">
+      <div className="inbox-list">
+        {conversations.map(c => {
+          const id = c._id || c.id;
+          const isSelected = selected && (selected._id || selected.id) === id;
+          return (
+            <div
+              key={id}
+              className={`inbox-item ${isSelected ? 'selected' : ''}`}
+              onClick={() => selectConv(c)}
+            >
+              <div className="inbox-platform">{c.platform} · {c.type || 'message'}</div>
+              <div className="acc-name" style={{ marginBottom: 3 }}>{c.from || c.author || 'Unknown'}</div>
+              <div className="inbox-preview">{c.preview || c.lastMessage || '…'}</div>
+              {c.updatedAt && (
+                <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>
+                  {new Date(c.updatedAt).toLocaleDateString()}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="inbox-thread">
+        {!selected && (
+          <div className="empty" style={{ margin: 'auto' }}>
+            <div className="empty-icon">💬</div>
+            <div className="empty-msg">Select a conversation</div>
+          </div>
+        )}
+
+        {selected && (
+          <>
+            <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', background: 'var(--surface)' }}>
+              <div style={{ fontWeight: 600, fontSize: 13 }}>{selected.from || selected.author}</div>
+              <div style={{ fontSize: 11, color: 'var(--muted)' }}>{selected.platform} · {selected._id || selected.id}</div>
+            </div>
+
+            <div className="thread-msgs">
+              {threadLoading && <div className="loading-row"><span className="spinner" />Loading thread…</div>}
+              {!threadLoading && !msgs.length && <div style={{ color: 'var(--muted)', fontSize: 13 }}>No messages in thread yet.</div>}
+              {msgs.map((m, i) => {
+                const isOut = m.direction === 'outbound' || m.isOwn;
+                return (
+                  <div key={i}>
+                    <div className={`msg-meta ${isOut ? '' : ''}`} style={{ textAlign: isOut ? 'right' : 'left' }}>
+                      {m.author || (isOut ? 'You' : selected.from)} · {m.createdAt ? new Date(m.createdAt).toLocaleTimeString() : ''}
+                    </div>
+                    <div className={`msg ${isOut ? 'msg-out' : 'msg-in'}`}>
+                      {m.content || m.text || m.body}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="thread-reply">
+              <textarea
+                placeholder="Type a reply…"
+                value={reply}
+                onChange={e => setReply(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) sendReply(); }}
+              />
+              <div className="col" style={{ gap: 6, justifyContent: 'flex-end' }}>
+                <button className="btn btn-primary btn-sm" onClick={sendReply} disabled={sending || !reply.trim()}>
+                  {sending ? <span className="spinner" /> : 'Send'}
+                </button>
+                <span style={{ fontSize: 10, color: 'var(--muted)', textAlign: 'center' }}>⌘↵</span>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api, PROFILE_ID } from '../api.js';
+import { useApp } from '../App.jsx';
+
+const DAYS = ['mon','tue','wed','thu','fri','sat','sun'];
+const ALL_PLATS = ['twitter','linkedin','instagram','facebook','tiktok','youtube','bluesky','threads','reddit','pinterest','telegram','whatsapp'];
+
+const emptySlot = () => ({ day: 'mon', time: '09:00', platforms: [] });
+
+export default function Queues() {
+  const { accounts, showToast } = useApp();
+  const [queues, setQueues]   = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [deleting, setDeleting] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+  const [name, setName]           = useState('');
+  const [timezone, setTimezone]   = useState('America/New_York');
+  const [slots, setSlots]         = useState([emptySlot()]);
+
+  const availPlats = accounts.length
+    ? [...new Set(accounts.map(a => a.platform))]
+    : ALL_PLATS;
+
+  const load = useCallback(() => {
+    if (!PROFILE_ID) { setLoading(false); return; }
+    api.getQueues(PROFILE_ID)
+      .then(d => setQueues(d.queues || []))
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(load, [load]);
+
+  const addSlot    = () => setSlots(s => [...s, emptySlot()]);
+  const removeSlot = (i) => setSlots(s => s.filter((_, j) => j !== i));
+  const updateSlot = (i, key, val) => setSlots(s => s.map((sl, j) => j !== i ? sl : { ...sl, [key]: val }));
+  const toggleSlotPlat = (i, p) => {
+    const sl = slots[i];
+    const plats = sl.platforms.includes(p) ? sl.platforms.filter(x => x !== p) : [...sl.platforms, p];
+    updateSlot(i, 'platforms', plats);
+  };
+
+  const create = async () => {
+    if (!name.trim()) { showToast('Enter a queue name', false); return; }
+    const validSlots = slots.filter(s => s.platforms.length);
+    if (!validSlots.length) { showToast('Each slot needs at least one platform', false); return; }
+    setCreating(true);
+    try {
+      await api.createQueue({ profileId: PROFILE_ID, name, timezone, slots: validSlots });
+      showToast('Queue created ✓');
+      setName(''); setSlots([emptySlot()]); setShowForm(false);
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const deleteQueue = async (id) => {
+    if (!confirm('Delete this queue? Already-scheduled posts remain.')) return;
+    setDeleting(id);
+    try {
+      await api.deleteQueue(id);
+      showToast('Queue deleted');
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  if (loading) return <div className="loading-row"><span className="spinner" />Loading queues…</div>;
+
+  return (
+    <div>
+      <div className="row mb16" style={{ justifyContent: 'space-between' }}>
+        <div className="section-title" style={{ marginBottom: 0 }}>{queues.length} Queue{queues.length !== 1 ? 's' : ''}</div>
+        <button className="btn btn-primary btn-sm" onClick={() => setShowForm(f => !f)}>
+          {showForm ? '✕ Cancel' : '+ New Queue'}
+        </button>
+      </div>
+
+      {showForm && (
+        <div className="card mb16">
+          <div className="section-title mb16">New Recurring Queue</div>
+          <div className="field">
+            <label>Queue Name</label>
+            <input className="input" placeholder="e.g. weekly-evergreen" value={name} onChange={e => setName(e.target.value)} />
+          </div>
+          <div className="field">
+            <label>Timezone</label>
+            <input className="input" value={timezone} onChange={e => setTimezone(e.target.value)} />
+          </div>
+
+          <div className="field">
+            <label>Time Slots</label>
+            {slots.map((sl, i) => (
+              <div key={i} style={{ background: '#09090b', border: '1px solid var(--border)', borderRadius: 8, padding: 12, marginBottom: 8 }}>
+                <div className="row mb8">
+                  <select className="select" style={{ width: 90 }} value={sl.day} onChange={e => updateSlot(i, 'day', e.target.value)}>
+                    {DAYS.map(d => <option key={d}>{d}</option>)}
+                  </select>
+                  <input className="input" type="time" style={{ width: 110 }} value={sl.time} onChange={e => updateSlot(i, 'time', e.target.value)} />
+                  <button className="btn btn-danger btn-xs" style={{ marginLeft: 'auto' }} onClick={() => removeSlot(i)} disabled={slots.length === 1}>✕</button>
+                </div>
+                <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 5 }}>Platforms</div>
+                <div className="plat-row">
+                  {availPlats.map(p => (
+                    <span key={p} className={`plat-toggle ${sl.platforms.includes(p) ? 'selected' : ''}`} onClick={() => toggleSlotPlat(i, p)}>{p}</span>
+                  ))}
+                </div>
+              </div>
+            ))}
+            <button className="btn btn-ghost btn-sm mt8" onClick={addSlot}>+ Add Slot</button>
+          </div>
+
+          <div className="row-end">
+            <button className="btn btn-primary" onClick={create} disabled={creating}>
+              {creating ? <><span className="spinner" style={{ marginRight: 7 }} />Creating…</> : 'Create Queue'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!queues.length && !showForm && (
+        <div className="empty">
+          <div className="empty-icon">🔄</div>
+          <div className="empty-msg">No queues yet. Create one to auto-schedule posts into recurring time slots.</div>
+        </div>
+      )}
+
+      {queues.map(q => (
+        <div key={q._id} className="card mb16">
+          <div className="row mb8" style={{ justifyContent: 'space-between' }}>
+            <div>
+              <span style={{ fontWeight: 600 }}>{q.name}</span>
+              <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 10 }}>{q.timezone}</span>
+            </div>
+            <button className="btn btn-danger btn-sm" onClick={() => deleteQueue(q._id)} disabled={deleting === q._id}>
+              {deleting === q._id ? '…' : 'Delete'}
+            </button>
+          </div>
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr><th>Day</th><th>Time</th><th>Platforms</th></tr>
+              </thead>
+              <tbody>
+                {(q.slots || []).map((sl, i) => (
+                  <tr key={i}>
+                    <td style={{ textTransform: 'capitalize' }}>{sl.day}</td>
+                    <td>{sl.time}</td>
+                    <td>{(sl.platforms || []).join(', ')}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api, PROFILE_ID } from '../api.js';
+import { useApp } from '../App.jsx';
+
+export default function Scheduled() {
+  const { showToast } = useApp();
+  const [posts, setPosts]     = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [deleting, setDeleting] = useState(null);
+
+  const load = useCallback(() => {
+    if (!PROFILE_ID) { setLoading(false); return; }
+    setLoading(true);
+    api.getPosts(PROFILE_ID, 'scheduled')
+      .then(d => setPosts(d.posts || []))
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(load, [load]);
+
+  const deletePost = async (id) => {
+    if (!confirm('Unschedule this post?')) return;
+    setDeleting(id);
+    try {
+      await api.deletePost(id);
+      showToast('Post unscheduled');
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  if (loading) return <div className="loading-row"><span className="spinner" />Loading scheduled posts…</div>;
+
+  if (!posts.length) return (
+    <div className="empty">
+      <div className="empty-icon">📅</div>
+      <div className="empty-msg">No scheduled posts. Use Compose to schedule your first post.</div>
+    </div>
+  );
+
+  return (
+    <div>
+      <div className="row mb16" style={{ justifyContent: 'space-between' }}>
+        <div className="section-title" style={{ marginBottom: 0 }}>{posts.length} Scheduled Post{posts.length !== 1 ? 's' : ''}</div>
+        <button className="btn btn-ghost btn-sm" onClick={load}>↻ Refresh</button>
+      </div>
+
+      {posts.map(p => (
+        <div key={p._id || p.id} className="post-card">
+          <div className="post-meta">
+            {(p.platforms || []).map(pl => (
+              <span key={pl.platform} className="badge badge-neutral" style={{ marginRight: 2 }}>{pl.platform}</span>
+            ))}
+            <span style={{ fontSize: 12, color: 'var(--muted)', marginLeft: 4 }}>
+              {p.scheduledFor ? new Date(p.scheduledFor).toLocaleString() : 'Queued'}
+            </span>
+            <span className="badge badge-blue" style={{ marginLeft: 'auto' }}>Scheduled</span>
+          </div>
+          <div className="post-content">{p.content}</div>
+          {p.media?.length > 0 && (
+            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 6 }}>
+              📎 {p.media.length} media file{p.media.length > 1 ? 's' : ''}
+            </div>
+          )}
+          <div className="post-actions">
+            <span style={{ fontSize: 11, color: 'var(--muted)', alignSelf: 'center', fontFamily: 'monospace' }}>
+              {p._id || p.id}
+            </span>
+            <button
+              className="btn btn-danger btn-xs"
+              onClick={() => deletePost(p._id || p.id)}
+              disabled={deleting === (p._id || p.id)}
+            >
+              {deleting === (p._id || p.id) ? '…' : 'Unschedule'}
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}