diff --git a/frontend/app/workspace/workspace.less b/frontend/app/workspace/workspace.less
index 540bec624..4c4d89fc6 100644
--- a/frontend/app/workspace/workspace.less
+++ b/frontend/app/workspace/workspace.less
@@ -18,23 +18,34 @@
     .workspace-widgets {
         display: flex;
         flex-direction: column;
-        width: 40px;
+        width: 50px;
         overflow: hidden;
         background-color: var(--panel-bg-color);
         border-left: 1px solid var(--border-color);
 
         .widget {
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
             width: 100%;
-            padding: 10px 2px 10px 0;
+            padding: 8px 2px 8px 0;
             color: var(--secondary-text-color);
             font-size: 20px;
+            overflow: hidden;
+
             &:hover:not(.no-hover) {
                 background-color: var(--highlight-bg-color);
                 cursor: pointer;
-                color: white;
+                color: white !important;
+            }
+
+            .widget-icon {
+            }
+
+            .widget-label {
+                font-size: 10px;
+                margin-top: 3px;
             }
         }
     }
diff --git a/frontend/app/workspace/workspace.tsx b/frontend/app/workspace/workspace.tsx
index 0d0d34a2e..05be832cc 100644
--- a/frontend/app/workspace/workspace.tsx
+++ b/frontend/app/workspace/workspace.tsx
@@ -5,6 +5,7 @@ import { TabBar } from "@/app/tab/tabbar";
 import { TabContent } from "@/app/tab/tabcontent";
 import { atoms, createBlock } from "@/store/global";
 import * as services from "@/store/services";
+import * as util from "@/util/util";
 import * as jotai from "jotai";
 import * as React from "react";
 import { CenteredDiv } from "../element/quickelems";
@@ -22,9 +23,12 @@ function Widgets() {
         createBlock(termBlockDef);
     }
 
-    async function clickEdit() {
+    async function clickHome() {
         const editDef: BlockDef = {
-            view: "codeedit",
+            view: "preview",
+            meta: {
+                file: "~",
+            },
         };
         createBlock(editDef);
     }
@@ -37,20 +41,35 @@ function Widgets() {
     }
 
     async function handleRemoveWidget(idx: number) {
-        await services.FileService.RmWidget(idx);
+        await services.FileService.RemoveWidget(idx);
     }
 
     return (
         <div className="workspace-widgets">
             <div className="widget" onClick={() => clickTerminal()}>
-                <i className="fa fa-solid fa-square-terminal fa-fw" />
+                <div className="widget-icon">
+                    <i className="fa fa-solid fa-square-terminal fa-fw" />
+                </div>
+                <div className="widget-label">terminal</div>
             </div>
-            <div className="widget" onClick={() => clickEdit()}>
-                <i className="fa-sharp fa-solid fa-pen-to-square"></i>
+            <div className="widget" onClick={() => clickHome()}>
+                <div className="widget-icon">
+                    <i className="fa-sharp fa-solid fa-house"></i>
+                </div>
+                <div className="widget-label">home</div>
             </div>
             {settingsConfig.widgets.map((data, idx) => (
-                <div className="widget" onClick={() => handleWidgetSelect(data.blockdef)} key={`widget-${idx}`}>
-                    <i className={data.icon}></i>
+                <div
+                    className="widget"
+                    style={{ color: data.color }}
+                    onClick={() => handleWidgetSelect(data.blockdef)}
+                    key={`widget-${idx}`}
+                    title={data.description || data.label}
+                >
+                    <div className="widget-icon">
+                        <i className={data.icon}></i>
+                    </div>
+                    {!util.isBlank(data.label) ? <div className="widget-label">{data.label}</div> : null}
                 </div>
             ))}
             <div className="widget no-hover">
diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts
index d862ed946..ba826528b 100644
--- a/frontend/types/gotypes.d.ts
+++ b/frontend/types/gotypes.d.ts
@@ -31,7 +31,7 @@ declare global {
 
     type BlockCommand = {
         command: string;
-    } & ( BlockSetMetaCommand | BlockGetMetaCommand | BlockMessageCommand | BlockAppendFileCommand | BlockAppendIJsonCommand | ResolveIdsCommand | BlockInputCommand | BlockSetViewCommand );
+    } & ( ResolveIdsCommand | BlockSetViewCommand | BlockSetMetaCommand | BlockGetMetaCommand | BlockMessageCommand | BlockInputCommand | BlockAppendFileCommand | BlockAppendIJsonCommand | CreateBlockCommand );
 
     // wstore.BlockDef
     type BlockDef = {
@@ -88,6 +88,13 @@ declare global {
         meta: MetaType;
     };
 
+    // wshutil.CreateBlockCommand
+    type CreateBlockCommand = {
+        command: "createblock";
+        blockdef: BlockDef;
+        rtopts?: RuntimeOpts;
+    };
+
     // wstore.FileDef
     type FileDef = {
         filetype?: string;
@@ -168,6 +175,11 @@ declare global {
         termsize: TermSize;
     };
 
+    // wconfig.SettingsConfigType
+    type SettingsConfigType = {
+        widgets: WidgetsConfigType[];
+    };
+
     // wstore.StickerClickOptsType
     type StickerClickOptsType = {
         sendinput?: string;
@@ -228,6 +240,13 @@ declare global {
         data64: string;
     };
 
+    // wconfig.WatcherUpdate
+    type WatcherUpdate = {
+        file: string;
+        update: SettingsConfigType;
+        error: string;
+    };
+
     // filestore.WaveFile
     type WaveFile = {
         zoneid: string;
@@ -285,6 +304,9 @@ declare global {
     // wconfig.WidgetsConfigType
     type WidgetsConfigType = {
         icon: string;
+        color?: string;
+        label?: string;
+        description?: string;
         blockdef: BlockDef;
     };
 
diff --git a/pkg/tsgen/tsgen.go b/pkg/tsgen/tsgen.go
index ae1313efd..c46845372 100644
--- a/pkg/tsgen/tsgen.go
+++ b/pkg/tsgen/tsgen.go
@@ -15,11 +15,33 @@ import (
 	"github.com/wavetermdev/thenextwave/pkg/service"
 	"github.com/wavetermdev/thenextwave/pkg/tsgen/tsgenmeta"
 	"github.com/wavetermdev/thenextwave/pkg/waveobj"
+	"github.com/wavetermdev/thenextwave/pkg/wconfig"
 	"github.com/wavetermdev/thenextwave/pkg/web/webcmd"
 	"github.com/wavetermdev/thenextwave/pkg/wshutil"
 	"github.com/wavetermdev/thenextwave/pkg/wstore"
 )
 
+// add extra types to generate here
+var ExtraTypes = []any{
+	waveobj.ORef{},
+	(*waveobj.WaveObj)(nil),
+	map[string]any{},
+	service.WebCallType{},
+	service.WebReturnType{},
+	wstore.UIContext{},
+	eventbus.WSEventType{},
+	eventbus.WSFileEventData{},
+	filestore.WaveFile{},
+	wconfig.SettingsConfigType{},
+	wconfig.WatcherUpdate{},
+}
+
+// add extra type unions to generate here
+var TypeUnions = []tsgenmeta.TypeUnionMeta{
+	wshutil.CommandTypeUnionMeta(),
+	webcmd.WSCommandTypeUnionMeta(),
+}
+
 var contextRType = reflect.TypeOf((*context.Context)(nil)).Elem()
 var errorRType = reflect.TypeOf((*error)(nil)).Elem()
 var anyRType = reflect.TypeOf((*interface{})(nil)).Elem()
@@ -359,17 +381,12 @@ func GenerateServiceClass(serviceName string, serviceObj any, tsTypesMap map[ref
 }
 
 func GenerateWaveObjTypes(tsTypesMap map[reflect.Type]string) {
-	GenerateTSTypeUnion(wshutil.CommandTypeUnionMeta(), tsTypesMap)
-	GenerateTSTypeUnion(webcmd.WSCommandTypeUnionMeta(), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(waveobj.ORef{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf((*waveobj.WaveObj)(nil)).Elem(), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(map[string]any{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(service.WebCallType{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(service.WebReturnType{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(wstore.UIContext{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(eventbus.WSEventType{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(eventbus.WSFileEventData{}), tsTypesMap)
-	GenerateTSType(reflect.TypeOf(filestore.WaveFile{}), tsTypesMap)
+	for _, typeUnion := range TypeUnions {
+		GenerateTSTypeUnion(typeUnion, tsTypesMap)
+	}
+	for _, extraType := range ExtraTypes {
+		GenerateTSType(reflect.TypeOf(extraType), tsTypesMap)
+	}
 	for _, rtype := range wstore.AllWaveObjTypes() {
 		GenerateTSType(rtype, tsTypesMap)
 	}
diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go
index 895ff9bc5..9a1e5040c 100644
--- a/pkg/wconfig/settingsconfig.go
+++ b/pkg/wconfig/settingsconfig.go
@@ -12,8 +12,11 @@ const settingsFile = "settings.json"
 var settingsAbsPath = filepath.Join(configDirAbsPath, settingsFile)
 
 type WidgetsConfigType struct {
-	Icon     string          `json:"icon"`
-	BlockDef wstore.BlockDef `json:"blockdef"`
+	Icon        string          `json:"icon"`
+	Color       string          `json:"color,omitempty"`
+	Label       string          `json:"label,omitempty"`
+	Description string          `json:"description,omitempty"`
+	BlockDef    wstore.BlockDef `json:"blockdef"`
 }
 
 type SettingsConfigType struct {