diff --git a/cmd/clitest/index.html b/cmd/clitest/index.html
new file mode 100644
index 0000000..6fd5130
--- /dev/null
+++ b/cmd/clitest/index.html
@@ -0,0 +1,81 @@
+<html style="height: calc(100% - 4em);">
+  <header>
+    <script>
+      function http(method, remote, callback, body) {
+         var xmlhttp = new XMLHttpRequest();
+         xmlhttp.onreadystatechange = function() {
+            if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+               callback(xmlhttp.responseText, xmlhttp.status)
+            }
+         };
+         xmlhttp.open(method, remote, true);
+         if (typeof body == "undefined") {
+            body = null
+         }
+         xmlhttp.send(body);
+      }
+      function callback(responseBody, responseStatus) {
+      }
+      function draw(form) {
+        path = "/bal"
+        query = "?x=y"
+        Array.from(form.elements).forEach((input) => {
+          query += "&" + input.name + "=" + input.value;
+          if (input.name == "mode") {
+            path = "/" + input.value;
+          }
+        });
+        console.log(path, query);
+        document.getElementById("graph").src = window.origin + path + query
+      }
+    </script>
+  </header>
+  <body style="height: 100%;">
+    <div id="grapher" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
+      <form onsubmit="draw(this); return false;" style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 1em;">
+        <span>
+          <label for="mode">mode</label>
+          <input name="mode" type="text" value="bal"/>
+        </span>
+
+        <span>
+          <label for="likeName">likeName</label>
+          <input name="likeName" type="text" value="AssetAccount"/>
+        </span>
+
+        <span>
+          <label for="chart">chart</label>
+          <input name="chart" type="text" value="stack"/>
+        </span>
+
+        <span>
+          <label for="predictionMonths">predictionMonths</label>
+          <input name="predictionMonths" type="text" value="120"/>
+        </span>
+
+        <span>
+          <label for="bpi">bpi</label>
+          <input name="bpi" type="text" value="true"/>
+        </span>
+
+        <span>
+          <label for="zoomStart">zoomStart</label>
+          <input name="zoomStart" type="text" value="2001-01"/>
+        </span>
+
+        <span>
+          <label for="prediction">prediction</label>
+          <input name="prediction" type="text" value="contributions=&interest=AssetAccount:Cash USD 0.02"/>
+        </span>
+
+        <span>
+          <input type="submit"/>
+        </span>
+      </form>
+      <iframe id="graph" style="flex-grow: 1;">
+      </iframe>
+    </div>
+  </body>
+  <footer>
+  </footer>
+</html>
diff --git a/cmd/clitest/main.go b/cmd/clitest/main.go
index cb3661b..e3f5f72 100644
--- a/cmd/clitest/main.go
+++ b/cmd/clitest/main.go
@@ -85,7 +85,6 @@ func main() {
 			if predictionMonths, err := strconv.ParseInt(r.URL.Query().Get("predictionMonths"), 10, 16); err == nil && predictionMonths > 0 {
 				window := time.Hour * 24.0 * 365.0 / 12.0 * time.Duration(predictionMonths)
 				// TODO whatif
-				// TODO ana.Prediction
 				prediction := make(ana.Prediction, 0)
 				for _, spec := range r.URL.Query()["prediction"] {
 					idx := strings.Index(spec, "=")
@@ -154,6 +153,14 @@ func main() {
 			default:
 				http.NotFound(w, r)
 				return
+			case "/ui":
+				f, err := os.Open("./index.html")
+				if err != nil {
+					panic(err)
+				}
+				defer f.Close()
+				io.Copy(w, f)
+				return
 			case "/bal":
 				for _, name := range names {
 					currencyDateValue := nameCurrencyDateValue[name]
