diff --git a/spike/review/reinvent/ezmded/server/testdata/tree.yaml b/spike/review/reinvent/ezmded/server/testdata/tree.yaml
index c72a925..42c7c1b 100755
--- a/spike/review/reinvent/ezmded/server/testdata/tree.yaml
+++ b/spike/review/reinvent/ezmded/server/testdata/tree.yaml
@@ -1,3 +1,28 @@
+A:
+  title: A
+  deleted: false
+  updated: 2022-02-08T23:40:44.951597Z
+  pid: ""
+AA:
+  title: AA
+  deleted: false
+  updated: 2022-02-08T23:40:44.966702Z
+  pid: A
+AAA:
+  title: AAA
+  deleted: false
+  updated: 2022-02-08T23:40:44.976068Z
+  pid: AA
+AB:
+  title: AB
+  deleted: false
+  updated: 2022-02-08T23:40:44.985178Z
+  pid: A
+B:
+  title: B
+  deleted: false
+  updated: 2022-02-08T23:40:44.995572Z
+  pid: ""
 b7fe2c91-6bd7-4b49-8590-4223ccc772ac:
   title: my file title
   deleted: false
diff --git a/spike/review/reinvent/ezmded/ui/index.html b/spike/review/reinvent/ezmded/ui/index.html
index 406c285..a6f07b2 100644
--- a/spike/review/reinvent/ezmded/ui/index.html
+++ b/spike/review/reinvent/ezmded/ui/index.html
@@ -12,39 +12,106 @@
 			#tree details {
 				padding-inline-start: 1em;
 			}
+			#tree summary {
+				min-width: 60px;
+			}
 			details {
 				margin-top: .35em;
 				margin-bottom: .35em;
 			}
+			#tree summary > div {
+				display: inline-flex;
+				flex-direction: row;
+				width: calc(100% - 1em);
+			}
+			#tree summary > div > a {
+				flex-grow: 1;
+			}
+			#tree summary > div > a > input {
+				width: 100%;
+				text-align: left;
+			}
 		</style>
+		<script>
+			function init() {
+				drawTree()
+			}
+			function drawFile(id) {
+				if (id.length < 1) {
+					return
+				}
+				http("GET", "/api/v0/files/"+id, (body, status, headers) => {
+					if (status != 200) {
+						throw Exception(`ERR loading file: ${status}: ${body}`)
+					}
+					const pid = headers("pid")
+					document.getElementById("titlePath").innerHTML = `${pid ? "... / " : ""}<input type="button" value="${pid ? pid : ""}" onclick="drawFile('${pid}'); return false;"> / `
+					if (!pid) {
+						document.getElementById("titlePath").innerHTML = "/"
+					}
+					document.getElementById("title").innerHTML = headers("title")
+					easyMDE.value(body)
+				})
+			}
+			function drawTree() {
+				function htmlifyBranch(id, branch) {
+					var children = ""
+					for (var child in branch.Children)
+						children += "\n" + htmlifyBranch(child, branch.Children[child])
+					return `
+						<details open>
+							<summary>
+								<div>
+									<a href="#"><input type="button" value="${branch.Title}" onclick="drawFile('${id}'); return false;"/></a>
+									<input type="button" value="+" onclick="alert('todo'); return false;"/>
+								</div>
+							</summary>
+							${children}
+						</details>
+					`
+				}
+				http("GET", "/api/v0/tree?pretty", (body, _) => {
+					const tree = JSON.parse(body)
+					var innerHTML = ""
+					for(var id in tree) {
+						innerHTML += htmlifyBranch(id, tree[id])
+					}
+					innerHTML = htmlifyBranch("", {
+						Title: "Files",
+						Children: {},
+					}).replace("</summary>", "</summary>"+innerHTML)
+					document.getElementById("tree").innerHTML = innerHTML
+				})
+			}
+			function http(method, remote, callback, body) {
+				var xmlhttp = new XMLHttpRequest();
+				xmlhttp.onreadystatechange = function() {
+					if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+						callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+					}
+				};
+				xmlhttp.open(method, remote, true);
+				if (typeof body == "undefined") {
+					body = null
+				}
+				xmlhttp.send(body);
+			}
+		</script>
 	</header>
-	<body style="width: 90%; max-width: 1024px; margin: auto;">
+	<body style="width: 90%; max-width: 1024px; margin: auto;" onload="init(); return false;">
 		<div style="width: 100%; display: flex; flex-direction: column;">
 			<div style="margin: 1em; display: flex; flex-direction: row;">
 				<input type="text" style="flex-grow: 1;" placeholder="not impl"/>
 				<input type="submit" value="search"/>
 			</div>
 			<div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;">
-				<details open>
-					<summary style="min-width: 60px;">
-						<div style="display: inline-flex; flex-direction: row; width: calc(100% - 1em);">
-							<a href="#?f=" style="flex-grow: 1"><input type="button" value="Tree" style="width: 100%; text-align: left;"/></a>
-							<input type="button" value="+"/>
-						</div>
-					</summary>
-					<div id="tree">
-						<details open>
-							<summary>L1</summary>
-							<details open>
-								<summary>L2</summary>
-							</details>
-						</details>
-					</div>
-				</details>
+				<div id="tree"></div>
 				<article style="flex-grow: 1; margin-left: 1em;">
 					<h1 style="display: flex; flex-direction: row;">
-						<a href="#?f=">Tree</a> /
-						<a href="#?f=abc">L1</a> /
+						<span id="titlePath">
+							<a href="#">Tree</a> /
+							<a href="#">L1</a> /
+						</span>
 						<span id="title" contenteditable style="flex-grow: 1;">L2</span>
 					</h1>
 					<textarea id="my-text-area"></textarea>
