@nomo-ai/wcode-dev-host 0.9.2 → 0.9.4

package/package.json

@@ -1,29 +1,30 @@
 {
   "name": "@nomo-ai/wcode-dev-host",
   "private": false,
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "WCode plugin development host",
   "author": "NomoAIT",
   "license": "Apache-2.0",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
-  },
   "dependencies": {
-    "@nomo-ai/wcode-core": "workspace:^0.9.2",
-    "element-plus": "^2.13.2",
-    "vue": "^3.5.27"
+    "vue": "^3.5.27",
+    "@nomo-ai/wcode-core": "^0.9.4"
   },
   "peerDependencies": {
-    "@nomo-ai/wcode-core": "^0.9.2"
+    "@nomo-ai/wcode-core": "^0.9.4"
   },
   "devDependencies": {
-    "@nomo-ai/wcode-core": "workspace:*",
     "@vitejs/plugin-vue": "^6.0.4",
+    "monaco-editor": "^0.45.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vue-tsc": "^3.2.4"
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vue-tsc": "^3.2.4",
+    "@nomo-ai/wcode-core": "^0.9.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   }
-}
+}

package/src/App.vue

@@ -1,15 +1,52 @@
 <template>
-  <div id="editor-container" ref="editorContainer" style="width: 100%; height: 100vh;"></div>
+  <div class="app-layout" @mouseup="stopResize" @mousemove="doResize">
+    <ActivityBar />
+    <div class="sidebar" :style="{ width: sidebarWidth + 'px' }">
+      <FileTree v-if="ide" :ide="ide" />
+    </div>
+    <div class="resize-handle" @mousedown="startResize"></div>
+    <div id="editor-container" ref="editorContainer" class="main-content"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, shallowRef } from 'vue';
 import { WCode } from 'wcode';
 import type { WCodePlugin } from 'wcode';
 import * as UserPluginModule from 'virtual:user-plugin';
+import FileTree from './components/FileTree.vue';
+import ActivityBar from './components/ActivityBar.vue';
 
 const editorContainer = ref<HTMLElement>();
-let ide: WCode | null = null;
+const ide = shallowRef<WCode | null>(null);
+
+// Sidebar Resizing Logic
+const sidebarWidth = ref(250);
+const isResizing = ref(false);
+
+function startResize() {
+  isResizing.value = true;
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none'; // Prevent selection while dragging
+}
+
+function doResize(event: MouseEvent) {
+  if (isResizing.value) {
+    // 48px is activity bar width
+    const newWidth = event.clientX - 48;
+    if (newWidth > 150 && newWidth < 600) {
+      sidebarWidth.value = newWidth;
+    }
+  }
+}
+
+function stopResize() {
+  if (isResizing.value) {
+    isResizing.value = false;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+}
 
 onMounted(() => {
   if (!editorContainer.value) return;
@@ -37,13 +74,15 @@ onMounted(() => {
     console.warn('Could not find a valid WCodePlugin export in src/index.ts');
   }
 
-  ide = new WCode(editorContainer.value, {
+  const instance = new WCode(editorContainer.value, {
     theme: 'dark',
     layout: {
-      showFileTree: true,
+      showFileTree: false, // We render our own external FileTree
       showTabs: true,
       showStatusBar: true,
-      showTerminal: true
+      showTerminal: true,
+      showActivityBar: false, // Hide core activity bar as we have our own sidebar
+      showMenuBar: true // Keep menu bar for "Open Folder" command
     },
     files: [
       {
@@ -57,7 +96,9 @@ onMounted(() => {
     terminalToken: 'dev-token-123'
   });
 
-  ide.on('ready', () => {
+  ide.value = instance;
+
+  instance.on('ready', () => {
     console.log('WCode Dev Environment Ready');
   });
 });
@@ -67,4 +108,52 @@ onMounted(() => {
 :root {
   color-scheme: dark;
 }
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #1e1e1e;
+}
+
+.app-layout {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sidebar {
+  height: 100%;
+  flex-shrink: 0;
+  background-color: #252526;
+  overflow: hidden;
+}
+
+.resize-handle {
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.resize-handle:hover, .resize-handle:active {
+  background-color: #007fd4;
+}
+
+.main-content {
+  flex: 1;
+  height: 100%;
+  min-width: 0; /* Prevent flex item from overflowing */
+  overflow: hidden;
+}
+
+/* Override WCode container to fit */
+.wcode-container {
+  width: 100% !important;
+  height: 100% !important;
+}
 </style>

package/src/components/ActivityBar.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="activity-bar">
+    <div 
+      v-for="item in items" 
+      :key="item.id" 
+      class="activity-item" 
+      :class="{ active: activeItem === item.id }"
+      @click="activeItem = item.id"
+      :title="item.label"
+    >
+      <div class="icon-container" v-html="item.icon"></div>
+      <div class="active-indicator" v-if="activeItem === item.id"></div>
+    </div>
+    
+    <div class="activity-bar-bottom">
+      <div class="activity-item" title="Accounts">
+        <div class="icon-container">
+          <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1a6 6 0 1 1 0 12A6 6 0 0 1 8 2z"/>
+            <path d="M8 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM8 9a3 3 0 0 0-3 3 .5.5 0 0 0 1 0 2 2 0 0 1 4 0 .5.5 0 0 0 1 0 3 3 0 0 0-3-3z"/>
+          </svg>
+        </div>
+      </div>
+      <div class="activity-item" title="Settings">
+        <div class="icon-container">
+          <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.4h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeItem = ref('explorer');
+
+const items = [
+  {
+    id: 'explorer',
+    label: 'Explorer',
+    icon: `<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="M10 4H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h6V6H4v6z"/><path d="M13 4V3H3v1h10z"/><path d="M13 2V1H3v1h10z"/></svg>`
+  },
+  {
+    id: 'search',
+    label: 'Search',
+    icon: `<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>`
+  },
+  {
+    id: 'scm',
+    label: 'Source Control',
+    icon: `<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1a3 3 0 0 1 3 3c0 .85-.357 1.62-.924 2.162l1.096 3.107a3.001 3.001 0 1 1-.95 2.58l-1.22-3.46a2.986 2.986 0 0 1-1.936-.02L4.99 11.55a3.001 3.001 0 1 1-.866-2.68L5.22 5.77A2.992 2.992 0 0 1 7 1zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-3 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm6 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>`
+  },
+  {
+    id: 'debug',
+    label: 'Run and Debug',
+    icon: `<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="M8 2a3 3 0 0 0-3 3v.688A3.002 3.002 0 0 0 2 8v3.5A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5V8a3.002 3.002 0 0 0-3-2.312V5a3 3 0 0 0-3-3zm0 1a2 2 0 0 1 2 2v.223A3.996 3.996 0 0 0 8 5a3.996 3.996 0 0 0-2 .223V5a2 2 0 0 1 2-2zM4 11h3V9H4v2zm5 0h3V9H9v2z"/></svg>`
+  },
+  {
+    id: 'extensions',
+    label: 'Extensions',
+    icon: `<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="M9 1H4a2 2 0 0 0-2 2v3h1V3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H8v1h1a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/><path d="M7 6H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm0 6H4V7h3v5z"/></svg>`
+  }
+];
+</script>
+
+<style scoped>
+.activity-bar {
+  width: 48px;
+  height: 100%;
+  background-color: #333333;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-right: 1px solid #252526;
+  user-select: none;
+}
+
+.activity-item {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  color: #858585;
+}
+
+.activity-item:hover {
+  color: #ffffff;
+}
+
+.activity-item.active {
+  color: #ffffff;
+}
+
+.active-indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: #007fd4; /* VS Code blue */
+}
+
+.icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.activity-bar-bottom {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 5px;
+}
+</style>

package/src/components/FileTree.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="file-tree-container">
+    <div class="tree-header">资源管理器</div>
+    <ul class="root-list">
+      <FileTreeNode 
+        v-for="node in treeData" 
+        :key="node.path" 
+        :node="node" 
+        :depth="0" 
+        :active-path="activePath"
+        @open-file="handleOpenFile"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import type { WCode, FileNode } from 'wcode';
+import FileTreeNode from './FileTreeNode.vue';
+
+const props = defineProps<{
+  ide: WCode;
+}>();
+
+const treeData = ref<FileNode[]>([]);
+const activePath = ref<string | null>(null);
+
+function updateTree() {
+  if (props.ide) {
+    treeData.value = props.ide.getFileSystem().getFileTree();
+  }
+}
+
+function handleOpenFile(path: string) {
+  props.ide.openFile(path);
+  activePath.value = path;
+}
+
+// Listen to IDE events
+function setupListeners() {
+  const events = [
+    'file:create', 'file:delete', 'file:rename',
+    'directory:create', 'directory:delete', 'directory:rename'
+  ] as const;
+
+  events.forEach(event => {
+    props.ide.on(event, () => {
+      updateTree();
+    });
+  });
+
+  props.ide.on('file:open', ({ path }) => {
+    activePath.value = path;
+  });
+
+  // Listen for bulk project load
+  props.ide.on('project:load', () => {
+    updateTree();
+  });
+}
+
+onMounted(() => {
+  updateTree();
+  setupListeners();
+});
+</script>
+
+<style scoped>
+.file-tree-container {
+  height: 100%;
+  overflow-y: auto;
+  background-color: #252526;
+  color: #ccc;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.tree-header {
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background-color: #252526;
+  position: sticky;
+  top: 0;
+}
+
+.root-list {
+  padding: 0;
+  margin: 0;
+}
+</style>

package/src/components/FileTreeNode.vue

@@ -0,0 +1,121 @@
+<template>
+  <li class="file-tree-node">
+    <div 
+      class="node-content" 
+      :class="{ active: isActive, 'is-directory': isDirectory }"
+      @click="handleClick"
+      @dblclick="handleDoubleClick"
+      :style="{ paddingLeft: depth * 12 + 'px' }"
+    >
+      <span class="icon" v-if="isDirectory" @click.stop="toggleExpand">
+        {{ isExpanded ? '▼' : '▶' }}
+      </span>
+      <span class="icon" v-else>📄</span>
+      <span class="label">{{ node.name }}</span>
+    </div>
+    
+    <ul v-if="isDirectory && isExpanded" class="children-list">
+      <FileTreeNode 
+        v-for="child in sortedChildren" 
+        :key="child.path" 
+        :node="child" 
+        :depth="depth + 1"
+        :active-path="activePath"
+        @open-file="$emit('open-file', $event)"
+      />
+    </ul>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, toRefs } from 'vue';
+import type { FileNode } from 'wcode';
+
+const props = defineProps<{
+  node: FileNode;
+  depth: number;
+  activePath: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'open-file', path: string): void;
+}>();
+
+const { node, activePath } = toRefs(props);
+const isExpanded = ref(false);
+
+const isDirectory = computed(() => props.node.type === 'directory');
+
+const isActive = computed(() => {
+  return !isDirectory.value && activePath.value === props.node.path;
+});
+
+const sortedChildren = computed(() => {
+  if (!props.node.children) return [];
+  // Directories first, then files
+  return [...props.node.children].sort((a, b) => {
+    if (a.type === b.type) return a.name.localeCompare(b.name);
+    return a.type === 'directory' ? -1 : 1;
+  });
+});
+
+function handleClick() {
+  if (!isDirectory.value) {
+    emit('open-file', props.node.path);
+  } else {
+    toggleExpand();
+  }
+}
+
+function handleDoubleClick() {
+  if (!isDirectory.value) {
+    emit('open-file', props.node.path);
+  }
+}
+
+function toggleExpand() {
+  if (isDirectory.value) {
+    isExpanded.value = !isExpanded.value;
+  }
+}
+</script>
+
+<style scoped>
+.file-tree-node {
+  list-style: none;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: #ccc;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.node-content:hover {
+  background-color: #3e3e42;
+}
+
+.node-content.active {
+  background-color: #37373d;
+  color: #fff;
+}
+
+.icon {
+  margin-right: 6px;
+  width: 16px;
+  display: inline-block;
+  text-align: center;
+}
+
+.children-list {
+  padding: 0;
+  margin: 0;
+}
+</style>

package/src/env.d.ts

@@ -1,6 +1,7 @@
 declare module '*.vue' {
   import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const component: DefineComponent<object, object, any>;
   export default component;
 }
 

package/src/main.ts

@@ -1,9 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import { WCode } from '@nomo-ai/wcode-core';
-import 'element-plus/dist/index.css';
-import 'element-plus/theme-chalk/dark/css-vars.css';
+// import { WCode } from '@nomo-ai/wcode-core';
 
-console.log('WCode Core loaded:', WCode);
+// console.log('WCode Core loaded:', WCode);
 
 createApp(App).mount('#app');

package/tsconfig.json

@@ -2,7 +2,10 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "types": ["vite/client", "element-plus/global"],
+    "paths": {
+      "wcode": ["../core/src/index.ts"]
+    },
+    "types": ["vite/client"],
     "jsx": "preserve",
     "jsxImportSource": "vue"
   },

package/vite.config.ts

@@ -3,7 +3,7 @@ import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 
-// @ts-ignore
+// @ts-expect-error - vite-plugin-monaco-editor type definition might be missing or incorrect
 const monacoEditorPluginDefault = monacoEditorPlugin.default || monacoEditorPlugin;
 
 export default defineConfig({
@@ -23,22 +23,22 @@ export default defineConfig({
         if (id === '\0virtual:user-plugin') {
           return 'export default {}'; // Empty plugin for standalone mode
         }
-      }
-    }
+      },
+    },
   ],
   resolve: {
     alias: {
       // Link to local source for development
-      'wcode': path.resolve(__dirname, '../src'),
+      wcode: path.resolve(__dirname, '../core/src'),
       // Fix for JSZip in browser
-      'jszip': 'jszip/dist/jszip.min.js',
-    }
+      jszip: 'jszip/dist/jszip.min.js',
+    },
   },
   assetsInclude: ['**/*.ttf'],
   server: {
     port: 3000,
     fs: {
-      strict: false
-    }
-  }
-});
+      strict: false,
+    },
+  },
+});