UI tweaks, get JSXTransformer out.

ui/ZeroTierNetwork.jsx

@@ -1,8 +1,6 @@
 var ZeroTierNetwork = React.createClass({
 	getInitialState: function() {
-		return {
-			deleted: false
-		};
+		return {};
 	},
 
 	leaveNetwork: function(event) {
@@ -11,7 +9,8 @@ var ZeroTierNetwork = React.createClass({
 			cache: false,
 			type: 'DELETE',
 			success: function(data) {
-				this.setState({deleted: true});
+				if (this.props.onNetworkDeleted)
+					this.props.onNetworkDeleted(this.props.nwid);
 			}.bind(this),
 			error: function(error) {
 			}.bind(this)
@@ -22,13 +21,8 @@ var ZeroTierNetwork = React.createClass({
 	render: function() {
 		return (
 			<div className="zeroTierNetwork">
-				{
-					(this.state.deleted) ? (
-						<div className="deletedOverlay">&nbsp;</div>
-					) : (null)
-				}
 				<div className="networkInfo">
-					<span className="networkId">{this.props.nwid}</span>
+					<span className="networkId">{this.props.nwid}</span>&nbsp;
 					<span className="networkName">{this.props.name}</span>
 				</div>
 				<div className="networkProps">

ui/ZeroTierNode.jsx

@@ -56,6 +56,7 @@ var ZeroTierNode = React.createClass({
 			cache: false,
 			type: 'GET',
 			success: function(data) {
+				this.alertedToFailure = false;
 				if (data) {
 					var status = JSON.parse(data);
 					this.setState(status);
@@ -65,7 +66,11 @@ var ZeroTierNode = React.createClass({
 				this.updatePeers();
 			}.bind(this),
 			error: function() {
-				this.setState({online: false});
+				this.setState(this.getInitialState());
+				if (!this.alertedToFailure) {
+					this.alertedToFailure = true;
+					alert('Authorization token invalid or ZeroTier One service not running.');
+				}
 			}.bind(this)
 		});
 	},
@@ -77,13 +82,20 @@ var ZeroTierNode = React.createClass({
 				cache: false,
 				type: 'POST',
 				success: function(data) {
+					this.networkToJoin = '';
+					if (this.networkInputElement)
+						this.networkInputElement.value = '';
+					this.updateNetworks();
 				}.bind(this),
 				error: function() {
 				}.bind(this)
 			});
+		} else {
+			alert('To join a network, enter its 16-digit network ID.');
 		}
 	},
 	handleNetworkIdEntry: function(event) {
+		this.networkInputElement = event.target;
 		var nid = event.target.value;
 		if (nid) {
 			nid = nid.toLowerCase();
@@ -100,6 +112,15 @@ var ZeroTierNode = React.createClass({
 		}
 	},
 
+	handleNetworkDelete: function(nwid) {
+		var networks = [];
+		for(var i=0;i<this.state._networks.length;++i) {
+			if (this.state._networks[i].nwid !== nwid)
+				networks.push(this.state._networks[i]);
+		}
+		this.setState({_networks: networks});
+	},
+
 	componentDidMount: function() {
 		this.tabIndex = 0;
 		this.updateAll();
@@ -109,11 +130,15 @@ var ZeroTierNode = React.createClass({
 		clearInterval(this.updateIntervalId);
 	},
 	render: function() {
+		/* We implement tabs in a very simple way here with a React JSX conditional. The tabIndex
+		 * local variable indicates the tab, and switching it determines which set of things we
+		 * render in the main middle portion. On tab switch calls forceUpdate(). */
 		return (
 			<div className="zeroTierNode">
 				<div className="top">&nbsp;&nbsp;
 					<button disabled={this.tabIndex === 0} onClick={function() {this.tabIndex = 0; this.forceUpdate();}.bind(this)}>Networks</button>
 					<button disabled={this.tabIndex === 1} onClick={function() {this.tabIndex = 1; this.forceUpdate();}.bind(this)}>Peers</button>
+					<div className="logo">&#x23c1;&nbsp;</div>
 				</div>
 				<div className="middle">
 					<div className="middleScroll">
@@ -124,7 +149,8 @@ var ZeroTierNode = React.createClass({
 										<div className="f">Address</div>
 										<div className="f">Version</div>
 										<div className="f">Latency</div>
-										<div className="f">Direct&nbsp;Paths</div>
+										<div className="f">Data&nbsp;Paths</div>
+										<div className="f">Last&nbsp;Frame</div>
 										<div className="f">Role</div>
 									</div>
 									{
@@ -137,26 +163,22 @@ var ZeroTierNode = React.createClass({
 													<div className="f">
 														{
 															(peer['paths'].length === 0) ? (
-																<div className="peerPath"><i>(none)</i></div>
+																<div className="peerPath"></div>
 															) : (
 																<div>
 																{
 																	peer['paths'].map(function(path) {
-																		if ((path.active)||(path.fixed)) {
-																			return (
-																				<div className="peerPath">{path.address}&nbsp;{this.ago(path.lastSend)}&nbsp;{this.ago(path.lastReceive)}{path.preferred ? ' *' : ''}</div>
-																			);
-																		} else {
-																			return (
-																				<div className="peerPathInactive">{path.address}&nbsp;{this.ago(path.lastSend)}&nbsp;{this.ago(path.lastReceive)}</div>
-																			);
-																		}
+																		var cn = ((path.active)||(path.fixed)) ? (path.preferred ? 'peerPathPreferred' : 'peerPathActive') : 'peerPathInactive';
+																		return (
+																			<div className={cn}>{path.address}&nbsp;&nbsp;{this.ago(path.lastSend)}/{this.ago(path.lastReceive)}</div>
+																		);
 																	}.bind(this))
 																}
 																</div>
 															)
 														}
 													</div>
+													<div className="f">{this.ago(peer['lastUnicastFrame'])}</div>
 													<div className="f">{peer['role']}</div>
 												</div>
 											);
@@ -168,6 +190,7 @@ var ZeroTierNode = React.createClass({
 									{
 										this.state._networks.map(function(network) {
 											network['authToken'] = this.props.authToken;
+											network['onNetworkDeleted'] = this.handleNetworkDelete;
 											return React.createElement('div',{className: 'network'},React.createElement(ZeroTierNetwork,network));
 										}.bind(this))
 									}
@@ -181,7 +204,7 @@ var ZeroTierNode = React.createClass({
 						<span className="statusLine"><span className="zeroTierAddress">{this.state.address}</span>&nbsp;&nbsp;{this.state.online ? 'ONLINE' : 'OFFLINE'}&nbsp;&nbsp;{this.state.version}</span>
 					</div>
 					<div className="right">
-						<form onSubmit={this.joinNetwork}><input type="text" placeholder="################" onChange={this.handleNetworkIdEntry} size="16"/><button type="submit">Join</button></form>
+						<form onSubmit={this.joinNetwork}><input type="text" placeholder="  [ Network ID ]" onChange={this.handleNetworkIdEntry} size="16"/><button type="submit">Join</button></form>
 					</div>
 				</div>
 			</div>

ui/index.html

@@ -12,12 +12,11 @@
 
 	<script src="simpleajax.min.js"></script>
 	<script src="react.min.js"></script>
-	<script src="JSXTransformer.min.js"></script>
 
-	<script type="text/jsx" src="ZeroTierNetwork.jsx"></script>
-	<script type="text/jsx" src="ZeroTierNode.jsx"></script>
+	<script src="ZeroTierNetwork.js"></script>
+	<script src="ZeroTierNode.js"></script>
 
-	<script type="text/jsx" src="main.jsx"></script>
+	<script src="main.js"></script>
 </head>
 <body>
 <div style="width: 100%; height: 100%;" id="main"></div>

ui/zerotier.css

@@ -36,6 +36,14 @@ html,body {
 	padding: 0;
 	margin: 0;
 }
+.zeroTierNode > .top > .logo {
+	display: inline-block;
+	padding: 0.1em 0 0 0;
+	margin: 0;
+	font-size: 12pt;
+	font-weight: bold;
+	float: right;
+}
 .zeroTierNode > .top button {
 	display: inline-block;
 	padding: 0.25rem 0.75rem 0.25rem 0.75rem;
@@ -70,7 +78,7 @@ html,body {
 	margin: 0;
 	overflow-x: hidden;
 	overflow-y: scroll;
-	background: #eeeeee;
+	background: #dddddd;
 }
 .zeroTierNode > .middle > .middleScroll > .networks {
 	display: block;
@@ -81,17 +89,17 @@ html,body {
 	border-collapse: collapse;
 }
 .zeroTierNode > .middle > .middleScroll > .networks > .network {
-	padding: 0.5rem;
-	margin: 0.25rem;
+	padding: 0.25rem;
+	margin: 0.25rem 0 0 0.25rem;
 	float: left;
 	display: inline-block;
+	min-width: 30%;
 	border: 1px solid #234447;
 	background: #ffffff;
 }
 .zeroTierNode > .middle > .middleScroll > .peers {
 	display: table;
 	width: 100%;
-	padding: 0;
 	margin: 0;
 	border-collapse: collapse;
 }
@@ -100,20 +108,35 @@ html,body {
 	display: table-row;
 	background: #ffffff;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPath {
+.zeroTierNode > .middle > .middleScroll > .peers > .peer:nth-child(odd) {
+	background: #f3f3f3;
+}
+.zeroTierNode > .middle > .middleScroll > .peers > .peer:nth-child(even) {
+}
+.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathActive {
+	font-size: 10pt;
+	color: #555555;
+	font-style: italic;
+	font-family: monospace;
+	white-space: nowrap;
+}
+.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathPreferred {
 	font-size: 10pt;
+	color: #000000;
 	font-family: monospace;
 	white-space: nowrap;
 }
 .zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathInactive {
 	font-size: 10pt;
 	font-family: monospace;
-	color: #bbbbbb;
+	color: #aaaaaa;
+	font-style: italic;
 	text-decoration: line-through;
 	white-space: nowrap;
 }
 .zeroTierNode > .middle > .middleScroll > .peers > .peer > .f {
 	display: table-cell;
+	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
 	font-size: 10pt;
 }
 .zeroTierNode > .middle > .middleScroll > .peers > .peerHeader {
@@ -125,6 +148,7 @@ html,body {
 .zeroTierNode > .middle > .middleScroll > .peers > .peerHeader > .f {
 	display: table-cell;
 	font-size: 10pt;
+	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
 	font-weight: bold;
 }
 
@@ -155,13 +179,12 @@ html,body {
 .zeroTierNode > .bottom > .right input {
 	font-family: monospace;
 	font-size: 12pt;
-	background: #91a2a3;
-	color: #ffffff;
+	background: #ffffff;
+	color: #000000;
 	outline: none;
-	border: 0;
+	border: 1px solid #234447;
 	margin: 0;
 	padding: 0.05rem 0.25rem 0.05rem 0.25rem;
-	height: 100%;
 	display: inline-block;
 }
 .zeroTierNode > .bottom > .right button {
@@ -187,18 +210,8 @@ html,body {
 	width: 100%;
 	position: relative;
 }
-.zeroTierNetwork .deletedOverlay {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	background: rgba(255,255,255,0.8);
-	display: block;
-	top: 0;
-	left: 0;
-	z-index: 2;
-}
 .zeroTierNetwork .networkInfo {
-	padding: 0 0 0.5rem 0;
+	padding: 0 0 0.25rem 0;
 	text-align: left;
 	font-size: 12pt;
 }
@@ -242,7 +255,7 @@ html,body {
 }
 .zeroTierNetwork .leaveNetworkButton {
 	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-	margin: 0.5rem 0 0 0;
+	margin: 0.25rem 0 0 0;
 	font-size: 10pt;
 	background: #ffffff;
 	outline: none;