diff --git a/webui/codegen.yaml b/webui/codegen.yaml
index 1580632ea85256b9123ba91346d158692b9c7633..3cdb05176f0cf3ec74cde96a41e42a8b90d703f3 100644
--- a/webui/codegen.yaml
+++ b/webui/codegen.yaml
@@ -2,22 +2,22 @@ schema: '../graphql/schema/*.graphql'
 overwrite: true
 documents: src/**/*.graphql
 generates:
-  ./src/fragmentTypes.js:
+  ./src/fragmentTypes.ts:
     plugins:
-    - fragment-matcher
+      - fragment-matcher
     config:
       module: es2015
   ./src/gqlTypes.ts:
     plugins:
-    - typescript
+      - typescript
   ./src/schema.json:
     plugins:
-    - introspection
+      - introspection
   ./src/:
     plugins:
-    - add: '/* eslint-disable @typescript-eslint/no-unused-vars, import/order */'
-    - typescript-operations
-    - typescript-react-apollo
+      - add: '/* eslint-disable @typescript-eslint/no-unused-vars, import/order */'
+      - typescript-operations
+      - typescript-react-apollo
     preset: near-operation-file
     presetConfig:
       extension: .generated.tsx
@@ -29,4 +29,4 @@ generates:
 
 hooks:
   afterAllFileWrite:
-  - prettier --write
+    - prettier --write
diff --git a/webui/src/.gitignore b/webui/src/.gitignore
index 640de4f9b9015e774c6cea2bc960f1e21c95afd3..2ef0dba1e53f894d51af103375b332105c9338b3 100644
--- a/webui/src/.gitignore
+++ b/webui/src/.gitignore
@@ -1,4 +1,4 @@
-fragmentTypes.js
+fragmentTypes.ts
 gqlTypes.ts
 *.generated.*
 schema.json
diff --git a/webui/src/Author.tsx b/webui/src/Author.tsx
index 20de583a338cc048ea813bb0a7be461ea4c634ee..852cd2b706162b2e37fd1df06214111771d2e5c7 100644
--- a/webui/src/Author.tsx
+++ b/webui/src/Author.tsx
@@ -4,7 +4,11 @@ import React from 'react';
 
 import { AuthoredFragment } from './Author.generated';
 
-type Props = AuthoredFragment;
+type Props = AuthoredFragment & {
+  className?: string;
+  bold?: boolean;
+};
+
 const Author = ({ author, ...props }: Props) => {
   if (!author.email) {
     return <span {...props}>{author.displayName}</span>;
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.tsx
similarity index 82%
rename from webui/src/bug/LabelChange.js
rename to webui/src/bug/LabelChange.tsx
index 442cbbb443eabd9d587bb5d76cebb384ef561c07..e7c75a371fa7bd19f9053c44ec6bf43b4c1718e3 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.tsx
@@ -1,9 +1,10 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
 import Label from '../Label';
+import { LabelChangeFragment } from './LabelChangeFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -15,7 +16,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function LabelChange({ op }) {
+type Props = {
+  op: LabelChangeFragment;
+};
+
+function LabelChange({ op }: Props) {
   const { added, removed } = op;
   const classes = useStyles();
   return (
diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/bug/LabelChangeFragment.graphql
index 07b1d351619d9ccde47a68c836b25046662deb71..631de70c3661948d71396b89b4a875a771f87a7a 100644
--- a/webui/src/bug/LabelChangeFragment.graphql
+++ b/webui/src/bug/LabelChangeFragment.graphql
@@ -1,15 +1,13 @@
 #import "../Author.graphql"
 #import "../Label.graphql"
 
-fragment LabelChange on TimelineItem {
-  ... on LabelChangeTimelineItem {
-    date
-    ...authored
-    added {
-      ...Label
-    }
-    removed {
-      ...Label
-    }
+fragment LabelChange on LabelChangeTimelineItem {
+  date
+  ...authored
+  added {
+    ...Label
+  }
+  removed {
+    ...Label
   }
 }
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.tsx
similarity index 84%
rename from webui/src/bug/Message.js
rename to webui/src/bug/Message.tsx
index 68d3cea009d5f1116c0b2bf3822c2e69d85b44f8..33e0f1da4cf2f93d009a2346f91126c7d12bfc1a 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.tsx
@@ -1,11 +1,13 @@
 import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import { Avatar } from '../Author';
 import Content from '../Content';
 import Date from '../Date';
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   author: {
@@ -47,7 +49,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function Message({ op }) {
+type Props = {
+  op: AddCommentFragment | CreateFragment;
+};
+
+function Message({ op }: Props) {
   const classes = useStyles();
   return (
     <article className={classes.container}>
diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/bug/MessageCommentFragment.graphql
index 83cc9f613ea013e628c117f9e24f25db8febf0fa..38d626d0fd6429ee86e5e133dc1d76d040b6beac 100644
--- a/webui/src/bug/MessageCommentFragment.graphql
+++ b/webui/src/bug/MessageCommentFragment.graphql
@@ -1,10 +1,8 @@
 #import "../Author.graphql"
 
-fragment AddComment on TimelineItem {
-  ... on AddCommentTimelineItem {
-    createdAt
-    ...authored
-    edited
-    message
-  }
+fragment AddComment on AddCommentTimelineItem {
+  createdAt
+  ...authored
+  edited
+  message
 }
diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/bug/MessageCreateFragment.graphql
index e753444ffbc4db55b525eb35b9c140e35139a78e..08477470aeb32ff2b347e06ccc97f11abf137af3 100644
--- a/webui/src/bug/MessageCreateFragment.graphql
+++ b/webui/src/bug/MessageCreateFragment.graphql
@@ -1,10 +1,8 @@
 #import "../Author.graphql"
 
-fragment Create on TimelineItem {
-  ... on CreateTimelineItem {
-    createdAt
-    ...authored
-    edited
-    message
-  }
+fragment Create on CreateTimelineItem {
+  createdAt
+  ...authored
+  edited
+  message
 }
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.tsx
similarity index 69%
rename from webui/src/bug/SetStatus.js
rename to webui/src/bug/SetStatus.tsx
index b6dd419d5bfc2fd8e86e0c7258f6de09d99e9566..6d51e34249e80a151b24b1f1fc08101d1c27af75 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.tsx
@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
+import { SetStatusFragment } from './SetStatusFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -11,7 +12,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SetStatus({ op }) {
+type Props = {
+  op: SetStatusFragment;
+};
+
+function SetStatus({ op }: Props) {
   const classes = useStyles();
   return (
     <div className={classes.main}>
diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/bug/SetStatusFragment.graphql
index 56e22c2b065d0456465953f7bddd61f37217dccd..0fdea01b635f209992a5c831efdfbfeb6d6b9dfe 100644
--- a/webui/src/bug/SetStatusFragment.graphql
+++ b/webui/src/bug/SetStatusFragment.graphql
@@ -1,9 +1,7 @@
 #import "../Author.graphql"
 
-fragment SetStatus on TimelineItem {
-  ... on SetStatusTimelineItem {
-    date
-    ...authored
-    status
-  }
+fragment SetStatus on SetStatusTimelineItem {
+  date
+  ...authored
+  status
 }
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.tsx
similarity index 76%
rename from webui/src/bug/SetTitle.js
rename to webui/src/bug/SetTitle.tsx
index 09343ad170def3a959140d76bf206a4ad6edccf4..8a578aa1c83d7ed15c90ce20e26e6edb043e832e 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.tsx
@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
+import { SetTitleFragment } from './SetTitleFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -14,7 +15,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SetTitle({ op }) {
+type Props = {
+  op: SetTitleFragment;
+};
+
+function SetTitle({ op }: Props) {
   const classes = useStyles();
   return (
     <div className={classes.main}>
diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/bug/SetTitleFragment.graphql
index a15c3eb3138a932ecb1ef9948e47970e647ed12b..432c44492ef68b9cf1d6954cafa9dec15a716f51 100644
--- a/webui/src/bug/SetTitleFragment.graphql
+++ b/webui/src/bug/SetTitleFragment.graphql
@@ -1,10 +1,8 @@
 #import "../Author.graphql"
 
-fragment SetTitle on TimelineItem {
-  ... on SetTitleTimelineItem {
-    date
-    ...authored
-    title
-    was
-  }
+fragment SetTitle on SetTitleTimelineItem {
+  date
+  ...authored
+  title
+  was
 }
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
deleted file mode 100644
index aeef7d2bc2e080e8ef952d2ca8879fc05923dbc0..0000000000000000000000000000000000000000
--- a/webui/src/bug/Timeline.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import LabelChange from './LabelChange';
-import Message from './Message';
-import SetStatus from './SetStatus';
-import SetTitle from './SetTitle';
-
-const useStyles = makeStyles(theme => ({
-  main: {
-    '& > *:not(:last-child)': {
-      marginBottom: theme.spacing(2),
-    },
-  },
-}));
-
-const componentMap = {
-  CreateTimelineItem: Message,
-  AddCommentTimelineItem: Message,
-  LabelChangeTimelineItem: LabelChange,
-  SetTitleTimelineItem: SetTitle,
-  SetStatusTimelineItem: SetStatus,
-};
-
-function Timeline({ ops }) {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.main}>
-      {ops.map((op, index) => {
-        const Component = componentMap[op.__typename];
-
-        if (!Component) {
-          console.warn('unsupported operation type ' + op.__typename);
-          return null;
-        }
-
-        return <Component key={index} op={op} />;
-      })}
-    </div>
-  );
-}
-
-export default Timeline;
diff --git a/webui/src/bug/Timeline.tsx b/webui/src/bug/Timeline.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba0f9fc7e3f6d506613bd8c0280624f78009047c
--- /dev/null
+++ b/webui/src/bug/Timeline.tsx
@@ -0,0 +1,48 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+import LabelChange from './LabelChange';
+import Message from './Message';
+import SetStatus from './SetStatus';
+import SetTitle from './SetTitle';
+import { TimelineItemFragment } from './TimelineQuery.generated';
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    '& > *:not(:last-child)': {
+      marginBottom: theme.spacing(2),
+    },
+  },
+}));
+
+type Props = {
+  ops: Array<TimelineItemFragment>;
+};
+
+function Timeline({ ops }: Props) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.main}>
+      {ops.map((op, index) => {
+        switch (op.__typename) {
+          case 'CreateTimelineItem':
+            return <Message key={index} op={op} />;
+          case 'AddCommentTimelineItem':
+            return <Message key={index} op={op} />;
+          case 'LabelChangeTimelineItem':
+            return <LabelChange key={index} op={op} />;
+          case 'SetTitleTimelineItem':
+            return <SetTitle key={index} op={op} />;
+          case 'SetStatusTimelineItem':
+            return <SetStatus key={index} op={op} />;
+        }
+
+        console.warn('unsupported operation type ' + op.__typename);
+        return null;
+      })}
+    </div>
+  );
+}
+
+export default Timeline;
diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/bug/TimelineQuery.graphql
index 493f441657a3bbdb35de11cad19ca51d8f536202..6d78ab7f851a7b6c85a55bc9404881db702b5712 100644
--- a/webui/src/bug/TimelineQuery.graphql
+++ b/webui/src/bug/TimelineQuery.graphql
@@ -9,11 +9,7 @@ query Timeline($id: String!, $first: Int = 10, $after: String) {
     bug(prefix: $id) {
       timeline(first: $first, after: $after) {
         nodes {
-          ...LabelChange
-          ...SetStatus
-          ...SetTitle
-          ...AddComment
-          ...Create
+          ...TimelineItem
         }
         pageInfo {
           hasNextPage
@@ -23,3 +19,21 @@ query Timeline($id: String!, $first: Int = 10, $after: String) {
     }
   }
 }
+
+fragment TimelineItem on TimelineItem {
+  ... on LabelChangeTimelineItem {
+    ...LabelChange
+  }
+  ... on SetStatusTimelineItem {
+    ...SetStatus
+  }
+  ... on SetTitleTimelineItem {
+    ...SetTitle
+  }
+  ... on AddCommentTimelineItem {
+    ...AddComment
+  }
+  ... on CreateTimelineItem {
+    ...Create
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.tsx
similarity index 59%
rename from webui/src/bug/TimelineQuery.js
rename to webui/src/bug/TimelineQuery.tsx
index 886edab2911ffad769c0f011a0ce5b395637c5b4..9c4cf183c508be5ef0df61eb3d420463efde55d7 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.tsx
@@ -4,8 +4,12 @@ import React from 'react';
 import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 
-const TimelineQuery = ({ id }) => {
-  const { loading, error, data, fetchMore } = useTimelineQuery({
+type Props = {
+  id: string;
+};
+
+const TimelineQuery = ({ id }: Props) => {
+  const { loading, error, data } = useTimelineQuery({
     variables: {
       id,
       first: 100,
@@ -14,9 +18,13 @@ const TimelineQuery = ({ id }) => {
 
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
-  return (
-    <Timeline ops={data.repository.bug.timeline.nodes} fetchMore={fetchMore} />
-  );
+
+  const nodes = data?.repository?.bug?.timeline.nodes;
+  if (!nodes) {
+    return null;
+  }
+
+  return <Timeline ops={nodes} />;
 };
 
 export default TimelineQuery;