Merge branch 'next-profile' of github.com:coralproject/talk into next-profile

* 'next-profile' of github.com:coralproject/talk: (21 commits) test: fix snapshots feat: hide profile tab when not logged in fix: translations, typings, cleanup and fix view conversation fix: apply suggestions fix: improve typings feat: cleanup of router feat: simplified view deleting old snap No need for local state for now Routing, Navigation, Styles using found withRouter Mapping /admin as /admin.html in devMode Adding found Adding Found Relay to the Admin side Add tests Adapt snapshots Add tests Implement Show Conversation Link First iteration of admin wip ...
2026-07-25 13:30:59 +08:00 · 2018-10-04 10:37:52 -03:00
parent 84234f9ac6 a09b50a9e7
commit 66cc0752a4
85 changed files with 4246 additions and 2389 deletions
@@ -19,9 +19,6 @@ const config: Config = {
        "core/client/stream/**/*.ts",
        "core/client/stream/**/*.tsx",
        "core/client/stream/**/*.graphql",
-        "core/client/auth/**/*.ts",
-        "core/client/auth/**/*.tsx",
-        "core/client/auth/**/*.graphql",
        "core/server/**/*.graphql",
      ],
      ignore: [
@@ -34,6 +31,23 @@ const config: Config = {
        runOnInit: true,
      }),
    },
+    compileRelayAdmin: {
+      paths: [
+        "core/client/admin/**/*.ts",
+        "core/client/admin/**/*.tsx",
+        "core/client/admin/**/*.graphql",
+        "core/server/**/*.graphql",
+      ],
+      ignore: [
+        "core/**/*.d.ts",
+        "core/**/*.graphql.ts",
+        "**/test/**/*",
+        "core/**/*.spec.*",
+      ],
+      executor: new CommandExecutor("npm run compile:relay-admin", {
+        runOnInit: true,
+      }),
+    },
    compileRelayAuth: {
      paths: [
        "core/client/auth/**/*.ts",
@@ -80,6 +94,7 @@ const config: Config = {
      "compileCSSTypes",
      "compileRelayStream",
      "compileRelayAuth",
+      "compileRelayAdmin",
      "compileSchema",
    ],
    docz: ["runDocz", "compileCSSTypes"],
@@ -59,9 +59,8 @@ export default function({
    },
    overlay: false,
    historyApiFallback: {
-      // Paths with dots should still use the history fallback.
-      // See https://github.com/facebookincubator/create-react-app/issues/387.
      disableDotRule: true,
+      rewrites: [{ from: /^\/admin/, to: "/admin.html" }],
    },
    public: allowedHost,
    index: "embed.html",
@@ -5160,7 +5160,6 @@
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
      "requires": {
        "core-js": "^2.4.0",
        "regenerator-runtime": "^0.11.0"
@@ -8969,6 +8968,11 @@
        }
      }
    },
+    "dom-helpers": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
+      "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
+    },
    "dom-serializer": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -9880,6 +9884,39 @@
        "time-stamp": "^1.0.0"
      }
    },
+    "farce": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/farce/-/farce-0.2.6.tgz",
+      "integrity": "sha1-PTB/rp6sRqFI/VU13uLfvPZTuoM=",
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "invariant": "^2.2.4",
+        "is-promise": "^2.1.0",
+        "query-string": "^5.1.1",
+        "redux": "^4.0.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
+          "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
    "fast-deep-equal": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -10341,6 +10378,70 @@
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
    },
+    "found": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/found/-/found-0.3.14.tgz",
+      "integrity": "sha512-Z4Ag0L8whIJwVf0MyNTkx9q3ekmbqK5RkCvlcVU7Dn3ruKfKSxbPReUiQi7mWGMTAut2JnkwiobSD/FQRhk9Vw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "farce": "^0.2.6",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.17.5",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "prop-types-extra": "^1.0.1",
+        "react-redux": "^5.0.7",
+        "react-static-container": "^1.0.2",
+        "redux": "^4.0.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "found-relay": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/found-relay/-/found-relay-0.3.1.tgz",
+      "integrity": "sha512-N9lADMedKGkl+PNY/L/qf0rDy+3HRbO9IX8Gcvjpy2tgRmPy6Z2QM/zVOufCvvD8rYGP84CuqtmTWJvJrLPFYw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.17.10",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
    "fragment-cache": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -12080,8 +12181,7 @@
    "hoist-non-react-statics": {
      "version": "2.5.5",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
-      "dev": true
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
    },
    "home-or-tmp": {
      "version": "2.0.0",
@@ -12685,7 +12785,6 @@
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
      "requires": {
        "loose-envify": "^1.0.0"
      }
@@ -13107,8 +13206,7 @@
    "is-promise": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
-      "dev": true
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
    },
    "is-redirect": {
      "version": "1.0.0",
@@ -15214,8 +15312,7 @@
    "js-tokens": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
    },
    "js-yaml": {
      "version": "3.12.0",
@@ -15902,6 +15999,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
    },
+    "lodash-es": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
+    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -16186,7 +16288,6 @@
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
      "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
      "requires": {
        "js-tokens": "^3.0.0"
      }
@@ -17397,8 +17498,7 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "object-copy": {
      "version": "0.1.0",
@@ -20509,12 +20609,30 @@
      "version": "15.6.2",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
-      "dev": true,
      "requires": {
        "loose-envify": "^1.3.1",
        "object-assign": "^4.1.1"
      }
    },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
    "proxy-addr": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
@@ -21147,8 +21265,7 @@
    "react-is": {
      "version": "16.4.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
-      "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg==",
-      "dev": true
+      "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg=="
    },
    "react-lifecycles-compat": {
      "version": "3.0.4",
@@ -21220,6 +21337,19 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-redux": {
+      "version": "5.0.7",
+      "resolved": "http://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
+      "integrity": "sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==",
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.0.0",
+        "lodash": "^4.17.5",
+        "lodash-es": "^4.17.5",
+        "loose-envify": "^1.1.0",
+        "prop-types": "^15.6.0"
+      }
+    },
    "react-relay": {
      "version": "1.7.0-rc.1",
      "resolved": "https://registry.npmjs.org/react-relay/-/react-relay-1.7.0-rc.1.tgz",
@@ -21298,6 +21428,11 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-static-container": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-static-container/-/react-static-container-1.0.2.tgz",
+      "integrity": "sha512-rxlZtZk5t6Y3gqqpaZ1lxY3RqlQcBU5uGsSoZj/hbF3ZweDqPbFHDkczT4emAxeaw37OD96RAAoayFGFQZCdWg=="
+    },
    "react-test-renderer": {
      "version": "16.4.2",
      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.2.tgz",
@@ -21510,6 +21645,15 @@
        }
      }
    },
+    "redux": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz",
+      "integrity": "sha512-NnnHF0h0WVE/hXyrB6OlX67LYRuaf/rJcbWvnHHEPCF/Xa/AZpwhs/20WyqzQae5x4SD2F9nPObgBh2rxAgLiA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
    "regenerate": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -21528,8 +21672,7 @@
    "regenerator-runtime": {
      "version": "0.11.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
    },
    "regenerator-transform": {
      "version": "0.12.4",
@@ -23252,8 +23395,7 @@
    "strict-uri-encode": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "dev": true
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
    },
    "string-length": {
      "version": "2.0.0",
@@ -10,6 +10,7 @@
    "compile:css-types": "tcm src/core/client/",
    "compile:relay-stream": "ts-node ./scripts/compileRelay --src ./src/core/client/stream --schema tenant",
    "compile:relay-auth": "ts-node ./scripts/compileRelay --src ./src/core/client/auth --schema tenant",
+    "compile:relay-admin": "ts-node ./scripts/compileRelay --src ./src/core/client/admin --schema tenant",
    "compile:schema": "node ./scripts/generateSchemaTypes.js",
    "docz": "docz",
    "start": "node dist/index.js",
@@ -45,6 +46,9 @@
    "dotenv-expand": "^4.2.0",
    "express": "^4.16.3",
    "express-static-gzip": "^0.3.2",
+    "farce": "^0.2.6",
+    "found": "^0.3.14",
+    "found-relay": "^0.3.1",
    "fs-extra": "^6.0.1",
    "graphql": "^0.13.2",
    "graphql-config": "^2.0.1",
@@ -239,6 +239,22 @@ export default function createWebpackConfig({
                },
              ],
            },
+            {
+              test: paths.appAdminLocalesTemplate,
+              use: [
+                // This is the locales loader that loads available locales
+                // from a particular target.
+                {
+                  loader: "locales-loader",
+                  options: {
+                    ...localesOptions,
+                    // Target specifies the prefix for fluent files to be loaded.
+                    // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
+                    target: "admin",
+                  },
+                },
+              ],
+            },
            // Loader for our fluent files.
            {
              test: /\.ftl$/,
@@ -416,6 +432,12 @@ export default function createWebpackConfig({
          paths.appAuthIndex,
          // Remove deactivated entries.
        ],
+        admin: [
+          // We ship polyfills by default
+          paths.appPolyfill,
+          ...devServerEntries,
+          paths.appAdminIndex,
+        ],
      },
      plugins: [
        ...baseConfig.plugins!,
@@ -435,6 +457,14 @@ export default function createWebpackConfig({
          inject: "body",
          ...htmlWebpackConfig,
        }),
+        // Generates an `admin.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "admin.html",
+          template: paths.appAdminHTML,
+          chunks: ["admin"],
+          inject: "body",
+          ...htmlWebpackConfig,
+        }),
        // Makes some environment variables available in index.html.
        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
@@ -29,6 +29,10 @@ export default {
  appAuthLocalesTemplate: resolveSrc("core/client/auth/locales.ts"),
  appAuthIndex: resolveSrc("core/client/auth/index.tsx"),

+  appAdminHTML: resolveSrc("core/client/admin/index.html"),
+  appAdminLocalesTemplate: resolveSrc("core/client/admin/locales.ts"),
+  appAdminIndex: resolveSrc("core/client/admin/index.tsx"),
+
  appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
  appEmbedHTML: resolveSrc("core/client/embed/index.html"),
  appEmbedArticleHTML: resolveSrc("core/client/embed/article.html"),
@@ -0,0 +1,10 @@
+const path = require("path");
+module.exports = {
+  extends: "../.babelrc.js",
+  plugins: [
+    [
+      "babel-plugin-relay",
+      { artifactDirectory: path.resolve(__dirname, "./__generated__") },
+    ],
+  ],
+};
@@ -0,0 +1,4 @@
+.root {
+  width: 1080px;
+  margin: 0 auto;
+}
@@ -0,0 +1,13 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter } from "talk-ui/components";
+import styles from "./App.css";
+import Navigation from "./Navigation";
+
+const App: StatelessComponent = ({ children }) => (
+  <HorizontalGutter className={styles.root}>
+    <Navigation />
+    {children}
+  </HorizontalGutter>
+);
+
+export default App;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Community: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Community</Typography>
+  </HorizontalGutter>
+);
+
+export default Community;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Configure: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Configure</Typography>
+  </HorizontalGutter>
+);
+
+export default Configure;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Moderate: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Moderate</Typography>
+  </HorizontalGutter>
+);
+
+export default Moderate;
@@ -0,0 +1,7 @@
+.link {
+  text-decoration: none;
+}
+
+.active {
+  border-bottom: 3px solid var(--palette-primary-main);
+}
@@ -0,0 +1,40 @@
+import { Link } from "found";
+import React, { StatelessComponent } from "react";
+import { Button, Flex, Typography } from "talk-ui/components";
+import styles from "./Navigation.css";
+
+const Navigation: StatelessComponent = () => (
+  <Flex itemGutter="double">
+    <Typography variant="heading1">Talk</Typography>
+    <Link
+      to="/admin/moderate"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Moderate</Button>
+    </Link>
+    <Link
+      to="/admin/community"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Community</Button>
+    </Link>
+    <Link
+      to="/admin/stories"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Stories</Button>
+    </Link>
+    <Link
+      to="/admin/configure"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Configure</Button>
+    </Link>
+  </Flex>
+);
+
+export default Navigation;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Stories: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Stories</Typography>
+  </HorizontalGutter>
+);
+
+export default Stories;
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Talk - Admin</title>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
@@ -0,0 +1,40 @@
+import { BrowserProtocol, queryMiddleware } from "farce";
+import { createFarceRouter, createRender } from "found";
+import { Resolver } from "found-relay";
+
+import React, { StatelessComponent } from "react";
+import ReactDOM from "react-dom";
+import { createManaged } from "talk-framework/lib/bootstrap";
+import { TalkContextConsumer } from "talk-framework/lib/bootstrap/TalkContext";
+import { initLocalState } from "./local";
+import localesData from "./locales";
+import routeConfig from "./routeConfig";
+
+async function main() {
+  const ManagedTalkContextProvider = await createManaged({
+    initLocalState,
+    localesData,
+    userLocales: navigator.languages,
+  });
+
+  const Router = createFarceRouter({
+    historyProtocol: new BrowserProtocol(),
+    historyMiddlewares: [queryMiddleware],
+    routeConfig,
+    render: createRender({}),
+  });
+
+  const Index: StatelessComponent = () => (
+    <ManagedTalkContextProvider>
+      <TalkContextConsumer>
+        {({ relayEnvironment }) => (
+          <Router resolver={new Resolver(relayEnvironment)} />
+        )}
+      </TalkContextConsumer>
+    </ManagedTalkContextProvider>
+  );
+
+  ReactDOM.render(<Index />, document.getElementById("app"));
+}
+
+main();
@@ -0,0 +1 @@
+export { default as initLocalState } from "./initLocalState";
@@ -0,0 +1,21 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+} from "talk-framework/lib/relay";
+
+/**
+ * Initializes the local state, before we start the App.
+ */
+export default async function initLocalState(environment: Environment) {
+  commitLocalUpdate(environment, s => {
+    const root = s.getRoot();
+
+    // Create the Local Record which is the Root for the client states.
+    const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+
+    root.setLinkedRecord(localRecord, "local");
+  });
+}
@@ -0,0 +1,5 @@
+type Local {}
+
+extend type Query {
+  local: Local!
+}
@@ -0,0 +1,9 @@
+/**
+ * The actual content of this file is being generated by our `locales-loader`.
+ * Please check `./src/loaders` and the webpack config for more information.
+ *
+ * This file only represents the types that gets exported.
+ */
+
+import { LocalesData } from "talk-framework/lib/i18n";
+export default {} as LocalesData;
@@ -0,0 +1,17 @@
+import { makeRouteConfig, Route } from "found";
+import React from "react";
+
+import App from "./components/App";
+import Community from "./components/Community";
+import Configure from "./components/Configure";
+import Moderate from "./components/Moderate";
+import Stories from "./components/Stories";
+
+export default makeRouteConfig(
+  <Route path="admin" Component={App}>
+    <Route path="moderate" Component={Moderate} />
+    <Route path="community" Component={Community} />
+    <Route path="stories" Component={Stories} />
+    <Route path="configure" Component={Configure} />
+  </Route>
+);
@@ -25,7 +25,6 @@ export default class PymControl {
      title: config.title,
      id: `${config.id}_iframe`,
      name: `${config.id}_iframe`,
-      optionalparams: "",
    });

    this.cleanups = decorators
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`PymControl should create iframe 1`] = `"<iframe src=\\"http://coralproject.net/?initialWidth=0&amp;childId=pymcontrol-test-id\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"iFrame title\\" id=\\"pymcontrol-test-id_iframe\\" name=\\"pymcontrol-test-id_iframe\\"></iframe>"`;
+exports[`PymControl should create iframe 1`] = `"<iframe src=\\"http://coralproject.net/?initialWidth=0&amp;childId=pymcontrol-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"iFrame title\\" id=\\"pymcontrol-test-id_iframe\\" name=\\"pymcontrol-test-id_iframe\\"></iframe>"`;

 exports[`PymControl should send message 1`] = `"pymxPYMxpymcontrol-test-idxPYMxtestxPYMxhello world"`;
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Basic integration test should render iframe 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2F&amp;initialWidth=0&amp;childId=basic-integration-test-id\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" id=\\"basic-integration-test-id_iframe\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;
+exports[`Basic integration test should render iframe 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2F&amp;initialWidth=0&amp;childId=basic-integration-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" id=\\"basic-integration-test-id_iframe\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;

-exports[`Basic integration test should use canonical link 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2Fcanonical&amp;initialWidth=0&amp;childId=basic-integration-test-id\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;
+exports[`Basic integration test should use canonical link 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2Fcanonical&amp;initialWidth=0&amp;childId=basic-integration-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;
@@ -0,0 +1,8 @@
+import { modifyQuery } from "talk-framework/utils";
+
+export default function getURLWithCommentID(
+  assetURL: string,
+  commentID?: string
+) {
+  return modifyQuery(assetURL, { commentID });
+}
@@ -1 +1,2 @@
 export { default as getMe } from "./getMe";
+export { default as getURLWithCommentID } from "./getURLWithCommentID";
@@ -9,29 +9,39 @@ import {
  TabPane,
 } from "talk-ui/components";

+import { PropTypesOf } from "talk-ui/types";
+import IfLoggedInContainer from "../containers/IfLoggedInContainer";
 import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
 import ProfileQuery from "../tabs/profile/queries/ProfileQuery";
 import * as styles from "./App.css";

+type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
+
 export interface AppProps {
-  activeTab: "COMMENTS" | "PROFILE" | "%future added value";
-  onTabClick: (tab: string) => void;
+  activeTab: TabValue;
+  onTabClick: (tab: TabValue) => void;
 }

+const CommentsTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
+  <Localized id="general-app-commentsTab">
+    <Tab {...props}>Comments</Tab>
+  </Localized>
+);
+
+const MyProfileTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
+  <IfLoggedInContainer>
+    <Localized id="general-app-myProfileTab">
+      <Tab {...props}>My Profile</Tab>
+    </Localized>
+  </IfLoggedInContainer>
+);
+
 const App: StatelessComponent<AppProps> = props => {
  return (
    <HorizontalGutter className={styles.root}>
      <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
-        <Tab tabId="COMMENTS">
-          <Localized id="general-app-commentTab">
-            <span>Comments</span>
-          </Localized>
-        </Tab>
-        <Tab tabId="PROFILE">
-          <Localized id="general-app-myProfileTab">
-            <span>My Profile</span>
-          </Localized>
-        </Tab>
+        <CommentsTab tabId="COMMENTS" />
+        <MyProfileTab tabId="PROFILE" />
      </TabBar>
      <TabContent activeTab={props.activeTab} className={styles.tabContent}>
        <TabPane tabId="COMMENTS">
@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+
+import { graphql, QueryRenderer } from "talk-framework/lib/relay";
+import { IfLoggedInContainerQuery as QueryTypes } from "talk-stream/__generated__/IfLoggedInContainerQuery.graphql";
+
+class IfLoggedInContainer extends Component {
+  public render() {
+    return (
+      <QueryRenderer<QueryTypes>
+        query={graphql`
+          query IfLoggedInContainerQuery {
+            me {
+              id
+            }
+          }
+        `}
+        render={({ error, props }) => {
+          if (error) {
+            return <div>{error.message}</div>;
+          }
+
+          if (props && props.me) {
+            return <>{this.props.children}</>;
+          }
+
+          return null;
+        }}
+        variables={{}}
+      />
+    );
+  }
+}
+
+export default IfLoggedInContainer;
@@ -4,8 +4,8 @@ import { StatelessComponent } from "react";
 import ReactDOM from "react-dom";

 import { createManaged } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";

-import AppContainer from "./containers/AppContainer";
 import {
  OnPostMessageAuthError,
  OnPostMessageSetAuthToken,
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ButtonsBar from "./ButtonsBar";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ButtonsBar> = {
+    children: "children",
+  };
+  const wrapper = shallow(<ButtonsBar {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
@@ -0,0 +1,13 @@
+import React, { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+const ButtonsBar: StatelessComponent = props => {
+  return (
+    <Flex direction="row" itemGutter="half">
+      {props.children}
+    </Flex>
+  );
+};
+
+export default ButtonsBar;
@@ -2,7 +2,7 @@ import React, { StatelessComponent } from "react";

 import HTMLContent from "talk-stream/components/HTMLContent";
 import Timestamp from "talk-stream/components/Timestamp";
-import { Flex } from "talk-ui/components";
+import { Flex, HorizontalGutter } from "talk-ui/components";

 import * as styles from "./Comment.css";
 import EditedMarker from "./EditedMarker";
@@ -43,10 +43,10 @@ const Comment: StatelessComponent<CommentProps> = props => {
        </TopBarLeft>
        {props.topBarRight && <div>{props.topBarRight}</div>}
      </Flex>
-      <HTMLContent>{props.body || ""}</HTMLContent>
-      <Flex className={styles.footer} direction="row" itemGutter="half">
+      <HorizontalGutter>
+        <HTMLContent>{props.body || ""}</HTMLContent>
        {props.footer}
-      </Flex>
+      </HorizontalGutter>
    </div>
  );
 };
@@ -0,0 +1,17 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ShowConversationLink from "./ShowConversationLink";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ShowConversationLink> = {
+    id: "id",
+    onClick: noop,
+    href: "http://localhost/comment",
+  };
+  const wrapper = shallow(<ShowConversationLink {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
@@ -0,0 +1,33 @@
+import React, { EventHandler, MouseEvent } from "react";
+import { StatelessComponent } from "react";
+
+import { Localized } from "fluent-react/compat";
+import { Button } from "talk-ui/components";
+
+export interface ShowConversationLinkProps {
+  id?: string;
+  href?: string;
+  onClick?: EventHandler<MouseEvent>;
+}
+
+const ShowConversationLink: StatelessComponent<
+  ShowConversationLinkProps
+> = props => {
+  return (
+    <Localized id="comments-showConversationLink-readMore">
+      <Button
+        id={props.id}
+        variant="underlined"
+        color="primary"
+        href={props.href}
+        onClick={props.onClick}
+        target="_parent"
+        anchor
+      >
+        Read More of this Conversation >
+      </Button>
+    </Localized>
+  );
+};
+
+export default ShowConversationLink;
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  direction="row"
+  itemGutter="half"
+>
+  children
+</withPropsOnChange(Flex)>
+`;
@@ -30,15 +30,11 @@ exports[`renders username and body 1`] = `
      topBarRight
    </div>
  </withPropsOnChange(Flex)>
-  <HTMLContent>
-    Woof
-  </HTMLContent>
-  <withPropsOnChange(Flex)
-    className="Comment-footer"
-    direction="row"
-    itemGutter="half"
-  >
+  <withPropsOnChange(HorizontalGutter)>
+    <HTMLContent>
+      Woof
+    </HTMLContent>
    footer
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </div>
 `;
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Localized
+  id="comments-showConversationLink-readMore"
+>
+  <withPropsOnChange(Button)
+    anchor={true}
+    color="primary"
+    href="http://localhost/comment"
+    id="id"
+    onClick={[Function]}
+    target="_parent"
+    variant="underlined"
+  >
+    Read More of this Conversation &gt;
+  </withPropsOnChange(Button)>
+</Localized>
+`;
@@ -1,3 +1,5 @@
 export { default, default as IndentedComment } from "./IndentedComment";
 export { default as TopBarLeft } from "./TopBarLeft";
 export { default as Username } from "./Username";
+export { default as ButtonsBar } from "./ButtonsBar";
+export { default as ShowConversationLink } from "./ShowConversationLink";
@@ -14,7 +14,10 @@ it("renders correctly", () => {
  const props: PropTypesOf<typeof ReplyListN> = {
    asset: { id: "asset-id" },
    comment: { id: "comment-id" },
-    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    comments: [
+      { id: "comment-1" },
+      { id: "comment-2", showConversationLink: true },
+    ],
    onShowAll: noop,
    hasMore: false,
    disableShowAll: false,
@@ -15,7 +15,9 @@ export interface ReplyListProps {
    id: string;
  };
  comments: ReadonlyArray<
-    { id: string } & PropTypesOf<typeof CommentContainer>["comment"]
+    { id: string; showConversationLink?: boolean } & PropTypesOf<
+      typeof CommentContainer
+    >["comment"]
  >;
  onShowAll?: () => void;
  hasMore?: boolean;
@@ -52,6 +54,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
            indentLevel={props.indentLevel}
            localReply={props.localReply}
            disableReplies={props.disableReplies}
+            showConversationLink={!!comment.showConversationLink}
          />
          {getReplyListElement(props, comment)}
        </HorizontalGutter>
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
  <withPropsOnChange(HorizontalGutter)
    key="comment-1"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -24,12 +24,13 @@ exports[`renders correctly 1`] = `
      key="comment-1"
      localReply={false}
      me={null}
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <withPropsOnChange(HorizontalGutter)
    key="comment-2"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -38,6 +39,7 @@ exports[`renders correctly 1`] = `
      comment={
        Object {
          "id": "comment-2",
+          "showConversationLink": true,
        }
      }
      disableReplies={false}
@@ -45,6 +47,7 @@ exports[`renders correctly 1`] = `
      key="comment-2"
      localReply={false}
      me={null}
+      showConversationLink={true}
    />
  </withPropsOnChange(HorizontalGutter)>
 </withPropsOnChange(HorizontalGutter)>
@@ -58,7 +61,7 @@ exports[`when there is more disables load more button 1`] = `
  <withPropsOnChange(HorizontalGutter)
    key="comment-1"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -72,12 +75,13 @@ exports[`when there is more disables load more button 1`] = `
      indentLevel={1}
      key="comment-1"
      me={null}
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <withPropsOnChange(HorizontalGutter)
    key="comment-2"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -91,6 +95,7 @@ exports[`when there is more disables load more button 1`] = `
      indentLevel={1}
      key="comment-2"
      me={null}
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <Indent
@@ -123,7 +128,7 @@ exports[`when there is more renders a load more button 1`] = `
  <withPropsOnChange(HorizontalGutter)
    key="comment-1"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -137,12 +142,13 @@ exports[`when there is more renders a load more button 1`] = `
      indentLevel={1}
      key="comment-1"
      me={null}
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <withPropsOnChange(HorizontalGutter)
    key="comment-2"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -156,6 +162,7 @@ exports[`when there is more renders a load more button 1`] = `
      indentLevel={1}
      key="comment-2"
      me={null}
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <Indent
@@ -21,7 +21,7 @@ exports[`renders correctly 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-1"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -53,7 +53,7 @@ exports[`renders correctly 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-2"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -107,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-1"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -139,7 +139,7 @@ exports[`when there is more disables load more button 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-2"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -207,7 +207,7 @@ exports[`when there is more renders a load more button 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-1"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -239,7 +239,7 @@ exports[`when there is more renders a load more button 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-2"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -309,7 +309,7 @@ exports[`when use is logged in renders correctly 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-1"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -341,7 +341,7 @@ exports[`when use is logged in renders correctly 1`] = `
    <withPropsOnChange(HorizontalGutter)
      key="comment-2"
    >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
        asset={
          Object {
            "id": "asset-id",
@@ -14,7 +14,7 @@ it("renders username and body", () => {
  const props: PropTypesOf<typeof CommentContainerN> = {
    me: null,
    asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
    },
    comment: {
      id: "comment-id",
@@ -32,6 +32,7 @@ it("renders username and body", () => {
    },
    indentLevel: 1,
    showAuthPopup: noop as any,
+    setCommentID: noop as any,
    localReply: false,
    disableReplies: false,
  };
@@ -44,7 +45,7 @@ it("renders body only", () => {
  const props: PropTypesOf<typeof CommentContainerN> = {
    me: null,
    asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
    },
    comment: {
      id: "comment-id",
@@ -62,6 +63,7 @@ it("renders body only", () => {
    },
    indentLevel: 1,
    showAuthPopup: noop as any,
+    setCommentID: noop as any,
  };

  const wrapper = shallow(<CommentContainerN {...props} />);
@@ -72,7 +74,7 @@ it("hide reply button", () => {
  const props: PropTypesOf<typeof CommentContainerN> = {
    me: null,
    asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
    },
    comment: {
      id: "comment-id",
@@ -90,6 +92,7 @@ it("hide reply button", () => {
    },
    indentLevel: 1,
    showAuthPopup: noop as any,
+    setCommentID: noop as any,
    localReply: false,
    disableReplies: true,
  };
@@ -97,3 +100,35 @@ it("hide reply button", () => {
  const wrapper = shallow(<CommentContainerN {...props} />);
  expect(wrapper).toMatchSnapshot();
 });
+
+it("shows conversation link", () => {
+  const props: PropTypesOf<typeof CommentContainerN> = {
+    me: null,
+    asset: {
+      url: "http://localhost/asset",
+    },
+    comment: {
+      id: "comment-id",
+      author: {
+        id: "author-id",
+        username: "Marvin",
+      },
+      body: "Woof",
+      createdAt: "1995-12-17T03:24:00.000Z",
+      editing: {
+        edited: false,
+        editableUntil: "1995-12-17T03:24:30.000Z",
+      },
+      pending: false,
+    },
+    indentLevel: 1,
+    showAuthPopup: noop as any,
+    setCommentID: noop as any,
+    localReply: false,
+    disableReplies: false,
+    showConversationLink: true,
+  };
+
+  const wrapper = shallow(<CommentContainerN {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
@@ -1,20 +1,26 @@
 import { Localized } from "fluent-react/compat";
-import React, { Component } from "react";
+import React, { Component, MouseEvent } from "react";
 import { graphql } from "react-relay";

 import { isBeforeDate } from "talk-common/utils";
+import { getURLWithCommentID } from "talk-framework/helpers";
 import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
 import { PropTypesOf } from "talk-framework/types";
 import { CommentContainer_asset as AssetData } from "talk-stream/__generated__/CommentContainer_asset.graphql";
 import { CommentContainer_comment as CommentData } from "talk-stream/__generated__/CommentContainer_comment.graphql";
 import { CommentContainer_me as MeData } from "talk-stream/__generated__/CommentContainer_me.graphql";
 import {
+  SetCommentIDMutation,
  ShowAuthPopupMutation,
+  withSetCommentIDMutation,
  withShowAuthPopupMutation,
 } from "talk-stream/mutations";

 import { Button } from "talk-ui/components";
-import Comment from "../components/Comment";
+import Comment, {
+  ButtonsBar,
+  ShowConversationLink,
+} from "../components/Comment";
 import ReplyButton from "../components/Comment/ReplyButton";
 import EditCommentFormContainer from "./EditCommentFormContainer";
 import PermalinkButtonContainer from "./PermalinkButtonContainer";
@@ -26,6 +32,7 @@ interface InnerProps {
  asset: AssetData;
  indentLevel?: number;
  showAuthPopup: ShowAuthPopupMutation;
+  setCommentID: SetCommentIDMutation;
  /**
   * localReply will integrate the mutation response into
   * localReplies
@@ -33,6 +40,8 @@ interface InnerProps {
  localReply?: boolean;
  /** disableReplies will remove the ReplyButton */
  disableReplies?: boolean;
+  /** showConversationLink will render a link to the conversation */
+  showConversationLink?: boolean;
 }

 interface State {
@@ -113,6 +122,12 @@ export class CommentContainer extends Component<InnerProps, State> {
    return;
  }

+  private handleShowConversation = (e: MouseEvent) => {
+    e.preventDefault();
+    this.props.setCommentID({ id: this.props.comment.id });
+    return false;
+  };
+
  public render() {
    const {
      comment,
@@ -120,6 +135,7 @@ export class CommentContainer extends Component<InnerProps, State> {
      indentLevel,
      localReply,
      disableReplies,
+      showConversationLink,
    } = this.props;
    const { showReplyDialog, showEditDialog, editable } = this.state;
    if (showEditDialog) {
@@ -157,14 +173,28 @@ export class CommentContainer extends Component<InnerProps, State> {
          }
          footer={
            <>
-              {!disableReplies && (
-                <ReplyButton
-                  id={`comments-commentContainer-replyButton-${comment.id}`}
-                  onClick={this.openReplyDialog}
-                  active={showReplyDialog}
+              <ButtonsBar>
+                {!disableReplies && (
+                  <ReplyButton
+                    id={`comments-commentContainer-replyButton-${comment.id}`}
+                    onClick={this.openReplyDialog}
+                    active={showReplyDialog}
+                  />
+                )}
+                <PermalinkButtonContainer commentID={comment.id} />
+              </ButtonsBar>
+              {showConversationLink && (
+                <ShowConversationLink
+                  id={`comments-commentContainer-showConversation-${
+                    comment.id
+                  }`}
+                  onClick={this.handleShowConversation}
+                  href={getURLWithCommentID(
+                    this.props.asset.url,
+                    this.props.comment.id
+                  )}
                />
              )}
-              <PermalinkButtonContainer commentID={comment.id} />
            </>
          }
        />
@@ -181,37 +211,40 @@ export class CommentContainer extends Component<InnerProps, State> {
  }
 }

-const enhanced = withShowAuthPopupMutation(
-  withFragmentContainer<InnerProps>({
-    me: graphql`
-      fragment CommentContainer_me on User {
-        id
-      }
-    `,
-    asset: graphql`
-      fragment CommentContainer_asset on Asset {
-        ...ReplyCommentFormContainer_asset
-      }
-    `,
-    comment: graphql`
-      fragment CommentContainer_comment on Comment {
-        id
-        author {
+const enhanced = withSetCommentIDMutation(
+  withShowAuthPopupMutation(
+    withFragmentContainer<InnerProps>({
+      me: graphql`
+        fragment CommentContainer_me on User {
          id
-          username
        }
-        body
-        createdAt
-        editing {
-          edited
-          editableUntil
+      `,
+      asset: graphql`
+        fragment CommentContainer_asset on Asset {
+          url
+          ...ReplyCommentFormContainer_asset
        }
-        pending
-        ...ReplyCommentFormContainer_comment
-        ...EditCommentFormContainer_comment
-      }
-    `,
-  })(CommentContainer)
+      `,
+      comment: graphql`
+        fragment CommentContainer_comment on Comment {
+          id
+          author {
+            id
+            username
+          }
+          body
+          createdAt
+          editing {
+            edited
+            editableUntil
+          }
+          pending
+          ...ReplyCommentFormContainer_comment
+          ...EditCommentFormContainer_comment
+        }
+      `,
+    })(CommentContainer)
+  )
 );

 export type CommentContainerProps = PropTypesOf<typeof enhanced>;
@@ -1,7 +1,7 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { withLocalStateContainer } from "talk-framework/lib/relay";
-import { modifyQuery } from "talk-framework/utils";
 import { PermalinkButtonContainerLocal as Local } from "talk-stream/__generated__/PermalinkButtonContainerLocal.graphql";

 import PermalinkButton from "../components/PermalinkButton";
@@ -18,7 +18,7 @@ export const PermalinkContainer: StatelessComponent<InnerProps> = ({
  return local.assetURL ? (
    <PermalinkButton
      commentID={commentID}
-      url={modifyQuery(local.assetURL, { commentID })}
+      url={getURLWithCommentID(local.assetURL, commentID)}
    />
  ) : null;
 };
@@ -1,10 +1,10 @@
 import { Child as PymChild } from "pym.js";
-import qs from "query-string";
 import React, { MouseEvent } from "react";
 import { graphql } from "react-relay";
+
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { withContext } from "talk-framework/lib/bootstrap";
 import { withFragmentContainer } from "talk-framework/lib/relay";
-import { buildURL, parseURL } from "talk-framework/utils";
 import { PermalinkViewContainer_asset as AssetData } from "talk-stream/__generated__/PermalinkViewContainer_asset.graphql";
 import { PermalinkViewContainer_comment as CommentData } from "talk-stream/__generated__/PermalinkViewContainer_comment.graphql";
 import { PermalinkViewContainer_me as MeData } from "talk-stream/__generated__/PermalinkViewContainer_me.graphql";
@@ -32,13 +32,8 @@ class PermalinkViewContainer extends React.Component<
  };
  private getShowAllCommentsHref() {
    const { pym } = this.props;
-    const urlParts = parseURL((pym && pym.parentUrl) || window.location.href);
-    const search = qs.stringify({
-      ...qs.parse(urlParts.search),
-      commentID: undefined,
-    });
-    // Remove the commentId url param.
-    return buildURL({ ...urlParts, search });
+    const url = (pym && pym.parentUrl) || window.location.href;
+    return getURLWithCommentID(url, undefined);
  }

  public componentDidMount() {
@@ -11,11 +11,15 @@ import {
  COMMENT_SORT,
  ReplyListContainer1PaginationQueryVariables,
 } from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql";
+import { ReplyListContainer5_comment as Comment5Data } from "talk-stream/__generated__/ReplyListContainer5_comment.graphql";

 import { StatelessComponent } from "enzyme";
 import ReplyList from "../components/ReplyList";
 import LocalReplyListContainer from "./LocalReplyListContainer";

+type UnpackArray<T> = T extends ReadonlyArray<infer U> ? U : any;
+type ReplyNode5 = UnpackArray<Comment5Data["replies"]["edges"]>["node"];
+
 export interface InnerProps {
  me: MeData | null;
  asset: AssetData;
@@ -44,7 +48,11 @@ export class ReplyListContainer extends React.Component<InnerProps> {
    ) {
      return null;
    }
-    const comments = this.props.comment.replies.edges.map(edge => edge.node);
+    const comments = this.props.comment.replies.edges.map(edge => ({
+      ...edge.node,
+      // ReplyListContainer5 contains replyCount.
+      showConversationLink: ((edge.node as any) as ReplyNode5).replyCount > 0,
+    }));
    return (
      <ReplyList
        me={this.props.me}
@@ -156,6 +164,7 @@ const ReplyListContainer5 = createReplyListContainer(
          edges {
            node {
              id
+              replyCount
              ...CommentContainer_comment
              ...LocalReplyListContainer_comment
            }
@@ -14,9 +14,11 @@ exports[`hide reply button 1`] = `
    createdAt="1995-12-17T03:24:00.000Z"
    footer={
      <React.Fragment>
-        <withContext(withLocalStateContainer(PermalinkContainer))
-          commentID="comment-id"
-        />
+        <ButtonsBar>
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
      </React.Fragment>
    }
    id="comment-comment-id"
@@ -40,14 +42,16 @@ exports[`renders body only 1`] = `
    createdAt="1995-12-17T03:24:00.000Z"
    footer={
      <React.Fragment>
-        <ReplyButton
-          active={false}
-          id="comments-commentContainer-replyButton-comment-id"
-          onClick={[Function]}
-        />
-        <withContext(withLocalStateContainer(PermalinkContainer))
-          commentID="comment-id"
-        />
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
      </React.Fragment>
    }
    id="comment-comment-id"
@@ -71,14 +75,54 @@ exports[`renders username and body 1`] = `
    createdAt="1995-12-17T03:24:00.000Z"
    footer={
      <React.Fragment>
-        <ReplyButton
-          active={false}
-          id="comments-commentContainer-replyButton-comment-id"
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
+      </React.Fragment>
+    }
+    id="comment-comment-id"
+    indentLevel={1}
+    showEditedMarker={false}
+  />
+</React.Fragment>
+`;
+
+exports[`shows conversation link 1`] = `
+<React.Fragment>
+  <IndentedComment
+    author={
+      Object {
+        "id": "author-id",
+        "username": "Marvin",
+      }
+    }
+    blur={false}
+    body="Woof"
+    createdAt="1995-12-17T03:24:00.000Z"
+    footer={
+      <React.Fragment>
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
+        <ShowConversationLink
+          href="http://localhost/asset?commentID=comment-id"
+          id="comments-commentContainer-showConversation-comment-id"
          onClick={[Function]}
        />
-        <withContext(withLocalStateContainer(PermalinkContainer))
-          commentID="comment-id"
-        />
      </React.Fragment>
    }
    id="comment-comment-id"
@@ -31,9 +31,11 @@ exports[`renders correctly 1`] = `
    Array [
      Object {
        "id": "comment-1",
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
+        "showConversationLink": false,
      },
    ]
  }
@@ -77,9 +79,11 @@ exports[`when has more replies renders hasMore 1`] = `
    Array [
      Object {
        "id": "comment-1",
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
+        "showConversationLink": false,
      },
    ]
  }
@@ -122,9 +126,11 @@ exports[`when has more replies when showing all disables show all button 1`] = `
    Array [
      Object {
        "id": "comment-1",
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
+        "showConversationLink": false,
      },
    ]
  }
@@ -167,9 +173,11 @@ exports[`when has more replies when showing all enable show all button after loa
    Array [
      Object {
        "id": "comment-1",
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
+        "showConversationLink": false,
      },
    ]
  }
@@ -5,17 +5,18 @@ import { HorizontalGutter, Typography } from "talk-ui/components";
 import HistoryComment from "./HistoryComment";

 interface Comment {
-  readonly id: string;
-  readonly body: string | null;
-  readonly createdAt: any;
-  readonly replyCount: number | null;
-  readonly asset: {
-    readonly title: string | null;
+  id: string;
+  body: string | null;
+  createdAt: any;
+  replyCount: number | null;
+  asset: {
+    title: string | null;
  };
+  conversationURL: string;
+  onGotoConversation: (e: React.MouseEvent) => void;
 }

 interface CommentsHistoryProps {
-  onGoToConversation: (id: string) => void;
  comments: Comment[];
 }

@@ -26,11 +27,7 @@ const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
        <Typography variant="heading3">Comment History</Typography>
      </Localized>
      {props.comments.map(comment => (
-        <HistoryComment
-          key={comment.id}
-          comment={comment}
-          onGoToConversation={() => props.onGoToConversation(comment.id)}
-        />
+        <HistoryComment key={comment.id} {...comment} />
      ))}
    </HorizontalGutter>
  );
@@ -3,25 +3,24 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 import Timestamp from "talk-stream/components/Timestamp";
 import {
-  BaseButton,
-  ButtonIcon,
+  Button,
  Flex,
  HorizontalGutter,
+  Icon,
  Typography,
 } from "talk-ui/components";
 import HTMLContent from "../../../components/HTMLContent";
 import * as styles from "./HistoryComment.css";

 export interface HistoryCommentProps {
-  comment: {
-    body: string | null;
-    createdAt: string;
-    replyCount: number | null;
-    asset: {
-      title: string | null;
-    };
+  body: string | null;
+  createdAt: string;
+  replyCount: number | null;
+  asset: {
+    title: string | null;
  };
-  onGoToConversation: () => void;
+  conversationURL: string;
+  onGotoConversation: (e: React.MouseEvent) => void;
 }

 const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
@@ -29,60 +28,50 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
    <HorizontalGutter>
      <Flex direction="row" justifyContent="space-between">
        <Typography variant="bodyCopy" container="div">
-          {props.comment.body && (
-            <HTMLContent className={styles.body}>
-              {props.comment.body}
-            </HTMLContent>
+          {props.body && (
+            <HTMLContent className={styles.body}>{props.body}</HTMLContent>
          )}
        </Typography>
        <Flex className={styles.sideBar} direction="column">
          <Flex direction="row" alignItems="center" itemGutter="half">
-            <ButtonIcon className={styles.icon}>launch</ButtonIcon>
-            <Localized id="profile-historyComment-viewConversation">
-              <BaseButton
-                className={styles.button}
-                onClick={props.onGoToConversation}
-                anchor
-              >
-                View Conversation
-              </BaseButton>
-            </Localized>
+            <Button
+              variant="underlined"
+              target="_parent"
+              href={props.conversationURL}
+              onClick={props.onGotoConversation}
+              anchor
+            >
+              <Icon>launch</Icon>
+              <Localized id="profile-historyComment-viewConversation">
+                <span>View Conversation</span>
+              </Localized>
+            </Button>
          </Flex>
          <Flex direction="row" alignItems="center" itemGutter="half">
-            <ButtonIcon className={styles.icon}>schedule</ButtonIcon>
-            <Timestamp>{props.comment.createdAt}</Timestamp>
+            <Icon className={styles.icon}>schedule</Icon>
+            <Timestamp>{props.createdAt}</Timestamp>
          </Flex>
        </Flex>
      </Flex>
-      {!!props.comment.replyCount && (
+      {!!props.replyCount && (
        <Flex
          direction="row"
          alignItems="center"
          itemGutter="half"
          className={styles.replies}
        >
-          <ButtonIcon className={styles.icon}>reply</ButtonIcon>
+          <Icon className={styles.icon}>reply</Icon>
          <Localized
            id="profile-historyComment-replies"
-            $replyCount={props.comment.replyCount}
+            $replyCount={props.replyCount}
          >
            <span>{"Replies {$replyCount}"}</span>
          </Localized>
        </Flex>
      )}
-      <Flex
-        direction="row"
-        alignItems="center"
-        itemGutter="half"
-        className={styles.story}
-      >
-        <Localized
-          id="profile-historyComment-story"
-          $title={props.comment.asset.title}
-        >
-          <span>{"Story: {$title}"}</span>
-        </Localized>
-      </Flex>
+      <Localized id="profile-historyComment-story" $title={props.asset.title}>
+        <span className={styles.story}>{"Story: {$title}"}</span>
+      </Localized>
    </HorizontalGutter>
  );
 };
@@ -6,17 +6,18 @@ import { HorizontalGutter } from "talk-ui/components";
 import CommentsHistoryContainer from "../containers/CommentsHistoryContainer";

 export interface ProfileProps {
-  me:
-    | PropTypesOf<typeof UserBoxContainer>["me"] &
-        PropTypesOf<typeof CommentsHistoryContainer>["me"]
-    | null;
+  asset: PropTypesOf<typeof CommentsHistoryContainer>["asset"];
+  me: PropTypesOf<typeof UserBoxContainer>["me"] &
+    PropTypesOf<typeof CommentsHistoryContainer>["me"];
 }

 const Profile: StatelessComponent<ProfileProps> = props => {
  return (
    <HorizontalGutter size="double">
      <UserBoxContainer me={props.me} />
-      {props.me && <CommentsHistoryContainer me={props.me} />}
+      {props.me && (
+        <CommentsHistoryContainer me={props.me} asset={props.asset} />
+      )}
    </HorizontalGutter>
  );
 };
@@ -1,6 +1,9 @@
 import React from "react";
 import { graphql } from "react-relay";
+
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { withFragmentContainer } from "talk-framework/lib/relay";
+import { CommentsHistoryContainer_asset as AssetData } from "talk-stream/__generated__/CommentsHistoryContainer_asset.graphql";
 import { CommentsHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql";
 import {
  SetCommentIDMutation,
@@ -11,6 +14,7 @@ import CommentsHistory from "../components/CommentsHistory";
 interface CommentsHistoryContainerProps {
  setCommentID: SetCommentIDMutation;
  me: CommentsData;
+  asset: AssetData;
 }

 export class CommentsHistoryContainer extends React.Component<
@@ -20,18 +24,27 @@ export class CommentsHistoryContainer extends React.Component<
    this.props.setCommentID({ id });
  };
  public render() {
-    const comments = this.props.me.comments.edges.map(edge => edge.node);
-    return (
-      <CommentsHistory
-        comments={comments}
-        onGoToConversation={this.onGoToConversation}
-      />
-    );
+    const comments = this.props.me.comments.edges.map(edge => ({
+      ...edge.node,
+      conversationURL: getURLWithCommentID(edge.node.asset.url, edge.node.id),
+      onGotoConversation: (e: React.MouseEvent) => {
+        if (this.props.asset.id === edge.node.asset.id) {
+          this.onGoToConversation(edge.node.id);
+          e.preventDefault();
+        }
+      },
+    }));
+    return <CommentsHistory comments={comments} />;
  }
 }

 const enhanced = withSetCommentIDMutation(
  withFragmentContainer<CommentsHistoryContainerProps>({
+    asset: graphql`
+      fragment CommentsHistoryContainer_asset on Asset {
+        id
+      }
+    `,
    me: graphql`
      fragment CommentsHistoryContainer_me on User {
        comments {
@@ -42,7 +55,9 @@ const enhanced = withSetCommentIDMutation(
              createdAt
              replyCount
              asset {
+                id
                title
+                url
              }
            }
          }
@@ -2,23 +2,27 @@ import React from "react";
 import { graphql } from "react-relay";

 import { withFragmentContainer } from "talk-framework/lib/relay";
+import { ProfileContainer_asset as AssetData } from "talk-stream/__generated__/ProfileContainer_asset.graphql";
 import { ProfileContainer_me as MeData } from "talk-stream/__generated__/ProfileContainer_me.graphql";

 import Profile from "../components/Profile";

 interface ProfileContainerProps {
-  me: MeData | null;
+  me: MeData;
+  asset: AssetData;
 }

 export class StreamContainer extends React.Component<ProfileContainerProps> {
  public render() {
-    if (this.props.me) {
-      return <Profile me={this.props.me} />;
-    }
-    return null;
+    return <Profile me={this.props.me} asset={this.props.asset} />;
  }
 }
 const enhanced = withFragmentContainer<ProfileContainerProps>({
+  asset: graphql`
+    fragment ProfileContainer_asset on Asset {
+      ...CommentsHistoryContainer_asset
+    }
+  `,
  me: graphql`
    fragment ProfileContainer_me on User {
      ...UserBoxContainer_me
@@ -1,11 +1,22 @@
 import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { ReadyState } from "react-relay";
-import { graphql, QueryRenderer } from "talk-framework/lib/relay";
+
+import {
+  graphql,
+  QueryRenderer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
 import { ProfileQuery as QueryTypes } from "talk-stream/__generated__/ProfileQuery.graphql";
+import { ProfileQueryLocal as Local } from "talk-stream/__generated__/ProfileQueryLocal.graphql";
 import { Spinner } from "talk-ui/components";
+
 import ProfileContainer from "../containers/ProfileContainer";

+interface InnerProps {
+  local: Local;
+}
+
 export const render = ({
  error,
  props,
@@ -17,31 +28,53 @@ export const render = ({
  if (props) {
    if (!props.me) {
      return (
-        <div>
-          <Localized id="general-profileQuery-errorLoading">
-            <span>Error loading profile</span>
-          </Localized>
-        </div>
+        <Localized id="profile-profileQuery-errorLoadingProfile">
+          <div>Error loading profile</div>
+        </Localized>
      );
    }
-    return <ProfileContainer me={props.me} />;
+    if (!props.asset) {
+      return (
+        <Localized id="comments-profileQuery-assetNotFound">
+          <div>Asset not found</div>
+        </Localized>
+      );
+    }
+    return <ProfileContainer me={props.me} asset={props.asset} />;
  }

  return <Spinner />;
 };

-const ProfileQuery: StatelessComponent = () => (
+const ProfileQuery: StatelessComponent<InnerProps> = ({
+  local: { assetID, assetURL },
+}) => (
  <QueryRenderer<QueryTypes>
    query={graphql`
-      query ProfileQuery {
+      query ProfileQuery($assetID: ID, $assetURL: String) {
+        asset(id: $assetID, url: $assetURL) {
+          ...ProfileContainer_asset
+        }
        me {
          ...ProfileContainer_me
        }
      }
    `}
-    variables={{}}
+    variables={{
+      assetID,
+      assetURL,
+    }}
    render={render}
  />
 );

-export default ProfileQuery;
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment ProfileQueryLocal on Local {
+      assetID
+      assetURL
+    }
+  `
+)(ProfileQuery);
+
+export default enhanced;
@@ -294,32 +294,36 @@ exports[`cancel edit: edit canceled 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -364,32 +368,36 @@ exports[`cancel edit: edit canceled 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -844,32 +852,36 @@ exports[`edit a comment: edit form 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1324,32 +1336,36 @@ exports[`edit a comment: optimistic response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1655,32 +1671,36 @@ exports[`edit a comment: render stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1725,32 +1745,36 @@ exports[`edit a comment: render stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -2065,32 +2089,36 @@ exports[`edit a comment: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Edited! (from server)",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Edited! (from server)",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -2135,32 +2163,36 @@ exports[`edit a comment: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -2466,32 +2498,36 @@ exports[`shows expiry message: edit form closed 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -2536,32 +2572,36 @@ exports[`shows expiry message: edit form closed 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -2993,32 +3033,36 @@ exports[`shows expiry message: edit time expired 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -30,28 +30,6 @@ exports[`loads more comments 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -239,32 +217,36 @@ exports[`loads more comments 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -309,32 +291,36 @@ exports[`loads more comments 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -379,32 +365,36 @@ exports[`loads more comments 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Hey!",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-2"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Hey!",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-2"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -446,28 +436,6 @@ exports[`renders comment stream 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -655,32 +623,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -725,32 +697,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -30,28 +30,6 @@ exports[`renders permalink view 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -114,32 +92,36 @@ exports[`renders permalink view 1`] = `
              </div>
            </div>
            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+              className="HorizontalGutter-root HorizontalGutter-full"
            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
+              <div
+                className="HTMLContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Joining Too",
+                  }
+                }
+              />
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
              >
-                <span>
-                  Reply
-                </span>
-              </button>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  id="comments-commentContainer-replyButton-comment-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Reply
+                  </span>
+                </button>
+              </div>
            </div>
          </div>
        </div>
@@ -179,28 +161,6 @@ exports[`show all comments 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -388,32 +348,36 @@ exports[`show all comments 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -30,28 +30,6 @@ exports[`renders permalink view with unknown asset 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -30,28 +30,6 @@ exports[`renders permalink view with unknown comment 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -118,28 +96,6 @@ exports[`show all comments 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -327,32 +283,36 @@ exports[`show all comments 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -288,32 +288,36 @@ exports[`post a comment: optimistic response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "<strong>Hello world!</strong>",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-uuid-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "<strong>Hello world!</strong>",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-uuid-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -358,32 +362,36 @@ exports[`post a comment: optimistic response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -428,32 +436,36 @@ exports[`post a comment: optimistic response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -743,32 +755,36 @@ exports[`post a comment: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "<strong>Hello world! (from server)</strong>",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-x"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "<strong>Hello world! (from server)</strong>",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-x"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -813,32 +829,36 @@ exports[`post a comment: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -883,32 +903,36 @@ exports[`post a comment: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1198,32 +1222,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1268,32 +1296,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -278,32 +278,36 @@ exports[`post a reply: open reply form 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -475,32 +479,36 @@ exports[`post a reply: open reply form 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -790,32 +798,36 @@ exports[`post a reply: optimistic response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1001,32 +1013,36 @@ exports[`post a reply: optimistic response 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "<strong>Hello world!</strong>",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-uuid-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "<strong>Hello world!</strong>",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-uuid-0"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -1073,32 +1089,36 @@ exports[`post a reply: optimistic response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1388,32 +1408,36 @@ exports[`post a reply: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1462,32 +1486,36 @@ exports[`post a reply: server response 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "<strong>Hello world! (from server)</strong>",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-x"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "<strong>Hello world! (from server)</strong>",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-x"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -1534,32 +1562,36 @@ exports[`post a reply: server response 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1849,32 +1881,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -1919,32 +1955,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -30,28 +30,6 @@ exports[`renders comment stream 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -239,32 +217,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -309,32 +291,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "I like yoghurt",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-with-deep-replies"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "I like yoghurt",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-with-deep-replies"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -383,32 +369,36 @@ exports[`renders comment stream 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "I like yoghurt",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "I like yoghurt",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-with-replies"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -457,32 +447,36 @@ exports[`renders comment stream 1`] = `
                          </div>
                        </div>
                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Comment Body 3",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="HorizontalGutter-root HorizontalGutter-full"
                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-3"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="HTMLContent-root"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Comment Body 3",
+                              }
+                            }
+                          />
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-3"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                          </div>
                        </div>
                      </div>
                    </div>
@@ -527,32 +521,36 @@ exports[`renders comment stream 1`] = `
                          </div>
                        </div>
                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Comment Body 4",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="HorizontalGutter-root HorizontalGutter-full"
                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-4"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="HTMLContent-root"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Comment Body 4",
+                              }
+                            }
+                          />
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-4"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                          </div>
                        </div>
                      </div>
                    </div>
@@ -599,32 +597,36 @@ exports[`renders comment stream 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Comment Body 5",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-5"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "Comment Body 5",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-5"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -30,28 +30,6 @@ exports[`renders comment stream 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -239,32 +217,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -309,32 +291,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "What's up?",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-1"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -30,28 +30,6 @@ exports[`renders comment stream 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -239,32 +217,36 @@ exports[`renders comment stream 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -313,32 +295,36 @@ exports[`renders comment stream 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-1"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "What's up?",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-1"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -406,28 +392,6 @@ exports[`show all replies 1`] = `
        Comments
      </button>
    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        My Profile
-      </button>
-    </li>
  </ul>
  <section
    aria-labelledby="tab-COMMENTS"
@@ -615,32 +579,36 @@ exports[`show all replies 1`] = `
                  </div>
                </div>
                <div
-                  className="HTMLContent-root"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "Joining Too",
-                    }
-                  }
-                />
-                <div
-                  className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <button
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                    id="comments-commentContainer-replyButton-comment-0"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                  >
-                    <span>
-                      Reply
-                    </span>
-                  </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
                </div>
              </div>
            </div>
@@ -689,32 +657,36 @@ exports[`show all replies 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-1"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "What's up?",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-1"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -759,32 +731,36 @@ exports[`show all replies 1`] = `
                      </div>
                    </div>
                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Hey!",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="HorizontalGutter-root HorizontalGutter-full"
                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-2"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "Hey!",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-2"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
                    </div>
                  </div>
                </div>
@@ -0,0 +1,806 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
+>
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
+  >
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-COMMENTS"
+        aria-selected={true}
+        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        Comments
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-COMMENTS"
+    className="App-tabContent"
+    id="tabPane-COMMENTS"
+    role="tabpanel"
+  >
+    <div
+      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-half"
+      >
+        <div
+          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign in
+          </button>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Register
+          </button>
+        </div>
+        <div
+          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+        >
+          <div
+            aria-hidden="true"
+          >
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder "
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                  contentEditable={false}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={true}
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="submit"
+          >
+            Sign in and Join the Conversation
+          </button>
+        </div>
+      </div>
+      <div
+        aria-live="polite"
+        className="HorizontalGutter-root HorizontalGutter-full"
+        id="talk-comments-stream-log"
+        role="log"
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div
+            className="Indent-root"
+          >
+            <div
+              className=""
+            >
+              <div
+                className="Comment-root"
+                role="article"
+              >
+                <div
+                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  id="comment-comment-with-deepest-replies"
+                >
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  >
+                    <span
+                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                    >
+                      Markus
+                    </span>
+                    <div
+                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    >
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="HorizontalGutter-root HorizontalGutter-full"
+                >
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "body 0",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-with-deepest-replies"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-with-deepest-replies"
+            role="log"
+          >
+            <div
+              className="HorizontalGutter-root HorizontalGutter-full"
+            >
+              <div
+                className="Indent-root"
+              >
+                <div
+                  className="Indent-level1"
+                >
+                  <div
+                    className="Comment-root"
+                    role="article"
+                  >
+                    <div
+                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                      id="comment-comment-with-deepest-replies-1"
+                    >
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      >
+                        <span
+                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                        >
+                          Markus
+                        </span>
+                        <div
+                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        >
+                          <time
+                            className="Timestamp-root RelativeTime-root"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
+                          >
+                            2018-07-06T18:24:00.000Z
+                          </time>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="HorizontalGutter-root HorizontalGutter-full"
+                    >
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "body 1",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      >
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+                id="talk-comments-replyList-log--comment-with-deepest-replies-1"
+                role="log"
+              >
+                <div
+                  className="HorizontalGutter-root HorizontalGutter-full"
+                >
+                  <div
+                    className="Indent-root"
+                  >
+                    <div
+                      className="Indent-level2"
+                    >
+                      <div
+                        className="Comment-root"
+                        role="article"
+                      >
+                        <div
+                          className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          id="comment-comment-with-deepest-replies-2"
+                        >
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Markus
+                            </span>
+                            <div
+                              className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            >
+                              <time
+                                className="Timestamp-root RelativeTime-root"
+                                dateTime="2018-07-06T18:24:00.000Z"
+                                title="2018-07-06T18:24:00.000Z"
+                              >
+                                2018-07-06T18:24:00.000Z
+                              </time>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          className="HorizontalGutter-root HorizontalGutter-full"
+                        >
+                          <div
+                            className="HTMLContent-root"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "body 2",
+                              }
+                            }
+                          />
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          >
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="HorizontalGutter-root HorizontalGutter-full"
+                    id="talk-comments-replyList-log--comment-with-deepest-replies-2"
+                    role="log"
+                  >
+                    <div
+                      className="HorizontalGutter-root HorizontalGutter-full"
+                    >
+                      <div
+                        className="Indent-root"
+                      >
+                        <div
+                          className="Indent-level3"
+                        >
+                          <div
+                            className="Comment-root"
+                            role="article"
+                          >
+                            <div
+                              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                              id="comment-comment-with-deepest-replies-3"
+                            >
+                              <div
+                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                              >
+                                <span
+                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                >
+                                  Markus
+                                </span>
+                                <div
+                                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                >
+                                  <time
+                                    className="Timestamp-root RelativeTime-root"
+                                    dateTime="2018-07-06T18:24:00.000Z"
+                                    title="2018-07-06T18:24:00.000Z"
+                                  >
+                                    2018-07-06T18:24:00.000Z
+                                  </time>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              className="HorizontalGutter-root HorizontalGutter-full"
+                            >
+                              <div
+                                className="HTMLContent-root"
+                                dangerouslySetInnerHTML={
+                                  Object {
+                                    "__html": "body 3",
+                                  }
+                                }
+                              />
+                              <div
+                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                              >
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseDown={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Reply
+                                  </span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                        id="talk-comments-replyList-log--comment-with-deepest-replies-3"
+                        role="log"
+                      >
+                        <div
+                          className="HorizontalGutter-root HorizontalGutter-full"
+                        >
+                          <div
+                            className="Indent-root"
+                          >
+                            <div
+                              className="Indent-level4"
+                            >
+                              <div
+                                className="Comment-root"
+                                role="article"
+                              >
+                                <div
+                                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                  id="comment-comment-with-deepest-replies-4"
+                                >
+                                  <div
+                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                  >
+                                    <span
+                                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                    >
+                                      Markus
+                                    </span>
+                                    <div
+                                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                    >
+                                      <time
+                                        className="Timestamp-root RelativeTime-root"
+                                        dateTime="2018-07-06T18:24:00.000Z"
+                                        title="2018-07-06T18:24:00.000Z"
+                                      >
+                                        2018-07-06T18:24:00.000Z
+                                      </time>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  className="HorizontalGutter-root HorizontalGutter-full"
+                                >
+                                  <div
+                                    className="HTMLContent-root"
+                                    dangerouslySetInnerHTML={
+                                      Object {
+                                        "__html": "body 4",
+                                      }
+                                    }
+                                  />
+                                  <div
+                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                  >
+                                    <button
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      type="button"
+                                    >
+                                      <span>
+                                        Reply
+                                      </span>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="HorizontalGutter-root HorizontalGutter-full"
+                            id="talk-comments-replyList-log--comment-with-deepest-replies-4"
+                            role="log"
+                          >
+                            <div
+                              className="HorizontalGutter-root HorizontalGutter-full"
+                            >
+                              <div
+                                className="Indent-root"
+                              >
+                                <div
+                                  className="Indent-level5"
+                                >
+                                  <div
+                                    className="Comment-root"
+                                    role="article"
+                                  >
+                                    <div
+                                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                      id="comment-comment-with-deepest-replies-5"
+                                    >
+                                      <div
+                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                      >
+                                        <span
+                                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                        >
+                                          Markus
+                                        </span>
+                                        <div
+                                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                        >
+                                          <time
+                                            className="Timestamp-root RelativeTime-root"
+                                            dateTime="2018-07-06T18:24:00.000Z"
+                                            title="2018-07-06T18:24:00.000Z"
+                                          >
+                                            2018-07-06T18:24:00.000Z
+                                          </time>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      className="HorizontalGutter-root HorizontalGutter-full"
+                                    >
+                                      <div
+                                        className="HTMLContent-root"
+                                        dangerouslySetInnerHTML={
+                                          Object {
+                                            "__html": "body 5",
+                                          }
+                                        }
+                                      />
+                                      <div
+                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                      >
+                                        <button
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseDown={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                          onTouchEnd={[Function]}
+                                          type="button"
+                                        >
+                                          <span>
+                                            Reply
+                                          </span>
+                                        </button>
+                                      </div>
+                                      <a
+                                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                                        href="http://localhost/assets/asset-with-replies?commentID=comment-with-deepest-replies-5"
+                                        id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                        onTouchEnd={[Function]}
+                                        target="_parent"
+                                        type="button"
+                                      >
+                                        Read More of this Conversation &gt;
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;
+
+exports[`shows conversation 1`] = `
+<div
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
+>
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
+  >
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-COMMENTS"
+        aria-selected={true}
+        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        Comments
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-COMMENTS"
+    className="App-tabContent"
+    id="tabPane-COMMENTS"
+    role="tabpanel"
+  >
+    <div
+      className="PermalinkView-root"
+    >
+      <a
+        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+        href="http://localhost/"
+        id="talk-comments-permalinkView-showAllComments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        target="_parent"
+        type="button"
+      >
+        Show All Comments
+      </a>
+      <div
+        className="Indent-root"
+      >
+        <div
+          className=""
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              id="comment-comment-with-deepest-replies-5"
+            >
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                >
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
+              </div>
+            </div>
+            <div
+              className="HorizontalGutter-root HorizontalGutter-full"
+            >
+              <div
+                className="HTMLContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Joining Too",
+                  }
+                }
+              />
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Reply
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;
@@ -0,0 +1,66 @@
+import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { createSinonStub } from "talk-framework/testHelpers";
+
+import { assetWithDeepestReplies, comments } from "../fixtures";
+import create from "./create";
+
+let testRenderer: ReactTestRenderer;
+beforeEach(() => {
+  const resolvers = {
+    Query: {
+      asset: createSinonStub(
+        s => s.throws(),
+        s => s.returns(assetWithDeepestReplies)
+      ),
+      comment: createSinonStub(
+        s => s.throws(),
+        s =>
+          s
+            .withArgs(undefined, { id: "comment-with-deepest-replies-5" })
+            .returns({
+              ...comments[0],
+              id: "comment-with-deepest-replies-5",
+            })
+      ),
+    },
+  };
+
+  ({ testRenderer } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    initLocalState: localRecord => {
+      localRecord.setValue(assetWithDeepestReplies.id, "assetID");
+    },
+  }));
+});
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows conversation", async () => {
+  const mockEvent = {
+    preventDefault: sinon.mock().once(),
+  };
+
+  // Wait for loading.
+  await timeout();
+
+  testRenderer.root
+    .findByProps({
+      id:
+        "comments-commentContainer-showConversation-comment-with-deepest-replies-5",
+    })
+    .props.onClick(mockEvent);
+
+  // Wait for loading.
+  await timeout();
+
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
@@ -20,6 +20,7 @@ export const comments = [
    body: "Joining Too",
    createdAt: "2018-07-06T18:24:00.000Z",
    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
    editing: {
      edited: false,
      editableUntil: "2018-07-06T18:24:30.000Z",
@@ -31,6 +32,7 @@ export const comments = [
    body: "What's up?",
    createdAt: "2018-07-06T18:20:00.000Z",
    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
    editing: {
      edited: false,
      editableUntil: "2018-07-06T18:20:30.000Z",
@@ -42,6 +44,7 @@ export const comments = [
    body: "Hey!",
    createdAt: "2018-07-06T18:14:00.000Z",
    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
    editing: {
      edited: false,
      editableUntil: "2018-07-06T18:14:30.000Z",
@@ -53,6 +56,7 @@ export const comments = [
    body: "Comment Body 3",
    createdAt: "2018-07-06T18:14:00.000Z",
    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
    editing: {
      edited: false,
      editableUntil: "2018-07-06T18:14:30.000Z",
@@ -64,6 +68,7 @@ export const comments = [
    body: "Comment Body 4",
    createdAt: "2018-07-06T18:14:00.000Z",
    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
    editing: {
      edited: false,
      editableUntil: "2018-07-06T18:14:30.000Z",
@@ -75,6 +80,7 @@ export const comments = [
    body: "Comment Body 5",
    createdAt: "2018-07-06T18:14:00.000Z",
    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
    editing: {
      edited: false,
      editableUntil: "2018-07-06T18:14:30.000Z",
@@ -113,6 +119,7 @@ export const commentWithReplies = {
      hasNextPage: false,
    },
  },
+  replyCount: 2,
  editing: {
    edited: false,
    editableUntil: "2018-07-06T18:24:30.000Z",
@@ -133,6 +140,7 @@ export const commentWithDeepReplies = {
      hasNextPage: false,
    },
  },
+  replyCount: 2,
  editing: {
    edited: false,
    editableUntil: "2018-07-06T18:24:30.000Z",
@@ -176,6 +184,7 @@ export const commentWithDeepestReplies = {
  ...commentWithReplies,
  id: "comment-with-deepest-replies",
  body: "body 0",
+  replyCount: 1,
  replies: {
    ...commentWithReplies.replies,
    edges: [
@@ -185,6 +194,7 @@ export const commentWithDeepestReplies = {
          ...commentWithReplies,
          id: "comment-with-deepest-replies-1",
          body: "body 1",
+          replyCount: 1,
          replies: {
            ...commentWithReplies.replies,
            edges: [
@@ -194,6 +204,7 @@ export const commentWithDeepestReplies = {
                  ...commentWithReplies,
                  id: "comment-with-deepest-replies-2",
                  body: "body 2",
+                  replyCount: 1,
                  replies: {
                    ...commentWithReplies.replies,
                    edges: [
@@ -203,6 +214,7 @@ export const commentWithDeepestReplies = {
                          ...commentWithReplies,
                          id: "comment-with-deepest-replies-3",
                          body: "body 3",
+                          replyCount: 1,
                          replies: {
                            ...commentWithReplies.replies,
                            edges: [
@@ -212,6 +224,7 @@ export const commentWithDeepestReplies = {
                                  ...commentWithReplies,
                                  id: "comment-with-deepest-replies-4",
                                  body: "body 4",
+                                  replyCount: 1,
                                  replies: {
                                    ...commentWithReplies.replies,
                                    edges: [
@@ -221,6 +234,7 @@ export const commentWithDeepestReplies = {
                                          ...commentWithReplies,
                                          id: "comment-with-deepest-replies-5",
                                          body: "body 5",
+                                          replyCount: 1,
                                          replies: {
                                            ...commentWithReplies.replies,
                                            edges: [
@@ -232,6 +246,7 @@ export const commentWithDeepestReplies = {
                                                  id:
                                                    "comment-with-deepest-replies-6",
                                                  body: "body 6",
+                                                  replyCount: 1,
                                                  replies: {
                                                    ...commentWithReplies.replies,
                                                    edges: [],
@@ -34,6 +34,13 @@ const config = convict({
    default: "development",
    env: "NODE_ENV",
  },
+  enable_graphiql: {
+    doc: "When true, this will enable the GraphiQL routes",
+    format: Boolean,
+    default: false,
+    env: "ENABLE_GRAPHIQL",
+    arg: "enableGraphiQL",
+  },
  port: {
    doc: "The port to bind.",
    format: "port",
@@ -0,0 +1,5 @@
+import { RequestHandler } from "express";
+
+export const adminHandler: RequestHandler = (req, res) => {
+  res.render("admin");
+};
@@ -1,5 +0,0 @@
-import { RequestHandler } from "express";
-
-export const streamHandler: RequestHandler = (req, res) => {
-  res.render("stream");
-};
@@ -9,7 +9,7 @@ export const nocacheMiddleware: RequestHandler = (req, res, next) => {
  next();
 };

-export const cacheHeadersMiddleware = (duration: string): RequestHandler => {
+export const cacheHeadersMiddleware = (duration?: string): RequestHandler => {
  const maxAge = duration ? Math.floor(ms(duration) / 1000) : false;
  if (!maxAge) {
    return nocacheMiddleware;
@@ -1,156 +0,0 @@
-import express from "express";
-import passport from "passport";
-
-import {
-  logoutHandler,
-  signupHandler,
-} from "talk-server/app/handlers/auth/local";
-import { streamHandler } from "talk-server/app/handlers/embed/stream";
-import { apiErrorHandler } from "talk-server/app/middleware/error";
-import { errorLogger } from "talk-server/app/middleware/logging";
-import { wrapAuthn } from "talk-server/app/middleware/passport";
-import tenantMiddleware from "talk-server/app/middleware/tenant";
-import managementGraphMiddleware from "talk-server/graph/management/middleware";
-import tenantGraphMiddleware from "talk-server/graph/tenant/middleware";
-
-import {
-  cacheHeadersMiddleware,
-  nocacheMiddleware,
-} from "talk-server/app/middleware/cacheHeaders";
-import { AppOptions } from "./index";
-import playground from "./middleware/playground";
-
-async function createManagementRouter(app: AppOptions, options: RouterOptions) {
-  const router = express.Router();
-
-  // Management API
-  router.use(
-    "/graphql",
-    express.json(),
-    await managementGraphMiddleware(
-      app.schemas.management,
-      app.config,
-      app.mongo
-    )
-  );
-
-  return router;
-}
-
-async function createTenantRouter(app: AppOptions, options: RouterOptions) {
-  const router = express.Router();
-
-  // Tenant identification middleware.
-  router.use(tenantMiddleware({ cache: app.tenantCache }));
-
-  // Setup Passport middleware.
-  router.use(options.passport.initialize());
-
-  // Setup auth routes.
-  router.use("/auth", createNewAuthRouter(app, options));
-
-  // Tenant API
-  router.use(
-    "/graphql",
-    express.json(),
-    // Any users may submit their GraphQL requests with authentication, this
-    // middleware will unpack their user into the request.
-    options.passport.authenticate("jwt", { session: false }),
-    await tenantGraphMiddleware({
-      schema: app.schemas.tenant,
-      config: app.config,
-      mongo: app.mongo,
-      redis: app.redis,
-      queue: app.queue,
-    })
-  );
-
-  return router;
-}
-
-function createNewAuthRouter(app: AppOptions, options: RouterOptions) {
-  const router = express.Router();
-
-  // Mount the passport routes.
-  router.delete(
-    "/",
-    options.passport.authenticate("jwt", { session: false }),
-    logoutHandler({ redis: app.redis })
-  );
-
-  router.post(
-    "/local",
-    express.json(),
-    wrapAuthn(options.passport, app.signingConfig, "local")
-  );
-  router.post(
-    "/local/signup",
-    express.json(),
-    signupHandler({ db: app.mongo, signingConfig: app.signingConfig })
-  );
-
-  router.get("/oidc", wrapAuthn(options.passport, app.signingConfig, "oidc"));
-  router.get(
-    "/oidc/callback",
-    wrapAuthn(options.passport, app.signingConfig, "oidc")
-  );
-
-  return router;
-}
-
-async function createAPIRouter(app: AppOptions, options: RouterOptions) {
-  // Create a router.
-  const router = express.Router();
-
-  // Configure the tenant routes.
-  router.use("/tenant", await createTenantRouter(app, options));
-
-  // Configure the management routes.
-  router.use("/management", await createManagementRouter(app, options));
-
-  // General API error handler.
-  router.use(errorLogger);
-  router.use(apiErrorHandler);
-
-  return router;
-}
-
-export interface RouterOptions {
-  /**
-   * passport is the instance of the Authenticator that can be used to create
-   * and mount new authentication middleware.
-   */
-  passport: passport.Authenticator;
-}
-
-export async function createRouter(app: AppOptions, options: RouterOptions) {
-  // Create a router.
-  const router = express.Router();
-
-  router.use("/api", nocacheMiddleware, await createAPIRouter(app, options));
-
-  if (app.config.get("env") === "development") {
-    // Tenant GraphiQL
-    router.get(
-      "/tenant/graphiql",
-      playground({
-        endpoint: "/api/tenant/graphql",
-        subscriptionEndpoint: "/api/tenant/live",
-      })
-    );
-
-    // Management GraphiQL
-    router.get(
-      "/management/graphiql",
-      playground({
-        endpoint: "/api/management/graphql",
-        subscriptionEndpoint: "/api/management/live",
-      })
-    );
-  }
-
-  // Handle the stream handler.
-  router.get("/embed/stream", cacheHeadersMiddleware("1h"), streamHandler);
-
-  return router;
-}
@@ -0,0 +1,39 @@
+import express from "express";
+
+import { AppOptions } from "talk-server/app";
+import {
+  logoutHandler,
+  signupHandler,
+} from "talk-server/app/handlers/auth/local";
+import { wrapAuthn } from "talk-server/app/middleware/passport";
+import { RouterOptions } from "talk-server/app/router/types";
+
+export function createNewAuthRouter(app: AppOptions, options: RouterOptions) {
+  const router = express.Router();
+
+  // Mount the passport routes.
+  router.delete(
+    "/",
+    options.passport.authenticate("jwt", { session: false }),
+    logoutHandler({ redis: app.redis })
+  );
+
+  router.post(
+    "/local",
+    express.json(),
+    wrapAuthn(options.passport, app.signingConfig, "local")
+  );
+  router.post(
+    "/local/signup",
+    express.json(),
+    signupHandler({ db: app.mongo, signingConfig: app.signingConfig })
+  );
+
+  router.get("/oidc", wrapAuthn(options.passport, app.signingConfig, "oidc"));
+  router.get(
+    "/oidc/callback",
+    wrapAuthn(options.passport, app.signingConfig, "oidc")
+  );
+
+  return router;
+}
@@ -0,0 +1,34 @@
+import express from "express";
+import passport from "passport";
+
+import { AppOptions } from "talk-server/app";
+import { apiErrorHandler } from "talk-server/app/middleware/error";
+import { errorLogger } from "talk-server/app/middleware/logging";
+
+import { createManagementRouter } from "./management";
+import { createTenantRouter } from "./tenant";
+
+export interface RouterOptions {
+  /**
+   * passport is the instance of the Authenticator that can be used to create
+   * and mount new authentication middleware.
+   */
+  passport: passport.Authenticator;
+}
+
+export async function createAPIRouter(app: AppOptions, options: RouterOptions) {
+  // Create a router.
+  const router = express.Router();
+
+  // Configure the tenant routes.
+  router.use("/tenant", await createTenantRouter(app, options));
+
+  // Configure the management routes.
+  router.use("/management", await createManagementRouter(app));
+
+  // General API error handler.
+  router.use(errorLogger);
+  router.use(apiErrorHandler);
+
+  return router;
+}
@@ -0,0 +1,21 @@
+import express from "express";
+
+import { AppOptions } from "talk-server/app";
+import managementGraphMiddleware from "talk-server/graph/management/middleware";
+
+export async function createManagementRouter(app: AppOptions) {
+  const router = express.Router();
+
+  // Management API
+  router.use(
+    "/graphql",
+    express.json(),
+    await managementGraphMiddleware(
+      app.schemas.management,
+      app.config,
+      app.mongo
+    )
+  );
+
+  return router;
+}
@@ -0,0 +1,42 @@
+import express from "express";
+
+import { AppOptions } from "talk-server/app";
+import tenantMiddleware from "talk-server/app/middleware/tenant";
+import { RouterOptions } from "talk-server/app/router/types";
+import tenantGraphMiddleware from "talk-server/graph/tenant/middleware";
+
+import { createNewAuthRouter } from "./auth";
+
+export async function createTenantRouter(
+  app: AppOptions,
+  options: RouterOptions
+) {
+  const router = express.Router();
+
+  // Tenant identification middleware.
+  router.use(tenantMiddleware({ cache: app.tenantCache }));
+
+  // Setup Passport middleware.
+  router.use(options.passport.initialize());
+
+  // Setup auth routes.
+  router.use("/auth", createNewAuthRouter(app, options));
+
+  // Tenant API
+  router.use(
+    "/graphql",
+    express.json(),
+    // Any users may submit their GraphQL requests with authentication, this
+    // middleware will unpack their user into the request.
+    options.passport.authenticate("jwt", { session: false }),
+    await tenantGraphMiddleware({
+      schema: app.schemas.tenant,
+      config: app.config,
+      mongo: app.mongo,
+      redis: app.redis,
+      queue: app.queue,
+    })
+  );
+
+  return router;
+}
@@ -0,0 +1,29 @@
+import express from "express";
+
+import { cacheHeadersMiddleware } from "talk-server/app/middleware/cacheHeaders";
+
+export interface ClientTargetHandlerOptions {
+  /**
+   * view is the name of the template to render.
+   */
+  view: string;
+
+  /**
+   * cacheDuration is the cache duration that a given request should be cached for.
+   */
+  cacheDuration?: string;
+}
+
+export function createClientTargetRouter({
+  view,
+  cacheDuration = "1h",
+}: ClientTargetHandlerOptions) {
+  // Create a router.
+  const router = express.Router();
+
+  router.get("/", cacheHeadersMiddleware(cacheDuration), (req, res) =>
+    res.render(view)
+  );
+
+  return router;
+}
@@ -0,0 +1,60 @@
+import express, { Router } from "express";
+
+import { AppOptions } from "talk-server/app";
+import { nocacheMiddleware } from "talk-server/app/middleware/cacheHeaders";
+import playground from "talk-server/app/middleware/playground";
+import { RouterOptions } from "talk-server/app/router/types";
+import logger from "talk-server/logger";
+
+import { createAPIRouter } from "./api";
+import { createClientTargetRouter } from "./client";
+
+export async function createRouter(app: AppOptions, options: RouterOptions) {
+  // Create a router.
+  const router = express.Router();
+
+  router.use("/api", nocacheMiddleware, await createAPIRouter(app, options));
+
+  // Attach the GraphiQL if enabled.
+  if (app.config.get("enable_graphiql")) {
+    attachGraphiQL(router, app);
+  }
+
+  // Add the client targets.
+  router.get("/embed/stream", createClientTargetRouter({ view: "stream" }));
+  router.get("/admin", createClientTargetRouter({ view: "admin" }));
+
+  return router;
+}
+
+/**
+ * attachGraphiQL will attach the GraphiQL routes to the router.
+ *
+ * @param router the router to attach the GraphiQL routes to
+ * @param app the application to read the configuration from
+ */
+function attachGraphiQL(router: Router, app: AppOptions) {
+  if (app.config.get("env") === "production") {
+    logger.warn(
+      "enable_graphiql is enabled, but we're in production mode, this is not recommended"
+    );
+  }
+
+  // Tenant GraphiQL
+  router.get(
+    "/tenant/graphiql",
+    playground({
+      endpoint: "/api/tenant/graphql",
+      subscriptionEndpoint: "/api/tenant/live",
+    })
+  );
+
+  // Management GraphiQL
+  router.get(
+    "/management/graphiql",
+    playground({
+      endpoint: "/api/management/graphql",
+      subscriptionEndpoint: "/api/management/live",
+    })
+  );
+}
@@ -0,0 +1,9 @@
+import passport from "passport";
+
+export interface RouterOptions {
+  /**
+   * passport is the instance of the Authenticator that can be used to create
+   * and mount new authentication middleware.
+   */
+  passport: passport.Authenticator;
+}
@@ -12,12 +12,9 @@ general-userBoxAuthenticated-signedInAs =
 general-userBoxAuthenticated-notYou =
  Not you? <button>Sign Out</button>

-## General App Tabs
-general-app-commentTab = Comments
+general-app-commentsTab = Comments
 general-app-myProfileTab = My Profile

-general-profileQuery-errorLoading = Error loading profile
-
 ## Comments Tab

 comments-streamQuery-assetNotFound = Asset not found
@@ -74,9 +71,12 @@ comments-editCommentForm-rte =
 comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
 comments-editedMarker-edited = Edited
+comments-showConversationLink-readMore = Read More of this Conversation >

 ## Profile Tab
 profile-historyComment-viewConversation = View Conversation
 profile-historyComment-replies = Replies {$replyCount}
 profile-historyComment-commentHistory = Comment History
 profile-historyComment-story = Story: {$title}
+profile-historyComment-errorLoadingProfile = Error loading profile
+profile-historyComment-assetNotFound = Asset not found
@@ -0,0 +1,5 @@
+declare module "farce" {
+  // TODO: provide better typings.
+  export class BrowserProtocol {}
+  export class queryMiddleware {}
+}
@@ -0,0 +1,6 @@
+declare module "found-relay" {
+  import { Environment } from "relay-runtime";
+  export class Resolver {
+    constructor(relayEnvironment: Environment);
+  }
+}
				`@@ -0,0 +1 @@`
				`export { default as initLocalState } from "./initLocalState";`