diff --git a/doc/config.py b/doc/config.py
index 51f5386b..d03b5164 100644
--- a/doc/config.py
+++ b/doc/config.py
@@ -26,6 +26,10 @@
 from promnesia.sources import takeout, instapaper, pocket, fbmessenger, twitter, roamresearch, hypothesis, rss
 
 
+# NOTE: at the moment try to avoid using complex sources names
+# it's best to stick to digits, latin characters, dashes and underscores
+# there might be some UI problems related to that
+
 # now we can specify the sources
 # this is a required setting
 SOURCES = [
diff --git a/extension/src/background.js b/extension/src/background.js
index e0c2f3e8..3930b8d0 100644
--- a/extension/src/background.js
+++ b/extension/src/background.js
@@ -103,7 +103,6 @@ function getDelayMs(/*url*/) {
     return 10 * 1000;
 }
 
-// TODO: having a space in a tag shouldn't cause an error but it does
 // TODO: make it configurable in options?
 const LOCAL_TAG = 'local';
 
diff --git a/extension/src/display.js b/extension/src/display.js
index da37b55e..57174ca1 100644
--- a/extension/src/display.js
+++ b/extension/src/display.js
@@ -36,6 +36,15 @@ type Params = {
 
 const HTML_MARKER = '!html ';
 
+// todo use opaque type? makes it annoying to convert literal strings...
+type CssClass = string
+export function asClass(x: string): CssClass {
+    // todo meh. too much trouble to fix properly...
+    const res = x.replace(/[^0-9a-z_-]/, '_')
+    return res.length == 0 ? 'bad_class' : res
+}
+
+
 export class Binder {
     doc: Document;
 
@@ -43,7 +52,7 @@ export class Binder {
         this.doc = doc;
     }
 
-    makeChild(parent: HTMLElement, name: string, classes: ?Array<string> = null) {
+    makeChild(parent: HTMLElement, name: string, classes: ?Array<CssClass> = null) {
         const res = this.doc.createElement(name);
         if (classes != null) {
             for (const cls of classes) {
@@ -86,6 +95,7 @@ export class Binder {
             relative,
         }: Params,
     ) {
+        // todo ugh. looks like Flow can't guess the type of clouser that we get by .bind...
         const child = this.makeChild.bind(this);
         const tchild = this.makeTchild.bind(this); // TODO still necessary??
 
@@ -113,7 +123,7 @@ export class Binder {
             tchild(idx_c, String(idx));
         }
         for (const tag of tags) {
-            const tag_c = child(tags_c, 'span', ['src', tag]);
+            const tag_c = child(tags_c, 'span', ['src', asClass(tag)]);
             tchild(tag_c, tag);
         }
         tchild(date_c, dates);
diff --git a/extension/src/sidebar.js b/extension/src/sidebar.js
index b0c614b7..9a0d2152 100644
--- a/extension/src/sidebar.js
+++ b/extension/src/sidebar.js
@@ -3,7 +3,7 @@ import {Visits, Visit, unwrap, format_duration, Methods, addStyle} from './commo
 import type {JsonObject, Second} from './common';
 import {get_options_async, USE_ORIGINAL_TZ, GROUP_CONSECUTIVE_SECONDS} from './options';
 import type {Options} from './options';
-import {Binder, _fmt} from './display';
+import {Binder, _fmt, asClass} from './display';
 import {defensify} from './notifications';
 import {chromeRuntimeSendMessage} from './async_chrome';
 
@@ -353,7 +353,7 @@ async function bindSidebarData(response: JsonObject) {
 
         // TODO show total counts?
         // TODO if too many tags, just overlap on the seconds line
-        const tag_c = binder.makeChild(all_tags_c, 'span', ['src', tag]);
+        const tag_c = binder.makeChild(all_tags_c, 'span', ['src', asClass(tag)])
         binder.makeTchild(tag_c, `${tag} (${count})`);
         // TODO checkbox??
         tag_c.addEventListener('click', () => {