File browser as widget

src/apps/officer-web/App.tsx

@@ -45,6 +45,7 @@ export function App() {
             <Route path="/chat/opencode/new" element={<Dashboard.OpenCodeChat />} />
             <Route path="/chat/opencode/:sessionId" element={<Dashboard.OpenCodeChat />} />
             <Route path="/plans" element={<Dashboard.Plans />} />
+            <Route path="/files" element={<Dashboard.Files />} />
             <Route path="/terminal" element={<Dashboard.Terminal />} />
             <Route path="/skills" element={<Dashboard.Skills />} />
             <Route path="/tasks" element={<Dashboard.Tasks />} />

src/apps/officer-web/Screens/Dashboard/Files/Screen/FileGrid.tsx

@@ -1,6 +1,5 @@
 import { useRef, useCallback } from 'react';
-import type { DirEntry } from '../state/useFiles';
-import type { TaskSummary } from '../state/useTasks';
+import type { DirEntry, TaskSummary } from 'widgets/FileBrowser';
 import { FileItem } from './FileItem';
 
 type ClipboardState = { paths: string[]; mode: 'copy' | 'cut' } | null;

src/apps/officer-web/Screens/Dashboard/Files/Screen/FileItem.tsx

@@ -22,8 +22,7 @@ import {
   ContextMenuTrigger,
 } from '@/components/ui/context-menu';
 import { cardStyle } from '@/components/Card';
-import type { DirEntry } from '../state/useFiles';
-import type { TaskSummary } from '../state/useTasks';
+import type { DirEntry, TaskSummary } from 'widgets/FileBrowser';
 
 export type FileItemProps = {
   entry: DirEntry;

src/apps/officer-web/Screens/Dashboard/Files/Screen/FileViewer.tsx

@@ -25,7 +25,7 @@ import rehypeSlug from 'rehype-slug';
 import { Dialog, DialogOverlay, DialogPortal } from '@/components/ui/dialog';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cardStyle } from '@/components/Card';
-import { useFiles } from '../state/useFiles';
+import { useFiles } from 'widgets/FileBrowser';
 import { getHeaders } from 'hooks/useClient';
 import { config } from 'config';
 import { getIcon } from 'material-file-icons';

src/apps/officer-web/Screens/Dashboard/Files/Screen/TaskRunnerModal.tsx

@@ -6,7 +6,7 @@ import { cardStyle } from '@/components/Card';
 import { useClaude, useOpenCode, EmbeddableChat, type TaskInfo } from 'plugins/Chat/client';
 import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
 import { useSettings } from '@/state/useSettings';
-import type { TaskSummary } from '../state/useTasks';
+import type { TaskSummary } from 'widgets/FileBrowser';
 
 const playDing = () => {
   const ctx = new AudioContext();

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

@@ -22,15 +22,11 @@ import {
 } from 'lucide-react';
 import { getIcon } from 'material-file-icons';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
-import { DashboardLayout } from '@/Screens/Dashboard/Layout';
-import { useFiles, type DirEntry } from '../state/useFiles';
-import { useTasks, type TaskSummary } from '../state/useTasks';
+import { useFiles, type DirEntry, useTasks, type TaskSummary, Breadcrumb, Toolbar } from 'widgets/FileBrowser';
 import { useUserState } from '@/state/useUserState';
 import { useAuth } from 'hooks/useAuth';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Card } from '@/components/Card';
-import { Breadcrumb } from './Breadcrumb';
-import { Toolbar } from './Toolbar';
 import { FileGrid } from './FileGrid';
 import { FileViewer } from './FileViewer';
 import { TaskRunnerModal } from './TaskRunnerModal';
@@ -377,7 +373,7 @@ export const Files = () => {
   };
 
   return (
-    <DashboardLayout>
+    <>
       <div className="flex items-center justify-center h-full p-0 md:p-4">
         <Card
           className={`flex flex-col overflow-hidden transition-all duration-200 ${
@@ -670,6 +666,6 @@ export const Files = () => {
           cwd={{ root: homeRoot, path: currentPath.replace(/^\//, '') }}
         />
       )}
-    </DashboardLayout>
+    </>
   );
 };

src/apps/officer-web/Screens/Dashboard/Files/Widget.tsx

@@ -2,12 +2,11 @@ import { useState, useEffect, useRef, useMemo } from 'react';
 import { useNavigate, Link } from 'react-router';
 import { Folder, Pin, PinOff, Search, Clock, FolderOpen, Loader2, X, ChevronDown, ChevronUp } from 'lucide-react';
 import { getIcon } from 'material-file-icons';
-import { useFiles, type DirEntry } from './state/useFiles';
+import { useFiles, type DirEntry, Breadcrumb } from 'widgets/FileBrowser';
 import { useRecentFiles } from './state/useRecentFiles';
 import { usePinnedFiles } from './state/usePinnedFiles';
 import { useUserState } from '@/state/useUserState';
 import { Card } from '@/components/Card';
-import { Breadcrumb } from './Screen/Breadcrumb';
 
 type Tab = 'browse' | 'recent' | 'pinned';
 

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

@@ -0,0 +1,2 @@
+export { Files } from './Screen';
+export { FileBrowser as FileBrowserWidget } from './Widget';

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

@@ -1,5 +1,5 @@
 import { ChatLauncher } from './ChatLauncher';
-import { Widget as FileBrowser } from 'plugins/FileBrowser/client';
+import { FileBrowserWidget as FileBrowser } from '@/Screens/Dashboard/Files';
 import { Widget as ChatHistory } from 'plugins/ChatHistory/client';
 import { Catalog } from 'sounds';
 

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

@@ -1,4 +1,4 @@
-import { TerminalView } from 'widgets/TerminalView';
+import { TerminalView } from 'widgets/Terminal';
 
 export const Terminal = () => {
   return <TerminalView className="h-full w-full p-2" />;

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

@@ -11,3 +11,4 @@ export * from './Skills';
 export * from './TaskLogs';
 export * from './Tasks';
 export * from './Terminal';
+export * from './Files';

src/servers/hono.ts

@@ -16,6 +16,7 @@ import { scrapeRouter } from './api/scrape/scrape';
 import { uploadRouter } from './api/upload/upload';
 import { settingsRouter } from './api/settings/settings';
 import { taskLogsRouter } from './api/task-logs/task-logs';
+import { router as fileBrowserRouter } from './api/file-browser/router';
 import { readdirSync, existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { CustomError } from './custom-errors';
@@ -55,6 +56,7 @@ protectedRouter.route('/scrape', scrapeRouter);
 protectedRouter.route('/upload', uploadRouter);
 protectedRouter.route('/user', settingsRouter);
 protectedRouter.route('/task-logs', taskLogsRouter);
+protectedRouter.route('/file-browser', fileBrowserRouter);
 
 // Auto-discover and mount plugin routers, then mount the protected router.
 // Hono's .route() copies routes at call time, so plugins must be loaded first.

src/workspaces/plugins/FileBrowser/client/index.ts

@@ -1,2 +0,0 @@
-export { FileBrowser as Widget } from './Widget';
-export { Files as Screen } from './Screen';

src/workspaces/plugins/FileBrowser/index.ts

@@ -1,8 +0,0 @@
-export { Widget, Screen } from './client';
-export { router, apiPath } from './server';
-
-export const plugin = {
-  id: 'FileBrowser',
-  name: 'File Browser',
-  description: 'Browse, upload, and manage files',
-};

src/workspaces/plugins/FileBrowser/server/index.ts

@@ -1,3 +0,0 @@
-export * from './router';
-
-export const apiPath = 'file-browser';

src/workspaces/plugins/package.json

@@ -4,9 +4,6 @@
   "private": true,
   "type": "module",
   "exports": {
-    "./FileBrowser": "./FileBrowser/index.ts",
-    "./FileBrowser/client": "./FileBrowser/client/index.ts",
-    "./FileBrowser/server": "./FileBrowser/server/index.ts",
     "./Chat": "./Chat/index.ts",
     "./Chat/client": "./Chat/client/index.ts",
     "./ChatHistory": "./ChatHistory/index.ts",

src/workspaces/widgets/FileBrowser/index.ts

@@ -0,0 +1,4 @@
+export { Breadcrumb } from './Breadcrumb';
+export { Toolbar } from './Toolbar';
+export { useFiles, type DirEntry } from './useFiles';
+export { useTasks, type TaskSummary } from './useTasks';

src/workspaces/widgets/Terminal/index.ts

@@ -0,0 +1 @@
+export { TerminalView, type TerminalViewProps } from './Terminal';

src/workspaces/widgets/package.json

@@ -2,6 +2,7 @@
   "name": "widgets",
   "private": true,
   "exports": {
-    "./TerminalView": "./TerminalView.tsx"
+    "./Terminal": "./Terminal/index.ts",
+    "./FileBrowser": "./FileBrowser/index.ts"
   }
 }