diff --git a/src/workspaces/components/Workspace/WorkspaceLayout.tsx b/src/workspaces/components/Workspace/WorkspaceLayout.tsx
index f8a33b64..ae6c20b9 100644
--- a/src/workspaces/components/Workspace/WorkspaceLayout.tsx
+++ b/src/workspaces/components/Workspace/WorkspaceLayout.tsx
@@ -3,11 +3,12 @@ import type { LayoutNode, AppRegistry, PanelComponents } from './types';
import { updateSizes } from './layout-utils';
import { WorkspaceProvider } from './WorkspaceContext';
import { WorkspaceRenderer } from './WorkspaceRenderer';
+import { useAppRegistry } from 'officerdev';
type WorkspaceLayoutProps = {
layout: LayoutNode;
onLayoutChange: (layout: LayoutNode) => void;
- registry: AppRegistry;
+ registry?: AppRegistry;
components?: PanelComponents;
workspaceId?: string;
cwd?: string;
@@ -15,7 +16,10 @@ type WorkspaceLayoutProps = {
const noop = () => {};
-export const WorkspaceLayout = ({ layout, onLayoutChange, registry, components, workspaceId, cwd }: WorkspaceLayoutProps) => {
+export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp, components, workspaceId, cwd }: WorkspaceLayoutProps) => {
+ const { registry: globalRegistry } = useAppRegistry();
+ const registry = registryProp ?? globalRegistry;
+
const handleResized = useCallback(
(groupId: string, sizes: number[]) => {
onLayoutChange(updateSizes(layout, groupId, sizes));
diff --git a/src/workspaces/components/Workspace/WorkspaceView.tsx b/src/workspaces/components/Workspace/WorkspaceView.tsx
index 1849a41a..7f83e926 100644
--- a/src/workspaces/components/Workspace/WorkspaceView.tsx
+++ b/src/workspaces/components/Workspace/WorkspaceView.tsx
@@ -1,25 +1,26 @@
import { useState, useCallback, useEffect } from 'react';
import { flushSync } from 'react-dom';
import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '../ui/resizable';
-import type { LayoutNode, AppRegistry, WorkspaceState, EphemeralPanels } from './types';
+import type { LayoutNode, WorkspaceState, EphemeralPanels } from './types';
import type { DropPosition } from './layout-utils';
import { splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, countPanels } from './layout-utils';
import { WorkspaceProvider } from './WorkspaceContext';
import { WorkspaceRenderer } from './WorkspaceRenderer';
+import { useAppRegistry } from 'officerdev';
type WorkspaceViewProps = {
workspace: WorkspaceState;
- registry: AppRegistry;
cwd?: string;
ephemeral?: EphemeralPanels | null;
};
const noop = () => {};
-export const WorkspaceView = ({ workspace, registry, cwd = '~', ephemeral }: WorkspaceViewProps) => {
- if (!workspace.isLoaded) return null;
+export const WorkspaceView = ({ workspace, cwd = '~', ephemeral }: WorkspaceViewProps) => {
+ const { registry } = useAppRegistry();
- const { value: layout, setValue: onLayoutChange } = workspace;
+ const layout = workspace.value;
+ const onLayoutChange = workspace.setValue;
const [swapSourceId, setSwapSourceId] = useState
(null);
const [dragSourceId, setDragSourceId] = useState(null);
const [maximizedPanelId, setMaximizedPanelId] = useState(null);
@@ -105,6 +106,8 @@ export const WorkspaceView = ({ workspace, registry, cwd = '~', ephemeral }: Wor
return () => window.removeEventListener('keydown', onKeyDown);
}, [swapSourceId, dragSourceId, maximizedPanelId, setMaximizedAnimated]);
+ if (!workspace.isLoaded) return null;
+
const baseRenderer = (
;
transparent?: boolean;
fixedHeight?: number;
- widget?: boolean;
availableOnPanel?: boolean;
};
diff --git a/src/workspaces/officerdev/package.json b/src/workspaces/officerdev/package.json
index 6d5b2b79..71019b0f 100644
--- a/src/workspaces/officerdev/package.json
+++ b/src/workspaces/officerdev/package.json
@@ -9,6 +9,7 @@
},
"dependencies": {
"hooks": "workspace:*",
+ "state": "workspace:*",
"widgets": "workspace:*"
}
}
diff --git a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
new file mode 100644
index 00000000..b5ae0b9d
--- /dev/null
+++ b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
@@ -0,0 +1,14 @@
+import { appRegistryMetas as fileBrowserMetas } from '../apps/FileBrowser';
+import { appRegistryMetas as terminalMetas } from '../apps/Terminal';
+import { appRegistryMetas as codeEditorMetas } from '../apps/CodeEditor';
+import { appRegistryMetas as chatMetas } from '../apps/Chat';
+import { appRegistryMetas as fileViewerMetas } from '../apps/FileViewer';
+import { appRegistryMetas as workspaceMetas } from '../apps/Workspaces';
+import { useAppRegistry } from './useAppRegistry';
+
+const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...workspaceMetas];
+
+export const AppRegistry = () => {
+ useAppRegistry(apps);
+ return null;
+};
diff --git a/src/workspaces/officerdev/src/AppRegistry/index.tsx b/src/workspaces/officerdev/src/AppRegistry/index.tsx
new file mode 100644
index 00000000..faf7550c
--- /dev/null
+++ b/src/workspaces/officerdev/src/AppRegistry/index.tsx
@@ -0,0 +1,2 @@
+export * from './AppRegistry';
+export * from './useAppRegistry';
diff --git a/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/index.ts b/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/index.ts
new file mode 100644
index 00000000..f5cbe731
--- /dev/null
+++ b/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/index.ts
@@ -0,0 +1 @@
+export { useAppRegistry, type UseAppRegistryType, type AppRegistryMeta } from './useAppRegistry';
diff --git a/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts b/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts
new file mode 100644
index 00000000..03659e25
--- /dev/null
+++ b/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts
@@ -0,0 +1,19 @@
+import type { AppRegistry, AppRegistryEntry } from '@/components/Workspace';
+import { useGlobal } from 'hooks/useGlobal';
+
+export type AppRegistryMeta = { key: string } & AppRegistryEntry;
+
+export function useAppRegistry(initialApps: AppRegistryMeta[] = []) {
+ const [registry, setRegistry] = useGlobal('APP_REGISTRY', () => metasToRegistry(initialApps));
+
+ const registerApp = (key: string, entry: AppRegistryEntry) => {
+ setRegistry((prev) => ({ ...prev, [key]: entry }));
+ };
+
+ return { registry, registerApp };
+}
+
+export type UseAppRegistryType = ReturnType;
+
+const metasToRegistry = (metas: AppRegistryMeta[]): AppRegistry =>
+ Object.fromEntries(metas.map(({ key, ...entry }) => [key, entry]));
diff --git a/src/workspaces/officerdev/src/apps/Chat/ChatList/index.tsx b/src/workspaces/officerdev/src/apps/Chat/ChatList/index.tsx
index e2ddb60c..3a37270f 100644
--- a/src/workspaces/officerdev/src/apps/Chat/ChatList/index.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/ChatList/index.tsx
@@ -1,5 +1,5 @@
import { MessageSquare } from 'lucide-react';
-import { useChatSessions } from '@/state/useChatSessions';
+import { useChatSessions } from 'state/useChatSessions';
export const ChatList = () => {
const { sessions } = useChatSessions();
diff --git a/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx b/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx
new file mode 100644
index 00000000..99c06481
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx
@@ -0,0 +1,3 @@
+import { EmbeddableChat } from './EmbeddableChat';
+
+export const ChatPanelWrapper = () => ;
diff --git a/src/workspaces/officerdev/src/apps/Chat/EmbeddableChat/useEmbeddableChat.ts b/src/workspaces/officerdev/src/apps/Chat/EmbeddableChat/useEmbeddableChat.ts
index 55531fde..5f306501 100644
--- a/src/workspaces/officerdev/src/apps/Chat/EmbeddableChat/useEmbeddableChat.ts
+++ b/src/workspaces/officerdev/src/apps/Chat/EmbeddableChat/useEmbeddableChat.ts
@@ -1,6 +1,6 @@
import type { KeyboardEvent } from 'react';
import { useState, useRef, useEffect } from 'react';
-import { useVisiblePiModels } from '@/state/useModels';
+import { useVisiblePiModels } from 'state/useModels';
import { usePiChat, type UsePiChatType } from '../../../hooks/usePiChat';
import { useAttachments } from '../useAttachments';
import { useSlashCommands } from '../useSlashCommands';
diff --git a/src/workspaces/officerdev/src/apps/Chat/components/ModelSelector.tsx b/src/workspaces/officerdev/src/apps/Chat/components/ModelSelector.tsx
index 638f6692..cc8e1d15 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/ModelSelector.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/ModelSelector.tsx
@@ -1,5 +1,5 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import type { ModelOption } from '@/state/useModels';
+import type { ModelOption } from 'state/useModels';
import type { ChatMessage } from '../types';
const PROVIDER_DISPLAY: Record = {
diff --git a/src/workspaces/officerdev/src/apps/Chat/index.ts b/src/workspaces/officerdev/src/apps/Chat/index.ts
index adc04ec8..b0ab89b1 100644
--- a/src/workspaces/officerdev/src/apps/Chat/index.ts
+++ b/src/workspaces/officerdev/src/apps/Chat/index.ts
@@ -1,3 +1,7 @@
+import type { AppRegistryMeta } from '../../AppRegistry';
+import { MessageSquare } from 'lucide-react';
+import { ChatPanelWrapper } from './ChatPanelWrapper';
+
export { MessageList } from './components/MessageList';
export { MessageBubble, StreamingBubble } from './components/MessageBubble';
export { ToolActivity } from './components/ToolActivity';
@@ -18,3 +22,12 @@ export { useAttachments, type UseAttachmentsType } from './useAttachments';
export { useAudioRecording, type UseAudioRecordingType } from './useAudioRecording';
export * from './types';
+
+export const appRegistryMetas: AppRegistryMeta[] = [
+ {
+ key: 'officerdev/chat',
+ name: 'Chat',
+ icon: MessageSquare,
+ component: ChatPanelWrapper,
+ },
+];
diff --git a/src/workspaces/officerdev/src/apps/CodeEditor/CodeEditorHeader.tsx b/src/workspaces/officerdev/src/apps/CodeEditor/CodeEditorHeader.tsx
new file mode 100644
index 00000000..6c923540
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/CodeEditor/CodeEditorHeader.tsx
@@ -0,0 +1,13 @@
+import { Code } from 'lucide-react';
+import { useWorkspace } from '@/components/Workspace';
+
+export const CodeEditorHeader = () => {
+ const { cwd } = useWorkspace();
+ return (
+ <>
+
-
-
-
-
- {/* Breadcrumb */}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
+
diff --git a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx
new file mode 100644
index 00000000..ffa9beb7
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx
@@ -0,0 +1,9 @@
+import { useWorkspace } from '@/components/Workspace';
+import { FileBrowserApp } from './FileBrowserApp';
+
+const cwdToPath = (cwd: string) => (cwd === '~' ? '/' : cwd.slice(1));
+
+export const FileBrowserPanelWrapper = () => {
+ const { cwd } = useWorkspace();
+ return ;
+};
diff --git a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/Breadcrumb.tsx b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/Breadcrumb.tsx
index be85161c..1cb0724d 100644
--- a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/Breadcrumb.tsx
+++ b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/Breadcrumb.tsx
@@ -11,36 +11,38 @@ export const Breadcrumb = ({ path, onNavigate, basePath = '/' }: BreadcrumbProps
const segments = relativePath.split('/').filter(Boolean);
return (
-