Code editor and widget

src/apps/officer-web/App.tsx

@@ -48,6 +48,7 @@ export function App() {
             <Route path="/plans" element={<Dashboard.Plans />} />
             <Route path="/files" element={<Dashboard.Files />} />
             <Route path="/terminal" element={<Dashboard.Terminal />} />
+            <Route path="/code-editor" element={<Dashboard.CodeEditor />} />
             <Route path="/skills" element={<Dashboard.Skills />} />
             <Route path="/tasks" element={<Dashboard.Tasks />} />
             <Route path="/processes" element={<Dashboard.Processes />} />

src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx

@@ -0,0 +1,10 @@
+import { CodeEditorView } from 'widgets/CodeEditor';
+import { Widget } from '@/components/Widget';
+
+export const CodeEditor = () => (
+  <div className="h-full w-full flex items-center justify-center">
+    <Widget title="Code Editor" className="h-[70vh] w-[70vw] overflow-hidden" resizable moveable>
+      <CodeEditorView className="h-full w-full" />
+    </Widget>
+  </div>
+);

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -91,13 +91,14 @@ export const Dock = ({ items, className }: DockProps) => {
 };
 
 
-import { Terminal, TerminalSquare, FileText, FolderOpen } from 'lucide-react';
+import { Terminal, TerminalSquare, FileText, FolderOpen, Code } from 'lucide-react';
 import { Sparkles, ClipboardList, ScrollText, Workflow } from 'lucide-react';
 
 export const dockItems: DockItem[] = [
   { label: 'Chat', to: '/chat', icon: Terminal, color: '#60a5fa' },
   { label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
   { label: 'Terminal', to: '/terminal', icon: TerminalSquare, color: '#34d399' },
+  { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
   { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
   { label: 'Skills', to: '/skills', icon: Sparkles, color: '#c084fc' },
   { label: 'Tasks', to: '/tasks', icon: ClipboardList, color: '#fb923c' },

src/apps/officer-web/Screens/Dashboard/index.tsx

@@ -13,3 +13,4 @@ export * from './Tasks';
 export * from './Terminal';
 export * from './Files';
 export * from './ChatHistory';
+export * from './CodeEditor';

src/apps/officer-web/styles/globals.css

@@ -298,6 +298,30 @@
 }
 
 /* File Browser — Context menu hover behavior */
+/* Code Editor — thin dark scrollbars */
+.code-editor-scrollable {
+  scrollbar-width: thin;
+  scrollbar-color: #444 transparent;
+}
+
+.code-editor-scrollable::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.code-editor-scrollable::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.code-editor-scrollable::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 3px;
+}
+
+.code-editor-scrollable::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
 .file-grid:has([data-state="open"]) [data-file-item]:not([data-state="open"]) {
   pointer-events: none;
 }