diff --git a/.taskcluster.yml b/.taskcluster.yml
index 6bc48f708..b01a2f794 100644
--- a/.taskcluster.yml
+++ b/.taskcluster.yml
@@ -32,6 +32,17 @@ tasks:
         else: 'dev'
       else: 'dev'
 
+    backend_url:
+      $if: 'tasks_for == "github-push"'
+      then:
+        $if: 'event.ref == "refs/heads/testing"'
+        then: 'https://api.code-review.testing.moz.tools'
+        else: 'https://api.code-review.moz.tools'
+      else:
+        $if: 'tasks_for == "github-pull-request"'
+        then: 'https://api.code-review.testing.moz.tools'
+        else: 'https://api.code-review.moz.tools'
+
     taskboot_image: "mozilla/taskboot:0.1.10"
 
     pip_install: "pip install --disable-pip-version-check --no-cache-dir --quiet"
@@ -129,6 +140,8 @@ tasks:
       payload:
         maxRunTime: 3600
         image: node:11-alpine
+        env:
+          BACKEND_URL: "${backend_url}"
         command:
           - sh
           - -lxce
diff --git a/frontend/.neutrinorc.js b/frontend/.neutrinorc.js
index 0c6bf4aca..5d104d8a9 100644
--- a/frontend/.neutrinorc.js
+++ b/frontend/.neutrinorc.js
@@ -2,6 +2,7 @@ fs = require('fs');
 
 const envs = {
   CONFIG: process.env.CONFIG || 'staging',
+  BACKEND_URL: process.env.BACKEND_URL || 'http://localhost:8000',
 };
 const PORT = process.env.PORT || 8010;
 // HTTPS can be disabled by setting HTTPS_DISABLED environment variable to
@@ -26,7 +27,7 @@ module.exports = {
       '@neutrinojs/vue',
       {
         html: {
-          title: 'Mozilla Static Analysis'
+          title: 'Mozilla Code Review Bot'
         },
         devServer: {
           port: PORT,
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7025ac200..c3f37b959 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "code-review-frontend",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f5ac17eb4..f61a5374d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,24 +1,9 @@
 <script>
-import Tasks from './Tasks.vue'
-
 export default {
   name: 'App',
-  components: {
-    Tasks
-  },
-  data () {
-    return {
-      channels: ['testing', 'production']
-    }
-  },
-  methods: {
-    switch_channel (channel) {
-      this.$store.dispatch('switch_channel', channel)
-    }
-  },
   computed: {
-    channel () {
-      return this.$store.state.channel
+    backend_url () {
+      return this.$store.state.backend_url
     }
   }
 }
@@ -30,28 +15,28 @@ export default {
       <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
         <div class="container is-fluid">
           <div class="navbar-brand">
-            <div class="navbar-item">Static analysis</div>
+            <router-link to="/" v-slot="{ href, route, navigate, isActive, isExactActive }">
+              <a class="navbar-item" :href="href" v-on:click="navigate">🤖 Code Review Bot</a>
+            </router-link>
           </div>
           <div class="navbar-menu">
 
             <div class="navbar-start">
-              <div class="navbar-item has-dropdown is-hoverable">
-                <span class="navbar-link">{{ channel }}</span>
-                <div class="navbar-dropdown is-boxed">
-                  <a class="dropdown-item" v-for="c in channels" :class="{'is-active': c == channel}" v-on:click="switch_channel(c)">
-                    {{ c }}
-                  </a>
-                </div>
+              <div class="navbar-item">
+                <span class="navbar-item">Connected to {{ backend_url }}</span>
               </div>
             </div>
 
             <div class="navbar-end">
-              <div class="navbar-item" v-if="$route.name != 'stats'">
-                <router-link to="/stats" class="button is-link">All checks</router-link>
-              </div>
-              <div class="navbar-item" v-if="$route.name != 'tasks'">
-                <router-link to="/" class="button is-link">All tasks</router-link>
-              </div>
+              <router-link to="/stats" v-slot="{ href, route, navigate, isActive, isExactActive }">
+                <a :href="href" v-on:click="navigate" class="navbar-item" :class="{'is-active': isExactActive}">💥 All checks</a>
+              </router-link>
+              <router-link to="/" v-slot="{ href, route, navigate, isActive, isExactActive }">
+                <a :href="href" v-on:click="navigate" class="navbar-item" :class="{'is-active': isExactActive}">🔍 Browse diffs</a>
+              </router-link>
+              <router-link to="/tasks" v-slot="{ href, route, navigate, isActive, isExactActive }">
+                <a :href="href" v-on:click="navigate" class="navbar-item" :class="{'is-active': isExactActive}">📜 All tasks</a>
+              </router-link>
             </div>
           </div>
         </div>
diff --git a/frontend/src/Choice.vue b/frontend/src/Choice.vue
index 9e0564235..99bce57b8 100644
--- a/frontend/src/Choice.vue
+++ b/frontend/src/Choice.vue
@@ -12,7 +12,7 @@
           {{ default_choice_name }}
         </a>
         <hr class="dropdown-divider">
-        <a class="dropdown-item" v-for="choice in choices" v-on:click="select(choice, $event)" :class="{'is-active': current === choice }">
+        <a class="dropdown-item" v-for="choice in choices" v-on:click="select(choice, $event)" :class="{'is-active': current === choice  || current === choice.value}">
           {{ choice|name }}
         </a>
       </div>
@@ -21,21 +21,19 @@
 </template>
 
 <script>
+import mixins from './mixins.js'
+
 export default {
   props: {
     'name': String,
     'choices': Array
   },
-  data: function () {
+  mixins: [
+    mixins.query
+  ],
+  data () {
     return {
-      current: null
-    }
-  },
-  mounted: function () {
-    let initial = this.$route.query[this.name]
-    if (initial && this.choices) {
-      this.current = isNaN(parseInt(initial)) ? initial : this.choices[initial]
-      this.$emit('new-choice', this.current)
+      choice: null
     }
   },
   methods: {
@@ -43,27 +41,29 @@ export default {
       evt.stopPropagation()
 
       // Save new choice
-      this.current = choice
+      this.$set(this, 'choice', choice)
       this.$emit('new-choice', choice)
-
-      // Set value in the url for sharing
-      var query = Object.assign({}, this.$route.query)
-      if (choice !== null) {
-        query[this.name] = typeof choice === 'string' ? choice : this.choices.indexOf(choice)
-      } else if (this.name in query) {
-        delete query[this.name]
-      }
-      this.$router.push({ 'query': query })
     }
   },
   computed: {
+    current () {
+      let current = null
+      let choice = this.choice || this.$route.query[this.name]
+      if (choice && this.choices) {
+        current = this.choices.find(c => c === choice || c.value === choice)
+        if (!current) {
+          current = isNaN(parseInt(choice)) ? choice : this.choices[choice]
+        }
+      }
+      return current
+    },
     default_choice_name: function () {
-      return 'All ' + this.name + 's'
+      return 'Filter by ' + this.name
     }
   },
   filters: {
     name: function (choice) {
-      return typeof choice === 'string' ? choice : choice.name
+      return typeof choice === 'string' ? choice : (choice.slug || choice.name)
     }
   }
 }
diff --git a/frontend/src/Diffs.vue b/frontend/src/Diffs.vue
new file mode 100644
index 000000000..30fc9b44f
--- /dev/null
+++ b/frontend/src/Diffs.vue
@@ -0,0 +1,234 @@
+<script>
+import mixins from './mixins.js'
+import Choice from './Choice.vue'
+
+export default {
+  mounted () {
+    // Use parameters from url as initial query
+    if (this.$route.query) {
+      this.$set(this, 'query', Object.assign({}, this.$route.query))
+    }
+
+    // Load new tasks at startup
+    this.$store.commit('reset')
+    this.$store.dispatch('load_diffs', { query: this.query })
+
+    // Load repositories at startup
+    this.$store.dispatch('load_repositories')
+  },
+  components: {
+    Choice: Choice
+  },
+  data: function () {
+    return {
+      query: {},
+      choices: {
+        issues: [
+          { name: 'No issues', value: 'no' },
+          { name: 'Has issues', value: 'any' },
+          { name: 'New issues', value: 'new' }
+        ]
+      }
+    }
+  },
+  mixins: [
+    mixins.date,
+    mixins.query
+  ],
+  methods: {
+    load_next_diffs () {
+      if (!this.has_next) {
+        return
+      }
+
+      this.$store.dispatch('load_diffs', {
+        url: this.$store.state.diffs.next
+      })
+    },
+    load_previous_diffs () {
+      if (!this.has_previous) {
+        return
+      }
+
+      this.$store.dispatch('load_diffs', {
+        url: this.$store.state.diffs.previous
+      })
+    },
+    use_filter (name, value) {
+      // Filter current diffs query
+      if (value) {
+        this.query[name] = value
+      } else if (name in this.query) {
+        delete this.query[name]
+      }
+      this.$set(this, 'query', this.query)
+      this.$store.dispatch('load_diffs', { query: this.query })
+
+      // Update directly the router query with our filters
+      this.$router.push({ query: this.query })
+    },
+    use_search (evt) {
+      // Only submit on Enter key pressed
+      if (evt.keyCode !== 13) {
+        return
+      }
+      this.use_filter('search', this.query.search)
+    },
+    reset_query () {
+      this.$set(this, 'query', {})
+      this.$router.push({ query: {} })
+      this.$store.dispatch('load_diffs', {})
+    }
+  },
+  computed: {
+    diffs () {
+      if (!this.$store.state.diffs) {
+        return []
+      }
+      return this.$store.state.diffs.results
+    },
+    repositories () {
+      let repos = this.$store.state.repositories || []
+      return repos.map(r => r.slug)
+    },
+
+    // Pagination helper
+    total () {
+      return this.$store.state.diffs.count
+    },
+    page_nb () {
+      return this.$store.state.diffs.results.length
+    },
+    has_next () {
+      return this.$store.state.diffs.next !== null
+    },
+    has_previous () {
+      return this.$store.state.diffs.previous !== null
+    }
+  },
+  filters: {
+    treeherder_url (diff) {
+      let rev = diff.mercurial_hash
+      let tryRepo = diff.revision.repository === 'nss' ? 'nss-try' : 'try'
+      return `https://treeherder.mozilla.org/#/jobs?repo=${tryRepo}&revision=${rev}`
+    },
+    short_repo (url) {
+      if (url.startsWith('https://hg.mozilla.org/')) {
+        return url.substring(23)
+      }
+      return url
+    }
+  }
+}
+</script>
+
+<template>
+  <section>
+    <nav class="columns" v-if="total > 0">
+      <div class="column is-6 is-offset-6">
+        <button class="button is-pulled-right is-dark" :disabled="!has_next" v-on:click="load_next_diffs">Older diffs ↣</button>
+        <button class="button is-pulled-right is-dark" :disabled="!has_previous" v-on:click="load_previous_diffs">↞ Newer diffs</button>
+        <button class="button is-pulled-right is-success" v-if="Object.keys(query).length > 0" v-on:click="reset_query()">Reset search</button>
+        <div class="is-text-dark is-pulled-right">Showing {{ page_nb }}/{{ total }} Diffs</div>
+      </div>
+    </nav>
+
+    <table class="table is-fullwidth">
+      <thead>
+        <tr>
+          <td>#</td>
+          <td>
+            <input class="input" type="text" v-on:keyup="use_search($event)" v-model="query.search" placeholder="Filter using phabricator, bugzilla Id or word, ..."/>
+          </td>
+          <td>
+            <Choice :choices="repositories" name="repository" v-on:new-choice="use_filter('repository', $event)"/>
+          </td>
+          <td>
+            <Choice :choices="choices.issues" name="issues" v-on:new-choice="use_filter('issues', $event.value)"/>
+          </td>
+          <td>Created</td>
+          <td>Actions</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="diff in diffs">
+          <td>
+            Diff {{ diff.id }}
+            <br />
+            <a class="mono" :href="'https://firefox-ci-tc.services.mozilla.com/tasks/' + diff.review_task_id" target="_blank">{{ diff.review_task_id }}</a>
+          </td>
+
+          <td>
+            <p v-if="diff.revision.title">{{ diff.revision.title }}</p>
+            <p class="has-text-danger" v-else>No title</p>
+            <p>
+              Revision <router-link :to="{ name: 'revision', params: { revisionId: diff.revision.id }}">D{{ diff.revision.id }}</router-link> @ {{ diff.revision.repository | short_repo }}
+            </p>
+          </td>
+
+          <td>
+            <a :href="diff.repository.url + '/rev/' + diff.mercurial_hash" target="_blank">{{ diff.mercurial_hash.substring(0, 8) }} @ {{ diff.repository.slug }}</a>
+          </td>
+
+          <td :class="{'has-text-success': diff.nb_issues_new_for_revision > 0}">
+            <span v-if="diff.nb_issues_new_for_revision >= 0">{{ diff.nb_issues_new_for_revision }}</span>
+            <span v-else>-</span>
+            / {{ diff.nb_issues }}
+          </td>
+
+          <td>
+            <span :title="diff.created">{{ diff.created|since }} ago</span>
+          </td>
+          <td>
+            <div class="buttons">
+              <router-link class="button is-primary is-small" v-if="diff.nb_issues > 0" :to="{ name: 'diff', params: { diffId: diff.id }}">➕ Issues</router-link>
+              <div class="dropdown is-hoverable">
+                <div class="dropdown-trigger">
+                  <button class="button is-dark is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
+                    <span>🔩 Details</span>
+                  </button>
+                </div>
+                <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+                  <div class="dropdown-content">
+                    <hr class="dropdown-divider">
+                    <a class="dropdown-item" :href="diff.revision.phabricator_url" target="_blank">Phabricator D{{ diff.revision.id }}</a>
+                    <a class="dropdown-item" v-if="diff.revision.bugzilla_id" :href="'https://bugzil.la/' + diff.revision.bugzilla_id" target="_blank">Bug {{ diff.revision.bugzilla_id }}</a>
+                    <a class="dropdown-item" :href="diff | treeherder_url" target="_blank">Treeherder tasks</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="notification is-light" v-if="diffs && diffs.length == 0 && query">
+      <p class="is-inline-block has-text-weight-medium">Sorry, no diffs are available for your search terms !</p>
+      <button class="is-inline-block button is-success" v-on:click="reset_query()">Reset search</button>
+    </div>
+  </section>
+</template>
+
+<style>
+.mono{
+  font-family: monospace;
+}
+
+nav.columns {
+  margin-top: 12px;
+}
+
+nav.columns * {
+  margin-left: 10px;
+}
+
+nav.columns div {
+  padding-top: 5px;
+}
+
+div.table input.input {
+  display: inline-block;
+}
+</style>
diff --git a/frontend/src/Issues.vue b/frontend/src/Issues.vue
new file mode 100644
index 000000000..0da38753e
--- /dev/null
+++ b/frontend/src/Issues.vue
@@ -0,0 +1,197 @@
+<script>
+import Bool from './Bool.vue'
+import Choice from './Choice.vue'
+
+export default {
+  name: 'Issues',
+  data () {
+    return {
+      state: 'loading',
+      filters: {
+        new_for_revision: null,
+        analyzer: null,
+        path: null
+      },
+      choices: {
+        new_for_revision: [
+          {
+            name: 'New in this revision',
+            func: i => i.new_for_revision
+          },
+          {
+            name: 'Aready present in revision',
+            func: i => !i.new_for_revision
+          }
+        ]
+      }
+    }
+  },
+  components: {
+    Bool,
+    Choice
+  },
+  mounted () {
+    // Update filters from query string
+    let newForRevision = parseInt(this.$route.query.issue)
+    this.filters.new_for_revision = isNaN(newForRevision) ? null : this.choices.new_for_revision[newForRevision]
+    this.filters.path = this.$route.query.path || null
+    this.filters.analyzer = this.$route.query.analyzer || null
+
+    // Load diff
+    var diff = this.$store.dispatch('load_diff', this.$route.params.diffId)
+    diff.then(
+      (response) => {
+        this.$set(this, 'state', 'loaded')
+      },
+      (error) => {
+        this.$set(this, 'state', error.response.status === 404 ? 'missing' : 'error')
+      }
+    )
+  },
+  computed: {
+    diff () {
+      return this.$store.state.diff
+    },
+    paths () {
+      // List sorted unique paths as choices
+      let uniquePaths = new Set(this.all_issues.map(i => i.path))
+      return [...uniquePaths].sort()
+    },
+    analyzers () {
+      // List sorted unique analyzers as choices
+      let uniqueAnalyzers = new Set(this.all_issues.map(i => i.analyzer))
+      return [...uniqueAnalyzers].sort()
+    },
+    nb_new_for_revision () {
+      if (!this.diff || !this.diff.issues) {
+        return 0
+      }
+      return this.all_issues.filter(i => i.new_for_revision).length
+    },
+    all_issues () {
+      return this.diff ? (this.$store.state.issues[this.diff.id] || []) : []
+    },
+    issues () {
+      let issues = this.all_issues
+
+      // Filter by new_for_revision
+      if (this.filters.new_for_revision !== null) {
+        issues = issues.filter(this.filters.new_for_revision.func)
+      }
+
+      // Filter by path
+      if (this.filters.path !== null) {
+        issues = issues.filter(i => i.path === this.filters.path)
+      }
+
+      // Filter by analyzer
+      if (this.filters.analyzer !== null) {
+        issues = issues.filter(i => i.analyzer === this.filters.analyzer)
+      }
+
+      return issues
+    }
+  },
+  filters: {
+    from_timestamp (value) {
+      return new Date(value * 1000).toUTCString()
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="title">Diff {{ $route.params.diffId }}</h1>
+
+    <div class="notification is-info" v-if="state == 'loading'">Loading diff...</div>
+    <div class="notification is-warning" v-else-if="state == 'missing'">No diff, so no issues !</div>
+    <div class="notification is-danger" v-else-if="state == 'error'">Failure</div>
+    <div v-else-if="state == 'loaded'">
+
+      <nav class="level" v-if="diff && diff.id">
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">new_for_revision</p>
+            <p class="title">{{ nb_new_for_revision }}</p>
+          </div>
+        </div>
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Issues</p>
+            <p class="title">{{ all_issues.length }}</p>
+          </div>
+        </div>
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Source</p>
+            <p class="title"><a :href="diff.revision.url" target="_blank">{{ diff.revision.title }}</a></p>
+          </div>
+        </div>
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">diffed</p>
+            <p class="title">{{ diff.time|from_timestamp }}</p>
+          </div>
+        </div>
+      </nav>
+
+      <table class="table is-fullwidth" v-if="issues">
+        <thead>
+          <tr>
+            <td>Hash</td>
+            <td><Choice :choices="analyzers" name="analyzer" v-on:new-choice="filters.analyzer = $event"/></td>
+            <td><Choice :choices="paths" name="path" v-on:new-choice="filters.path = $event"/></td>
+            <td>Lines</td>
+            <td><Choice :choices="choices.new_for_revision" name="new issue" v-on:new-choice="filters.new_for_revision = $event"/></td>
+            <td>Check</td>
+            <td>Level</td>
+            <td>Message</td>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="issue in issues" :class="{'new_for_revision': issue.new_for_revision}">
+            <td><samp>{{ issue.hash.substring(0, 12) }}</samp></td>
+            <td>
+              <span>{{ issue.analyzer }}</span>
+            </td>
+            <td class="path">{{ issue.path }}</td>
+            <td>{{ issue.line }} <span v-if="issue.nb_lines > 1">&rarr; {{ issue.line - 1 + issue.nb_lines }}</span></td>
+            <td>
+              <Bool :value="issue.new_for_revision" name="New in this revision" />
+            </td>
+
+            <td>
+              <span>{{ issue.check }}</span>
+            </td>
+            <td>
+              <span v-if="issue.level == 'error'" class="tag is-danger">Error</span>
+              <span v-else-if="issue.level == 'warning'" class="tag is-warning">Warning</span>
+              <span v-else class="tag is-dark">{{ issue.level }}</span>
+            </td>
+            <td>
+              <pre>{{ issue.message }}</pre>
+
+              <pre v-if="issue.body">
+                {{ issue.body }}
+              </pre>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="notification is-info" v-else>No issues !</div>
+  </div>
+</template>
+
+<style scoped>
+tr.new_for_revision {
+  background: #e6ffcc;
+}
+
+td.path {
+  color: #4d4d4d;
+  font-family: monospace;
+}
+</style>
diff --git a/frontend/src/Revision.vue b/frontend/src/Revision.vue
new file mode 100644
index 000000000..4a7981fa9
--- /dev/null
+++ b/frontend/src/Revision.vue
@@ -0,0 +1,102 @@
+<script>
+export default {
+  mounted () {
+    this.$store.dispatch('load_revision', { id: this.$route.params.revisionId })
+      .then(resp => { this.$set(this, 'state', 'loaded') })
+      .catch(err => { this.$set(this, 'state', err) })
+  },
+  data () {
+    return {
+      state: 'loading'
+    }
+  },
+  computed: {
+    revision () {
+      return this.$store.state.revision
+    },
+    paths () {
+      // Load all issues
+      let paths = new Set()
+      for (let diff of this.revision.diffs) {
+        let issues = this.$store.state.issues[diff.id] || []
+        for (let issue of issues) {
+          paths.add(issue.path)
+        }
+      }
+
+      return [...paths].sort()
+    }
+  },
+  methods: {
+    path_issues (diffId, path) {
+      let issues = this.$store.state.issues[diffId] || []
+      return issues.filter(issue => issue.path === path)
+    }
+  }
+}
+</script>
+
+<template>
+  <section>
+    <h1 class="title">Revision D{{ $route.params.revisionId }}</h1>
+
+    <div class="notification is-info" v-if="state == 'loading'">Loading...</div>
+    <div v-else-if="state == 'loaded'">
+      <h2 class="subtitle">{{ revision.title }}</h2>
+      <p>
+        On <strong>{{ revision.repository }}</strong> - <a :href="revision.phabricator_url" target="_blank">View on Phabricator</a>
+        <span v-if="revision.bugzilla_id">
+          - <a :href="'https://bugzil.la/' + revision.bugzilla_id" target="_blank">View Bug {{ revision.bugzilla_id }}</a>
+        </span>
+      </p>
+
+      <nav class="panel" v-for="path in paths">
+        <p class="panel-heading">
+          {{ path }}
+        </p>
+        <div class="panel-block">
+          <div class="columns">
+            <div class="column" v-for="diff in revision.diffs">
+              <p>
+                <router-link :to="{ name: 'diff', params: { diffId: diff.id }}">Diff {{ diff.id }}</router-link>
+              </p>
+
+              <table class="table">
+                <tr>
+                  <th>New</th>
+                  <th>Line</th>
+                  <th>Char</th>
+                  <th>Analyzer</th>
+                  <th>Check</th>
+                  <th>Hash</th>
+                </tr>
+                <tr v-for="issue in path_issues(diff.id, path)" :class="{new_for_revision: issue.new_for_revision}">
+                  <td>
+                    <span v-if="issue.new_for_revision">✔</span>
+                    <span v-else>❌</span>
+                  </td>
+                  <td>{{ issue.line }}</td>
+                  <td>{{ issue.char }}</td>
+                  <td>{{ issue.analyzer }}</td>
+                  <td>{{ issue.check }}</td>
+                  <td><samp>{{ issue.hash.substring(0, 8) }}</samp></td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+    </div>
+    <div class="notification is-danger" v-else>
+      <h4 class="title">Error</h4>
+      {{ state }}
+    </div>
+  </section>
+</template>
+
+<style>
+tr.new_for_revision {
+  background: #e6ffcc;
+}
+</style>
diff --git a/frontend/src/Stats.vue b/frontend/src/Stats.vue
index 388a02bd0..95025f655 100644
--- a/frontend/src/Stats.vue
+++ b/frontend/src/Stats.vue
@@ -9,30 +9,30 @@ export default {
   ],
   data () {
     return {
-      sort: 'published'
+      sort: 'detected'
     }
   },
   components: { Progress },
   mounted () {
-    this.$store.dispatch('calc_stats')
+    this.$store.dispatch('load_stats')
   },
   computed: {
     checks () {
-      if (!this.stats || !this.stats.loaded) {
+      if (!this.stats) {
         return null
       }
       let sortStr = (x, y) => x.toLowerCase().localeCompare(y.toLowerCase())
       var sorts = {
+        'repository': (x, y) => sortStr(x.repository, y.repository),
         'analyzer': (x, y) => sortStr(x.analyzer, y.analyzer) || sortStr(x.check, y.check),
         'check': (x, y) => sortStr(x.check, y.check),
         'detected': (x, y) => y.total - x.total,
         'published': (x, y) => y.publishable - x.publishable
       }
 
-      // Apply local sort to the checks from store
-      var checks = Object.values(this.stats.checks)
-      checks.sort(sorts[this.sort])
-      return checks
+      // Apply local sort to the stats from store
+      this.stats.sort(sorts[this.sort])
+      return this.stats
     }
   },
   methods: {
@@ -51,6 +51,9 @@ export default {
       <table class="table is-fullwidth" v-if="checks">
         <thead>
           <tr>
+            <th>
+              <span class="button" v-on:click="select_sort('repository')" :class="{'is-focused': sort == 'repository' }">Repository</span>
+            </th>
             <th>
               <span class="button" v-on:click="select_sort('analyzer')" :class="{'is-focused': sort == 'analyzer' }">Analyzer</span>
             </th>
@@ -67,11 +70,9 @@ export default {
         </thead>
         <tbody>
           <tr v-for="check in checks" :class="{'publishable': check.publishable > 0}">
+            <td>{{ check.repository }}</td>
             <td>{{ check.analyzer }}</td>
-            <td>
-              {{ check.check }}
-              <span class="has-text-grey" v-if="check.analyzer == 'mozlint.flake8'">{{ check.message }}</span>
-            </td>
+            <td>{{ check.check }}</td>
             <td>{{ check.total }}</td>
             <td>
               <router-link v-if="check.publishable > 0" :to="{ name: 'check', params: { check: check.key }}">{{ check.publishable }}</router-link>
diff --git a/frontend/src/Task.vue b/frontend/src/Task.vue
deleted file mode 100644
index b9b49ad1e..000000000
--- a/frontend/src/Task.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<script>
-import Bool from './Bool.vue'
-import _ from 'lodash'
-import Choice from './Choice.vue'
-
-export default {
-  name: 'Task',
-  data () {
-    return {
-      state: 'loading',
-      filters: {
-        publishable: null,
-        analyzer: null,
-        path: null
-      },
-      choices: {
-        publishable: [
-          {
-            name: 'Publishable',
-            func: i => i.publishable
-          },
-          {
-            name: 'Non publishable',
-            func: i => !i.publishable
-          }
-        ]
-      }
-    }
-  },
-  components: {
-    Bool,
-    Choice
-  },
-  mounted () {
-    // Update filters from query string
-    let publishable = parseInt(this.$route.query.issue)
-    this.filters.publishable = isNaN(publishable) ? null : this.choices.publishable[publishable]
-    this.filters.path = this.$route.query.path || null
-    this.filters.analyzer = this.$route.query.analyzer || null
-
-    // Load report
-    var report = this.$store.dispatch('load_report', this.$route.params.taskId)
-    report.then(
-      (response) => {
-        this.$set(this, 'state', 'loaded')
-      },
-      (error) => {
-        this.$set(this, 'state', error.response.status === 404 ? 'missing' : 'error')
-      }
-    )
-  },
-  computed: {
-    report () {
-      return this.$store.state.report
-    },
-    paths () {
-      if (!this.report) {
-        return null
-      }
-      // List sorted unique paths as choices
-      return _.sortBy(_.uniq(_.map(this.report.issues, 'path')))
-    },
-    analyzers () {
-      if (!this.report) {
-        return null
-      }
-      // List sorted unique analyzers as choices
-      return _.sortBy(_.uniq(_.map(this.report.issues, 'analyzer')))
-    },
-    nb_publishable () {
-      if (!this.report || !this.report.issues) {
-        return 0
-      }
-      return this.report.issues.filter(i => i.publishable).length
-    },
-    issues () {
-      let issues = this.report ? this.report.issues : []
-
-      // Filter by publishable
-      if (this.filters.publishable !== null) {
-        issues = _.filter(issues, this.filters.publishable.func)
-      }
-
-      // Filter by path
-      if (this.filters.path !== null) {
-        issues = _.filter(issues, i => i.path === this.filters.path)
-      }
-
-      // Filter by analyzer
-      if (this.filters.analyzer !== null) {
-        issues = _.filter(issues, i => i.analyzer === this.filters.analyzer)
-      }
-
-      // Always display publishable first
-      return _.sortBy(issues, i => !i.publishable)
-    }
-  },
-  filters: {
-    from_timestamp (value) {
-      return new Date(value * 1000).toUTCString()
-    }
-  }
-}
-</script>
-
-<template>
-  <div>
-    <h1 class="title">Task <a :href="'https://firefox-ci-tc.services.mozilla.com/tasks/' + $route.params.taskId" target="_blank">{{ $route.params.taskId }}</a></h1>
-
-    <div class="notification is-info" v-if="state == 'loading'">Loading report...</div>
-    <div class="notification is-warning" v-else-if="state == 'missing'">No report, so no issues !</div>
-    <div class="notification is-danger" v-else-if="state == 'error'">Failure</div>
-    <div v-else-if="state == 'loaded'">
-
-      <nav class="level" v-if="report">
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="heading">Publishable</p>
-            <p class="title">{{ nb_publishable }}</p>
-          </div>
-        </div>
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="heading">Issues</p>
-            <p class="title">{{ report.issues.length }}</p>
-          </div>
-        </div>
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="heading">Source</p>
-            <p class="title"><a :href="report.revision.url" target="_blank">{{ report.revision.title }}</a></p>
-          </div>
-        </div>
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="heading">Reported</p>
-            <p class="title">{{ report.time|from_timestamp }}</p>
-          </div>
-        </div>
-      </nav>
-
-      <table class="table is-fullwidth" v-if="issues">
-        <thead>
-          <tr>
-            <td><Choice :choices="analyzers" name="analyzer" v-on:new-choice="filters.analyzer = $event"/></td>
-            <td><Choice :choices="paths" name="path" v-on:new-choice="filters.path = $event"/></td>
-            <td>Lines</td>
-            <td><Choice :choices="choices.publishable" name="issue" v-on:new-choice="filters.publishable = $event"/></td>
-            <td>Check</td>
-            <td>Level</td>
-            <td>Message</td>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr v-for="issue in issues" :class="{'publishable': issue.publishable}">
-            <td>
-              <span v-if="issue.analyzer == 'mozlint'">{{ issue.linter }}<br />by Mozlint</span>
-              <span v-else>{{ issue.analyzer }}</span>
-            </td>
-            <td class="path">{{ issue.path }}</td>
-            <td>{{ issue.line }} <span v-if="issue.nb_lines > 1">&rarr; {{ issue.line - 1 + issue.nb_lines }}</span></td>
-            <td>
-              <Bool :value="issue.publishable" name="Publishable" />
-              <ul>
-                <li><Bool :value="issue.in_patch" name="In patch" /></li>
-                <li><Bool :value="issue.validates" name="Validated" /></li>
-                <li><Bool :value="issue.publishable" name="New issue" /></li>
-              </ul>
-            </td>
-
-            <td>
-              <span v-if="issue.analyzer == 'mozlint'">{{ issue.rule }}</span>
-              <span v-if="issue.analyzer == 'clang-tidy'">{{ issue.check }}</span>
-              <span v-if="issue.analyzer == 'clang-format'">Style issue</span>
-              <span v-if="issue.analyzer == 'infer'">{{ issue.bug_type }}</span>
-              <span v-if="issue.analyzer == 'Coverity'">{{ issue.bug_type }}<br /><code>{{ issue.kind }}</code></span>
-            </td>
-            <td>
-              <span v-if="issue.level == 'error' || issue.type == 'error' || issue.kind == 'ERROR' || issue.analyzer == 'Coverity'" class="tag is-danger">Error</span>
-              <span v-if="issue.level == 'warning' || issue.type == 'warning' || issue.kind == 'WARNING' || issue.analyzer == 'clang-format'" class="tag is-warning">Warning</span>
-            </td>
-            <td>
-              <pre v-if="issue.analyzer == 'Coverity'">{{ issue.message }}</pre>
-              <p v-else>{{ issue.message }}</p>
-
-              <pre v-if="issue.body">
-                {{ issue.body }}
-              </pre>
-
-              <div v-if="issue.analyzer == 'clang-format' && issue.mode == 'replace'">
-                <strong>Replace</strong>
-                <pre>{{ issue.old_lines }}</pre>
-                <strong>by these:</strong>
-                <pre>{{ issue.new_lines }}</pre>
-              </div>
-              <div v-if="issue.analyzer == 'clang-format' && issue.mode == 'insert'">
-                <strong>Insert these lines</strong>
-                <pre>{{ issue.new_lines }}</pre>
-              </div>
-              <div v-if="issue.analyzer == 'clang-format' && issue.mode == 'delete'">
-                <strong>Delete these lines</strong>
-                <pre>{{ issue.old_lines }}</pre>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="notification is-info" v-else>No issues !</div>
-  </div>
-</template>
-
-<style scoped>
-tr.publishable {
-  background: #e6ffcc;
-}
-
-td.path {
-  color: #4d4d4d;
-  font-family: monospace;
-}
-</style>
diff --git a/frontend/src/Tasks.vue b/frontend/src/Tasks.vue
index f9f7979c3..c491e6dc7 100644
--- a/frontend/src/Tasks.vue
+++ b/frontend/src/Tasks.vue
@@ -5,29 +5,13 @@ import Choice from './Choice.vue'
 
 export default {
   mounted () {
-    // Load new tasks at startup
-    this.load_tasks()
-  },
-  watch: {
-    '$route' (to, from, next) {
-      // Load new tasks when route change
-      if (to.path !== from.path) {
-        this.load_tasks()
-      }
-    }
+    this.load_tasks('production')
   },
   methods: {
-    load_tasks () {
-      var payload = {}
-
-      // Reset state
+    load_tasks (channel) {
+      this.$set(this, 'channel', channel)
       this.$store.commit('reset')
-
-      // Load a specific revision only
-      if (this.$route.params.revision) {
-        payload['revision'] = this.$route.params.revision
-      }
-      this.$store.dispatch('load_index', payload)
+      this.$store.dispatch('load_index', { channel })
     }
   },
   components: {
@@ -35,6 +19,7 @@ export default {
   },
   data: function () {
     return {
+      channel: 'production',
       filters: {
         state: null,
         issues: null,
@@ -73,7 +58,7 @@ export default {
 
       // Filter by states
       if (this.filters.state !== null) {
-        tasks = _.filter(tasks, t => t.state_full === this.filters.state.key)
+        tasks = _.filter(tasks, t => t.data.state === this.filters.state.key)
       }
 
       // Filter by issues
@@ -89,22 +74,37 @@ export default {
         })
       }
 
-      return tasks
+      // Sort by indexation date
+      return tasks.sort((x, y) => {
+        return new Date(y.data.indexed) - new Date(x.data.indexed)
+      })
     },
     tasks_total () {
       return this.$store.state.tasks ? this.$store.state.tasks.length : 0
     },
     states () {
-      return this.$store.state.states
+      let currentTasks = this.$store.state.tasks
+      const states = currentTasks.reduce((states, task) => {
+        if (states[task.data.state] === undefined) {
+          states[task.data.state] = 0
+        }
+        states[task.data.state] += 1
+        return states
+      }, {})
+
+      // Order states by their nb, and calc percents
+      return Object.keys(states).map(state => {
+        let nb = states[state]
+        return {
+          'key': state,
+          'name': state.startsWith('error.') ? 'error: ' + state.substring(6) : state,
+          'nb': nb,
+          'percent': currentTasks && currentTasks.length > 0 ? Math.round(nb * 100 / currentTasks.length) : 0
+        }
+      }).sort((x, y) => { return y.nb - x.nb })
     },
     repositories () {
-      // Convert repositories set to an array
-      return [...this.$store.state.repositories].map(url => {
-        if (url.startsWith('https://hg.mozilla.org/')) {
-          return url.substring(23)
-        }
-        return url
-      })
+      return []
     }
   }
 }
@@ -112,6 +112,10 @@ export default {
 
 <template>
   <section>
+    <div class="buttons has-addons is-pulled-right">
+      <button v-on:click="load_tasks('production')" class="button is-small" :class="{'is-primary': channel == 'production'}">Production tasks</button>
+      <button v-on:click="load_tasks('testing')" class="button is-small" :class="{'is-primary': channel == 'testing'}">Testing tasks</button>
+    </div>
 
     <div class="states" >
       <div class="state columns" v-for="state in states">
@@ -158,7 +162,7 @@ export default {
               <small class="mono has-text-grey-light">{{ task.data.diff_phid}}</small> - diff {{ task.data.diff_id || 'unknown'     }}
             </p>
             <p>
-              <small class="mono has-text-grey-light">{{ task.data.phid}}</small> - <router-link :to="{ name: 'revision', params: { revision: task.data.id }}">rev {{ task.data.id }}</router-link>
+              <small class="mono has-text-grey-light">{{ task.data.phid}}</small> - <router-link :to="{ name: 'revision', params: { revisionId: task.data.id }}">rev {{ task.data.id }}</router-link>
             </p>
           </td>
 
@@ -198,7 +202,7 @@ export default {
             <a class="button is-link" :href="task.data.url" target="_blank">Phabricator</a>
             <a v-if="task.data.bugzilla_id" class="button is-dark" :href="'https://bugzil.la/' + task.data.bugzilla_id" target="_blank">Bugzilla</a>
             <a class="button is-primary" :href="'https://firefox-ci-tc.services.mozilla.com/tasks/' + task.data.try_group_id" target="_blank">Try Tasks</a>
-            <router-link v-if="task.data.issues > 0" :to="{ name: 'task', params: { taskId : task.taskId }}" class="button is-primary">Issues</router-link>
+            <router-link v-if="task.data.issues > 0" :to="{ name: 'diff', params: { diffId : task.data.diff_id }}" class="button is-primary">Issues</router-link>
           </td>
         </tr>
       </tbody>
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 3efb956fa..325213eb5 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -8,8 +8,5 @@ export default new Vue({
   store,
   router,
   el: '#root',
-  render: (h) => h(App),
-  beforeCreate () {
-    this.$store.commit('load_preferences')
-  }
+  render: (h) => h(App)
 })
diff --git a/frontend/src/mixins.js b/frontend/src/mixins.js
index 4d097de7e..2fa75a983 100644
--- a/frontend/src/mixins.js
+++ b/frontend/src/mixins.js
@@ -1,14 +1,30 @@
 export default {
+  query: {
+    methods: {
+      update_query (name, value) {
+        console.log('update query', name, value)
+        var query = Object.assign({}, this.$route.query)
+        if (value !== null && value !== '') {
+          query[name] = value
+        } else if (name in query) {
+          delete query[name]
+        }
+        if (this.$router) {
+          this.$router.push({ 'query': query })
+        }
+      }
+    }
+  },
   stats: {
     computed: {
       stats () {
         return this.$store.state.stats
       },
       progress () {
-        if (!this.stats.ids || !this.stats.loaded) {
-          return 0.0
+        if (!this.$store.state.total_stats) {
+          return 0
         }
-        return 100 * this.stats.loaded / this.stats.ids.length
+        return 100 * this.stats.length / this.$store.state.total_stats
       }
     }
   },
@@ -16,14 +32,21 @@ export default {
     filters: {
       // Display time since elapsed in a human format
       since (datetime) {
-        var dspStep = (t, name) => (Math.round(t) + ' ' + name + (Math.round(t) > 1 ? 's' : ''))
+        var dspStep = (t, name) => {
+          let x = Math.round(t)
+          if (x === 0) {
+            return ''
+          }
+          return x + ' ' + name + (x > 1 ? 's' : '')
+        }
 
         let diff = (new Date() - new Date(datetime)) / 1000
         let steps = [
           [60, 'second'],
           [60, 'minute'],
           [24, 'hour'],
-          [30, 'day']
+          [30, 'day'],
+          [12, 'month']
         ]
         var prev = ''
         for (let [t, name] of steps) {
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index dafd50c49..0a2ce0e6a 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import Diffs from './Diffs.vue'
 import Tasks from './Tasks.vue'
-import Task from './Task.vue'
+import Revision from './Revision.vue'
+import Issues from './Issues.vue'
 import Stats from './Stats.vue'
 import Check from './Check.vue'
 
@@ -11,18 +13,23 @@ export default new VueRouter({
   routes: [
     {
       path: '/',
+      name: 'diffs',
+      component: Diffs
+    },
+    {
+      path: '/tasks',
       name: 'tasks',
       component: Tasks
     },
     {
-      path: '/rev/:revision',
+      path: '/D:revisionId',
       name: 'revision',
-      component: Tasks
+      component: Revision
     },
     {
-      path: '/task/:taskId',
-      name: 'task',
-      component: Task
+      path: '/diff/:diffId',
+      name: 'diff',
+      component: Issues
     },
     {
       path: '/stats',
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 3ef01437a..98faae9ee 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -1,219 +1,184 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import router from './routes'
 Vue.use(Vuex)
 
-const PREFERENCES_KEY = 'mozilla-sa-dashboard'
-const TASKCLUSTER_ROOT_URL = 'https://firefox-ci-tc.services.mozilla.com/'
-const TASKS_SLICE = 10
-const FINAL_STATES = ['done', 'error']
-
-// Must stay in sync with src/staticanalysis/bot/default.nix maxRunTime & deadline parameters
-// This is currently set to 2 hours in ms
-const MAX_TTL = 2 * 3600 * 1000
+const TASKCLUSTER_DIFF_INDEX = 'https://index.taskcluster.net/v1/task/project.relman.production.code-review.phabricator.diff.'
 
 export default new Vuex.Store({
   state: {
-    channel: 'production',
+    backend_url: process.env.BACKEND_URL,
     tasks: [],
-    indexes: [],
-    stats: {
-      loaded: 0,
-      errors: 0,
-      ids: [],
-      checks: {},
-      start_date: new Date()
-    },
+    diffs: [],
+    stats: null,
+    total_stats: 0, // Used to track download progress
     states: null,
-    repositories: new Set(),
-    report: null
+    repositories: null,
+    diff: null,
+    issues: {},
+    revision: null
   },
   mutations: {
-    load_preferences (state) {
-      // Load prefs from local storage
-      let rawPrefs = localStorage.getItem(PREFERENCES_KEY)
-      if (rawPrefs) {
-        let prefs = JSON.parse(rawPrefs)
-        if (prefs.channel) {
-          state.channel = prefs.channel
-        }
-      }
-    },
-    save_preferences (state) {
-      // Save channel to preferences
-      localStorage.setItem(PREFERENCES_KEY, JSON.stringify({
-        channel: state.channel
-      }))
-    },
-    use_channel (state, channel) {
-      state.channel = channel
-      this.commit('reset')
-      this.commit('save_preferences')
-    },
     reset (state) {
       state.tasks = []
-      state.indexes = []
-      state.stats = {
-        loaded: 0,
-        errors: 0,
-        ids: [],
-        checks: {},
-        start_date: new Date()
-      }
+      state.diffs = []
+      state.diff = null
     },
-    use_tasks (state, payload) {
-      var now = new Date()
 
-      // Save url
-      state.indexes.push(payload.url)
+    reset_stats (state) {
+      state.stats = []
+      state.total_stats = 0
+    },
 
-      // Filter tasks without extra data
-      let currentTasks = state.tasks.concat(
-        payload.tasks.filter(task => task.data.indexed !== undefined)
-      )
+    use_tasks (state, tasks) {
+      state.tasks = state.tasks.concat(tasks['tasks'])
+    },
 
-      currentTasks.map(task => {
-        // Add a descriptive state key name to tasks
-        task.state_full = task.data.state
-        if (task.state_full === 'error' && task.data.error_code) {
-          task.state_full += '.' + task.data.error_code
-        }
+    use_diffs (state, diffs) {
+      // Simply store diffs & their current pagination
+      state.diffs = diffs
+    },
 
-        // Detect and update invalid state when a task got killed by Taskcluster
-        let date = new Date(task.data.indexed)
-        if (now - date > MAX_TTL && FINAL_STATES.indexOf(task.data.state) === -1) {
-          task.data.state = 'killed'
-          task.state_full = 'killed'
-        }
+    use_repositories (state, repositories) {
+      // Simply store repositories directly
+      state.repositories = repositories
+    },
 
-        // Use full urls for old style slugs
-        if (task.data.repository === 'mozilla-central') {
-          task.data.repository = 'https://hg.mozilla.org/mozilla-central'
-        } else if (task.data.repository === 'nss') {
-          task.data.repository = 'https://hg.mozilla.org/projects/nss'
-        }
+    use_revision (state, payload) {
+      state.revision = Object.assign(payload.revision, { 'diffs': payload.diffs })
+    },
 
-        return task
-      })
+    // Store a new diff to display
+    use_diff (state, diff) {
+      state.diff = diff
+      if (state.diff !== null) {
+        state.diff.issues = []
+      }
+    },
 
-      // Sort by indexation date
-      currentTasks.sort((x, y) => {
-        return new Date(y.data.indexed) - new Date(x.data.indexed)
+    // Add issues to a diff
+    add_issues (state, payload) {
+      let update = {}
+      let issues = state.issues[payload.diffId] || []
+      update[payload.diffId] = issues.concat(payload.issues)
+      state.issues = Object.assign({}, state.issues, update)
+    },
+
+    // Add stats to the store
+    add_stats (state, data) {
+      state.stats = state.stats.concat(data.results)
+      state.total_stats = data.count
+    }
+  },
+  actions: {
+    // Load Phabricator diffs from our backend
+    // Load a single page at once, providing pagination state
+    load_diffs (state, payload) {
+      let url = payload.url || this.state.backend_url + '/v1/diff/'
+
+      let params = payload.query || {}
+      return axios.get(url, { params: params }).then(resp => {
+        state.commit('use_diffs', resp.data)
       })
+    },
 
-      // Crunch stats about status
-      let states = {}
-      states = currentTasks.reduce((states, task) => {
-        if (states[task.state_full] === undefined) {
-          states[task.state_full] = 0
-        }
-        states[task.state_full] += 1
-        return states
-      }, states)
+    // Load a specific diff and its issues
+    load_diff (state, diffId) {
+      let url = this.state.backend_url + '/v1/diff/' + diffId
+      state.commit('use_diff', null)
+      return axios.get(url).then(resp => {
+        state.commit('use_diff', resp.data)
 
-      // Save tasks
-      state.tasks = currentTasks
+        // Load all issues in that diff
+        state.dispatch('load_issues', {
+          diffId: diffId,
+          url: resp.data.issues_url
+        })
+      }).catch(err => {
+        state.commit('use_diff', err)
+      })
+    },
 
-      // Order states by their nb, and calc percents
-      state.states = Object.keys(states).map(state => {
-        let nb = states[state]
-        return {
-          'key': state,
-          'name': state.startsWith('error.') ? 'error: ' + state.substring(6) : state,
-          'nb': nb,
-          'percent': currentTasks && currentTasks.length > 0 ? Math.round(nb * 100 / currentTasks.length) : 0
-        }
-      }).sort((x, y) => { return y.nb - x.nb })
+    load_issues (state, payload) {
+      if (payload.url === null) {
+        return
+      }
 
-      // Update repositories reference
-      state.repositories = new Set(state.tasks.map(t => t.data.repository).filter(x => x))
+      axios.get(payload.url).then(resp => {
+        // Store new issues
+        state.commit('add_issues', {
+          diffId: payload.diffId,
+          issues: resp.data.results
+        })
 
-      // List all active tasks Ids for stats calculations
-      state.stats.ids = state.stats.ids.concat(
-        payload.tasks
-          .filter((task) => task.data.state === 'done' && task.data.issues > 0)
-          .map(t => t.taskId)
-      )
+        // Load next issues
+        payload.url = resp.data.next
+        state.dispatch('load_issues', payload)
+      })
     },
-    use_report (state, report) {
-      if (report === null) {
+
+    load_stats (state, url) {
+      if (url === null) {
         return
+      } else if (url === undefined) {
+        state.commit('reset_stats')
+        url = this.state.backend_url + '/v1/check/stats/'
       }
 
-      // Save raw report for issues listing
-      state.report = report
+      axios.get(url).then(resp => {
+        // Store new stats
+        state.commit('add_stats', resp.data)
 
-      if (report.response && report.response.status !== 200) {
-        // Manage errors
-        state.stats.errors += 1
-        return
-      }
+        // Load next stats
+        state.dispatch('load_stats', resp.data.next)
+      })
+    },
 
-      if (state.stats !== null && report.issues) {
-        // Calc stats for this report
-        state.stats.checks = report.issues.reduce((stats, issue) => {
-          let key = issue.analyzer + '.' + issue.check
-          if (stats[key] === undefined) {
-            stats[key] = {
-              analyzer: issue.analyzer,
-              key: key,
-              message: issue.message,
-              check: issue.check,
-              publishable: 0,
-              issues: [],
-              total: 0
-            }
-          }
-          stats[key].publishable += issue.publishable ? 1 : 0
-          stats[key].total++
+    load_repositories (state, payload) {
+      let url = this.state.backend_url + '/v1/repository/'
 
-          // Save publishable issues for Check component
-          // and link report data to the issue
-          if (issue.publishable) {
-            let extras = {
-              revision: report.revision,
-              taskId: report.taskId
-            }
-            stats[key].issues.push(Object.assign(extras, issue))
-          }
-          return stats
-        }, state.stats.checks)
+      return axios.get(url).then(resp => {
+        // Assume we only have one page here
+        state.commit('use_repositories', resp.data.results)
+      })
+    },
 
-        // Save start date
-        state.stats.start_date = new Date(Math.min(new Date(report.time * 1000.0), state.stats.start_date))
+    // Retrieve diff data stored in Taskcluster index
+    // Do not persist that data in our store
+    load_taskcluster_diff (state, payload) {
+      let url = TASKCLUSTER_DIFF_INDEX + payload.id
+      return axios.get(url)
+    },
 
-        // Mark new report loaded
-        state.stats.loaded += 1
-      }
-    }
-  },
-  actions: {
-    // Switch data channel to use
-    switch_channel (state, channel) {
-      state.commit('use_channel', channel)
-      state.dispatch('load_index')
-      router.push({ name: 'tasks' })
+    // Load a specific revision and its diffs
+    load_revision (state, payload) {
+      return Promise.all([
+        axios.get(this.state.backend_url + '/v1/revision/' + payload.id),
+        axios.get(this.state.backend_url + '/v1/revision/' + payload.id + '/diffs/')
+      ]).then(([respRevision, respDiffs]) => {
+        // Store revision & diffs data
+        state.commit('use_revision', {
+          revision: respRevision.data,
+          diffs: respDiffs.data.results
+        })
+
+        // Start loading issues for each diff
+        for (let diff of respDiffs.data.results) {
+          state.dispatch('load_issues', {
+            diffId: diff.id,
+            url: diff.issues_url
+          })
+        }
+      })
     },
 
     // Load Phabricator indexed tasks summary from Taskcluster
     load_index (state, payload) {
-      let url = TASKCLUSTER_ROOT_URL + 'api/index/v1/tasks/project.relman.' + this.state.channel + '.code-review.phabricator.'
-      if (payload && payload.revision) {
-        // Remove potential leading 'D' from phabricator revision
-        url += !Number.isInteger(payload.revision) && payload.revision.startsWith('D') ? payload.revision.substring(1) : payload.revision
-      } else {
-        url += 'diff'
-      }
-
-      url += '?limit=200'
+      let channel = payload.channel || 'production'
+      let url = `https://firefox-ci-tc.services.mozilla.com/api/index/v1/tasks/project.relman.${channel}.code-review.phabricator.diff?limit=200`
       if (payload && payload.continuationToken) {
         url += '&continuationToken=' + payload.continuationToken
       }
-      if (state.state.indexes.includes(url)) {
-        console.debug('Already loaded', url)
-        return
-      }
       return axios.get(url).then(resp => {
         state.commit('use_tasks', {
           tasks: resp.data.tasks,
@@ -222,51 +187,12 @@ export default new Vuex.Store({
 
         // Continue loading available tasks
         if (resp.data.continuationToken) {
-          state.dispatch('load_index', { continuationToken: resp.data.continuationToken })
+          state.dispatch('load_index', {
+            channel,
+            continuationToken: resp.data.continuationToken
+          })
         }
       })
-    },
-
-    // Load the report for a given task
-    load_report (state, taskId) {
-      let url = TASKCLUSTER_ROOT_URL + 'api/queue/v1/task/' + taskId + '/artifacts/public/results/report.json'
-      state.commit('use_report', null)
-      return axios.get(url).then(resp => {
-        state.commit('use_report', Object.assign({ taskId }, resp.data))
-      }).catch(err => {
-        state.commit('use_report', err)
-      })
-    },
-
-    // Load multiple reports for stats crunching
-    calc_stats (state, tasksId) {
-      // Avoid multiple loads
-      if (state.state.stats.loaded > 0) {
-        return
-      }
-
-      // Load all indexes to get task ids
-      // and avoid reloading tasks
-      var indexes = state.state.tasks.length > 0 ? Promise.resolve(true) : state.dispatch('load_index')
-      indexes.then(() => {
-        console.log('Start analysis')
-
-        // Start processing by batches
-        state.dispatch('load_report_batch', 0)
-      })
-    },
-    load_report_batch (state, step) {
-      if (step * TASKS_SLICE > state.state.stats.ids.length) {
-        return
-      }
-
-      // Slice full loading in smaller batches to avoid using too many resources
-      var slice = state.state.stats.ids.slice(step * TASKS_SLICE, (step + 1) * TASKS_SLICE)
-      var batch = Promise.all(
-        slice.map(taskId => state.dispatch('load_report', taskId))
-      )
-      batch.then(resp => console.info('Loaded batch', step))
-      batch.then(resp => state.dispatch('load_report_batch', step + 1))
     }
   }
 })