diff --git a/priv/static/chat.html b/priv/static/chat.html
new file mode 100644
index 0000000..895393b
--- /dev/null
+++ b/priv/static/chat.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Chat with Websockets</title>
+    <link rel="stylesheet" href="./default.css">
+</head>
+<body>
+    <div class="content">
+        <h1 class="content-title">Chat with websockets</h1>
+
+        <div class="content-body">
+            <input autofocus label="Nick" id="nick"></input>
+            <textarea hidden disabled id="wfc-output"></textarea>
+            <input hidden id="wfc-input"></input>
+        </div>
+    </div>
+
+    <script>
+        let nelt = document.getElementById('nick');
+        let ielt = document.getElementById('wfc-input');
+        let oelt = document.getElementById('wfc-output');
+        let ws   = new WebSocket("/ws/chat");
+        let nick = '';
+
+        // when user hits any key while typing in nick
+        function on_nick(evt) {
+            if (evt.key === 'Enter') {
+                // don't do default thing
+                evt.preventDefault();
+                // grab contents
+                let contents = nelt.value;
+                let trimmed = contents.trim();
+                // if contents are nonempty
+                let nonempty_contents = trimmed.length > 0;
+                if (nonempty_contents) {
+                    nick = trimmed;
+                    let msg_obj = ['nick', nick];
+                    let msg_str = JSON.stringify(msg_obj);
+                    console.log('message to server:', contents.trim());
+                    // query backend for result
+                    ws.send(msg_str);
+
+                    // delete element from dom
+                    nelt.remove();
+                    oelt.hidden = false;
+                    ielt.hidden = false;
+                    ielt.autofocus = true;
+                }
+            }
+        }
+
+        // when user hits any key while typing in ielt
+        function on_input_key(evt) {
+            if (evt.key === 'Enter') {
+                // don't do default thing
+                evt.preventDefault();
+                // grab contents
+                let contents = ielt.value;
+                let trimmed = contents.trim();
+                // if contents are nonempty
+                let nonempty_contents = trimmed.length > 0;
+                if (nonempty_contents) {
+                    let msg_obj = ['chat', trimmed];
+                    let msg_str = JSON.stringify(msg_obj);
+                    console.log('message to server:', contents.trim());
+                    // query backend for result
+                    ws.send(msg_str);
+
+                    // clear input
+                    ielt.value = '';
+
+                    // add to output
+                    oelt.value += '> ';
+                    oelt.value += trimmed;
+                    oelt.value += '\n';
+                }
+            }
+        }
+
+        function main() {
+            nelt.addEventListener('keydown', on_nick);
+            ielt.addEventListener('keydown', on_input_key);
+            ws.onmessage =
+                function (msg_evt) {
+                    console.log('message from server:', msg_evt);
+                    let msg_str = msg_evt.data;
+                    let msg_obj = JSON.parse(msg_str);
+
+                    oelt.value += msg_obj.nick;
+                    oelt.value += '> ';
+                    oelt.value += msg_obj.msg;
+                    oelt.value += '\n';
+                };
+        }
+
+        main();
+    </script>
+</body>
+</html>
diff --git a/priv/static/default.css b/priv/static/default.css
new file mode 100644
index 0000000..d7f1ad5
--- /dev/null
+++ b/priv/static/default.css
@@ -0,0 +1,95 @@
+/* color pallette */
+* {
+    --white:    #f7f8fb;
+    --lgray0:   #f5fbfd;
+    --lgray1:   #daddd6;
+    --lgray2:   #d3d8d5;
+    --mgray1:   #687864;
+    --dgreen1:  #21341e;
+    --lgreen1:  #e5eef2;
+    --black:    #003d27;
+
+    --sans:     Helvetica, Liberation Sans, FreeSans, Roboto, sans-serif;
+    --mono:     Liberation Mono, FreeMono, Roboto Mono, monospace;
+    --fsdef:    12pt;
+}
+
+/* body */
+body {
+    background:     var(--white);
+    color:          var(--dgray1);
+    font-size:      var(--fsdef);
+    font-family:    var(--sans);
+    margin:         0;
+    padding:        0;
+    line-height:    1.4;
+}
+
+
+.content {
+    max-width:  800px;
+    margin:     0 auto;
+    /*
+    background:     #ff0;
+    */
+}
+
+
+/* add some top padding to content */
+
+.content-title {
+    text-align:         center;
+    text-decoration:    underline;
+}
+
+.content-body {
+    width:          100%;
+    margin:         0 auto;
+    /*
+    background:     #f00;
+    */
+
+
+    padding-left:   10px;
+    padding-right:  10px;
+
+    box-sizing:     border-box;
+}
+
+/* element-specific styling */
+
+a {
+    color: var(--mgray1);
+}
+
+
+#wfc-input {
+    font-family:    var(--mono);
+    font-size:      var(--fsdef);
+    background:     var(--lgreen1);
+
+    width:          100%;
+
+    box-sizing:     border-box;
+
+    border-radius:  6px;
+    border:         1px solid var(--lgray1);
+
+    padding:        5px;
+}
+
+#wfc-output {
+    background:     var(--lgray0);
+    font-family:    var(--mono);
+    font-size:      var(--fsdef);
+
+    width:          100%;
+    resize:         vertical;
+
+    box-sizing:     border-box;
+
+    border-radius:  6px;
+    border:         1px solid var(--lgray1);
+
+    padding:        5px;
+}
diff --git a/priv/static/index.html b/priv/static/index.html
new file mode 100644
index 0000000..6c1b6d7
--- /dev/null
+++ b/priv/static/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>WF Compiler Demo</title>
+    <link rel="stylesheet" href="./default.css">
+</head>
+<body>
+    <div class="content">
+        <h1 class="content-title">WFC Demo</h1>
+
+        <ul>
+            <li><a href="/chat.html">Websocket Chatroom</a></li>
+            <li><a href="/ws-test-echo.html">Websocket Echo Test</a></li>
+        </ul>
+
+        <div class="content-body">
+            <textarea disabled id="wfc-output"></textarea>
+            <input autofocus id="wfc-input"></input>
+
+            <h2>Settings</h2>
+            <input type="checkbox" checked id="auto-resize-output">Auto-resize output</input> <br>
+            <input type="checkbox" checked id="auto-scroll"       >Auto-scroll output to bottom</input>
+        </div>
+    </div>
+
+    <script>
+        let ielt = document.getElementById('wfc-input');
+        let oelt = document.getElementById('wfc-output');
+        let MAX_OELT_HEIGHT = 300;
+
+        function auto_resize_output() {
+            // if the user has manually resized their output, we do nothing
+            if (document.getElementById('auto-resize-output').checked) {
+                // resize it automagically up to 500px
+                if (oelt.scrollHeight < MAX_OELT_HEIGHT) {
+                    oelt.style.height = String(oelt.scrollHeight) + 'px';
+                }
+                else {
+                    oelt.style.height = String(MAX_OELT_HEIGHT) + 'px';
+                }
+            }
+        }
+
+        function auto_scroll_to_bottom() {
+            if (document.getElementById('auto-scroll').checked) {
+                // scroll to bottom
+                oelt.scrollTop = oelt.scrollHeight;
+            }
+        }
+
+        async function on_server_return(response) {
+            console.log('on_server_return:', response);
+            if (response.ok) {
+                let jsbs = await response.json();
+                console.log('jsbs', jsbs);
+                // jsbs: {ok: true, result: string} | {ok: false, error: string}
+                if (jsbs.ok) {
+                    // this means got a result back from server
+                    // put it in
+                    oelt.value += jsbs.result;
+                    oelt.value += '\n';
+                }
+                else {
+                    // this is an error at the WFC level
+                    oelt.value += jsbs.error;
+                    oelt.value += '\n';
+                }
+            }
+            // this means we sent an invalid request
+            else {
+                oelt.value += 'HTTP ERROR, SEE BROWSER CONSOLE\n'
+            }
+        }
+
+        function on_some_bullshit(x) {
+            console.log('on_some_bullshit:', x);
+            oelt.value += 'NETWORK ERROR, SEE BROWSER CONSOLE\n'
+        }
+
+        function fetch_wfcin(user_line) {
+            let req_body_obj = {wfcin: user_line};
+            // let req_body_str = JSON.stringify(req_body_obj, undefined, 4);
+            let req_body_str = JSON.stringify(req_body_obj);
+
+            let req_options  = {method:  'POST',
+                                headers: {'content-type': 'application/json'},
+                                body:    req_body_str};
+
+            let response_promise = fetch('/wfcin', req_options);
+
+            response_promise.then(on_server_return, on_some_bullshit);
+
+            // this is a promise for a response
+            //console.log(response_promise);
+        }
+
+        // when user hits any key
+        function on_input_key(evt) {
+            if (evt.key === 'Enter') {
+                // don't do default thing
+                evt.preventDefault();
+                // grab contents
+                let contents = ielt.value;
+                // if contents are nonempty
+                let nonempty_contents = contents.trim().length > 0;
+                if (nonempty_contents) {
+                    // put in output
+                    // // if it's nonempty add a newline
+                    // if (oelt.value.length > 0) {
+                    //     oelt.value += '\n';
+                    // }
+                    oelt.value += '> ' + contents + '\n';
+                    oelt.hidden = false;
+
+                    // query backend for result
+                    fetch_wfcin(contents.trim());
+
+                    // clear input
+                    ielt.value = '';
+
+                    // auto-resize
+                    auto_resize_output();
+                    auto_scroll_to_bottom();
+
+
+                }
+            }
+        }
+
+        function main() {
+            ielt.addEventListener('keydown', on_input_key);
+        }
+
+        main();
+    </script>
+</body>
+</html>
diff --git a/priv/static/scratch.txt b/priv/static/scratch.txt
new file mode 100644
index 0000000..db3b7c7
--- /dev/null
+++ b/priv/static/scratch.txt
@@ -0,0 +1,56 @@
+        /* header */
+        div#header {
+            background:     var(--lgray2);
+            height:         50px;
+            width:          100%;
+        }
+
+        img#header-logo {
+            height:         40px;
+            margin-top:     5px;
+            margin-bottom:  5px;
+            margin-left:    5px;
+        }
+
+
+.main {
+    padding-top: 20px;
+}
+
+.content-diagram {
+    max-width: 100%;
+    margin:    0 auto;
+    padding:   0 auto;
+}
+
+
+/* Pandoc makes some wacky choices with how it lays out code blocks
+ *
+ * this means all <code> blocks that do not have a <pre> block as an ancestor
+ *
+ * ie the `inline code`
+ */
+code:not(pre *) {
+    border-radius:  6px;
+    border:         1px solid var(--lgray1);
+    padding-left:   3px;
+    padding-right:  3px;
+    padding-top:    1px;
+    padding-bottom: 1px;
+    background:     var(--lgreen1);
+}
+
+/* this is specifically for ```fenced blocks``` */
+pre {
+    border-radius:  6px;
+    border:         1px solid var(--lgray1);
+    padding:        5px;
+    background:     var(--lgreen1);
+    overflow:       scroll;
+}
+
+/* All `unfenced` or ```fenced``` blocks */
+code {
+    font-family:    Liberation Mono, Roboto Mono, monospace;
+    color:          var(--dgreen1);
+}
diff --git a/priv/static/ws-test-echo.html b/priv/static/ws-test-echo.html
new file mode 100644
index 0000000..2c3d47d
--- /dev/null
+++ b/priv/static/ws-test-echo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Websockets echo test</title>
+    <link rel="stylesheet" href="./default.css">
+</head>
+<body>
+    <div class="content">
+        <h1 class="content-title">Websockets echo test</h1>
+
+        <div class="content-body">
+            <textarea id="wfc-output"
+                      disabled></textarea>
+            <input autofocus id="wfc-input"></input>
+        </div>
+    </div>
+
+    <script>
+        let ielt = document.getElementById('wfc-input');
+        let oelt = document.getElementById('wfc-output');
+        let ws   = new WebSocket("/ws/echo");
+
+        // when user hits any key while typing in ielt
+        function on_input_key(evt) {
+            if (evt.key === 'Enter') {
+                // don't do default thing
+                evt.preventDefault();
+                // grab contents
+                let contents = ielt.value;
+                let trimmed = contents.trim();
+                // if contents are nonempty
+                let nonempty_contents = trimmed.length > 0;
+                if (nonempty_contents) {
+                    console.log('message to server:', contents.trim());
+                    // query backend for result
+                    ws.send(contents.trim());
+
+                    // clear input
+                    ielt.value = '';
+
+                    // add to output
+                    oelt.value += '> ';
+                    oelt.value += trimmed;
+                    oelt.value += '\n';
+                }
+            }
+        }
+
+        function main() {
+            ielt.addEventListener('keydown', on_input_key);
+            ws.onmessage =
+                function (msg_evt) {
+                    console.log('message from server:', msg_evt);
+                    let msg_str = msg_evt.data;
+                    oelt.value += '< ';
+                    oelt.value += msg_str;
+                    oelt.value += '\n';
+                };
+        }
+
+        main();
+    </script>
+</body>
+</html>
diff --git a/src/fd_static_cache.erl b/src/fd_static_cache.erl
new file mode 100644
index 0000000..472f705
--- /dev/null
+++ b/src/fd_static_cache.erl
@@ -0,0 +1,120 @@
+% @doc static file cache
+-module(fd_static_cache).
+
+-behavior(gen_server).
+
+-export([
+    start_link/0,
+    query/1, set/2, unset/1,
+    %%---
+    %% everything below here runs in process context
+    %%--
+    %% gen_server callbacks
+    init/1, handle_call/3, handle_cast/2, handle_info/2,
+    code_change/3, terminate/2
+]).
+
+-include("$zx_include/zx_logger.hrl").
+
+-type context() :: wfc_eval_context:context().
+
+-record(s,
+        {cookies = #{} :: #{Cookie :: binary() := context()}}).
+% -type state() :: #s{}.
+
+
+%%--------------------------------
+%% api (runs in context of caller)
+%%--------------------------------
+
+-spec start_link() -> {ok, pid()} | {error, term()}.
+start_link() ->
+    gen_server:start_link({local, ?MODULE}, ?MODULE, none, []).
+
+
+
+-spec query(Cookie) -> {ok, Context} | error
+    when Cookie  :: binary(),
+         Context :: context().
+
+query(Cookie) ->
+    gen_server:call(?MODULE, {query, Cookie}).
+
+
+
+-spec set(Cookie, Context) -> ok
+    when Cookie  :: binary(),
+         Context :: context().
+
+set(Cookie, Context) ->
+    gen_server:cast(?MODULE, {set, Cookie, Context}).
+
+
+-spec unset(Cookie) -> ok
+    when Cookie  :: binary().
+
+unset(Cookie) ->
+    gen_server:cast(?MODULE, {unset, Cookie}).
+
+
+%%----------------------
+%% gen-server bs
+%%----------------------
+
+
+
+init(none) ->
+    log(info, "starting fd_cache"),
+    InitState = #s{},
+    {ok, InitState}.
+
+
+handle_call({query, Cookie}, _, State) ->
+    Result = do_query(Cookie, State),
+    {reply, Result, State};
+handle_call(Unexpected, From, State) ->
+    tell("~tp: unexpected call from ~tp: ~tp", [?MODULE, Unexpected, From]),
+    {noreply, State}.
+
+
+handle_cast({set, Cookie, Context}, State) ->
+    NewState = do_set(Cookie, Context, State),
+    {noreply, NewState};
+handle_cast({unset, Cookie}, State) ->
+    NewState = do_unset(Cookie, State),
+    {noreply, NewState};
+handle_cast(Unexpected, State) ->
+    tell("~tp: unexpected cast: ~tp", [?MODULE, Unexpected]),
+    {noreply, State}.
+
+
+handle_info(Unexpected, State) ->
+    tell("~tp: unexpected info: ~tp", [?MODULE, Unexpected]),
+    {noreply, State}.
+
+
+code_change(_, State, _) ->
+    {ok, State}.
+
+terminate(_, _) ->
+    ok.
+
+
+%%---------------------
+%% doers
+%%---------------------
+
+do_set(Cookie, Context, State = #s{cookies = Cookies}) ->
+    NewCookies = maps:put(Cookie, Context, Cookies),
+    NewState   = State#s{cookies = NewCookies},
+    NewState.
+
+
+do_unset(Cookie, State = #s{cookies = Cookies}) ->
+    NewCookies = maps:remove(Cookie, Cookies),
+    NewState   = State#s{cookies = NewCookies},
+    NewState.
+
+
+do_query(Cookie, _State = #s{cookies = Cookies}) ->
+    maps:find(Cookie, Cookies).
