spb/zyquo-cloud-web Public MIT

1/*2 *  FirstRun.tsx3 *  Zyquo Cloud Web4 *5 *  Author: Simon-Pierre Boucher6 *  Mail: contact@spboucher.ai7 *8 *  First-run welcome: clean, honest, transparent about local storage.9 */1011import { useStore } from '../state/store'12import ZyquoGlyph from './ZyquoGlyph'1314export default function FirstRun() {15  const updateSettings = useStore((s) => s.updateSettings)16  const openSettings = useStore((s) => s.openSettings)1718  return (19    <div className="overlay">20      <div className="panel" style={{ width: 520 }}>21        <div className="settings-content" style={{ padding: 24 }}>22          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>23            <ZyquoGlyph size={56} />24          </div>25          <h3 style={{ textAlign: 'center', fontSize: 18 }}>Welcome to Zyquo Cloud</h3>26          <p style={{ color: 'var(--z-text-secondary)', textAlign: 'center', marginTop: 4 }}>27            Every cloud model, one beautiful chat — running entirely in your browser.28          </p>29          <div className="first-run-note" style={{ marginTop: 16 }}>30            <span>31              <strong>No account. No backend. Nothing leaves this device.</strong>32            </span>33            <span>34              Your API keys and conversation history are stored <strong>in this browser</strong>35              {' '}(localStorage / IndexedDB) and are sent only to the AI provider you choose,36              directly. Keys in browser storage aren't a secure vault — anyone with access to this37              browser profile could read them. An optional passphrase lock is available in38              Settings → Advanced.39            </span>40            <span>Add a provider API key to begin.</span>41          </div>42          <div className="first-run-actions" style={{ marginTop: 16 }}>43            <button44              className="button"45              onClick={() => updateSettings({ firstRunAcknowledged: true })}46            >47              Explore first48            </button>49            <button50              className="button primary"51              onClick={() => {52                updateSettings({ firstRunAcknowledged: true })53                openSettings('providers')54              }}55            >56              Add a key57            </button>58          </div>59        </div>60      </div>61    </div>62  )63}64