@growthub/cli 0.3.58 → 0.3.60

package/assets/worker-kits/growthub-zernio-social-v1/studio/src/app.css

@@ -0,0 +1,558 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:      #0f0f11;
+  --surface: #18181b;
+  --border:  #27272a;
+  --hover:   #27272a;
+  --active:  #3f3f46;
+  --text:    #e4e4e7;
+  --muted:   #71717a;
+  --dim:     #a1a1aa;
+  --accent:  #7c3aed;
+  --accent2: #6d28d9;
+  --accentl: #c4b5fd;
+  --accentb: #4c1d95;
+  --green:   #22c55e;
+  --greenb:  #14532d;
+  --greenl:  #86efac;
+  --red:     #ef4444;
+  --redb:    #450a0a;
+  --redl:    #fca5a5;
+  --blue:    #3b82f6;
+  --blueb:   #1e3a5f;
+  --bluel:   #93c5fd;
+  --radius:  10px;
+  --radius-sm: 6px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  font-size: 14px;
+}
+
+/* ── Layout ──────────────────────────────────────────────────────────────── */
+.layout { display: flex; height: 100vh; overflow: hidden; }
+
+.sidebar {
+  width: 220px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 20px 10px;
+  gap: 2px;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.logo {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accentl);
+  padding: 6px 12px 18px;
+  letter-spacing: -0.5px;
+}
+
+.nav-section {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 10px 12px 4px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--dim);
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  transition: background 0.1s, color 0.1s;
+}
+.nav-item:hover  { background: var(--hover); color: var(--text); }
+.nav-item.active { background: var(--active); color: #fff; }
+.nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
+
+.sidebar-bottom {
+  margin-top: auto;
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
+}
+.account-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
+
+/* ── Main area ───────────────────────────────────────────────────────────── */
+.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+
+.topbar {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 0 24px;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.topbar-title { font-size: 14px; font-weight: 600; }
+
+.content { flex: 1; overflow-y: auto; padding: 24px; }
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.btn {
+  padding: 7px 14px;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background 0.1s, opacity 0.1s;
+  white-space: nowrap;
+}
+.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-primary   { background: var(--accent); color: #fff; }
+.btn-primary:hover:not(:disabled)   { background: var(--accent2); }
+.btn-secondary { background: var(--active); color: var(--text); }
+.btn-secondary:hover:not(:disabled) { background: #52525b; }
+.btn-danger    { background: var(--redb); color: var(--redl); border: 1px solid #7f1d1d; }
+.btn-danger:hover:not(:disabled)    { background: #7f1d1d; }
+.btn-ghost     { background: transparent; color: var(--dim); border: 1px solid var(--border); }
+.btn-ghost:hover:not(:disabled)     { background: var(--hover); color: var(--text); }
+.btn-sm { padding: 4px 10px; font-size: 12px; }
+.btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
+
+/* ── Cards ───────────────────────────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.card + .card { margin-top: 12px; }
+
+/* ── Stat grid ───────────────────────────────────────────────────────────── */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 14px;
+  margin-bottom: 24px;
+}
+.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
+.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+.stat-value { font-size: 26px; font-weight: 700; color: #fff; }
+.stat-sub   { font-size: 11px; color: var(--muted); margin-top: 3px; }
+
+/* ── Section title ───────────────────────────────────────────────────────── */
+.section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 12px;
+}
+
+/* ── Account cards ───────────────────────────────────────────────────────── */
+.account-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.account-card + .account-card { margin-top: 8px; }
+.platform-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.acc-info { flex: 1; min-width: 0; }
+.acc-name   { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.acc-handle { font-size: 11px; color: var(--muted); margin-top: 2px; }
+
+/* ── Badges ──────────────────────────────────────────────────────────────── */
+.badge { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 500; }
+.badge-green   { background: var(--greenb); color: var(--greenl); }
+.badge-blue    { background: var(--blueb);  color: var(--bluel); }
+.badge-red     { background: var(--redb);   color: var(--redl); }
+.badge-purple  { background: var(--accentb); color: var(--accentl); }
+.badge-neutral { background: var(--active); color: var(--dim); }
+
+/* ── Form elements ───────────────────────────────────────────────────────── */
+.field { margin-bottom: 14px; }
+.field label { display: block; font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+.input, .textarea, .select {
+  width: 100%;
+  background: #09090b;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 9px 12px;
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.1s;
+}
+.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); }
+.textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
+.select { cursor: pointer; }
+.select option { background: #18181b; }
+.char-count { font-size: 11px; color: var(--muted); text-align: right; margin-top: 3px; }
+.char-over  { color: var(--redl); }
+
+/* ── Platform toggles ────────────────────────────────────────────────────── */
+.plat-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.plat-toggle {
+  padding: 5px 13px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: #09090b;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.1s;
+  user-select: none;
+}
+.plat-toggle:hover     { border-color: var(--accent); color: var(--accentl); }
+.plat-toggle.selected  { background: var(--accentb); border-color: var(--accent); color: var(--accentl); }
+
+/* ── Post cards ──────────────────────────────────────────────────────────── */
+.post-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  margin-bottom: 8px;
+}
+.post-meta   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
+.post-content { font-size: 13px; color: var(--dim); line-height: 1.55; }
+.post-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
+
+/* ── Queue slots ─────────────────────────────────────────────────────────── */
+.slot-row {
+  display: grid;
+  grid-template-columns: 110px 100px 1fr auto;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+/* ── Table ───────────────────────────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--dim); vertical-align: top; }
+tr:hover td { background: rgba(255,255,255,0.02); }
+tr:last-child td { border-bottom: none; }
+
+/* ── Inbox ───────────────────────────────────────────────────────────────── */
+.inbox-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; height: calc(100vh - 100px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.inbox-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); }
+.inbox-item { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
+.inbox-item:hover    { background: var(--hover); }
+.inbox-item.selected { background: var(--active); }
+.inbox-platform { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
+.inbox-preview  { font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.inbox-thread   { display: flex; flex-direction: column; height: 100%; background: #0f0f11; }
+.thread-msgs    { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
+.msg            { padding: 10px 14px; border-radius: 10px; max-width: 70%; font-size: 13px; line-height: 1.5; }
+.msg-in         { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
+.msg-out        { background: var(--accentb); border: 1px solid var(--accent); align-self: flex-end; color: var(--accentl); }
+.msg-meta       { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
+.thread-reply   { padding: 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--surface); }
+.thread-reply textarea { flex: 1; background: #09090b; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text); font-family: inherit; font-size: 13px; resize: none; height: 72px; outline: none; }
+.thread-reply textarea:focus { border-color: var(--accent); }
+
+/* ── Agent view ──────────────────────────────────────────────────────────── */
+.agent-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
+.cmd-ref { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
+.cmd-item { margin-bottom: 14px; }
+.cmd-name { font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--accentl); font-weight: 600; }
+.cmd-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
+.manifest-panel { display: flex; flex-direction: column; gap: 12px; }
+.manifest-status { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
+.m-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: 12px; }
+.m-row.ok    { border-color: #166534; background: var(--greenb); color: var(--greenl); }
+.m-row.err   { border-color: #7f1d1d; background: var(--redb);   color: var(--redl); }
+.m-row.busy  { border-color: var(--accent); background: var(--accentb); color: var(--accentl); }
+.context-box { background: #09090b; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; color: var(--dim); white-space: pre-wrap; word-break: break-all; }
+
+/* ── Result banner ───────────────────────────────────────────────────────── */
+.banner { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
+.banner-ok  { background: var(--greenb); color: var(--greenl); border: 1px solid #166534; }
+.banner-err { background: var(--redb);   color: var(--redl);   border: 1px solid #7f1d1d; }
+
+/* ── Toast ───────────────────────────────────────────────────────────────── */
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  border-radius: var(--radius-sm);
+  padding: 11px 16px;
+  font-size: 13px;
+  z-index: 9999;
+  max-width: 340px;
+  pointer-events: none;
+  animation: fadeIn 0.15s ease;
+}
+.toast-ok  { background: var(--greenb); color: var(--greenl); border: 1px solid #166534; }
+.toast-err { background: var(--redb);   color: var(--redl);   border: 1px solid #7f1d1d; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* ── Spinner ─────────────────────────────────────────────────────────────── */
+.spinner {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border: 2px solid var(--active);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.55s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.loading-row { display: flex; align-items: center; gap: 9px; color: var(--muted); padding: 20px 0; }
+
+/* ── Empty state ─────────────────────────────────────────────────────────── */
+.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
+.empty-icon { font-size: 36px; margin-bottom: 10px; }
+.empty-msg  { font-size: 13px; }
+
+/* ── Divider ─────────────────────────────────────────────────────────────── */
+.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
+
+/* ── Flex utils ──────────────────────────────────────────────────────────── */
+.row       { display: flex; gap: 10px; align-items: center; }
+.row-end   { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
+.col       { display: flex; flex-direction: column; gap: 10px; }
+.flex1     { flex: 1; }
+.mb8       { margin-bottom: 8px; }
+.mb16      { margin-bottom: 16px; }
+.mb24      { margin-bottom: 24px; }
+.mt8       { margin-top: 8px; }
+.mt12      { margin-top: 12px; }
+
+/* ── Scrollbar ───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar       { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--active); border-radius: 3px; }
+
+/* ── Template cards ──────────────────────────────────────────────────────── */
+.tpl-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 14px;
+}
+.tpl-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+.tpl-card:hover { border-color: #3f3f46; }
+.tpl-card.selected { border-color: var(--accent); }
+.tpl-type-row { display: flex; align-items: center; gap: 8px; }
+.tpl-type-icon { font-size: 18px; }
+.tpl-name { font-size: 14px; font-weight: 600; flex: 1; }
+.tpl-body {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 72px;
+  overflow: hidden;
+  position: relative;
+}
+.tpl-body::after {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 24px;
+  background: linear-gradient(transparent, var(--surface));
+}
+.tpl-footer { display: flex; gap: 6px; margin-top: auto; }
+.tpl-var { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--accentb); color: var(--accentl); font-size: 11px; font-family: 'SF Mono', 'Fira Code', monospace; cursor: pointer; user-select: none; }
+.tpl-var:hover { background: var(--accent); color: #fff; }
+.preview-box {
+  background: #09090b;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  font-size: 13px;
+  color: var(--dim);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  min-height: 80px;
+}
+
+/* ── Comment Rules layout ────────────────────────────────────────────────── */
+.cr-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 0;
+  height: calc(100vh - 100px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.cr-posts {
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.cr-posts-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.cr-posts-list { flex: 1; overflow-y: auto; }
+.cr-post-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.cr-post-item:hover    { background: var(--hover); }
+.cr-post-item.selected { background: var(--active); border-left: 3px solid var(--accent); }
+.cr-post-preview { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
+.cr-post-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.cr-post-plat { font-size: 10px; color: var(--muted); }
+
+.cr-rules {
+  display: flex;
+  flex-direction: column;
+  background: #0f0f11;
+  overflow: hidden;
+}
+.cr-rules-header {
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.cr-rules-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+
+/* ── Rule card ───────────────────────────────────────────────────────────── */
+.rule-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+  margin-bottom: 10px;
+}
+.rule-card.active  { border-left: 3px solid var(--green); }
+.rule-card.paused  { border-left: 3px solid var(--muted); }
+.rule-card.active:hover { border-color: var(--green); }
+.rule-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.rule-keyword {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--accentl);
+  background: var(--accentb);
+  padding: 3px 10px;
+  border-radius: 6px;
+}
+.rule-actions-row { display: flex; flex-direction: column; gap: 6px; }
+.rule-action-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--dim); }
+.rule-action-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
+.rule-action-body { line-height: 1.5; }
+.rule-footer { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
+
+/* ── Rule form ───────────────────────────────────────────────────────────── */
+.rule-form {
+  background: var(--surface);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+/* ── Sequence cards ──────────────────────────────────────────────────────── */
+.seq-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px 20px;
+  margin-bottom: 10px;
+}
+.seq-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.seq-meta   { font-size: 12px; color: var(--muted); display: flex; gap: 14px; margin-bottom: 10px; }
+.seq-steps  { display: flex; flex-direction: column; gap: 6px; }
+.seq-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); padding: 6px 10px; background: #09090b; border-radius: var(--radius-sm); }
+.seq-step-num { font-size: 11px; font-weight: 700; color: var(--accentl); width: 18px; text-align: center; flex-shrink: 0; }
+
+/* ── Filter bar ──────────────────────────────────────────────────────────── */
+.filter-bar { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
+.filter-btn { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.1s; }
+.filter-btn:hover   { border-color: var(--accent); color: var(--accentl); }
+.filter-btn.active  { background: var(--accentb); border-color: var(--accent); color: var(--accentl); }
+
+/* ── Toggle switch ───────────────────────────────────────────────────────── */
+.toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+.toggle {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background: var(--active);
+  border-radius: 10px;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.toggle.on { background: var(--accent); }
+.toggle::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.2s;
+}
+.toggle.on::after { transform: translateX(16px); }
+.toggle-label { font-size: 12px; color: var(--dim); }
+
+/* ── Two-body template (both type) ───────────────────────────────────────── */
+.both-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+@media (max-width: 900px) { .both-fields { grid-template-columns: 1fr; } }

package/assets/worker-kits/growthub-zernio-social-v1/studio/src/lib/rules.js

@@ -0,0 +1,64 @@
+/**
+ * Comment Automation Rules — localStorage store
+ *
+ * /api/v1/automations is not yet live on this plan.
+ * Rules are stored locally and will sync to the API when the endpoint
+ * becomes available. Each rule carries a `syncStatus` field:
+ *   'local'  — stored only in localStorage
+ *   'synced' — confirmed on Zernio API (has a real automationId)
+ *   'error'  — last sync attempt failed
+ */
+
+const STORAGE_KEY = 'zernio_comment_rules_v1';
+
+function read() {
+  try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; }
+}
+function write(rules) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
+}
+
+export function getRules() { return read(); }
+
+export function getRulesForPost(postId) {
+  return read().filter(r => r.trigger?.postId === postId);
+}
+
+export function saveRule(rule) {
+  const all = read();
+  if (rule.id) {
+    const idx = all.findIndex(r => r.id === rule.id);
+    const updated = { ...rule, updatedAt: new Date().toISOString() };
+    if (idx >= 0) all[idx] = updated; else all.push(updated);
+  } else {
+    all.push({ ...rule, id: `cr_${Date.now()}`, syncStatus: 'local', createdAt: new Date().toISOString() });
+  }
+  write(all);
+  return getRulesForPost(rule.trigger?.postId);
+}
+
+export function deleteRule(id) {
+  write(read().filter(r => r.id !== id));
+}
+
+export function updateRuleStatus(id, status) {
+  const all = read();
+  const idx = all.findIndex(r => r.id === id);
+  if (idx >= 0) all[idx] = { ...all[idx], status, updatedAt: new Date().toISOString() };
+  write(all);
+}
+
+export function markSynced(id, automationId) {
+  const all = read();
+  const idx = all.findIndex(r => r.id === id);
+  if (idx >= 0) all[idx] = { ...all[idx], syncStatus: 'synced', automationId };
+  write(all);
+}
+
+export function exportRules() {
+  const blob = new Blob([JSON.stringify(read(), null, 2)], { type: 'application/json' });
+  const url  = URL.createObjectURL(blob);
+  const a    = document.createElement('a');
+  a.href = url; a.download = `zernio-rules-${new Date().toISOString().slice(0,10)}.json`;
+  a.click(); URL.revokeObjectURL(url);
+}