diff --git a/htrace-webapp/src/main/web/app/span.js b/htrace-webapp/src/main/web/app/span.js
index a056b4f..553239e 100644
--- a/htrace-webapp/src/main/web/app/span.js
+++ b/htrace-webapp/src/main/web/app/span.js
@@ -76,7 +76,21 @@
     this.set("description", response.d ? response.d : "");
     this.set("begin", response.b ? parseInt(response.b, 10) : 0);
     this.set("end", response.e ? parseInt(response.e, 10) : 0);
-
+    if (response.t) {
+      var t = response.t.sort(function(a, b) {
+          if (a.t < b.t) {
+            return -1;
+          } else if (a.t > b.t) {
+            return 1;
+          } else {
+            return 0;
+          }
+        });
+      this.set("timeAnnotations", t);
+    } else {
+      this.set("timeAnnotations", []);
+    }
+    this.set("infoAnnotations", response.n ? response.n : {});
     this.set("selected", false);
 
     // reifiedChildren starts off as null and will be filled in as needed.
@@ -114,6 +128,12 @@
     if (this.get("end") > 0) {
       obj.e = this.get("end");
     }
+    if (this.get("timeAnnotations").length > 0) {
+      obj.t = this.get("timeAnnotations");
+    }
+    if (_.size(this.get("infoAnnotations")) > 0) {
+      obj.n = this.get("infoAnnotations");
+    }
     return obj;
   },
 
diff --git a/htrace-webapp/src/main/web/app/span_widget.js b/htrace-webapp/src/main/web/app/span_widget.js
index 0d18fef..bd981ab 100644
--- a/htrace-webapp/src/main/web/app/span_widget.js
+++ b/htrace-webapp/src/main/web/app/span_widget.js
@@ -116,15 +116,17 @@
   this.fillSpanDetailsView = function() {
     var info = {
       spanID: this.span.get("spanID"),
-      begin: htrace.dateToString(parseInt(this.span.get("begin"), 10)),
-      end: htrace.dateToString(parseInt(this.span.get("end"), 10)),
+      begin: htrace.dateToString(this.span.get("begin"), 10),
+      end: htrace.dateToString(this.span.get("end"), 10),
+      duration: ((this.span.get("end") - this.span.get("begin")) + " ms")
     };
     var explicitOrder = {
-      spanId: -3,
-      begin: -2,
-      end: -1
+      spanId: 1,
+      begin: 2,
+      end: 3,
+      duration: 4
     };
-    keys = [];
+    keys = ["duration"];
     for(k in this.span.attributes) {
       if (k == "reifiedChildren") {
         continue;
@@ -132,6 +134,33 @@
       if (k == "reifiedParents") {
         continue;
       }
+      if (k == "selected") {
+        continue;
+      }
+      if (k == "timeAnnotations") {
+        // For timeline annotations, make the times into top-level keys.
+        var timeAnnotations = this.span.get("timeAnnotations");
+        for (var i = 0; i < timeAnnotations.length; i++) {
+          var key = htrace.dateToString(timeAnnotations[i].t);
+          keys.push(key);
+          info[key] = timeAnnotations[i].m;
+          explicitOrder[key] = 200;
+        }
+        continue;
+      }
+      if (k == "infoAnnotations") {
+        // For info annotations, move the keys to the top level.
+        // Surround them in brackets to make it clear that they are
+        // user-defined.
+        var infoAnnotations = this.span.get("infoAnnotations");
+        _.each(infoAnnotations, function(value, key) {
+          key = "[" + key + "]";
+          keys.push(key);
+          info[key] = value;
+          explicitOrder[key] = 200;
+        });
+        continue;
+      }
       keys.push(k);
       if (info[k] == null) {
         info[k] = this.span.get(k);
@@ -140,8 +169,8 @@
     // We sort the keys so that the stuff we want at the top appears at the top,
     // and everything else is in alphabetical order.
     keys = keys.sort(function(a, b) {
-        var oa = explicitOrder[a] || 0;
-        var ob = explicitOrder[b] || 0;
+        var oa = explicitOrder[a] || 100;
+        var ob = explicitOrder[b] || 100;
         if (oa < ob) {
           return -1;
         } else if (oa > ob) {