diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 000000000..957ce7305
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="025bc69d-af21-4ddc-9088-e9cc57749fbe" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/src/assets/styles/components/_web-ide.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/styles/components/_web-ide.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/shared/webide/FileBrowser.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/shared/webide/FileBrowser.js" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="2XE1LwbaG38KOpvNa2bjEkNNAcG" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.stylelint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.stylelint": "/Users/alex/data/harperdb/hdbms/node_modules/stylelint",
+    "nodejs_package_manager_path": "npm",
+    "prettierjs.PrettierConfiguration.Package": "/Users/alex/data/harperdb/hdbms/node_modules/prettier",
+    "settings.editor.selected.configurable": "preferences.pluginManager",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="025bc69d-af21-4ddc-9088-e9cc57749fbe" name="Changes" comment="" />
+      <created>1698179374556</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1698179374556</updated>
+      <workItem from="1698179381362" duration="184000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss
index 4a8d98462..aad5e4b2e 100644
--- a/src/assets/styles/components/_web-ide.scss
+++ b/src/assets/styles/components/_web-ide.scss
@@ -1,5 +1,11 @@
 .dark {
-   color: white;
+  .no-projects {
+    .docs-link {
+      color: #ee81ee !important;
+    }
+  }
+
+  color: white;
 
   .editor.current-file-path {
     border-bottom: 1px solid transparent;
@@ -9,19 +15,39 @@
     span {
       color: white;
     }
-  } 
+
+  }
+
+  .name-input {
+
+    .validation-message {
+      color: $color-danger;
+    }
+
+    .name-input-container {
+      input.invalid {
+        border: 1px solid $color-danger !important;
+        outline-color: $color-danger !important;
+      }
+
+      .invalid-project-name {
+        color: $color-danger;
+      }
+    }
+  }
+
 
   .package-install-window {
     background: rgb(17, 17, 17);
   }
 
   .file.folder-selected {
-    background: rgba(200,200,200,0.2) !important; 
+    background: rgba(200, 200, 200, 0.2) !important;
   }
 
   .file-menu,
   .editor-menu {
-    border-bottom: 1px solid rgb(60,60,60) !important;
+    border-bottom: 1px solid rgb(60, 60, 60) !important;
   }
 
   .file-browser button > span {
@@ -30,7 +56,7 @@
 
   .file-browser .file.file-selected > span {
     color: #ee81ee !important;
-  } 
+  }
 
 
   button[disabled]:hover,
@@ -42,26 +68,68 @@
 }
 
 .purple {
+
+
+  .default-window-option span {
+      color: white !important;
+  }
+
+  .editor-window .default-window .default-window-container {
+    background: $color-pureblack !important;
+    color: white;
+  }
+
+  .no-projects {
+    color: white;
+
+    .docs-link {
+      color: #ee81ee !important;
+    }
+  }
+
+  color: white;
+
+  .name-input {
+    .validation-message {
+      margin-top: 8px;
+    }
+
+    & > input.invalid {
+      border: 1px solid red !important;
+      outline-color: 1px solid red !important;
+    }
+
+    .invalid-text {
+      color: red !important;
+    }
+
+    .invalid-project-name {
+      color: purple;
+    }
+  }
+
   .editor-window .cancel-button {
     color: rgb(105, 105, 105);;
   }
+  .editor-window .cancel-button:hover {
+    color: white;
+  }
 
   .package-install-window {
-    background: white; 
-  }
+    background: white;
 
-  .name-input-cancel {
-      color: rgb(105, 105, 105) !important;
   }
 
   .editor.current-file-path {
     border-bottom: 1px solid lightgray;
   }
-  color: rgb(105,105,105);
+
+  color: rgb(105, 105, 105);
+
 
   .default-window-option {
     span {
-      color: rgb(105,105,105);
+      color: rgb(105, 105, 105);
     }
   }
 
@@ -70,7 +138,7 @@
   }
 
   .file.folder-selected {
-    background: rgba(200,200,200,0.2) !important; 
+    background: rgba(200, 200, 200, 0.2) !important;
   }
 
   .editor-window {
@@ -78,8 +146,9 @@
     flex-direction: column;
 
     .current-file-path {
-      background: rgb(26,26,26);
+      background: rgb(26, 26, 26);
     }
+
     /*
     .root {
       display: grid;
@@ -113,7 +182,11 @@
 
 
 .light {
-  color: rgb(105,105,105);
+  .no-projects {
+    color: rgb(105, 105, 105);
+  }
+
+  color: rgb(105, 105, 105);
 
   .package-install-window {
     background: white;
@@ -124,12 +197,12 @@
   }
 
   .restart-instance-on-save-text {
-    color: rgb(240,240,240) !important;
+    color: rgb(240, 240, 240) !important;
   }
 
   .file-menu button[disabled],
   .editor-menu button[disabled] {
-    color: rgb(240,240,240) !important;
+    color: rgb(240, 240, 240) !important;
     // #5e5e5e;
   }
 
@@ -138,7 +211,7 @@
   }
 
   .file.folder-selected {
-    background: rgba(200,200,200,0.2) !important; 
+    background: rgba(200, 200, 200, 0.2) !important;
     //background: lightgray !important; 
   }
 
@@ -162,7 +235,7 @@
   }
 
   .editor-window button {
-    color: rgb(105,105,105);
+    color: rgb(105, 105, 105);
   }
 
   .install-package-icon {
@@ -174,18 +247,22 @@
   }
 
   .file-menu {
-     color: rgb(105,105,105);
+    color: rgb(105, 105, 105);
   }
 
   .default-window-option {
     span {
-      color: rgb(105,105,105);
+      color: rgb(105, 105, 105);
     }
   }
 }
 
 .web-ide {
 
+
+  .cancel-button {
+    margin-left: 10px;
+  }
   // general stuff
   height: 75vh;
   overflow: hidden;
@@ -251,7 +328,10 @@
   .file-browser-scroll-container {
     height: 100%;
     overflow-y: auto;
-  } 
+
+  }
+
+
 
   // top-level element (left-side)
   .file-browser-outer-container {
@@ -280,9 +360,6 @@
       }
     }
 
-    .no-projects {
-      color: white;
-    }
 
     .file-browser {
 
@@ -295,89 +372,94 @@
         padding-bottom: 0;
         padding-left: 0;
 
-      .rename-file,
-      .deploy-project {
-        margin-left: 8px;
-      }
 
-      .rename-file {
-        color: transparent;
-      }
-
-      .file {
-        &.file-selected {
-          color: #ee81ee;
-          //background: #191919 !important;
-          // background: #4a4a4a !important;
-          //border: 1px solid rgb(120,120,120);;
+        .rename-file,
+        .deploy-project {
+          margin-left: 8px;
         }
 
-        &.folder-selected {
-          //background: #2c2c2c !important;
+        .rename-file {
+          color: transparent;
         }
-      }
 
-      .package.package-selected {
-        color: #f24242;
-      }
-
-      .project-icon {
-        color: rgb(25, 168, 148);
-      }
+        .file {
+          &.file-selected {
+            color: #ee81ee;
+            //background: #191919 !important;
+            // background: #4a4a4a !important;
+            //border: 1px solid rgb(120,120,120);;
+          }
 
-      .package-icon {
-        color: #f24242;
-      }
+          &.folder-selected {
+            //background: #2c2c2c !important;
+          }
+        }
 
-      .file,
-      .package {
+        .package.package-selected {
+          color: #f24242;
+        }
 
-        background: transparent;
-        border: 1px solid transparent;
-        list-style-type: none;
-        margin: 0;
-        outline: none !important; // TODO: fix this because it is not accessible; style differently
-        padding: 3px;
-        white-space: nowrap;
+        .project-icon {
+          color: rgb(25, 168, 148);
 
-        &.selected {
         }
 
-        .package-text,
-        .filename-text {
-          padding-left: 5px;
+        .package-icon {
+          color: #f24242;
         }
 
-        .file-icon.filetype-js {
-          color: #f7df1e;
-        }
+        .file,
+        .package {
 
-        .file-icon.filetype-yaml {
-          color: #c4c4ff;
-        }
+          background: transparent;
+          border: 1px solid transparent;
+          list-style-type: none;
+          margin: 0;
+          outline: none !important; // TODO: fix this because it is not accessible; style differently
+          padding: 3px;
+          white-space: nowrap;
 
-        .file-icon.filetype-unknown {
-          color: lightgray;
+          &.selected {
+          }
+
+          .package-text,
+          .filename-text {
+            padding-left: 5px;
+          }
+
+          .file-icon.filetype-js {
+            color: #f7df1e;
+          }
+
+          .file-icon.filetype-yaml {
+            color: #c4c4ff;
+          }
+
+          .file-icon.filetype-unknown {
+            color: lightgray;
+          }
+
+          .folder-icon {
+            color: rgb(143 141 255);
+          }
         }
 
-        .folder-icon {
-          color: rgb(143 141 255);
+        .folder {
+          padding-left: 15px;
         }
-      }
 
-      .folder {
-        padding-left: 15px;
-      }
 
-      .folder.folder-contents-closed {
-        display: none;
-      }
+        .folder.folder-contents-closed {
+          display: none;
 
-      .folder.folder-contents-open {
-        display: block;
-      }
+        }
+
+        .folder.folder-contents-open {
+          display: block;
+        }
       }
 
+
     }
   }
 
@@ -444,360 +526,405 @@
     }
 
     .editor-window {
-        align-items: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+
+      height: 100%;
+      justify-content: center;
+      width: 100%;
+
+
+      .name-input {
         display: flex;
         flex-direction: column;
+        width: 50%;
 
-        height: 100%;
-        justify-content: center;
-        width: 100%;
-        //overflow-y: auto;
 
-        .card .card-body {
-          background: transparent !important;
+        .validation-message {
+          margin-top: 8px;
         }
 
-        .name-input {
+        .name-input-container {
           display: flex;
-          flex-direction: column;
-          width: 50%;
 
-          .name-input-buttons-container {
-             padding-top: 10px;
+          flex-direction: row;
+          align-items: center;
+
+          .invalid-project-name {
+            margin-left: 15px;
+          }
+
+          .hidden {
+            visibility: hidden;
           }
         }
-  
-        .delete-folder-window-title,
-        .delete-file-window-title,
-        .delete-package-window-title,
-        .folder-to-delete {
-          align-self: flex-start;
-          font-size: 1.3em;
+
+        .name-input-buttons-container {
+          padding-top: 10px;
+        }
+      }
+
+      .delete-folder-window-title,
+      .delete-file-window-title,
+      .delete-package-window-title,
+      .folder-to-delete {
+        align-self: flex-start;
+        font-size: 1.3em;
+        font-weight: bold;
+      }
+
+      .folder-to-delete-parent-project {
+        color: $color-danger;
+        font-weight: bold;
+      }
+
+      .delete-package-window-controls {
+        .package-to-delete {
+          color: $color-danger;
+
           font-weight: bold;
         }
+      }
 
-        .folder-to-delete-parent-project {
-            color: $color-danger;
-            font-weight: bold;
+
+      .delete-folder-window-controls {
+        .folder-to-delete {
         }
 
-        .delete-package-window-controls {
-          .package-to-delete {
-            color: $color-danger;
-            font-weight: bold;
-          }
+        .folder-to-delete-parent-project {
         }
+      }
 
-        .delete-folder-window-controls {
-          .folder-to-delete {
-          }
+      .delete-file-window-container {
+        display: flex;
+        flex-direction: column;
 
-          .folder-to-delete-parent-project {
-          }
+        .delete-file-window-title {
+          align-self: flex-start;
         }
 
-        .delete-file-window-container {
-          display: flex;
-          flex-direction: column;
 
-          .delete-file-window-title {
-            align-self: flex-start;
-          }
+      }
 
+      .delete-file-window-controls {
+        .file-to-delete {
+          color: $color-danger;
+          font-weight: bold;
         }
 
-        .delete-file-window-controls {
-          .file-to-delete {
-            color: $color-danger;
-            font-weight: bold;
-          }
 
-          .file-to-delete-parent-project {
-            font-weight: bold;
-            // color: rgb(25, 168, 148);
-            // color: $color-danger;
-          }
+        .file-to-delete-parent-project {
+          font-weight: bold;
+          // color: rgb(25, 168, 148);
+          // color: $color-danger;
+
         }
+      }
 
-        .default-window {
-          .default-window-container {
-            h4 {
-              padding-bottom: 80px;
-            }
+      .default-window {
+        .default-window-container {
+          h4 {
+            padding-bottom: 80px;
+          }
 
-            .default-window-option {
-              line-height: 2.5em;
+          .default-window-option {
+            line-height: 2.5em;
 
-              span,
-              button > span { 
-                margin-left: 20px;
-              }
+            span,
+            button > span {
+              margin-left: 20px;
+            }
 
-              span {
-                // color: white;
-              }
+            span {
+              // color: white;
+            }
 
-              .add-project-button-text,
-              .install-package-button-text {
-                // color: white;
-              }
+            .add-project-button-text,
+            .install-package-button-text {
+              // color: white;
             }
           }
         }
+      }
 
 
-        .default-window-container,
-        .name-project-window-container,
-        .name-project-folder-window-container,
-        .name-file-window-container,
-        .delete-file-window-container,
-        .delete-folder-window-container,
-        .delete-package-window-container {
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          justify-content: center;
-          width: 100%;
-        }
 
-        .default-window,
-        .name-project-window,
-        .name-project-folder-window,
-        .name-file-window,
-        .delete-package-window,
-        .delete-file-window,
-        .delete-folder-window {
-          align-items: center;
+      .default-window-container,
+      .name-project-window-container,
+      .name-project-folder-window-container,
+      .name-file-window-container,
+      .delete-file-window-container,
+      .delete-folder-window-container,
+      .delete-package-window-container {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+      }
+
+      .default-window,
+      .name-project-window,
+      .name-project-folder-window,
+      .name-file-window,
+      .delete-package-window,
+      .delete-file-window,
+      .delete-folder-window {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+      }
+
+      .name-project-window-title,
+      .name-file-window-title {
+        text-align: center;
+      }
+
+      .card-body {
+      }
+
+      .name-file-window {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+
+        .name-file-window-container {
           display: flex;
           flex-direction: column;
           height: 100%;
-          justify-content: center;
+
           width: 100%;
         }
+      }
 
-        .name-project-window-title,
-        .name-file-window-title {
-          text-align: center;
-        }
+      .package-install-window {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        padding-left: 25%;
+        padding-right: 25%;
 
-        .card-body {
+        width: 100%;
+
+        .package-install-window-title {
+          font-size: 1.5em;
+          font-weight: bold;
+          text-align: center;
         }
 
-        .name-file-window {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            width: 100%;
 
-          .name-file-window-container {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            width: 100%;
-          }
+        .card {
+          border: 0 solid transparent !important;
         }
 
-        .package-install-window {
+        .package-install-source-form {
+          align-items: center;
+
           display: flex;
-          flex-direction: column;
-          height: 100%;
+          flex-direction: row;
+          height: 100px;
+
           justify-content: center;
           padding-left: 25%;
           padding-right: 25%;
 
           width: 100%;
 
-          .package-install-window-title {
-            font-size: 1.5em;
-            font-weight: bold;
-            text-align: center;
-          }
-
-          .card {
-            border: 0 solid transparent !important;
-          }
 
-          .package-install-source-form {
+          .package-install-option-container {
             align-items: center;
-
             display: flex;
-            flex-direction: row;
-            height:100px;
+            flex-direction: column;
             justify-content: center;
+            width: 100px;
 
-            .package-install-option-container {
-              align-items:center;
-              display: flex;
-              flex-direction:column;
-              justify-content:center;
-              width: 100px;
 
-              .package-install-source-icon {
-                font-size: 2em;
-                margin-bottom: 5px;
-              }
+            .package-install-source-icon {
+              font-size: 2em;
+              margin-bottom: 5px;
+            }
 
-              .package-install-source-option {
-                height: 25px;
-                width: 25px;
-              }
+            .package-install-source-option {
+              height: 25px;
+              width: 25px;
             }
           }
+        }
 
-          .package-install-details-form {
-            .project-name-invalid-text {
 
-              color: $color-danger !important;
-              margin-bottom: 20px;
-            }
+        .package-install-details-form {
+          .project-name-invalid-text {
 
+            color: $color-danger !important;
+            margin-bottom: 20px;
+            display: block;
+          }
 
-            .package-install-input-container {
-              display: flex;
-              flex-direction: column;
 
-              margin-bottom: 20px;
 
-              .project-name-input.invalid:focus,
-              .project-name-input.invalid {
-                border: 1px solid $color-danger !important;
-                outline-color: $color-danger !important;
-              }
+          .package-install-input-container {
+            display: flex;
+            flex-direction: column;
+
+            margin-bottom: 20px;
+
 
+            .project-name-input.invalid:focus,
+            .project-name-input.invalid {
+              border: 1px solid $color-danger !important;
+              outline-color: $color-danger !important;
+            }
 
-              .search-status-icon-container {
-                text-align: center;
-                width: 40px;
 
-                i {
-                  color: white;
+            .search-status-icon-container {
+              text-align: center;
+              width: 40px;
 
-                  &.not-searching {
-                    color: white; //rgba(0,255,0, 0.1);
-                  }
+              i {
+                color: white;
 
-                  &.found, &.loading {
-                    color: green;
-                  }
 
-                  &.not-found {
-                    color: rgb(145, 50, 120);
-                  }
+                &.not-searching {
+                  color: white; //rgba(0,255,0, 0.1);
+                }
 
+
+                &.found, &.loading {
+                  color: green;
                 }
-              }
 
-              .package-install-deploy-targets-dropdown {
+                &.not-found {
+                  color: rgb(145, 50, 120);
+                }
+
+
               }
+            }
 
-              .package-install-github-query-container {
-                .package-install-github-user {
-                  margin-bottom: 20px;
-                }
+            .package-install-deploy-targets-dropdown {
+            }
 
-                .package-install-github-repo-lookup {
-                  margin-bottom: 20px;
 
-                  .github-package-search-box {
-                    align-items: center;
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: center;
-                  }
-                }
+            .package-install-github-query-container {
+              .package-install-github-user {
+                margin-bottom: 20px;
               }
 
-              .package-install-npm-lookup {
-                .package-install-npm-query-container {
+              .package-install-github-repo-lookup {
+                margin-bottom: 20px;
+
+                .github-package-search-box {
                   align-items: center;
                   display: flex;
                   flex-direction: row;
-                  margin-bottom: 20px;
+                  justify-content: center;
+
                 }
               }
+            }
 
+            .package-install-npm-lookup {
+              .package-install-npm-query-container {
+                align-items: center;
+                display: flex;
+                flex-direction: row;
+                margin-bottom: 20px;
+              }
             }
+
           }
+        }
 
+      }
+
+      .editor {
+        &.current-file-path::before {
         }
 
-        .editor {
-          &.current-file-path::before {
-          }
 
-          &.current-file-path {
-            align-self: flex-start;
-            color: darkgray;
+        &.current-file-path {
+          align-self: flex-start;
+          color: darkgray;
+
+          .current-file-path-icon {
+            padding: 5px;
 
-            .current-file-path-icon {
-              padding: 5px;
-            }
           }
-          width: 100%;
         }
 
-        .package-install-source-form {
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          justify-content: center;
-          width: 100%;
-
-          .package-install-source-icon {
-            font-size: 2em;
 
-            &.fab.fa-npm {
-              color: rgb(145, 50, 120);
-              font-size: 3em;
-            }
+        width: 100%;
+      }
 
-            &.fa-github,
-            &.fa-link {
-              padding: 5px;
-            }
+      .package-install-source-form {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
 
-            &.fa-link {
-              color: lightgray;
-            }
+        .package-install-source-icon {
+          font-size: 2em;
 
-            &.fa-github {
-              color: rgb(28, 182, 149);
-            }
+          &.fab.fa-npm {
+            color: rgb(145, 50, 120);
+            font-size: 3em;
           }
 
-          .package-type {
-            border: 0 solid transparent !important;
-            display: flex;
-            flex-direction: row;
-            margin-bottom: 30px;
-
-            label {
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              min-width: 80px;
-              text-align: center;
-            }
+          &.fa-github,
+          &.fa-link {
+            padding: 5px;
+          }
 
-            input:focus {
-              outline: none !important;
-            }
+          &.fa-link {
+            color: lightgray;
+          }
 
-            input {
-              margin-top: 10px;
-            }
+          &.fa-github {
+            color: rgb(28, 182, 149);
           }
         }
 
-        .filename-dialog {
-          align-items: center;
+        .package-type {
+          border: 0 solid transparent !important;
           display: flex;
-          height: 100%;
-          justify-content: center;
-          width: 100%;
+          flex-direction: row;
+          margin-bottom: 30px;
+
+          label {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            min-width: 80px;
+            text-align: center;
+          }
+
+          input:focus {
+            outline: none !important;
+          }
+
+          input {
+            margin-top: 10px;
+          }
+
         }
+      }
+
+      .filename-dialog {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+      }
     }
 
   }
diff --git a/src/components/instance/functions/manage/index.js b/src/components/instance/functions/manage/index.js
index 5ed7a01e2..503658eb1 100644
--- a/src/components/instance/functions/manage/index.js
+++ b/src/components/instance/functions/manage/index.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useStoreState } from 'pullstate';
 import { useParams } from 'react-router';
+import { useAlert } from 'react-alert';
 
 import appState from '../../../../functions/state/appState';
 import instanceState from '../../../../functions/state/instanceState';
@@ -77,6 +78,19 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
   const [instanceAuths] = useInstanceAuth({});
   const theme = useStoreState(appState, (s) => s.theme);
   const [ restartingInstance, setRestartingInstance ] = useState(false);
+  const alert = useAlert();
+
+  async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) {
+
+    setRestartingInstance(true);
+
+    setTimeout(async () => { 
+      await restartInstance({ auth: instanceAuth, url: instanceUrl });
+      setRestartingInstance(false);
+    }, 100);
+
+  }
+
 
   async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) {
 
@@ -103,7 +117,11 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
       payload: selectedFile.content
     };
 
-    await setComponentFile(payload);
+    const { error, message } = await setComponentFile(payload);
+
+    if (error) {
+      alert.error(message);
+    }
 
 
     if (restartRequired) {
@@ -148,15 +166,28 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
     const { path, project, name } = selectedFile;
     const newFile = getRelativeFilepath(path);
-    const { message: fileContent } = await getComponentFile({
+    const { error, message } = await getComponentFile({
       auth,
       url,
       project,
       file: newFile
     });
 
+    if (error) {
+
+      alert.error(message);
+
+      return {
+        content: '',
+        path,
+        project,
+        name
+      };
+
+    }
+
     return {
-      content: fileContent,
+      content: message,
       path,
       project,
       name
@@ -166,31 +197,35 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   async function deleteFile(f) {
 
-    await dropComponent({
+    const { error, message } = await dropComponent({
       auth,
       url,
       project: f.project,
       file: getRelativeFilepath(f.path)
     });
 
+    if (error) {
+      alert.error(message);
+    }
+
     await refreshCustomFunctions();
 
   }
 
   async function deletePackage({ name: project }) {
 
-    await dropComponent({
+    const { error, message } = await dropComponent({
       auth,
       url,
       project
     });
 
+    if (error) {
+      alert.error(message);
+      return;
+    }
 
-    await restartInstance({
-      auth,
-      url
-    });
-
+    await restartInstance({ auth, url });
     await refreshCustomFunctions();
 
   }
@@ -203,19 +238,32 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
     // if we're deleting a top-level directory, that's a project,
     // so don't pass a file. otherwise pass project name and file/dir
     // relative to project name as 'file'.
+
     if (targetDirpath.length > 0) {
-      await dropComponent({
+
+      const { error, message } = await dropComponent({
         auth,
         url,
         project,
         file: targetDirpath
       });
+
+      if (error) {
+        alert.error(message);
+      }
+
     } else {
-      await dropComponent({
+
+      const { error, message } = await dropComponent({
         auth,
         url,
         project
       });
+
+      if (error) {
+        alert.error(message);
+      }
+
     }
 
     await refreshCustomFunctions();
@@ -224,13 +272,19 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   async function createNewProject(newProjectName) {
 
-    await addComponent({
+    const { error, message } = await addComponent({
       auth,
       url,
       project: newProjectName
     });
 
-    // await restartInstance({ auth, url });
+
+    if (error) {
+      alert.error(message);
+    }
+
+    await restartInstance({ auth, url });
+
     await refreshCustomFunctions();
 
   }
@@ -241,13 +295,17 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
     const relativeDirpath = getRelativeFilepath(path);
     const relativeFilepath = relativeDirpath ? `${relativeDirpath}/${newFolderName}` : newFolderName;
 
-    await setComponentFile({
+    const { error, message } = await setComponentFile({
       auth,
       url,
       project,
       file: relativeFilepath
     })
 
+    if (error) {
+      alert.error(message);
+    }
+
     await refreshCustomFunctions();
 
   }
@@ -257,18 +315,27 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
     const deployPromises = deployTargets.map(async (t) => {
 
       // TODO: check error here.
-      await deployComponent({
+
+      const { error, message } = await deployComponent({
+
         auth: t.auth,
         url: t.instance.url,
         project: projectName,
         packageUrl
       });
 
+      if (error) {
+        alert.error(message);
+      }
+
+
+     // TODO: what do we actually want to do about an invalid package?
       // change to restartService({ auth, url, service: 'http_worker' });
       await restartInstance({ auth: t.auth, url: t.instance.url });
 
     });
 
+
     await Promise.all(deployPromises);
     await refreshCustomFunctions();
 
@@ -285,11 +352,12 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
      // TODO: what do we actually want to do about an invalid package?
       // change to restartService({ auth, url, service: 'http_worker' });
+
       await restartInstance({ auth: deployTarget.auth, url: deployTarget.instance.url });
 
     }
     */
-    
+
     await refreshCustomFunctions();
 
 
diff --git a/src/components/shared/webide/FileBrowser.js b/src/components/shared/webide/FileBrowser.js
index 4c3234284..aa1b01baf 100644
--- a/src/components/shared/webide/FileBrowser.js
+++ b/src/components/shared/webide/FileBrowser.js
@@ -8,7 +8,7 @@ function NoProjects() {
   return (
     <div className="no-projects">
       <p>You have no HarperDB applications yet. Click the <i className="fas fa-file-code" /> button in the menu above to create your first application!</p>
-      <p>See the <a href="https://docs.harperdb.io" target="_blank" rel="noreferrer"> documentation </a> for more info on HarperDB Applications.</p>
+      <p>See the <a className="docs-link" href="https://docs.harperdb.io" target="_blank" rel="noreferrer"> documentation </a> for more info on HarperDB Applications.</p>
     </div>
   );
 }
@@ -33,12 +33,13 @@ function directorySortComparator(a, b) {
 
 const isFolder = (entry) => Boolean(entry.entries);
 
-function ProjectIcon({ toggleClosed }) {
-  return <i onClick={toggleClosed} className={cn(`project-icon fas fa-file-code`)} />;
+
+function ProjectIcon() {
+  return <i className={cn(`project-icon fas fa-file-code`)} />;
+
 }
 function FolderIcon({ isOpen, toggleClosed }) {
-  const folderClassName = isOpen ? 'fa-folder-open' : 'fa-folder';
-  return <i onClick={toggleClosed} className={cn(`folder-icon fas ${folderClassName}`)} />;
+  return <i onClick={toggleClosed} className={cn(`folder-icon fas fa-folder-open`)} />;
 }
 
 function FiletypeIcon({ extension }) {
@@ -165,6 +166,10 @@ function Folder({ directoryEntry, userOnSelect, onFolderSelect, onDeployProject,
   const entries = [...(directoryEntry.entries || [])].sort(directorySortComparator);
   const fileExtension = parseFileExtension(directoryEntry.name);
 
+  if (directoryEntry.path.endsWith('asdf')) {
+    console.log('directoryEntry: ', directoryEntry.path);
+    console.log('open: ', open);
+  }
   let Icon;
   // top-level dir === package
   // FolderIcon/PackageIcon is func so we can give it open args now, but instantiate it later.
@@ -216,10 +221,13 @@ function Folder({ directoryEntry, userOnSelect, onFolderSelect, onDeployProject,
       {
         entries.map((entry) => (
           <li key={entry.key}>
-            <ul className={cn(`folder`, {
-              'folder-contents-open': open,
-              'folder-contents-closed': !open
-            })}>
+            <ul className={
+              cn('folder', {
+                // TODO: fix this logic, folders aren't closing.
+                'folder-contents-open': true,
+                'folder-contents-closed': false
+              })
+            }>
               <Folder
                 selectedFile={selectedFile}
                 selectedFolder={selectedFolder}
diff --git a/src/components/shared/webide/index.js b/src/components/shared/webide/index.js
index 243d856bf..e2aae5e59 100644
--- a/src/components/shared/webide/index.js
+++ b/src/components/shared/webide/index.js
@@ -338,7 +338,7 @@ function WebIDE({
             }
             onCancel={
               () => {
-                backToPreviousWindow();
+                toDefaultWindow();
               }
             }
 
@@ -361,7 +361,7 @@ function WebIDE({
             }
             onCancel={
               () => {
-                backToPreviousWindow();
+                toDefaultWindow();
               }
             }
           />
@@ -378,7 +378,7 @@ function WebIDE({
             }
             onCancel={
               () => {
-                backToPreviousWindow();
+                toDefaultWindow();
               }
             }
           />
diff --git a/src/components/shared/webide/windows/NameInput.js b/src/components/shared/webide/windows/NameInput.js
index 454fc53b3..413b86107 100644
--- a/src/components/shared/webide/windows/NameInput.js
+++ b/src/components/shared/webide/windows/NameInput.js
@@ -4,9 +4,12 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
 
-export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='',  value }) {
+export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate=() => true }) {
+
+
 
   const [ name, setName ] = useState(value || '');
+  const [ isValidName, setIsValidName ] = useState(false); 
 
   function handleKeyDown(e) {
 
@@ -34,18 +37,36 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac
       tabIndex={0}
       className={ cn("name-input") }>
       { label && <label><span>{label}:</span></label> }
-        <input
-          autoFocus
-          onChange={(e) => {
-            setName(e.target.value)
-          }}
-          onKeyDown={ handleKeyDown }
-          value={name}
-          placeholder={placeholder}
-          title="choose name for your new file or folder" />
+        <div className="name-input-container">
+          <input
+            className={ cn({ invalid: name.length > 0 && !isValidName }) }
+            autoFocus
+            onChange={(e) => {
+              setName(e.target.value);
+              setIsValidName(validate(e.target.value));
+            }}
+            onKeyDown={ handleKeyDown }
+            value={name}
+            placeholder={placeholder}
+            title="choose name for your new file or folder" />
+            <i title="error: project name must contain only alphanumeric characters, dashes and underscores." className={
+              cn("invalid-project-name fa fa-warning", {
+                hidden: isValidName || name.length === 0 
+              })
+            }
+            />
+        </div>
+        { name.length > 0 && !isValidName && <span className="validation-message">error: project name must contain only alphanumeric characters, dashes and underscores.</span> }
 
+          <span className="invalid-text" />
           <div className="name-input-buttons-container">
-            <button type="button" className="btn btn-success name-input-confirm" onClick={ () => {
+
+            <button
+              type="button"
+              disabled={ !isValidName }
+              className="btn btn-success name-input-confirm"
+              onClick={ () => {
+
                 onConfirm(name); 
               }}>ok</button>
             <button type="button" className="btn btn-secondary name-input-cancel cancel-button" onClick={ onCancel }>cancel</button>
diff --git a/src/components/shared/webide/windows/NameProjectFolderWindow.js b/src/components/shared/webide/windows/NameProjectFolderWindow.js
index 005923755..86ac934d3 100644
--- a/src/components/shared/webide/windows/NameProjectFolderWindow.js
+++ b/src/components/shared/webide/windows/NameProjectFolderWindow.js
@@ -7,9 +7,9 @@ export default function NameProjectFolderWindow({ active, onConfirm, onCancel })
 
   return !active ? null : (
     <Card className="name-project-folder-window">
-      <CardTitle className="name-project-folder-window-title">Name Your Project</CardTitle> 
+      <CardTitle className="name-project-folder-window-title">Name Your Folder</CardTitle> 
       <NameInput
-        placeholder="Your new project name"
+        placeholder="Your new folder name"
         onEnter={ onConfirm }
         onConfirm={ onConfirm }
         onCancel={ onCancel } />
diff --git a/src/components/shared/webide/windows/NameProjectWindow.js b/src/components/shared/webide/windows/NameProjectWindow.js
index aa5032ebd..47344c554 100644
--- a/src/components/shared/webide/windows/NameProjectWindow.js
+++ b/src/components/shared/webide/windows/NameProjectWindow.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardTitle } from 'reactstrap';
 import NameInput from './NameInput';
+import { isValidProjectName } from './lib';
 
 export default function NameProjectWindow({ active, onConfirm, onCancel }) {
   return !active ? null : (
@@ -8,6 +9,7 @@ export default function NameProjectWindow({ active, onConfirm, onCancel }) {
       <CardTitle className="name-project-window-title">Name Your Project</CardTitle> 
       <NameInput
         placeholder="Your new project name"
+        validate={ isValidProjectName }
         onEnter={ onConfirm }
         onConfirm={ onConfirm }
         onCancel={ onCancel } />
diff --git a/src/functions/api/instance/updateSystemInfo.js b/src/functions/api/instance/updateSystemInfo.js
index cfb0d4869..8e4181806 100644
--- a/src/functions/api/instance/updateSystemInfo.js
+++ b/src/functions/api/instance/updateSystemInfo.js
@@ -52,6 +52,7 @@ export default async ({ auth, url, signal, refresh, is_local, cachedSystemInfo,
     });
   }
 
+
   // MEMORY
   const totalMemory = skip.includes('memory') ?
     parseFloat(cachedSystemInfo.totalMemory) :