Revert of Rewrite LogDog log viewer app.

web/inc/logdog-stream-view/logdog-stream-view.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
   -->
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/google-signin/google-signin-aware.html">
-<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../bower_components/iron-icons/av-icons.html">
-<link rel="import" href="../bower_components/iron-icons/editor-icons.html">
-<link rel="import" href="../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="">
+<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
+
+<link rel="import" href="../logdog-stream/logdog-stream.html">
+<link rel="import" href="../logdog-stream/logdog-error.html">
+<link rel="import" href="../luci-sleep-promise/luci-sleep-promise.html">
+<link rel="import" href="logdog-stream-fetcher.html">
+<link rel="import" href="logdog-stream-query.html">
 
 <!--
 An element for rendering muxed LogDog log streams.
 -->
 <dom-module id="logdog-stream-view">
 
   <template>
-    <style is="custom-style">
-      #mainView {
-        position: relative;
-      }
-
-      #buttons {
-        position: fixed;
-        height: auto;
-        padding: 5px;
-        background-color: rgba(0, 0, 0, 0.1);
-        z-index: 100;
-      }
-      #buttons > paper-button {
+    <style>
+      .buttons {
         background-color: white;
       }
 
-      .paper-button-highlight[toggles][active] {
-        background-color: #cd6a51;
-      }
-
-      .paper-icon-button-highlight[toggles][active] {
-        background-color: #cd6a51;
-        border-radius: 80%;
-      }
-
-      #streamStatus {
+      #stream-status {
         position: fixed;
         right: 16px;
         background-color: #EEEEEE;
         opacity: 0.7;
       }
 
       #logContent {
-        padding-top: 54px; /* Pad around buttons */
+        padding-top: 20px;
         background-color: white;
       }
 
       .log-entry {
         padding: 0 0 0 0;
         clear: left;
       }
 
       .log-entry-meta {
-        background-color: lightgray;
-        padding: 5px;
-        border-width: 2px 0px 0px 0px;
-        border-color: darkgray;
-        border-style: dotted;
-        user-select: none;
-
+        vertical-align: top;
+        padding: 0 8px 0 0;
+        margin: 0 0 0 0;
+        float: left;
         font-style: italic;
         font-family: Courier New, Courier, monospace;
         font-size: 10px;
 
-        /* Can be toggled to "flex" by applying .showMeta class to #logs. */
+        /* Fixed width, break word if necessary. */
+        width: 150px;
+        word-break: break-word;
+
+        /* Can be toggled by applying .showMeta class to #logs. */
         display: none;
       }
-      .log-entry-meta-line {
-        padding: 5px;
-        border-width: 1px;
-        border-style: solid;
-        border-color: gray;
-        border-radius: 10px;
-        margin-right: 10px;
-        text-align: center;
-      }
       .showMeta .log-entry-meta {
-        display: flex;
+        display: block;
       }
 
-      /* .log-entry-content { */
-      .log-entry-chunk {
+      .log-entry-content {
         padding: 0 0 0 0;
         margin: 0 0 0 0;
         float: none;
         font-family: Courier New, Courier, monospace;
         font-size: 16px;
         list-style: none;
+      }
 
-        border-bottom: 1px solid #CCCCCC;
+      .log-entry-line {
+        padding-left: 0;
 
         /* Can be toggled by applying .wrapLines class to #logs. */
         white-space: pre;
       }
-
-      /*.wrapLines .log-entry-content { */
-      .wrapLines .log-entry-chunk {
+      .wrapLines .log-entry-line {
         white-space: pre-wrap;
         word-break: break-word;
       }
 
-      .logFetchButtonContainer {
-        height: auto;
-        display: none;
-        flex-direction: row;
-        background-color: rgba(0, 0, 0, 0.2);
-        padding: 2px;
+      .log-entry-line:nth-last-child(2) {
+        border-bottom: 1px solid #CCCCCC;
       }
 
-      .logFetchButtonVisible {
-        display: flex !important;
-      }
-
-      .logFetchButton {
-        width: 100%;
-        height: 18px;
-      }
-
-      .logSplitUpButton {
-        background: yellow;
-      }
-      .logSplitDownButton {
-        background: green;
-      }
-
-      .logBottomButton {
+      #bottom {
         background-color: lightcoral;
-      }
-
-      #logEnd {
-        margin-bottom: 30px;
-        background-color: gray;
-      }
-
-      .clickable-log-anchor {
-        height: 24px;
+        height: 2px;
+        margin-bottom: 10px;
       }
 
       #status-bar {
         /* Overlay at the bottom of the page. */
         position: fixed;
         z-index: 9999;
         overflow: hidden;
         bottom: 0;
         left: 0;
         width: 100%;
 
         text-align: center;
         font-size: 16px;
         background-color: rgba(245, 245, 220, 0.7);
       }
     </style>
 
+    <google-signin-aware
+      id="aware"
+      on-google-signin-aware-success="_onSignin"></google-signin-aware>
+
     <rpc-client
       id="client"
       auto-token
       host="[[host]]"></rpc-client>
 
-    <!--
-      This must be after "rpc-client" so we get the signin event after it
-      does.
-    -->
-    <google-signin-aware
-      id="aware"
-      on-google-signin-aware-success="_onSignin"></google-signin-aware>
-
     <!-- Stream view options. -->
-    <div id="mainView">
-      <div id="buttons">
-        <!-- If we have exactly one stream, we will enable users to split. -->
-        <template is="dom-if" if="{{showStreamingControls}}">
-          <template is="dom-if" if="{{canSplit}}">
-            <paper-icon-button title="Split, load logs from end"
-                icon="editor:vertical-align-bottom"
-                on-tap="_splitClicked">
-            </paper-icon-button>
-          </template>
-
-          <template is="dom-if" if="{{isSplit}}">
-            <paper-icon-button title="Scroll to split"
-                icon="editor:vertical-align-center" on-tap="_scrollToSplit">
-            </paper-icon-button>
-          </template>
-
-          <paper-icon-button class="paper-icon-button-highlight" toggles
-              title="Automatically scroll to new logs." icon="icons:update"
-              active="{{follow}}">
-          </paper-icon-button>
-
-          <paper-icon-button class="paper-icon-button-highlight" toggles
-              title="Automatically load logs." icon="{{playingIconName}}"
-              active="{{playing}}">
-          </paper-icon-button>
-
-          <template is="dom-if" if="{{isSplit}}">
-            <paper-icon-button toggles
-                title="Load new logs, or backfill from top."
-                icon="{{backfillIconName}}"
-                active="{{backfill}}">
-            </paper-icon-button>
-          </template>
-        </template>
-
-        <template is="dom-if" if="{{_not(playing)}}">
-          <paper-button class="paper-button-highlight" toggles raised
-              active="{{wrapLines}}">
-            Wrap
-          </paper-button>
-
-          <template is="dom-if" if="{{metadata}}">
-            <paper-button class="paper-button-highlight" toggles raised
-                active="{{showMetadata}}">
-              Metadata
-            </paper-button>
-          </template>
-        </template>
+    <div class="main-view">
+      <div class="buttons">
+        <paper-checkbox checked="{{showMetadata}}">
+          Show Metadata
+        </paper-checkbox>
+        <paper-checkbox checked="{{wrapLines}}">
+          Wrap Lines
+        </paper-checkbox>
+        <paper-checkbox checked="{{follow}}">
+          Follow
+        </paper-checkbox>
       </div>
 
       <!-- Display current fetching status, if stream data is still loading. -->
-      <div id="streamStatus">
-        <template is="dom-if" if="{{streamStatus}}">
+      <template is="dom-if" if="{{streamStatus}}">
+        <div id="stream-status">
           <table>
             <template is="dom-repeat" items="{{streamStatus}}">
               <tr>
                 <td>{{item.name}}</td>
                 <td>{{item.desc}}</td>
               </tr>
             </template>
           </table>
-        </template>
-      </div>
+        </div>
+      </template>
 
       <!-- Muxed log content. -->
-      <div id="logContent"
-          on-mousewheel="_handleMouseWheel">
+      <div id="logContent" on-mousewheel="_handleMouseWheel">
         <div id="logs">
           <!-- Content will be populated with JavaScript as logs are loaded.
 
             <div class="log-entry">
               <div class="log-entry-meta">
                 <div class="log-entry-meta-line">(Meta 0)</div>
                 ...
                 <div class="log-entry-meta-line">(Meta N)</div>
               </div>
               <div class="log-entry-content">
-                LINE #0
+                <div class="log-entry-line">LINE #0</div>
                 ...
-                LINE #N
+                <div class="log-entry-line">LINE #N</div>
               </div>
             </div>
             ...
 
+          -->
+        </div>
 
-            Note that we can't use templating to show/hide the log dividers,
-            since our positional log insertion requires them to be present and
-            move along with insertions as points of reference.
-          -->
-
-          <div id="logSplit" class="logFetchButtonContainer">
-            <!-- Insert point (prepend for head, append for tail). -->
-            <paper-button id="logSplitUp"
-                class="logFetchButton logSplitUpButton giant"
-                disabled="[[streamAnchorsNotClickable]]"
-                on-click="_handleUpClick">
-              <iron-icon icon="file-upload"></iron-icon>
-            </paper-button>
-            <paper-button id="logSplitDown"
-                class="logFetchButton logSplitDownButton giant"
-                disabled="[[streamAnchorsNotClickable]]"
-                on-click="_handleDownClick">
-              <iron-icon icon="file-download"></iron-icon>
-            </paper-button>
-          </div>
-
-          <div id="logBottom" class="logFetchButtonContainer">
-            <!--
-              Bottom of the log stream (red bottom line). When tail is complete,
-              all future logs get prepended to this.
-            -->
-            <paper-button id="logBottomButton"
-                class="logFetchButton logBottomButton giant"
-                disabled="[[streamAnchorsNotClickable]]"
-                on-click="_handleBottomClick">
-              <iron-icon icon="arrow-drop-down"></iron-icon>
-            </paper-button>
-          </div>
-          <div id="logEnd"></div>
-        </div>
+        <!-- Current red bottom line. -->
+        <div id="bottom"></div>
       </div>
 
     </div>
 
     <template is="dom-if" if="{{statusBar}}">
       <div id="status-bar">{{statusBar.value}}</div>
     </template>
   </template>
 
 </dom-module>
@@ skipping 18 matching lines @@
        * project. For example, for stream "foo/bar/+/baz" in project "chromium",
        * the stream path would be: "chromium/foo/bar/+/baz".
        */
       streams: {
         type: Array,
         value: [],
         notify: true,
         observer: "_streamsChanged",
       },
 
-      toolbarAnchor: {
-        type: Object,
-        value: null,
-      },
-
-      mobile: {
-        type: Boolean,
-        value: false,
-      },
-
       /**
        * The number of logs to load before forcing a page refresh.
        *
        * The smaller the value, the smoother the page will behave while logs are
        * loading. However, the logs will also load slower because of forced
        * renders in between elements.
        */
       burst: {
         type: Number,
         value: 1000,
         notify: true,
       },
 
-      /**
-       * If true, render metadata blocks alongside their log entries.
-       *
-       * This will cause significantly more HTML elements during rendering (so
-       * that each metadata element can show up next to its row) and greatly
-       * slow the viewer down.
-       */
-      metadata: {
-        type: Boolean,
-        value: false,
-      },
-
       /** If true, show log metadata column. */
       showMetadata: {
         type: Boolean,
         value: false,
         observer: "_showMetadataChanged",
       },
 
       /** If true, wrap log lines to the screen. */
       wrapLines: {
         type: Boolean,
         value: false,
         observer: "_wrapLinesChanged",
       },
 
       /**
        * If true, automatically scroll the page to the bottom of the logs
        * while they are streaming.
        */
       follow: {
         type: Boolean,
         value: false,
         observer: "_followChanged",
       },
 
-      canSplit: {
-        type: Boolean,
-        value: false,
-        readOnly: true,
-      },
-
-      showStreamingControls: {
-        type: Boolean,
-        value: true,
-        readOnly: true,
-      },
-
-      isSplit: {
-        type: Boolean,
-        value: false,
-        readOnly: true,
-      },
-
-      streamAnchorsNotClickable: {
-        type: Boolean,
-        computed:
-          '_computeAnchorsNotClickable(playing, showStreamingControls)',
-      },
-
-      playing: {
-        type: Boolean,
-        value: false,
-        observer: "_playingChanged",
-      },
-
-      playingIconName: {
-        type: String,
-        computed: '_computePlayingIconName(playing)',
-      },
-
-      backfill: {
-        type: Boolean,
-        value: false,
-        observer: "_backfillChanged",
-      },
-
-      backfillIconName: {
-        type: String,
-        computed: '_computeBackfillIconName(backfill)',
-      },
-
       /**
        * The current stream status. This is an Array of objects:
        *   obj.name is the name of the stream.
        *   obj.desc is the status description of the stream.
        */
       streamStatus: {
         type: String,
         value: null,
         notify: true,
         readOnly: true,
       },
 
       /**
        * The text content of the status element at the bottom of the page.
        */
       statusBar: {
         type: String,
         value: null,
         readOnly: true,
       },
     },
 
-    created: function() {
-      this._scrollTimeoutId = null;
-
-      // Create "onScrollHandler", which just invokes "_onScroll" while bound
-      // to "this". We create it here so we can unregister it later, since
-      // "bind" returns a modified value.
-      this._onScrollHandler = function(e) { this._onScroll(e); }.bind(this);
-    },
-
-    attached: function() {
-      require(["inc/rpc/client", "inc/logdog-stream-view/viewer"],
-          function(client, viewer) {
-            // Instantiate our view, and install callbacks.
-            this._v = viewer;
-            this._model = new viewer.Model({
-                client: new client.luci_rpc.Client(this.$.client),
-                mobile: this.mobile,
-
-                pushLogEntries: this._pushLogEntries.bind(this),
-                clearLogEntries: this._clearLogEntries.bind(this),
-                updateControls: this._updateControls.bind(this),
-                locationIsVisible: this._locationIsVisible.bind(this),
-            });
-            this._streamsChanged();
-          }.bind(this));
-
-      window.addEventListener('scroll', this._onScrollHandler);
+    ready: function() {
+      this._scheduledWrite = null;
+      this._buffer = null;
+      this._currentLogBuffer = null;
+      this._authCallback = null;
     },
 
     detached: function() {
-      // Unregsiter event handlers.
-      window.removeEventListener('scroll', this._onScrollHandler);
-
-      // Reset state.
-      this.reset();
+      this.stop();
     },
 
     stop: function() {
-      this.reset();
+      this._cancelFetch(true);
     },
 
     /** Clears state and begins fetching log data. */
     reset: function() {
-      if ( this._model ) {
-        this._model.reset();
-      }
-      this._resetScroll();
-      this._model = null;
-      this._renderedLogs = false;
+      this._resetLogState();
+
+      this._resolveStreams().then(function(streams) {
+        this._resetToStreams(streams);
+      }.bind(this)).catch(function(error) {
+        this._loadStatusBar("Failed to resolve streams:" + error);
+        throw error;
+      }.bind(this));
+    },
+
+    /** Clears all current logs. */
+    _resetLogState: function() {
+      this._cancelFetch(true);
+
+      // Remove all current log elements. */
+      while (this.$.logs.hasChildNodes()) {
+        this.$.logs.removeChild(this.$.logs.lastChild);
+      }
+
+      // Clear our buffer and streamer state.
+      this._buffer = null;
+      this._currentLogBuffer = null;
+      if (this._streamer) {
+        this._streamer.shutdown();
+      }
+      this._streamer = null;
+    },
+
+    _resolveStreams: function() {
+      // Separate our configured streams into full stream paths and queries.
+      var parts = {
+        queries: [],
+        streams: [],
+      };
+      var query = new LogDogQuery(this.project);
+      this.streams.map(LogDogStream.splitProject).forEach(function(v) {
+        if (LogDogQuery.isQuery(v.path)) {
+          parts.queries.push(v);
+        } else {
+          parts.streams.push(v);
+        }
+      });
+
+      // Resolve any outstanding queries into full stream paths.
+      //
+      // If we get an authentication error, register to have our query
+      // resolution callback invoked on signin changes until it works (or
+      // indefinitely).
+      var queries = parts.queries.map(function(v) {
+          var params = new LogDogQueryParams(v.project).
+              path(v.path).
+              streamType("text");
+          return new LogDogQuery(this.$.client, params);
+      }.bind(this));
+
+      var issueQuery = function() {
+        this._loadStatusBar("Resolving log streams from query...");
+        this._authCallback = null;
+
+        return Promise.all(queries.map(function(q) {
+          return q.getAll();
+        }.bind(this))).then(function(results) {
+          this._loadStatusBar(null);
+
+          // Add query results (if any) to streams.
+          results.forEach(function(streams) {
+            (streams || []).forEach(function(stream) {
+              parts.streams.push(stream.stream);
+            });
+          });
+          parts.streams.sort(LogDogStream.cmp);
+
+          // Remove any duplicates.
+          var seenStreams = {};
+          var result = [];
+          parts.streams.forEach(function(s) {
+            var fullName = s.fullName();
+            if (!seenStreams[fullName]) {
+              seenStreams[fullName] = s;
+              result.push(s);
+            }
+          });
+          return result;
+        }.bind(this)).catch(function(error) {
+          if (error instanceof LogDogError && error.isUnauthenticated()) {
+            // Retry on auth event.
+            this._loadStatusBar("Not authorized to execute query. Log in " +
+                "with an authorized account.");
+            return new Promise(function(resolve) {
+              this._authCallback = resolve;
+            }.bind(this)).then(issueQuery);
+          }
+
+          throw error;
+        }.bind(this));
+      }.bind(this);
+      return issueQuery();
+    },
+
+    _resetToStreams: function(streams) {
+      // Unique streams.
+      if (!streams.length) {
+        this._loadStatusBar("No log streams.");
+        return;
+      }
+
+      console.log("Loading log streams:", streams);
+      this._loadStatusBar("Loading stream data...");
+      streams.sort(LogDogStream.cmp);
+
+      // Create a _BufferedStream for each stream.
+      var bufStreams = streams.map(function(stream, idx) {
+        return new _BufferedStream(stream, this.$.client,
+            (streams.length > 1), function(bs) {
+              this._updateStreamStatus(bs, idx);
+            }.bind(this));
+      }.bind(this));
+      this._buffer = new _LogStreamBuffer();
+      this._buffer.setStreams(bufStreams)
+
+      this._streamer = new _LogStreamer(this._buffer, this.burst, function(v) {
+        this._loadStatusBar(v);
+      }.bind(this));
+
+      // Construct our initial status content.
+      this._setStreamStatus(bufStreams.map(function(bs, idx) {
+        return {
+          name: (" [.../+/" + bs.stream.name() + "]"),
+          desc: bs.description(),
+        };
+      }.bind(this)));
+
+      // Kick off our log fetching.
+      this._scheduleWriteNextLogs();
+    },
+
+    /** Cancels any currently-executing log stream fetch. */
+    _cancelFetch: function(clear) {
+      this._cancelScheduledWrite();
+      this._authCallback = null;
+
+      if (clear) {
+        this._setStreamStatus(null);
+        this._loadStatusBar(null);
+      }
+    },
+
+    /** Cancels any scheduled asynchronous write. */
+    _cancelScheduledWrite: function() {
+      if (this._scheduledWrite) {
+        this.cancelAsync(this._scheduledWrite);
+        this._scheduledWrite = null;
+      }
+    },
+
+    /** Called when the bound log stream variables has changed. */
+    _streamsChanged: function(v, old) {
+      this.reset();
+    },
+
+    /** Schedules the next asynchronous log write. */
+    _scheduleWriteNextLogs: function() {
+      // This is called after refresh, so use this opportunity to maybe scroll
+      // to the bottom.
+      this._maybeScrollToBottom();
+
+      if (! this._scheduledWrite) {
+        this._scheduledWrite = this.async(function() {
+          this._writeNextLogs()
+        }.bind(this));
+      }
     },
 
     /**
-     * Called each time a scroll event is fired. Since this can be really
-     * frequent, this will kick off a "scroll handler" in the background at an
-     * interval. Multiple scroll events within that interval will only result
-     * in one scroll handler invocation.
+     * This is an iterative function that grabs the next set of logs and renders
+     * them. Afterwards, it will continue rescheduling itself until there are
+     * no more logs to render.
      */
-    _onScroll: function(e) {
-      if ( this._scrollTimeoutId ) {
-        return;
-      }
-
-      window.setTimeout(function() {
-        this._handleScrollEvent(e);
-      }.bind(this), 100);
-    },
-
-    /** Actual scroll event handler. */
-    _handleScrollEvent: function(e) {
-      this._resetScroll();
-
-      // Update our button bar position to be relative to the parent's height.
-      this._adjustToTop(this.$.buttons);
-      this._adjustToTop(this.$.streamStatus);
-    },
-
-    _adjustToTop: function(elem) {
-      // Update our button bar position to be relative to the parent's height.
-      var pageRect = this.$.mainView.getBoundingClientRect();
-      var elemRect = elem.getBoundingClientRect();
-      var adjusted = (elem.offsetTop + pageRect.top - elemRect.top);
-      if ( adjusted < 0 ) {
-        adjusted = 0;
-      }
-      elem.style.top = adjusted;
-    },
-
-    /** Clears asynchornous scroll event status. */
-    _resetScroll: function() {
-      if ( this._scrollTimeoutId !== null ) {
-        window.clearTimeout(this._scrollTimeoutId);
-        this._scrollTimeoutId = null;
-      }
-    },
-
-    _handleMouseWheel: function(e) {
-      this.follow = false;
-    },
-
-    _handleDownClick: function(e) {
-      this._model.fetchLocation(this._v.Location.HEAD, true);
-    },
-
-    _handleUpClick: function(e) {
-      this._model.fetchLocation(this._v.Location.TAIL, true);
-    },
-
-    _handleBottomClick: function(e) {
-      this._model.fetchLocation(this._v.Location.BOTTOM, true);
-    },
-
-    /** Called when the bound log stream variables has changed. */
-    _streamsChanged: function() {
-      if( ! this._model ) {
-        return;
-      }
-
-      this._model.resolve(this.streams).then( function() {
-        // If we're not on mobile, start with playing state.
-        this.playing = (!this.mobile);
-
-        // Perform the initial fetch after resolution.
-        this._model.setAutomatic( this.playing );
-        this._model.setTailing( ! this.backfill );
-        this._model.fetch(false);
-      }.bind(this) );
-    },
-
-    _appendMetaLine: function(root, key, value) {
-      var line = document.createElement("div");
-      line.className = "log-entry-meta-line";
-
-      if ( key != null ) {
-        var e = document.createElement("strong");
-        e.textContent = key;
-        line.appendChild(e);
-      }
-
-      if ( value != null ) {
-        var e = document.createElement("span");
-        e.textContent = value;
-        line.appendChild(e);
-      }
-
-      root.appendChild(line);
-    },
-
-    _pushLogEntries: function(entries, insertion) {
-      // Mark that we've rendered logs (show bars now).
-      this._renderedLogs = true;
-
-      // Build our log entry chunk.
-      var logEntryChunk = document.createElement("div");
-      logEntryChunk.className = "log-entry-chunk";
-
-      var lastLogEntry = logEntryChunk;
-      var lines = new Array();
-
-      entries.forEach(function(le) {
-        var text = le.text;
-        if (!(text && text.lines)) {
+    _writeNextLogs: function() {
+      this._cancelScheduledWrite();
+
+      this._streamer.load().then(function(entries) {
+        // If there are no entries, then we're done.
+        if (! entries) {
+          // Cancel all fetching state. If our streamer is finished, also clear
+          // messages and status.
+          if (this._streamer.finished) {
+            if (this._streamer.someStreamsFailed) {
+              this._cancelFetch(false);
+              this._loadStatusBar("Some streams failed to load.");
+            } else {
+              this._cancelFetch(true);
+            }
+          } else {
+            // No more logs, but also we are not finished. Retry after auth.
+            this._authCallback = this._scheduleWriteNextLogs.bind(this);
+          }
           return;
         }
 
-        // If we're rendering metadata, render an element per log entry.
-        if( this.metadata ) {
-          var entryRow = document.createElement("div");
-          entryRow.className = "log-entry";
-
-          // Metadata column.
-          var metadataBlock = document.createElement("div");
-          metadataBlock.className = "log-entry-meta";
-
-          this._appendMetaLine(metadataBlock, "Timestamp:", le.timestamp);
-          this._appendMetaLine(metadataBlock, "Stream:", le.desc.name);
-          this._appendMetaLine(metadataBlock, "Index:", le.streamIndex);
-
-          // Log column.
-          var logDataBlock = document.createElement("div");
-          logDataBlock.className = "log-entry-content";
-
-          le.text.lines.forEach(function(line) {
-            lines.push(line.value);
-          });
-
-          logDataBlock.textContent = lines.join("\n");
-          lines.length = 0;
-
-          entryRow.appendChild(metadataBlock);
-          entryRow.appendChild(logDataBlock);
-
-          logEntryChunk.appendChild(entryRow);
-          lastLogEntry = entryRow;
-        } else {
-          // Add this to the lines. We'll assign this directly to logEntryChunk
-          // after the loop.
-          le.text.lines.forEach(function(line) {
-            lines.push(line.value);
-          });
+        var logEntryChunk = document.createElement("div");
+        entries.forEach(function(le) {
+          this._appendLogEntry(logEntryChunk, le);
+        }.bind(this));
+
+        // To have styles apply correctly, we need to add it twice, see
+        // https://github.com/Polymer/polymer/issues/3100.
+        Polymer.dom(this.root).appendChild(logEntryChunk);
+        this.$.logs.appendChild(logEntryChunk);
+
+        // Yield so that our browser can refresh. We can't directly use
+        // this.async since a timeout of "0" causes immediate execution instead
+        // of yielding.
+        setTimeout(function() {
+          this._scheduleWriteNextLogs();
+        }.bind(this), 0);
+      }.bind(this));
+    },
+
+    _appendLogEntry: function(root, le) {
+      var text = le.text;
+      if (!(text && text.lines)) {
+        return 0;
+      }
+
+      // Create elements manually to avoid Polymer overhead for large logs.
+      var entryRow = document.createElement("div");
+      entryRow.className = "log-entry";
+
+      // Metadata column.
+      var metadataBlock = document.createElement("div");
+      metadataBlock.className = "log-entry-meta";
+      entryRow.appendChild(metadataBlock);
+
+      var timestampDiv = document.createElement("div");
+      timestampDiv.className = "log-entry-meta-line";
+      timestampDiv.textContent = le.timestamp;
+      metadataBlock.appendChild(timestampDiv);
+
+      var nameDiv = document.createElement("div");
+      nameDiv.className = "log-entry-meta-line";
+      nameDiv.textContent = le.desc.name;
+      metadataBlock.appendChild(nameDiv);
+
+      var streamDiv = document.createElement("div");
+      streamDiv.className = "log-entry-meta-line";
+      streamDiv.textContent = le.streamIndex;
+      metadataBlock.appendChild(streamDiv);
+
+      // Log column.
+      var logDataBlock = document.createElement("div");
+      logDataBlock.className = "log-entry-content";
+      if (le.text) {
+        for (var i = 0; i < le.text.lines.length; i++) {
+          var lineDiv = document.createElement("div");
+          lineDiv.className = "log-entry-line";
+          lineDiv.textContent = le.text.lines[i].value;
+          logDataBlock.appendChild(lineDiv);
         }
-      }.bind(this));
-
-      if ( ! this.metadata ) {
-        // Only one HTML element: the chunk.
-        logEntryChunk.textContent = lines.join("\n");
-        lastLogEntry = logEntryChunk;
-      }
-
-      // To have styles apply correctly, we need to add it twice, see
-      // https://github.com/Polymer/polymer/issues/3100.
-      Polymer.dom(this.root).appendChild(logEntryChunk);
-
-      // Add the log entry to the appropriate place.
-      var anchor, scrollToTop = false;
-      var forceScroll = false;
-      switch ( insertion ) {
-      case this._v.Location.HEAD:
-        // InsertionPoint.HEAD: PREPEND to "logSplit".
-        this.$.logs.insertBefore(logEntryChunk, this.$.logSplit);
-
-        // If we're not split, scroll to the log bottom. Otherwise, scroll to
-        // the split.
-        anchor = lastLogEntry;
-        break;
-
-      case this._v.Location.TAIL:
-        // InsertionPoint.TAIL: APPEND to "logSplit".
-        anchor = this.$.logSplit;
-
-        // Identify the element *after* our insertion point and scroll to it.
-        // This provides a semblance of stability as we top-insert.
-        //
-        // As a special case, if the next element is the log bottom, just
-        // scroll to the split, since there is no content to stabilize.
-        if ( anchor.nextElementSibling !== this.$.logBottom ) {
-          anchor = anchor.nextElementSibling;
-        }
-
-        // Insert logs by adding them before the sibling following the log
-        // split (append to this.$.logSplit).
-        this.$.logs.insertBefore(logEntryChunk, this.$.logSplit.nextSibling);
-
-        // When tailing, always scroll to the anchor point.
-        scrollToTop = true;
-        forceScroll = true;
-        break;
-
-      case this._v.Location.BOTTOM:
-        // InsertionPoint.BOTTOM: PREPEND to "logBottom".
-        anchor = this.$.logBottom;
-        this.$.logs.insertBefore(logEntryChunk, anchor);
-        break;
-      }
-
-      this._maybeScrollToElement(anchor, scrollToTop, forceScroll);
-    },
-
-    _clearLogEntries: function() {
-      // Remove all current log elements. */
-      for ( var cur = this.$.logs.firstChild; cur; ) {
-        var del = cur;
-        cur = cur.nextElementSibling;
-        if ( del.classList && del.classList.contains('log-entry-chunk') ) {
-          this.$.logs.removeChild(del);
-        }
-      }
-    },
-
-    _locationIsVisible: function(l) {
-      var anchor;
-      switch( l ) {
-      case this._v.Location.HEAD:
-      case this._v.Location.TAIL:
-        anchor = this.$.logSplit;
-
-      case this._v.Location.BOTTOM:
-        anchor = this.$.logBottom;
-
-      default:
-        return false;
-      }
-      return this._elementInViewport(anchor);
-    },
-
-    _updateControls: function(c) {
-      this._setCanSplit(c.canSplit);
-      this._setIsSplit(c.split);
-      this.toggleClass("logFetchButtonVisible",
-          (c.split && this._renderedLogs), this.$.logSplit);
-      this.toggleClass("logFetchButtonVisible",
-          (c.bottom && this._renderedLogs), this.$.logBottom);
-
-      this._setShowStreamingControls( !c.fullyLoaded );
-      if ( c.fullyLoaded ) {
-        this.playing = false;
-      }
-
-      switch( c.loadingState ) {
-      case this._v.LoadingState.NONE:
-        this._loadStatusBar(null);
-        break;
-      case this._v.LoadingState.RESOLVING:
-        this._loadStatusBar("Resolving stream names...");
-        break;
-      case this._v.LoadingState.LOADING:
-        this._loadStatusBar("Loading streams...");
-        break;
-      case this._v.LoadingState.RENDERING:
-        this._loadStatusBar("Rendering logs.");
-        break;
-      case this._v.LoadingState.NEEDS_AUTH:
-        this._loadStatusBar("Not authenticated. Please log in.");
-        break;
-      case this._v.LoadingState.ERROR:
-        this._loadStatusBar("Error loading streams (see console).");
-        break;
-      }
-
-      this._setStreamStatus(c.streamStatus);
-    },
-
-    /** Scrolls to the follow anchor point. */
-    _maybeScrollToFollow: function() {
-      // Determine our anchor element.
-      var e;
-      if ( this.isSplit && this.backfill ) {
-        // Centering on the split element, at the bottom of the page.
-        e = this.$.logSplit;
-      } else {
-        // Scroll to the bottom of the page.
-        e = this.$.logEnd;
-      }
-
-      this._maybeScrollToElement(e, false, false);
-    },
-
-    /**
-     * Scrolls to the specified element, centering it at the top or bottom of
-     * the view. By default,t his will only happen if "follow" is enabled;
-     * however, it can be forced via "force".
-     */
-    _maybeScrollToElement: function(element, topOfView, force) {
-      if (this.follow || force) {
-        if ( topOfView ) {
-          element.scrollIntoView({
-            behavior: "auto",
-            block: "end",
-          });
-        } else {
-          // Bug? "block: start" doesn't seem to work the same as false.
-          element.scrollIntoView(false);
-        }
-      }
-    },
-
+      }
+      entryRow.appendChild(logDataBlock);
+      root.appendChild(entryRow);
+
+      return le.text.lines.length;
+    },
+
+    _updateStreamStatus: function(bs, idx) {
+      var origStatus = this.streamStatus[idx];
+      this.splice("streamStatus", idx, 1, {
+        name: origStatus.name,
+        desc: bs.description(),
+      });
+    },
+
+    /** Scrolls to the bottom if "follow" is enabled. */
+    _maybeScrollToBottom: function() {
+      if (this.follow) {
+        this.$.bottom.scrollIntoView({
+          "behavior": "smooth",
+          "block": "end",
+        });
+      }
+    },
+
     /**
      * Callback when "showMetadata" has changed. This adds/removes the
      * "showMeta" CSS class from the metadata column.
      */
     _showMetadataChanged: function(v) {
       this.toggleClass("showMeta", v, this.$.logs);
-    },
-
+     },
     /**
      * Callback when "wrapLines" has changed. This adds/removes the
      * "wrapLines" CSS class to the log data.
      */
     _wrapLinesChanged: function(v) {
       this.toggleClass("wrapLines", v, this.$.logs);
      },
-
-    /** Callback when "follow" has changed. */
-    _playingChanged: function(v) {
-      if( ! this._model ) {
-        return;
-      }
-
-      // If we're playing, begin log fetching.
-      this._model.setAutomatic(v);
-    },
-
-    _computePlayingIconName: function(playing) {
-      return ( (playing) ?
-          "av:pause-circle-outline" : "av:play-circle-outline" );
-    },
-
-    /** Callback when "follow" has changed. */
-    _backfillChanged: function(v) {
-      if( ! this._model ) {
-        return;
-      }
-
-      // If we're backfilling, then we're not tailing.
-      this._model.setTailing(!v);
-    },
-
-    _computeBackfillIconName: function(backfill) {
-      return ( (backfill) ?
-          "editor:border-bottom" : "editor:border-top" );
-    },
-
     /** Callback when "follow" has changed. */
     _followChanged: function(v) {
-      if ( ! this._model ) {
-        return;
-      }
+      this._maybeScrollToBottom();
+     },
 
-      if ( v ) {
-        // If follow is toggled on, automatically begin playing.
-        this.playing = true;
-        this._maybeScrollToFollow();
-      }
-    },
-
-    /** Callback when "split" button has been clicked. */
-    _splitClicked: function() {
-      if( ! this._model ) {
-        return;
-      }
-
-      // After a split, toggle off playing.
-      this._model.split();
-      this._model.setTailing(true);
-      this.playing = false;
-    },
-
-    /** Callback when "split" button has been clicked. */
-    _scrollToSplit: function() {
-      this._maybeScrollToElement(this.$.logSplit, true, true);
-    },
-
-    _computeAnchorsNotClickable: function(playing, showStreamingControls,
-                                          rendering) {
-      // Anchors are not clickable if we're playing or the controls are
-      // not visible.
-      return ( playing || (!showStreamingControls) || rendering );
-    },
-
-    /** Filter function to invert a value. */
-    _not: function(v) {
-      return (!v);
+    /** Callback for when the mouse wheel has scrolled. Disables follow. */
+    _handleMouseWheel: function() {
+      this.follow = false;
     },
 
     /**
      * Loads text content into the status bar.
      *
      * If null is passed, the status bar will be cleared. If text is passed, the
      * status bar will become visible with the supplied content.
      */
     _loadStatusBar: function(v) {
       var st = null;
       if (v) {
         st = {
           value: v,
         };
       }
       this._setStatusBar(st);
     },
 
     _onSignin: function() {
-      if ( this._model ) {
-        this._model.notifyAuthenticationChanged();
+      var fn = this._authCallback;
+      if (fn) {
+        this._authCallback = null;
+        fn();
       }
     },
-
-    _elementInViewport: function(el) {
-      var top = el.offsetTop;
-      var left = el.offsetLeft;
-      var width = el.offsetWidth;
-      var height = el.offsetHeight;
-
-      while(el.offsetParent) {
-        el = el.offsetParent;
-        top += el.offsetTop;
-        left += el.offsetLeft;
-      }
-
-      return (
-        top < (window.pageYOffset + window.innerHeight) &&
-        left < (window.pageXOffset + window.innerWidth) &&
-        (top + height) > window.pageYOffset &&
-        (left + width) > window.pageXOffset
-      );
-    },
-
   });
+
+  /**
+   * Continuously loads log streams from a _LogStreamBuffer and exposes them via
+   * callback.
+   */
+  function _LogStreamer(buffer, burst, statusCallback) {
+    this._buffer = buffer;
+    this._burst = (burst || 0);
+    this._missingDelay = 5000;
+    this._statusCallback = statusCallback;
+
+    this.finished = false;
+    this.someStreamsFailed = false;
+
+    this._currentLogBuffer = null;
+  }
+
+  _LogStreamer.prototype.shutdown = function() {
+    this.finshed = true;
+  };
+
+  _LogStreamer.prototype._setStatus = function(v) {
+    if (this._statusCallback) {
+      this._statusCallback(v);
+    }
+  };
+
+  _LogStreamer.prototype.load = function() {
+    if (this.finished) {
+      this._setStatus(null);
+      return Promise.resolve(null);
+    }
+
+    // If we have buffered logs, return them.
+    var current = this._currentLogBuffer;
+    if (current) {
+      // We will track how many log entries that we've rendered. If we exceed
+      // this amount, we will force a refresh so the logs appear streaming and
+      // the app remains responsive.
+      var rendered = 0;
+
+      var entries = [];
+      for (var le = current.next(); (le); le = current.next()) {
+        entries.push(le);
+        if (le.text && le.text.lines) {
+          rendered += le.text.lines.length;
+        }
+
+        if (this._burst > 0 && rendered >= this._burst) {
+          break;
+        }
+      }
+
+      // Have we exhausted this buffer?
+      if (! current.peek()) {
+        this._currentLogBuffer = null;
+      }
+
+      // Return the bundle of entries.
+      return Promise.resolve(entries);
+    }
+
+    // We didn't have any buffered logs, so either all of our streams are
+    // finished or our buffer is empty and needs to be refreshed.
+    this._setStatus("Loading log stream data...");
+    return this._buffer.nextBuffer().then(function(buf) {
+      this.someStreamsFailed = (!!this._buffer._failures.length);
+
+      // Check result.
+      if (buf === null) {
+        if (this._buffer.finished) {
+          // No more buffers, we are done.
+          console.log("All streams have been exhausted.");
+          this.finished = true;
+          this._setStatus(null);
+          return null;
+        }
+
+        // The buffer was incomplete. Should we retry after a delay, or do
+        // we need to wait for an explicit edge (e.g., auth)?
+        if (this._buffer.autoRetry) {
+          // Sleep for 5 seconds and try again (waiting).
+          console.log("Log stream delayed; sleeping", this._missingDelay,
+              "and retry.");
+          this._setStatus("Missing log streams, retrying after delay...");
+          return new LuciSleepPromise(this._missingDelay).then(function() {
+            if (this.finished) {
+              console.log("Streamer is deactivated, discarding.");
+              return null;
+            }
+
+            return this.load();
+          }.bind(this));
+        }
+
+        this._setStatus("Some log streams could not be loaded.");
+        return null;
+      }
+
+      // Install the new buffer and re-enter.
+      this._currentLogBuffer = buf;
+      return this.load();
+    }.bind(this)).catch(function(error) {
+      this._setStatus("[" + error.name + "] fetching streams: " +
+          error.message);
+      throw error;
+    }.bind(this));
+  };
+
+  /**
+   * Manages an aggregate log stream buffer, consisting of logs punted from a
+   * set of zero or more _BufferedStream instances.
+   */
+  function _LogStreamBuffer() {
+    this._streams = null;
+    this._active = null;
+    this._nextBufferPromise = null;
+    this._failures = [];
+
+    this.finished = false;
+    this._resetIterativeState();
+  }
+
+  _LogStreamBuffer.prototype.setStreams = function(streams) {
+    // TODO(dnj): Make this do a delta with previous streams so we don't lose
+    // their already-loaded logs if the page changes.
+    this._streams = streams.map(function(bs, i) {
+      return {
+        bs: bs,
+        active: true,
+        buffer: new _BufferedLogs(),
+      };
+    });
+    this._active = this._streams;
+    this._nextBufferPromise = null;
+  };
+
+  _LogStreamBuffer.prototype._resetIterativeState = function() {
+    this.autoRetry = false;
+  };
+
+  /**
+   * Returns a Promise that resolves into a _BufferedLogs instance containing
+   * the next set of logs, in order, from the source log streams.
+   *
+   * The _BufferedLogs bundle may have status flags set, and should be checked.
+   *
+   * The Promise will also resolve to "null" if there are no more logs in the
+   * source streams.
+   *
+   * If there are errors fetching logs, the Promise will be rejected, and an
+   * error will be returned.
+   */
+  _LogStreamBuffer.prototype.nextBuffer = function() {
+    // If we're already are fetching the next buffer, return that Promise.
+    if (this._nextBufferPromise) {
+      return this._nextBufferPromise;
+    }
+
+    // Filter our any finished streams from our active list. A stream is
+    // finished if it is finished streaming and we don't have a retained buffer
+    // from it.
+    this._active = this._active.filter(function(entry) {
+      return (entry.buffer.peek() || (! (entry.bs.finished || entry.bs.error)));
+    })
+
+    if (! this._active.length) {
+      this.finished = true;
+    }
+    if (this.finished) {
+      // No active streams, so we're finished. Permanently set our promise to
+      // the finished state.
+      this._nextBufferPromise = Promise.resolve(null);
+      return this._nextBufferPromise;
+    }
+
+    // Fill all buffers for all active streams. This may result in an RPC to
+    // load new buffer content for streams whose buffers are empty.
+    //
+    // RPC failures are handled here:
+    // - If the stream reports "not found", we will terminate early and set
+    //   out status to "waiting". Our owner should retry after a delay.
+    // - Otherwise, we will set our status to "error". Our owner should report
+    //   that an error has occurred while loading stream data.
+    this._resetIterativeState();
+
+    var incomplete = false;
+    this._nextBufferPromise = Promise.all(this._active.map(function(entry) {
+      // If the entry's buffer still has data, use it immediately.
+      if (entry.buffer.peek()) {
+        return entry.buffer;
+      }
+
+      // Get the next log buffer for each stream. This may result in an RPC.
+      return entry.bs.nextBuffer().then(function(buffer) {
+        // Retain this buffer, if valid. The stream may have returned a null
+        // buffer if it failed to fetch for a legitimate reason. In this case,
+        // we will not retain it (since we want entry.buffer to be valid), but
+        // will forward the "null" to our aggregate function.
+        if (buffer) {
+          entry.buffer = buffer;
+        } else {
+          incomplete = true;
+
+          // If this stream is waiting, but not on auth, mark that we should
+          // automatically retry.
+          if (entry.bs.waiting && !entry.bs.auth) {
+            this.autoRetry = true;
+          }
+        }
+        return buffer;
+      }.bind(this)).catch(function(error) {
+        // Log stream source of error. Raise a generic "failed to buffer"
+        // error. This will become a permanent failure.
+        console.error("Error loading buffer for", entry.bs.stream.fullName(),
+            "(", entry.bs, "): ", error);
+        this._failures.push(entry.bs);
+        return null;
+      }.bind(this));
+    }.bind(this))).then(function(buffers) {
+      this._nextBufferPromise = null;
+
+      // Check each buffer. If any are null, that stream failed to deliver.
+      if (incomplete) {
+        // We succeeded, but are incomplete. At least one stream failed to
+        // deliver and should have state flags set accordingly.
+        return null;
+      }
+
+      // Remove any null buffers. These would be placed here when a stream fails
+      // to load.  Aggregate as much data from each of our streams as possible.
+      buffers = buffers.filter(v => (!!v));
+      return this._aggregateBuffers(buffers);
+    }.bind(this));
+    return this._nextBufferPromise;
+  };
+
+  _LogStreamBuffer.prototype._aggregateBuffers = function(buffers) {
+    switch (buffers.length) {
+    case 0:
+      // No buffers, so no logs.
+      return new _BufferedLogs(null);
+    case 1:
+      // As a special case, if we only have one buffer, and we assume that its
+      // entries are sorted, then that buffer is a return value.
+      return new _BufferedLogs(buffers[0].getAll());
+    }
+
+    // Preload our peek array.
+    var incomplete = false;
+    var peek = buffers.map(function(buf) {
+      var le = buf.peek();
+      if (! le) {
+        incomplete = true;
+      }
+      return le;
+    });
+    if (incomplete) {
+      // One of our input buffers had no log entries.
+      return new _BufferedLogs(null);
+    }
+
+    // Assemble our aggregate buffer array.
+    // TODO: A binary heap would be pretty great for this.
+    var entries = [];
+    while (true) {
+      // Choose the next stream.
+      var earliest = 0;
+      for (var i = 1; i < buffers.length; i++) {
+        if (_LogStreamBuffer.compareLogs(peek[i], peek[earliest]) < 0) {
+          earliest = i;
+        }
+      }
+
+      // Get the next log from the earliest stream.
+      entries.push(buffers[earliest].next());
+
+      // Repopulate that buffer's "peek" value. If the buffer has no more
+      // entries, then we're done.
+      var next = buffers[earliest].peek();
+      if (!next) {
+        return new _BufferedLogs(entries);
+      }
+      peek[earliest] = next;
+    }
+  };
+
+  _LogStreamBuffer.compareLogs = function(a, b) {
+    // If they are part of the same stream, compare prefix indexes.
+    if (a.source.stream.samePrefixAs(b.source.stream)) {
+      return (a.prefixIndex - b.prefixIndex);
+    }
+
+    // Compare based on timestamp.
+    return a.timestamp - b.timestamp;
+  };
+
+
+  /**
+   * A buffer of ordered log entries from all streams.
+   *
+   * Assumes total ownership of the input log buffer, which can be null to
+   * indicate no logs.
+   */
+  function _BufferedLogs(logs) {
+    this._logs = logs;
+    this._index = 0;
+  }
+
+  _BufferedLogs.prototype.getAll = function() {
+    // Pop all logs.
+    var logs = this._logs;
+    this._logs = null;
+    return logs;
+  };
+
+  _BufferedLogs.prototype.peek = function() {
+    return (this._logs) ? (this._logs[this._index]) : (null);
+  };
+
+  _BufferedLogs.prototype.next = function() {
+    if (! (this._logs && this._logs.length)) {
+      return null;
+    }
+
+    // Get the next log and increment our index.
+    var log = this._logs[this._index++];
+    if (this._index >= this._logs.length) {
+      this._logs = null;
+    }
+    return log;
+  };
+
+
+  /**
+   * Stateful log fetching manager for a single log stream.
+   */
+  function _BufferedStream(stream, client, oneOfMany, statusCallback) {
+    this.stream = stream;
+
+    this.error = null;
+    this.finished = false;
+
+    this._fetcher = new LogDogFetcher(client, stream);
+    this._oneOfMany = oneOfMany;
+    this._statusCallback = statusCallback;
+    this._lastFetchIndex = null;
+  }
+
+  _BufferedStream.INITIAL_FETCH_SIZE = 4096;
+
+  _BufferedStream.prototype._resetIterativeState = function() {
+    this.waiting = false;
+    this.auth = false;
+    this._fireStatusUpdated();
+
+    this._currentFetch = null;
+  };
+
+  _BufferedStream.prototype.nextBuffer = function() {
+    if (this._currentFetch) {
+      return this._currentFetch;
+    }
+
+    // Reset per-round state and begin next round fetch.
+    this._resetIterativeState();
+
+    // If this is the first fetch, and we're not the only log stream being
+    // rendered, fetch a small amount so we can (probably) start rendering
+    // without waiting for a lot of huge chunks.
+    this._fetcher.byteCount = (
+        (this._lastFetchIndex === null) && this._oneOfMany) ?
+        (_BufferedStream.INITIAL_FETCH_SIZE) : (null);
+
+    this._currentFetch = this._fetcher.next().then(function(result) {
+      this._currentFetch = null;
+
+      // Update our stream information.
+      this.finished = this._fetcher.finished;
+
+      // Augment each returned log entry with self-descriptive metadata.
+      var logs = result.entries;
+      if (logs && logs.length) {
+        logs.forEach(function(le) {
+          le.desc = result.desc;
+          le.state = result.state;
+          le.source = this;
+        }.bind(this));
+
+        // Record the latest fetch index.
+        this._lastFetchIndex = logs[logs.length - 1].streamIndex;
+      }
+
+      this._fireStatusUpdated();
+      return new _BufferedLogs(logs);
+    }.bind(this)).catch(function(error) {;
+      // If this is a "not found" error, we assume that the stream is valid, but
+      // hasn't been ingested into LogDog yet. Return "null".
+      if (error instanceof LogDogError) {
+        if (error.isUnauthenticated()) {
+          this.waiting = true;
+          this.auth = true;
+        } else if (error.isNotFound()) {
+          this.waiting = true;
+        }
+
+        // If this is an error that we understand, recover from it, return
+        // null, and set our status flags.
+        if (this.waiting) {
+          // Recover from this error.
+          this._currentFetch = null;
+          this._fireStatusUpdated();
+          return null;
+        }
+      }
+
+      // Retain this error forever.
+      this.error = error;
+      throw error;
+    }.bind(this));
+    return this._currentFetch;
+  };
+
+  _BufferedStream.prototype._fireStatusUpdated = function() {
+    if (this._statusCallback) {
+      this._statusCallback(this);
+    }
+  };
+
+  _BufferedStream.prototype.description = function() {
+    if (this._waiting) {
+      return "(Waiting)";
+    }
+
+    var pieces = []
+    var tidx = this._fetcher.terminalIndex();
+    if (this._lastFetchIndex) {
+      if (tidx >= 0) {
+        pieces.push(this._lastFetchIndex + " / " + tidx);
+      } else {
+        pieces.push(this._lastFetchIndex + "...");
+      }
+    }
+
+    if (this.error) {
+      pieces.push("(Error)");
+    } else if (this.auth) {
+      pieces.push("(Auth Error)");
+    } else if (this.waiting) {
+      pieces.push("(Waiting)");
+    } else if (!this._fetcher.state) {
+      pieces.push("(Fetching)");
+    } else if (this._fetcher.finished) {
+      pieces.push("(Finished)");
+    } else {
+      pieces.push("(Streaming)");
+    }
+    return pieces.join(" ");
+  };
 </script>