● Artemis City · Kernel for AI Agents

{stage === 'email' ? 'Sign in' : 'Verify it\'s you'}

{stage === 'email' ? 'Authenticated via Descope · passkey + email OTP. No passwords stored.' : `We sent a 6-digit code to ${email}. Type it below — autoadvances.`}

{stage === 'email' ? ( ) : ( <>

{otp.map((d, i) => ( (refs.current[i] = el)} className="auth-input" style={{ width: 44, height: 52, textAlign: 'center', fontSize: 22, fontFamily: 'JetBrains Mono', padding: 0 }} maxLength={1} value={d} onChange={(e) => setOtpDigit(i, e.target.value)} autoFocus={i === 0} /> ))}

)}

e.stopPropagation()}>

Create Task

Step {step} of 3 · goal → policy → review

= 1 ? 'done' : '')}>

= 2 ? 'done' : '')}>

= 3 ? 'done' : '')}>

{step === 1 && ( <>

Goal setGoal(e.target.value)} placeholder="e.g. Summarize last week's BRYPTOS desk notes into an ATP envelope" autoFocus />

Context (optional)

setDesc(e.target.value)} placeholder="Anything else the kernel should know — references, constraints, deadlines…" />
            </div>
            <div>
              <label>Lead agent</label>
              <select value={agent} onChange={(e) => setAgent(e.target.value)}>
                {AGENTS.map((a) => <option key={a.id} value={a.id}>{a.name} — {a.role}</option>)}
              </select>
            </div>
          </>
        )}

{step === 2 && (
          <>
            <div>
              <label>Governance policy</label>
              <div className="tool-pill-grid" style={{ marginBottom: 6 }}>
                {['auto', 'approval', 'review'].map((p) => (
                  <span key={p} className={'tp ' + (policy === p ? 'on' : '')} onClick={() => setPolicy(p)}>
                    <Icon name={p === 'auto' ? 'zap' : p === 'approval' ? 'shield' : 'flag'} size={12} /> {p}
                  </span>
                ))}
              </div>
              <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>
                {policy === 'auto' && 'Kernel auto-executes within tool whitelist. Highest velocity.'}
                {policy === 'approval' && 'Each tool call requires user approval. Default.'}
                {policy === 'review' && 'Plan must be reviewed before execution. Safest.'}
              </span>
            </div>
            <div className="policy-grid">
              <div>
                <label>Max iterations</label>
                <input type="number" value={maxIter} onChange={(e) => setMaxIter(+e.target.value)} min={1} max={32} />
              </div>
              <div>
                <label>Trust threshold ({trust.toFixed(2)})</label>
                <input type="range" min="0.50" max="0.99" step="0.01" value={trust} onChange={(e) => setTrust(+e.target.value)} style={{ padding: 0, height: 36 }} />
              </div>
            </div>
            <div>
              <label>Tools allowed</label>
              <div className="tool-pill-grid">
                {TOOLS.map((t) => (
                  <span key={t.id} className={'tp ' + (tools[t.id] ? 'on' : '')} onClick={() => setTools({ ...tools, [t.id]: !tools[t.id] })}>
                    <Icon name="wrench" size={11} /> {t.name}
                  </span>
                ))}
              </div>
            </div>
          </>
        )}

{step === 3 && (
          <div className="review-card">
            <div className="review-row"><span className="k">Goal</span><span className="v"><b>{goal || '—'}</b></span></div>
            {desc && <div className="review-row"><span className="k">Context</span><span className="v">{desc}</span></div>}
            <div className="review-row"><span className="k">Lead agent</span><span className="v">{AGENTS.find((a) => a.id === agent)?.name}</span></div>
            <div className="review-row"><span className="k">Policy</span><span className="v"><code>{policy}</code></span></div>
            <div className="review-row"><span className="k">Max iter</span><span className="v"><code>{maxIter}</code></span></div>
            <div className="review-row"><span className="k">Trust ≥</span><span className="v"><code>{trust.toFixed(2)}</code></span></div>
            <div className="review-row"><span className="k">Tools</span><span className="v" style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {enabledTools.length === 0 && <span style={{ color: 'var(--fg-3)' }}>none</span>}
              {enabledTools.map((t) => <code key={t}>{t}</code>)}
            </span></div>
          </div>
        )}

<div className="modal-foot">
          <button className="ghost" onClick={step === 1 ? onClose : prev}>{step === 1 ? 'Cancel' : '← Back'}</button>
          {step < 3
            ? <button className="primary" onClick={next} disabled={step === 1 && !goal}>Continue →</button>
            : <button className="primary" onClick={submit}>✓ Dispatch to kernel</button>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, AGENTS, TOOLS, MEMORY, SEED_THREADS, Auth, Sidebar, RightPanel, TaskModal });