Merge branch 'next' into next-respect

2026-07-03 07:28:29 +08:00 · 2018-10-04 19:15:00 +02:00
parent ef91eaab20 929dfb9989
commit bd1d677b63
102 changed files with 13134 additions and 9240 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,7 @@
+type Local {
+  authToken: String
+}
+
+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";
@@ -14,3 +14,7 @@
 .root {
  width: 100%;
 }
+
+.tabContent {
+  padding-top: var(--spacing-unit);
+}
@@ -1,14 +1,9 @@
 import { shallow } from "enzyme";
 import React from "react";

-import { PropTypesOf } from "talk-framework/types";
-
-import App from "./App";
+import AppContainer from "../containers/AppContainer";

 it("renders comments", () => {
-  const props: PropTypesOf<typeof App> = {
-    activeTab: "COMMENTS",
-  };
-  const wrapper = shallow(<App {...props} />);
+  const wrapper = shallow(<AppContainer />);
  expect(wrapper).toMatchSnapshot();
 });
@@ -1,28 +1,57 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
+import {
+  HorizontalGutter,
+  Tab,
+  TabBar,
+  TabContent,
+  TabPane,
+} from "talk-ui/components";

-import { Flex } 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" | "%future added value";
+  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 => {
-  let view: React.ReactElement<any>;
-  switch (props.activeTab) {
-    case "COMMENTS":
-      view = <CommentsPaneContainer />;
-      break;
-    default:
-      throw new Error(`Unknown tab ${props.activeTab}`);
-  }
  return (
-    <Flex justifyContent="center" className={styles.root}>
-      {view}
-    </Flex>
+    <HorizontalGutter className={styles.root}>
+      <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
+        <CommentsTab tabId="COMMENTS" />
+        <MyProfileTab tabId="PROFILE" />
+      </TabBar>
+      <TabContent activeTab={props.activeTab} className={styles.tabContent}>
+        <TabPane tabId="COMMENTS">
+          <CommentsPaneContainer />
+        </TabPane>
+        <TabPane tabId="PROFILE">
+          <ProfileQuery />
+        </TabPane>
+      </TabContent>
+    </HorizontalGutter>
  );
 };

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import dompurify from "dompurify";
 import React, { StatelessComponent } from "react";

@@ -5,11 +6,15 @@ import styles from "./HTMLContent.css";

 interface HTMLContentProps {
  children: string;
+  className?: string;
 }

-const HTMLContent: StatelessComponent<HTMLContentProps> = ({ children }) => (
+const HTMLContent: StatelessComponent<HTMLContentProps> = ({
+  children,
+  className,
+}) => (
  <div
-    className={styles.root}
+    className={cn(styles.root, className)}
    dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
  />
 );
@@ -1,10 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`renders comments 1`] = `
-<withPropsOnChange(Flex)
-  className="App-root"
-  justifyContent="center"
->
-  <withContext(withLocalStateContainer(CommentsPaneContainer)) />
-</withPropsOnChange(Flex)>
-`;
+exports[`renders comments 1`] = `<Consumer />`;
@@ -1,20 +1,33 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React from "react";

 import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql";
+import {
+  SetActiveTabInput,
+  SetActiveTabMutation,
+  withSetActiveTabMutation,
+} from "talk-stream/mutations";

 import App from "../components/App";

 interface InnerProps {
  local: Local;
+  setActiveTab: SetActiveTabMutation;
 }

-const AppContainer: StatelessComponent<InnerProps> = ({
-  local: { activeTab },
-}) => {
-  return <App activeTab={activeTab} />;
-};
+class AppContainer extends React.Component<InnerProps> {
+  private handleSetActiveTab = (tab: SetActiveTabInput["tab"]) => {
+    this.props.setActiveTab({ tab });
+  };
+
+  public render() {
+    const {
+      local: { activeTab },
+    } = this.props;
+
+    return <App activeTab={activeTab} onTabClick={this.handleSetActiveTab} />;
+  }
+}

 const enhanced = withLocalStateContainer(
  graphql`
@@ -22,6 +35,6 @@ const enhanced = withLocalStateContainer(
      activeTab
    }
  `
-)(AppContainer);
+)(withSetActiveTabMutation(AppContainer));

 export default enhanced;
@@ -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,
@@ -3,7 +3,7 @@ import { commitLocalUpdate, Environment } from "relay-runtime";
 import { createMutationContainer, LOCAL_ID } from "talk-framework/lib/relay";

 export interface SetActiveTabInput {
-  tab: "COMMENTS";
+  tab: "COMMENTS" | "PROFILE" | "%future added value";
 }

 export type SetActiveTabMutation = (input: SetActiveTabInput) => Promise<void>;
@@ -18,6 +18,7 @@ export async function commit(
  return commitLocalUpdate(environment, store => {
    const record = store.get(LOCAL_ID)!;
    record.setValue(input.id, "commentID");
+    record.setValue("COMMENTS", "activeTab");
    if (pym) {
      // This sets the comment id on the parent url.
      pym.sendMessage("setCommentID", input.id || "");
@@ -27,6 +27,7 @@ export {
  SetAuthPopupStateMutation,
 } from "./SetAuthPopupStateMutation";
 export {
+  SetActiveTabInput,
  withSetActiveTabMutation,
  SetActiveTabMutation,
 } from "./SetActiveTabMutation";
@@ -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,9 +15,11 @@ export interface ReplyListProps {
    id: string;
  };
  comments: ReadonlyArray<
-    { id: string; replyListElement?: React.ReactElement<any> } & PropTypesOf<
-      typeof CommentContainer
-    >["comment"]
+    {
+      id: string;
+      replyListElement?: React.ReactElement<any>;
+      showConversationLink?: boolean;
+    } & PropTypesOf<typeof CommentContainer>["comment"]
  >;
  settings: PropTypesOf<typeof CommentContainer>["settings"];
  onShowAll?: () => void;
@@ -45,6 +47,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
            indentLevel={props.indentLevel}
            localReply={props.localReply}
            disableReplies={props.disableReplies}
+            showConversationLink={!!comment.showConversationLink}
          />
          {comment.replyListElement}
        </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",
@@ -32,12 +32,13 @@ exports[`renders correctly 1`] = `
          },
        }
      }
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <withPropsOnChange(HorizontalGutter)
    key="comment-2"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -46,6 +47,7 @@ exports[`renders correctly 1`] = `
      comment={
        Object {
          "id": "comment-2",
+          "showConversationLink": true,
        }
      }
      disableReplies={false}
@@ -61,6 +63,7 @@ exports[`renders correctly 1`] = `
          },
        }
      }
+      showConversationLink={true}
    />
  </withPropsOnChange(HorizontalGutter)>
 </withPropsOnChange(HorizontalGutter)>
@@ -74,7 +77,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",
@@ -96,12 +99,13 @@ exports[`when there is more disables load more button 1`] = `
          },
        }
      }
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <withPropsOnChange(HorizontalGutter)
    key="comment-2"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -123,6 +127,7 @@ exports[`when there is more disables load more button 1`] = `
          },
        }
      }
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <Indent
@@ -155,7 +160,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",
@@ -177,12 +182,13 @@ exports[`when there is more renders a load more button 1`] = `
          },
        }
      }
+      showConversationLink={false}
    />
  </withPropsOnChange(HorizontalGutter)>
  <withPropsOnChange(HorizontalGutter)
    key="comment-2"
  >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
      asset={
        Object {
          "id": "asset-id",
@@ -204,6 +210,7 @@ exports[`when there is more renders a load more button 1`] = `
          },
        }
      }
+      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",
@@ -69,7 +69,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",
@@ -139,7 +139,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",
@@ -187,7 +187,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",
@@ -271,7 +271,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",
@@ -319,7 +319,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",
@@ -405,7 +405,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",
@@ -453,7 +453,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",
@@ -38,6 +38,7 @@ it("renders username and body", () => {
    },
    indentLevel: 1,
    showAuthPopup: noop as any,
+    setCommentID: noop as any,
    localReply: false,
    disableReplies: false,
  };
@@ -50,7 +51,7 @@ it("renders body only", () => {
  const props: PropTypesOf<typeof CommentContainerN> = {
    me: null,
    asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
    },
    comment: {
      id: "comment-id",
@@ -74,6 +75,7 @@ it("renders body only", () => {
    },
    indentLevel: 1,
    showAuthPopup: noop as any,
+    setCommentID: noop as any,
  };

  const wrapper = shallow(<CommentContainerN {...props} />);
@@ -84,7 +86,7 @@ it("hide reply button", () => {
  const props: PropTypesOf<typeof CommentContainerN> = {
    me: null,
    asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
    },
    comment: {
      id: "comment-id",
@@ -108,6 +110,7 @@ it("hide reply button", () => {
    },
    indentLevel: 1,
    showAuthPopup: noop as any,
+    setCommentID: noop as any,
    localReply: false,
    disableReplies: true,
  };
@@ -115,3 +118,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,8 +1,9 @@
 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";
@@ -10,13 +11,18 @@ import { CommentContainer_comment as CommentData } from "talk-stream/__generated
 import { CommentContainer_me as MeData } from "talk-stream/__generated__/CommentContainer_me.graphql";
 import { CommentContainer_settings as SettingsData } from "talk-stream/__generated__/CommentContainer_settings.graphql";
 import {
+  SetCommentIDMutation,
  ShowAuthPopupMutation,
+  withSetCommentIDMutation,
  withShowAuthPopupMutation,
 } from "talk-stream/mutations";

 import ReactionButtonContainer from "talk-stream/tabs/comments/containers/ReactionButtonContainer";
 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";
@@ -29,6 +35,7 @@ interface InnerProps {
  settings: SettingsData;
  indentLevel?: number;
  showAuthPopup: ShowAuthPopupMutation;
+  setCommentID: SetCommentIDMutation;
  /**
   * localReply will integrate the mutation response into
   * localReplies
@@ -36,6 +43,8 @@ interface InnerProps {
  localReply?: boolean;
  /** disableReplies will remove the ReplyButton */
  disableReplies?: boolean;
+  /** showConversationLink will render a link to the conversation */
+  showConversationLink?: boolean;
 }

 interface State {
@@ -116,6 +125,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,
@@ -124,6 +139,7 @@ export class CommentContainer extends Component<InnerProps, State> {
      indentLevel,
      localReply,
      disableReplies,
+      showConversationLink,
    } = this.props;
    const { showReplyDialog, showEditDialog, editable } = this.state;
    if (showEditDialog) {
@@ -161,18 +177,32 @@ export class CommentContainer extends Component<InnerProps, State> {
          }
          footer={
            <>
-              {!disableReplies && (
-                <ReplyButton
-                  id={`comments-commentContainer-replyButton-${comment.id}`}
-                  onClick={this.openReplyDialog}
-                  active={showReplyDialog}
-                />
-              )}
-              <PermalinkButtonContainer commentID={comment.id} />
-              {this.props.me && (
-                <ReactionButtonContainer
-                  comment={comment}
-                  settings={settings}
+              <ButtonsBar>
+                {!disableReplies && (
+                  <ReplyButton
+                    id={`comments-commentContainer-replyButton-${comment.id}`}
+                    onClick={this.openReplyDialog}
+                    active={showReplyDialog}
+                  />
+                )}
+                <PermalinkButtonContainer commentID={comment.id} />
+                {this.props.me && (
+                  <ReactionButtonContainer
+                    comment={comment}
+                    settings={settings}
+                  />
+                )}
+              </ButtonsBar>
+              {showConversationLink && (
+                <ShowConversationLink
+                  id={`comments-commentContainer-showConversation-${
+                    comment.id
+                  }`}
+                  onClick={this.handleShowConversation}
+                  href={getURLWithCommentID(
+                    this.props.asset.url,
+                    this.props.comment.id
+                  )}
                />
              )}
            </>
@@ -191,43 +221,46 @@ 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
-        ...ReactionButtonContainer_comment
-      }
-    `,
-    settings: graphql`
-      fragment CommentContainer_settings on Settings {
-        ...ReactionButtonContainer_settings
-      }
-    `,
-  })(CommentContainer)
+      `,
+      comment: graphql`
+        fragment CommentContainer_comment on Comment {
+          id
+          author {
+            id
+            username
+          }
+          body
+          createdAt
+          editing {
+            edited
+            editableUntil
+          }
+          pending
+          ...ReplyCommentFormContainer_comment
+          ...EditCommentFormContainer_comment
+          ...ReactionButtonContainer_comment
+        }
+      `,
+      settings: graphql`
+        fragment CommentContainer_settings on Settings {
+          ...ReactionButtonContainer_settings
+        }
+      `,
+    })(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";
@@ -34,13 +34,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() {
@@ -12,12 +12,16 @@ 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 { FragmentKeys } from "talk-framework/lib/relay/types";
 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 BaseProps {
  me: MeData | null;
  asset: AssetData;
@@ -62,6 +66,8 @@ export class ReplyListContainer extends React.Component<InnerProps> {
          settings={this.props.settings}
        />
      ),
+      // ReplyListContainer5 contains replyCount.
+      showConversationLink: ((edge.node as any) as ReplyNode5).replyCount > 0,
    }));
    return (
      <ReplyList
@@ -181,6 +187,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"
@@ -51,6 +51,7 @@ exports[`renders correctly 1`] = `
            }
          }
        />,
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
@@ -75,6 +76,7 @@ exports[`renders correctly 1`] = `
            }
          }
        />,
+        "showConversationLink": false,
      },
    ]
  }
@@ -127,10 +129,12 @@ exports[`when has more replies renders hasMore 1`] = `
      Object {
        "id": "comment-1",
        "replyListElement": undefined,
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
        "replyListElement": undefined,
+        "showConversationLink": false,
      },
    ]
  }
@@ -182,10 +186,12 @@ exports[`when has more replies when showing all disables show all button 1`] = `
      Object {
        "id": "comment-1",
        "replyListElement": undefined,
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
        "replyListElement": undefined,
+        "showConversationLink": false,
      },
    ]
  }
@@ -237,10 +243,12 @@ exports[`when has more replies when showing all enable show all button after loa
      Object {
        "id": "comment-1",
        "replyListElement": undefined,
+        "showConversationLink": false,
      },
      Object {
        "id": "comment-2",
        "replyListElement": undefined,
+        "showConversationLink": false,
      },
    ]
  }
@@ -0,0 +1,36 @@
+import { Localized } from "fluent-react/compat";
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+import HistoryComment from "./HistoryComment";
+
+interface Comment {
+  id: string;
+  body: string | null;
+  createdAt: any;
+  replyCount: number | null;
+  asset: {
+    title: string | null;
+  };
+  conversationURL: string;
+  onGotoConversation: (e: React.MouseEvent) => void;
+}
+
+interface CommentsHistoryProps {
+  comments: Comment[];
+}
+
+const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
+  return (
+    <HorizontalGutter>
+      <Localized id="profile-historyComment-commentHistory">
+        <Typography variant="heading3">Comment History</Typography>
+      </Localized>
+      {props.comments.map(comment => (
+        <HistoryComment key={comment.id} {...comment} />
+      ))}
+    </HorizontalGutter>
+  );
+};
+
+export default CommentsHistory;
@@ -0,0 +1,18 @@
+.icon {
+  color: var(--palette-text-secondary);
+}
+
+.button,
+.replies,
+.story {
+  composes: button from "talk-ui/shared/typography.css";
+}
+
+.sideBar {
+  min-width: 180px;
+  padding-left: var(--spacing-unit);
+}
+
+.body {
+  word-break: break-all;
+}
@@ -0,0 +1,79 @@
+import { Localized } from "fluent-react/compat";
+import * as React from "react";
+import { StatelessComponent } from "react";
+import Timestamp from "talk-stream/components/Timestamp";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  Icon,
+  Typography,
+} from "talk-ui/components";
+import HTMLContent from "../../../components/HTMLContent";
+import * as styles from "./HistoryComment.css";
+
+export interface HistoryCommentProps {
+  body: string | null;
+  createdAt: string;
+  replyCount: number | null;
+  asset: {
+    title: string | null;
+  };
+  conversationURL: string;
+  onGotoConversation: (e: React.MouseEvent) => void;
+}
+
+const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
+  return (
+    <HorizontalGutter>
+      <Flex direction="row" justifyContent="space-between">
+        <Typography variant="bodyCopy" container="div">
+          {props.body && (
+            <HTMLContent className={styles.body}>{props.body}</HTMLContent>
+          )}
+        </Typography>
+        <Flex className={styles.sideBar} direction="column">
+          <Flex direction="row" alignItems="center" itemGutter="half">
+            <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">
+            <Icon className={styles.icon}>schedule</Icon>
+            <Timestamp>{props.createdAt}</Timestamp>
+          </Flex>
+        </Flex>
+      </Flex>
+      {!!props.replyCount && (
+        <Flex
+          direction="row"
+          alignItems="center"
+          itemGutter="half"
+          className={styles.replies}
+        >
+          <Icon className={styles.icon}>reply</Icon>
+          <Localized
+            id="profile-historyComment-replies"
+            $replyCount={props.replyCount}
+          >
+            <span>{"Replies {$replyCount}"}</span>
+          </Localized>
+        </Flex>
+      )}
+      <Localized id="profile-historyComment-story" $title={props.asset.title}>
+        <span className={styles.story}>{"Story: {$title}"}</span>
+      </Localized>
+    </HorizontalGutter>
+  );
+};
+
+export default HistoryComment;
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { PropTypesOf } from "talk-framework/types";
+import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
+import { HorizontalGutter } from "talk-ui/components";
+import CommentsHistoryContainer from "../containers/CommentsHistoryContainer";
+
+export interface ProfileProps {
+  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} asset={props.asset} />
+      )}
+    </HorizontalGutter>
+  );
+};
+
+export default Profile;
@@ -0,0 +1,70 @@
+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,
+  withSetCommentIDMutation,
+} from "talk-stream/mutations";
+import CommentsHistory from "../components/CommentsHistory";
+
+interface CommentsHistoryContainerProps {
+  setCommentID: SetCommentIDMutation;
+  me: CommentsData;
+  asset: AssetData;
+}
+
+export class CommentsHistoryContainer extends React.Component<
+  CommentsHistoryContainerProps
+> {
+  private onGoToConversation = (id: string) => {
+    this.props.setCommentID({ id });
+  };
+  public render() {
+    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 {
+          edges {
+            node {
+              id
+              body
+              createdAt
+              replyCount
+              asset {
+                id
+                title
+                url
+              }
+            }
+          }
+        }
+      }
+    `,
+  })(CommentsHistoryContainer)
+);
+
+export default enhanced;
@@ -0,0 +1,34 @@
+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;
+  asset: AssetData;
+}
+
+export class StreamContainer extends React.Component<ProfileContainerProps> {
+  public render() {
+    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
+      ...CommentsHistoryContainer_me
+    }
+  `,
+})(StreamContainer);
+
+export default enhanced;
@@ -0,0 +1,80 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { ReadyState } from "react-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,
+}: ReadyState<QueryTypes["response"]>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  if (props) {
+    if (!props.me) {
+      return (
+        <Localized id="profile-profileQuery-errorLoadingProfile">
+          <div>Error loading profile</div>
+        </Localized>
+      );
+    }
+    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<InnerProps> = ({
+  local: { assetID, assetURL },
+}) => (
+  <QueryRenderer<QueryTypes>
+    query={graphql`
+      query ProfileQuery($assetID: ID, $assetURL: String) {
+        asset(id: $assetID, url: $assetURL) {
+          ...ProfileContainer_asset
+        }
+        me {
+          ...ProfileContainer_me
+        }
+      }
+    `}
+    variables={{
+      assetID,
+      assetURL,
+    }}
+    render={render}
+  />
+);
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment ProfileQueryLocal on Local {
+      assetID
+      assetURL
+    }
+  `
+)(ProfileQuery);
+
+export default enhanced;
@@ -2,280 +2,98 @@

 exports[`renders permalink view 1`] = `
 <div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
 >
-  <div
-    className="PermalinkView-root"
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
  >
-    <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"
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
    >
-      Show All Comments
-    </a>
-    <div
-      className="Indent-root"
-    >
-      <div
-        className=""
+      <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"
      >
-        <div
-          className="Comment-root"
-          role="article"
-        >
-          <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-            id="comment-comment-0"
-          >
-            <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="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <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>
-  </div>
-</div>
-`;
-
-exports[`show all comments 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+        Comments
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-COMMENTS"
+    className="App-tabContent"
+    id="tabPane-COMMENTS"
+    role="tabpanel"
  >
    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
+      className="PermalinkView-root"
    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      <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"
      >
-        <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>
+        Show All Comments
+      </a>
      <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+        className="Indent-root"
      >
        <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"
+          className=""
        >
          <div
-            className=""
+            className="Comment-root"
+            role="article"
          >
            <div
-              className="Comment-root"
-              role="article"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              id="comment-comment-0"
            >
              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                id="comment-comment-0"
+                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-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
                  >
-                    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>
+                    2018-07-06T18:24:00.000Z
+                  </time>
                </div>
              </div>
+            </div>
+            <div
+              className="HorizontalGutter-root HorizontalGutter-full"
+            >
              <div
                className="HTMLContent-root"
                dangerouslySetInnerHTML={
@@ -285,7 +103,7 @@ exports[`show all comments 1`] = `
                }
              />
              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
              >
                <button
                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -309,6 +127,264 @@ exports[`show all comments 1`] = `
        </div>
      </div>
    </div>
-  </div>
+  </section>
+</div>
+`;
+
+exports[`show all comments 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-0"
+                >
+                  <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-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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
@@ -2,10 +2,44 @@

 exports[`renders permalink view with unknown asset 1`] = `
 <div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
 >
-  <div>
-    Asset not found
-  </div>
+  <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>
+      Asset not found
+    </div>
+  </section>
 </div>
 `;
@@ -2,252 +2,324 @@

 exports[`renders permalink view with unknown comment 1`] = `
 <div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
 >
-  <div
-    className="PermalinkView-root"
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
  >
-    <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"
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
    >
-      Show All Comments
-    </a>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      <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"
    >
-      Comment not found
-    </p>
-  </div>
+      <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>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Comment not found
+      </p>
+    </div>
+  </section>
 </div>
 `;

 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  <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 HorizontalGutter-half"
+      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
    >
      <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"
+        className="HorizontalGutter-root HorizontalGutter-half"
      >
        <div
-          aria-hidden="true"
+          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
        >
-          <div>
+          <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=" 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-0"
+                className="Comment-root"
+                role="article"
              >
                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  id="comment-comment-0"
                >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                  >
-                    Markus
-                  </span>
                  <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                  >
-                    <time
-                      className="Timestamp-root RelativeTime-root"
-                      dateTime="2018-07-06T18:24:00.000Z"
-                      title="2018-07-06T18:24:00.000Z"
+                    <span
+                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                    >
-                      2018-07-06T18:24:00.000Z
-                    </time>
+                      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-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
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <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>
      </div>
    </div>
-  </div>
+  </section>
 </div>
 `;
@@ -2,290 +2,332 @@

 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  <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 HorizontalGutter-half"
+      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
    >
      <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"
+        className="HorizontalGutter-root HorizontalGutter-half"
      >
        <div
-          aria-hidden="true"
+          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
        >
-          <div>
+          <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=" 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-0"
+                className="Comment-root"
+                role="article"
              >
                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  id="comment-comment-0"
                >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                  >
-                    Markus
-                  </span>
                  <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                  >
-                    <time
-                      className="Timestamp-root RelativeTime-root"
-                      dateTime="2018-07-06T18:24:00.000Z"
-                      title="2018-07-06T18:24:00.000Z"
+                    <span
+                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                    >
-                      2018-07-06T18:24:00.000Z
-                    </time>
+                      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>
-              <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <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="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <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-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>
          </div>
        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
        <div
-          className="Indent-root"
+          className="HorizontalGutter-root HorizontalGutter-full"
        >
          <div
-            className=""
+            className="Indent-root"
          >
            <div
-              className="Comment-root"
-              role="article"
+              className=""
            >
              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                id="comment-comment-1"
+                className="Comment-root"
+                role="article"
              >
                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  id="comment-comment-1"
                >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                  >
-                    Lukas
-                  </span>
                  <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                  >
-                    <time
-                      className="Timestamp-root RelativeTime-root"
-                      dateTime="2018-07-06T18:24:00.000Z"
-                      title="2018-07-06T18:24:00.000Z"
+                    <span
+                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                    >
-                      2018-07-06T18:24:00.000Z
-                    </time>
+                      Lukas
+                    </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>
-              <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <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="HorizontalGutter-root HorizontalGutter-full"
                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <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-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>
      </div>
    </div>
-  </div>
+  </section>
 </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>
+`;
@@ -63,6 +63,7 @@ it("show all comments", async () => {
  const mockEvent = {
    preventDefault: sinon.mock().once(),
  };
+
  testRenderer.root
    .findByProps({
      id: "talk-comments-permalinkView-showAllComments",
@@ -0,0 +1,67 @@
+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, settings } 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",
+            })
+      ),
+      settings: sinon.stub().returns(settings),
+    },
+  };
+
+  ({ 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();
+});
@@ -26,6 +26,7 @@ export const baseComment = {
  body: "Comment Body",
  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",
@@ -90,6 +91,7 @@ export const commentWithReplies = {
      hasNextPage: false,
    },
  },
+  replyCount: 2,
 };

 export const commentWithDeepReplies = {
@@ -106,12 +108,14 @@ export const commentWithDeepReplies = {
      hasNextPage: false,
    },
  },
+  replyCount: 2,
 };

 export const commentWithDeepestReplies = {
  ...baseComment,
  id: "comment-with-deepest-replies",
  body: "body 0",
+  replyCount: 1,
  replies: {
    ...baseComment.replies,
    edges: [
@@ -121,6 +125,7 @@ export const commentWithDeepestReplies = {
          ...baseComment,
          id: "comment-with-deepest-replies-1",
          body: "body 1",
+          replyCount: 1,
          replies: {
            ...baseComment.replies,
            edges: [
@@ -130,6 +135,7 @@ export const commentWithDeepestReplies = {
                  ...baseComment,
                  id: "comment-with-deepest-replies-2",
                  body: "body 2",
+                  replyCount: 1,
                  replies: {
                    ...baseComment.replies,
                    edges: [
@@ -139,6 +145,7 @@ export const commentWithDeepestReplies = {
                          ...baseComment,
                          id: "comment-with-deepest-replies-3",
                          body: "body 3",
+                          replyCount: 1,
                          replies: {
                            ...baseComment.replies,
                            edges: [
@@ -148,6 +155,7 @@ export const commentWithDeepestReplies = {
                                  ...baseComment,
                                  id: "comment-with-deepest-replies-4",
                                  body: "body 4",
+                                  replyCount: 1,
                                  replies: {
                                    ...baseComment.replies,
                                    edges: [
@@ -157,6 +165,7 @@ export const commentWithDeepestReplies = {
                                          ...baseComment,
                                          id: "comment-with-deepest-replies-5",
                                          body: "body 5",
+                                          replyCount: 1,
                                          replies: {
                                            ...baseComment.replies,
                                            edges: [
@@ -167,6 +176,7 @@ export const commentWithDeepestReplies = {
                                                  id:
                                                    "comment-with-deepest-replies-6",
                                                  body: "body 6",
+                                                  replyCount: 1,
                                                  replies: {
                                                    ...baseComment.replies,
                                                    edges: [],
@@ -5,10 +5,14 @@ export interface TabContentProps {
   * Active tab id/name
   */
  activeTab?: string;
+  /**
+   * classNames
+   */
+  className?: string;
 }

 const TabContent: StatelessComponent<TabContentProps> = props => {
-  const { children, activeTab } = props;
+  const { children, activeTab, className } = props;
  return (
    <>
      {React.Children.toArray(children)
@@ -18,6 +22,7 @@ const TabContent: StatelessComponent<TabContentProps> = props => {
        .map((child: React.ReactElement<any>, i) =>
          React.cloneElement(child, {
            tabId: child.props.tabId ? child.props.tabId : i,
+            className,
          })
        )}
    </>
@@ -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;
+}
@@ -17,6 +17,7 @@ import {
  retrieveCommentAssetConnection,
  retrieveCommentParentsConnection,
  retrieveCommentRepliesConnection,
+  retrieveCommentUserConnection,
  retrieveManyComments,
 } from "talk-server/models/comment";
 import { Connection } from "talk-server/models/connection";
@@ -53,6 +54,20 @@ export default (ctx: Context) => ({
        itemIDs
      )
  ),
+  forUser: (
+    userID: string,
+    // Apply the graph schema defaults at the loader.
+    {
+      first = 10,
+      orderBy = GQLCOMMENT_SORT.CREATED_AT_DESC,
+      after,
+    }: AssetToCommentsArgs
+  ) =>
+    retrieveCommentUserConnection(ctx.mongo, ctx.tenant.id, userID, {
+      first,
+      orderBy,
+      after,
+    }),
  forAsset: (
    assetID: string,
    // Apply the graph schema defaults at the loader.
@@ -84,6 +84,8 @@ const Comment: GQLCommentTypeResolver<Comment> = {
    comment.parent_id
      ? ctx.loaders.Comments.parents(comment, input)
      : createConnection(),
+  asset: (comment, input, ctx) =>
+    ctx.loaders.Assets.asset.load(comment.asset_id),
 };

 export default Comment;
@@ -8,6 +8,7 @@ import CommentCounts from "./comment_counts";
 import Mutation from "./mutation";
 import Profile from "./profile";
 import Query from "./query";
+import User from "./user";

 const Resolvers: GQLResolver = {
  Asset,
@@ -18,6 +19,7 @@ const Resolvers: GQLResolver = {
  Mutation,
  Profile,
  Query,
+  User,
 };

 export default Resolvers;
@@ -0,0 +1,8 @@
+import { GQLUserTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
+import { User } from "talk-server/models/user";
+
+const User: GQLUserTypeResolver<User> = {
+  comments: (user, input, ctx) => ctx.loaders.Comments.forUser(user.id, input),
+};
+
+export default User;
@@ -5,7 +5,7 @@
 """
 auth is a directive that will enforce authorization rules on the schema
 definition. It will restrict the viewer of the field based on roles or if the
-`userIDField` is specified, it will see if the current users ID equals the field
+`userIDField` is specified, it  will see if the current users ID equals the field
 specified. This allows users that own a specific resource (like a comment, or a
 flag) see their own content, but restrict it to everyone else. If the directive
 is used without options, it simply requires a logged in user.
@@ -761,6 +761,15 @@ type User {
  role is the current role of the User.
  """
  role: USER_ROLE! @auth(roles: [ADMIN, MODERATOR], userIDField: "id")
+
+  """
+  comments are the comments of the User.
+  """
+  comments(
+    first: Int = 10
+    orderBy: COMMENT_SORT = CREATED_AT_DESC
+    after: Cursor
+  ): CommentsConnection! @auth(roles: [ADMIN, MODERATOR], userIDField: "id")
 }

 ################################################################################
@@ -897,6 +906,11 @@ type Comment {
  left by the current User on this Comment.
  """
  myActionPresence: ActionPresence
+
+  """
+  asset is the Asset that the Comment was written on.
+  """
+  asset: Asset!
 }

 type PageInfo {
@@ -422,6 +422,30 @@ export async function retrieveCommentAssetConnection(
  return retrieveConnection(input, query);
 }

+/**
+ * retrieveCommentUserConnection returns a Connection<Comment> for a given User's
+ * comments.
+ *
+ * @param db database connection
+ * @param userID the User id for the comment to retrieve
+ * @param input connection configuration
+ */
+export async function retrieveCommentUserConnection(
+  db: Db,
+  tenantID: string,
+  userID: string,
+  input: ConnectionInput
+) {
+  // Create the query.
+  const query = new Query(collection(db)).where({
+    tenant_id: tenantID,
+    author_id: userID,
+  });
+
+  // Return a connection for the comments query.
+  return retrieveConnection(input, query);
+}
+
 /**
 * retrieveConnection returns a Connection<Comment> for the given input and
 * Query.
@@ -12,6 +12,9 @@ general-userBoxAuthenticated-signedInAs =
 general-userBoxAuthenticated-notYou =
  Not you? <button>Sign Out</button>

+general-app-commentsTab = Comments
+general-app-myProfileTab = My Profile
+
 ## Comments Tab

 comments-streamQuery-assetNotFound = Asset not found
@@ -68,3 +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-profileQuery-errorLoadingProfile = Error loading profile
+profile-profileQuery-assetNotFound = Asset not found
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default as initLocalState } from "./initLocalState";`