slackhive 0.1.41 → 0.1.43

package/apps/web/src/app/settings/page.tsx

@@ -1,528 +0,0 @@
-'use client';
-
-/**
- * @fileoverview Platform settings page — branding, dashboard, and user management.
- *
- * Tabs: General · Users (admin only)
- *
- * @module web/app/settings
- */
-
-import React, { useEffect, useState } from 'react';
-import { Portal } from '@/lib/portal';
-import { useAuth } from '@/lib/auth-context';
-
-type Tab = 'general' | 'users';
-
-interface User {
-  id: string;
-  username: string;
-  role: string;
-  createdAt: string;
-}
-
-interface AgentBasic {
-  id: string;
-  name: string;
-  slug: string;
-}
-
-const DEFAULTS: Record<string, string> = {
-  appName: 'SlackHive',
-  tagline: 'AI agent teams on Slack',
-  logoUrl: '',
-  dashboardTitle: 'Welcome to SlackHive',
-};
-
-/**
- * Settings page with General and Users tabs.
- *
- * @returns {JSX.Element}
- */
-export default function SettingsPage() {
-  const { canEdit, canManageUsers } = useAuth();
-  const [tab, setTab] = useState<Tab>('general');
-
-  return (
-    <div className="fade-up" style={{ padding: '36px 40px' }}>
-      {/* Header */}
-      <div style={{ marginBottom: 24 }}>
-        <h1 style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em', margin: 0 }}>
-          Settings
-        </h1>
-        <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>
-          Configure platform branding, appearance, and access.
-        </p>
-      </div>
-
-      {/* Tabs */}
-      <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border)', marginBottom: 24 }}>
-        <TabBtn active={tab === 'general'} onClick={() => setTab('general')}>General</TabBtn>
-        {canManageUsers && <TabBtn active={tab === 'users'} onClick={() => setTab('users')}>Users</TabBtn>}
-      </div>
-
-      {tab === 'general' && <GeneralTab />}
-      {tab === 'users' && canManageUsers && <UsersTab />}
-    </div>
-  );
-}
-
-// =============================================================================
-// General tab
-// =============================================================================
-
-function GeneralTab() {
-  const [appName, setAppName] = useState(DEFAULTS.appName);
-  const [tagline, setTagline] = useState(DEFAULTS.tagline);
-  const [logoUrl, setLogoUrl] = useState(DEFAULTS.logoUrl);
-  const [dashboardTitle, setDashboardTitle] = useState(DEFAULTS.dashboardTitle);
-  const [saving, setSaving] = useState(false);
-  const [toast, setToast] = useState('');
-
-  useEffect(() => {
-    fetch('/api/settings')
-      .then(r => r.json())
-      .then((s: Record<string, string>) => {
-        if (s.appName) setAppName(s.appName);
-        if (s.tagline) setTagline(s.tagline);
-        if (s.logoUrl !== undefined && s.logoUrl !== '') setLogoUrl(s.logoUrl);
-        if (s.dashboardTitle) setDashboardTitle(s.dashboardTitle);
-      })
-      .catch(() => {});
-  }, []);
-
-  async function save(key: string, value: string) {
-    setSaving(true);
-    try {
-      await fetch('/api/settings', {
-        method: 'PUT', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ key, value }),
-      });
-      setToast(`Saved`);
-      setTimeout(() => setToast(''), 2000);
-    } finally { setSaving(false); }
-  }
-
-  async function saveAll() {
-    setSaving(true);
-    try {
-      await Promise.all([
-        fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'appName', value: appName }) }),
-        fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'tagline', value: tagline }) }),
-        fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'logoUrl', value: logoUrl }) }),
-        fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'dashboardTitle', value: dashboardTitle }) }),
-      ]);
-      setToast('All settings saved');
-      setTimeout(() => setToast(''), 2000);
-    } finally { setSaving(false); }
-  }
-
-  return (
-    <>
-      {toast && (
-        <div style={{
-          position: 'fixed', top: 20, right: 20, zIndex: 999,
-          background: 'var(--accent)', color: '#fff',
-          padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
-          boxShadow: 'var(--shadow-md)',
-        }}>{toast}</div>
-      )}
-
-      <Section title="Branding">
-        <Field label="App Name" hint="Displayed in the sidebar header and browser tab."
-          value={appName} onChange={setAppName} onBlur={() => save('appName', appName)} />
-        <Field label="Tagline" hint="Short description shown below the app name."
-          value={tagline} onChange={setTagline} onBlur={() => save('tagline', tagline)} />
-        <Field label="Logo URL" hint="URL to a square image (28×28). Leave empty for the default icon."
-          value={logoUrl} onChange={setLogoUrl} onBlur={() => save('logoUrl', logoUrl)} />
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 4 }}>
-          <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--muted)' }}>Preview:</div>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={logoUrl || '/logo.svg'} alt="Logo" style={{ width: 28, height: 28, borderRadius: 8, objectFit: 'cover' }} />
-          {!logoUrl && <span style={{ fontSize: 11, color: 'var(--subtle)', fontStyle: 'italic' }}>Using default logo</span>}
-        </div>
-      </Section>
-
-      <Section title="Dashboard">
-        <Field label="Dashboard Title" hint="Main heading on the dashboard page."
-          value={dashboardTitle} onChange={setDashboardTitle} onBlur={() => save('dashboardTitle', dashboardTitle)} />
-      </Section>
-
-      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
-        <PrimaryBtn onClick={saveAll} loading={saving}>Save All</PrimaryBtn>
-      </div>
-    </>
-  );
-}
-
-// =============================================================================
-// Users tab
-// =============================================================================
-
-function UsersTab() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [agents, setAgents] = useState<AgentBasic[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [showForm, setShowForm] = useState(false);
-  const [newUser, setNewUser] = useState({ username: '', password: '', role: 'viewer' });
-  const [error, setError] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [updatingRole, setUpdatingRole] = useState<string | null>(null);
-  const [expandedUser, setExpandedUser] = useState<string | null>(null);
-  // Map of userId → set of agentIds with write access
-  const [writeGrants, setWriteGrants] = useState<Record<string, Set<string>>>({});
-  const [loadingGrants, setLoadingGrants] = useState<string | null>(null);
-
-  const load = () => {
-    setLoading(true);
-    Promise.all([
-      fetch('/api/auth/users').then(r => r.json()),
-      fetch('/api/agents').then(r => r.json()),
-    ]).then(([u, a]) => { setUsers(u); setAgents(a); }).catch(() => {}).finally(() => setLoading(false));
-  };
-  useEffect(() => { load(); }, []);
-
-  const create = async () => {
-    if (!newUser.username || !newUser.password) { setError('Username and password required'); return; }
-    setSaving(true); setError('');
-    try {
-      const r = await fetch('/api/auth/users', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(newUser),
-      });
-      const data = await r.json();
-      if (!r.ok) { setError(data.error || 'Failed'); return; }
-      setShowForm(false);
-      setNewUser({ username: '', password: '', role: 'viewer' });
-      load();
-    } finally { setSaving(false); }
-  };
-
-  const remove = async (id: string, username: string) => {
-    if (!confirm(`Delete user "${username}"?`)) return;
-    await fetch(`/api/auth/users/${id}`, { method: 'DELETE' });
-    load();
-  };
-
-  const changeRole = async (id: string, role: string) => {
-    setUpdatingRole(id);
-    await fetch(`/api/auth/users/${id}`, {
-      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ role }),
-    });
-    setUpdatingRole(null);
-    load();
-  };
-
-  const toggleExpand = async (userId: string) => {
-    if (expandedUser === userId) { setExpandedUser(null); return; }
-    setExpandedUser(userId);
-    if (writeGrants[userId]) return; // already loaded
-    setLoadingGrants(userId);
-    // Load write grants for all agents for this user by checking each agent's access
-    // We use the admin access endpoint which returns writeUsers per agent
-    const grants = new Set<string>();
-    await Promise.all(agents.map(async (a) => {
-      const r = await fetch(`/api/agents/${a.id}/access`);
-      const data = await r.json();
-      if (data.writeUsers?.some((w: { userId: string }) => w.userId === userId)) {
-        grants.add(a.id);
-      }
-    }));
-    setWriteGrants(prev => ({ ...prev, [userId]: grants }));
-    setLoadingGrants(null);
-  };
-
-  const toggleWrite = async (userId: string, agentId: string, currentlyGranted: boolean) => {
-    const method = currentlyGranted ? 'DELETE' : 'POST';
-    await fetch(`/api/agents/${agentId}/access`, {
-      method, headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ userId }),
-    });
-    setWriteGrants(prev => {
-      const next = new Set(prev[userId]);
-      if (currentlyGranted) next.delete(agentId); else next.add(agentId);
-      return { ...prev, [userId]: next };
-    });
-  };
-
-  return (
-    <>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-        <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)' }}>
-          Manage platform access. Superadmin is configured via environment variables.
-        </p>
-        <button onClick={() => setShowForm(true)} style={{
-          display: 'inline-flex', alignItems: 'center', gap: 6,
-          background: 'var(--accent)', color: '#fff',
-          padding: '8px 16px', borderRadius: 8,
-          fontSize: 13, fontWeight: 500, border: 'none', cursor: 'pointer',
-          fontFamily: 'var(--font-sans)', flexShrink: 0,
-        }}>
-          <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
-            <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
-          </svg>
-          Add User
-        </button>
-      </div>
-
-      {/* User list */}
-      {loading ? (
-        <p style={{ color: 'var(--muted)', fontSize: 13 }}>Loading...</p>
-      ) : (
-        <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
-          {/* Superadmin row */}
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px',
-            borderBottom: users.length > 0 ? '1px solid var(--border)' : 'none',
-            background: 'var(--surface-2)',
-          }}>
-            <div style={{
-              width: 28, height: 28, borderRadius: 8, background: '#171717', flexShrink: 0,
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontSize: 10, fontWeight: 600, color: '#fff',
-            }}>S</div>
-            <div style={{ flex: 1 }}>
-              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>admin</div>
-              <div style={{ fontSize: 11, color: 'var(--muted)' }}>Environment variable</div>
-            </div>
-            <span style={{
-              fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
-              color: '#d97706', background: 'rgba(217,119,6,0.1)',
-              padding: '2px 8px', borderRadius: 4,
-            }}>superadmin</span>
-          </div>
-
-          {users.map((u, i) => (
-            <div key={u.id} style={{ borderBottom: i < users.length - 1 ? '1px solid var(--border)' : 'none' }}>
-              {/* User row */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px' }}>
-                <div style={{
-                  width: 28, height: 28, borderRadius: 8, flexShrink: 0,
-                  background: u.role === 'admin' ? '#171717' : u.role === 'editor' ? '#059669' : 'var(--surface-2)',
-                  border: u.role === 'admin' ? 'none' : '1px solid var(--border)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  fontSize: 10, fontWeight: 600, color: u.role === 'admin' ? '#fff' : 'var(--text)',
-                }}>{u.username.charAt(0).toUpperCase()}</div>
-                <div style={{ flex: 1 }}>
-                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>{u.username}</div>
-                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>Created {new Date(u.createdAt).toLocaleDateString()}</div>
-                </div>
-                <select
-                  value={u.role}
-                  disabled={updatingRole === u.id}
-                  onChange={e => changeRole(u.id, e.target.value)}
-                  style={{
-                    fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 5,
-                    border: '1px solid var(--border)', cursor: 'pointer',
-                    background: u.role === 'admin' ? 'rgba(37,99,235,0.1)' : u.role === 'editor' ? 'rgba(5,150,105,0.1)' : 'var(--surface-2)',
-                    color: u.role === 'admin' ? '#2563eb' : u.role === 'editor' ? '#059669' : 'var(--muted)',
-                    fontFamily: 'var(--font-sans)', outline: 'none',
-                    opacity: updatingRole === u.id ? 0.5 : 1,
-                  }}
-                >
-                  <option value="admin">admin</option>
-                  <option value="editor">editor</option>
-                  <option value="viewer">viewer</option>
-                </select>
-                {/* Agent write access — only meaningful for editors */}
-                {u.role === 'editor' && (
-                  <button
-                    onClick={() => toggleExpand(u.id)}
-                    style={{
-                      background: expandedUser === u.id ? 'rgba(59,130,246,0.1)' : 'var(--surface-2)',
-                      border: '1px solid var(--border)', borderRadius: 6,
-                      color: expandedUser === u.id ? 'var(--accent)' : 'var(--muted)',
-                      fontSize: 11, fontWeight: 500, cursor: 'pointer', padding: '3px 10px',
-                      fontFamily: 'var(--font-sans)',
-                    }}
-                  >Agent Access</button>
-                )}
-                {u.role === 'viewer' && (
-                  <span title="Viewers are read-only — write access grants only apply to editors" style={{
-                    fontSize: 11, fontWeight: 500, padding: '3px 10px', borderRadius: 6,
-                    border: '1px solid var(--border)', color: 'var(--subtle)',
-                    background: 'var(--surface-2)', opacity: 0.5,
-                  }}>Agent Access</span>
-                )}
-                <button onClick={() => remove(u.id, u.username)} style={{
-                  background: 'none', border: 'none', color: '#dc2626',
-                  fontSize: 12, cursor: 'pointer', opacity: 0.6,
-                  fontFamily: 'var(--font-sans)', transition: 'opacity 0.12s',
-                }}
-                  onMouseEnter={e => (e.currentTarget.style.opacity = '1')}
-                  onMouseLeave={e => (e.currentTarget.style.opacity = '0.6')}
-                >Delete</button>
-              </div>
-
-              {/* Expanded agent access panel */}
-              {expandedUser === u.id && (
-                <div style={{
-                  margin: '0 16px 12px', padding: '14px 16px', borderRadius: 8,
-                  background: 'var(--surface-2)', border: '1px solid var(--border)',
-                }}>
-                  <p style={{ margin: '0 0 10px', fontSize: 12, color: 'var(--muted)', fontWeight: 600 }}>
-                    Write access — check agents this user can edit
-                    <span style={{ fontWeight: 400, color: 'var(--subtle)', marginLeft: 6 }}>
-                      (own created agents always have write)
-                    </span>
-                  </p>
-                  {loadingGrants === u.id ? (
-                    <p style={{ fontSize: 12, color: 'var(--subtle)', margin: 0 }}>Loading…</p>
-                  ) : (
-                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                      {agents.map(a => {
-                        const granted = writeGrants[u.id]?.has(a.id) ?? false;
-                        return (
-                          <label key={a.id} style={{
-                            display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer',
-                            fontSize: 12, color: granted ? 'var(--accent)' : 'var(--muted)',
-                            background: granted ? 'rgba(59,130,246,0.08)' : 'var(--surface)',
-                            border: `1px solid ${granted ? 'rgba(59,130,246,0.3)' : 'var(--border)'}`,
-                            borderRadius: 6, padding: '4px 10px', transition: 'all 0.12s',
-                          }}>
-                            <input
-                              type="checkbox"
-                              checked={granted}
-                              onChange={() => toggleWrite(u.id, a.id, granted)}
-                              style={{ accentColor: 'var(--accent)', cursor: 'pointer' }}
-                            />
-                            {a.name}
-                          </label>
-                        );
-                      })}
-                      {agents.length === 0 && <span style={{ fontSize: 12, color: 'var(--subtle)' }}>No agents yet</span>}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-
-          {users.length === 0 && (
-            <div style={{ padding: '20px 16px', textAlign: 'center', color: 'var(--muted)', fontSize: 13 }}>
-              No additional users. Only the superadmin account exists.
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Create modal */}
-      {showForm && (
-        <Portal>
-        <div style={{
-          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999,
-          backdropFilter: 'blur(2px)',
-        }}>
-          <div style={{
-            background: '#fff', borderRadius: 14, border: '1px solid var(--border)',
-            padding: 28, width: 380, boxShadow: 'var(--shadow-lg)',
-            display: 'flex', flexDirection: 'column', gap: 16,
-            maxHeight: '90vh', overflow: 'auto',
-          }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: 'var(--text)' }}>New User</h3>
-              <button onClick={() => { setShowForm(false); setError(''); }}
-                style={{ background: 'none', border: 'none', color: 'var(--muted)', fontSize: 18, cursor: 'pointer' }}>&times;</button>
-            </div>
-            <div>
-              <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>Username</label>
-              <input type="text" value={newUser.username} onChange={e => setNewUser(u => ({ ...u, username: e.target.value }))}
-                style={{ width: '100%', padding: '8px 12px', borderRadius: 7, border: '1px solid var(--border)', fontSize: 13, outline: 'none', boxSizing: 'border-box', fontFamily: 'var(--font-sans)' }} />
-            </div>
-            <div>
-              <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>Password</label>
-              <input type="password" value={newUser.password} onChange={e => setNewUser(u => ({ ...u, password: e.target.value }))}
-                style={{ width: '100%', padding: '8px 12px', borderRadius: 7, border: '1px solid var(--border)', fontSize: 13, outline: 'none', boxSizing: 'border-box', fontFamily: 'var(--font-sans)' }} />
-            </div>
-            <div>
-              <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>Role</label>
-              <select value={newUser.role} onChange={e => setNewUser(u => ({ ...u, role: e.target.value }))}
-                style={{ width: '100%', padding: '8px 12px', borderRadius: 7, border: '1px solid var(--border)', fontSize: 13, outline: 'none', fontFamily: 'var(--font-sans)', background: '#fff' }}>
-                <option value="viewer">Viewer — read-only access</option>
-                <option value="editor">Editor — create/edit agents, jobs, settings</option>
-                <option value="admin">Admin — full access including user management</option>
-              </select>
-            </div>
-            {error && <div style={{ fontSize: 12, color: '#dc2626', background: 'rgba(220,38,38,0.06)', padding: '6px 10px', borderRadius: 6 }}>{error}</div>}
-            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-              <button onClick={() => { setShowForm(false); setError(''); }}
-                style={{ padding: '8px 16px', borderRadius: 7, border: '1px solid var(--border)', background: '#fff', fontSize: 13, cursor: 'pointer', fontFamily: 'var(--font-sans)' }}>Cancel</button>
-              <button onClick={create} disabled={saving}
-                style={{ padding: '8px 18px', borderRadius: 7, border: 'none', background: 'var(--accent)', color: '#fff', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'var(--font-sans)' }}>
-                {saving ? 'Creating...' : 'Create User'}
-              </button>
-            </div>
-          </div>
-        </div>
-        </Portal>
-      )}
-    </>
-  );
-}
-
-// =============================================================================
-// Shared UI helpers
-// =============================================================================
-
-function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
-  return (
-    <button onClick={onClick} style={{
-      background: 'none', border: 'none', cursor: 'pointer',
-      padding: '10px 16px', fontSize: 13,
-      color: active ? 'var(--text)' : 'var(--muted)',
-      fontWeight: active ? 600 : 400,
-      fontFamily: 'var(--font-sans)',
-      position: 'relative',
-      transition: 'color 0.15s',
-      borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
-      marginBottom: -1,
-    }}>{children}</button>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div style={{ marginBottom: 22, paddingBottom: 22, borderBottom: '1px solid var(--border)' }}>
-      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 14 }}>{title}</div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>{children}</div>
-    </div>
-  );
-}
-
-function Field({ label, value, onChange, onBlur, hint }: {
-  label: string; value: string; onChange: (v: string) => void; onBlur?: () => void; hint?: string;
-}) {
-  return (
-    <div>
-      <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>{label}</label>
-      <input type="text" value={value} onChange={e => onChange(e.target.value)}
-        onBlur={e => { e.currentTarget.style.borderColor = 'var(--border)'; onBlur?.(); }}
-        style={{
-          width: '100%', background: 'var(--surface)', border: '1px solid var(--border)',
-          borderRadius: 7, padding: '8px 11px', color: 'var(--text)',
-          fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none',
-          transition: 'border-color 0.15s', boxSizing: 'border-box',
-        }}
-        onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-      />
-      {hint && <p style={{ margin: '4px 0 0', fontSize: 11, color: 'var(--subtle)' }}>{hint}</p>}
-    </div>
-  );
-}
-
-function PrimaryBtn({ children, onClick, loading }: { children: React.ReactNode; onClick?: () => void; loading?: boolean }) {
-  return (
-    <button onClick={onClick} disabled={loading} style={{
-      background: loading ? 'var(--border)' : 'var(--accent)',
-      color: '#fff', border: 'none', borderRadius: 7,
-      padding: '8px 18px', fontSize: 13, fontWeight: 500,
-      cursor: loading ? 'not-allowed' : 'pointer',
-      fontFamily: 'var(--font-sans)', transition: 'opacity 0.15s',
-    }}
-      onMouseEnter={e => { if (!loading) (e.currentTarget as HTMLElement).style.opacity = '0.85'; }}
-      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.opacity = '1'; }}
-    >{loading ? 'Saving...' : children}</button>
-  );
-}