major apps and hooks refactor

src/apps/officer-web/Screens/Dashboard/Automation/CapabilityDetailView.tsx

@@ -13,7 +13,7 @@ import { Card } from '@/components/Card';
 import { FrontmatterBlock } from '../CapabilityPage';
 import type { CapabilityDetail } from '../CapabilityPage';
 import type { AutomationSelection } from './AutomationRightPanel';
-import { TaskRunnerModal } from 'apps/FileBrowser';
+import { TaskRunnerModal } from 'officerdev';
 
 type SelectOption = { value: string; label: string };
 

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

@@ -8,9 +8,8 @@ import { ArrowLeft, Pencil, Plus, Check, X, Trash2, Search, ChevronRight } from
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { useClient } from 'hooks/useClient';
-import { useVisiblePiModels } from '@/state/useModels';
 import { Card } from '@/components/Card';
-import { usePi, EmbeddableChat } from 'apps/Chat';
+import { usePiChat, EmbeddableChat } from 'officerdev';
 type CapabilitySummary = {
   dirName: string;
   name: string;
@@ -63,14 +62,13 @@ export const CapabilityChat = ({
   description,
   onResponseEnd,
 }: CapabilityChatProps) => {
-  const piModels = useVisiblePiModels();
   const seedFile = `${kind.toUpperCase()}.md`;
   const promptFrontmatter = `<frontmatter>\ninput file: ${filePath}\n${seedFile}: ${filePath}\ndir: ${resourceDir}\n\nBe aware of any extra files alongside the same dir as the ${kind} file we're handling, for possible extra context. You can also, if pertinent, create scripts or other files that will help you in the future.\n</frontmatter>`;
   const defaultInput = isNew
     ? description ?? `Help me create the content for this new ${kind} file`
     : `Help me understand and improve this ${kind} file`;
 
-  const pi = usePi(undefined, undefined, { replaceUrl: false });
+  const pi = usePiChat(undefined, undefined, { replaceUrl: false });
 
   const onResponseEndRef = useRef(onResponseEnd);
   onResponseEndRef.current = onResponseEnd;
@@ -86,7 +84,6 @@ export const CapabilityChat = ({
   return (
     <EmbeddableChat
       chat={pi}
-      availableModels={piModels}
       defaultInput={defaultInput}
       promptPrefix={promptFrontmatter}
       className="h-full"

src/apps/officer-web/Screens/Dashboard/ChatHistory/ChatDetailPanel.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';
 import { Trash2 } from 'lucide-react';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from '@/state/useChatSessions';
-import { usePi, EmbeddableChat } from 'apps/Chat';
+import { usePiChat, EmbeddableChat } from 'officerdev';
 
 export type SelectedSession = {
   id: string;
@@ -70,7 +70,7 @@ function SessionChat({ sessionId, model }: SessionChatProps) {
 
   // We need connection status for the DetailBar, so we still call usePi here
   // TODO: Consider moving DetailBar into EmbeddableChat or exposing status from it
-  const chat = usePi(sessionId, model, { replaceUrl: false });
+  const chat = usePiChat(sessionId, model, { replaceUrl: false });
 
   return (
     <div className="flex flex-col h-full">
@@ -99,7 +99,7 @@ function NewChat() {
   const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
 
   // We need connection status for DetailBar, so call usePi
-  const chat = usePi();
+  const chat = usePiChat();
 
   useEffect(() => {
     if (chat.sessionId) {

src/apps/officer-web/Screens/Dashboard/ChatHistory/GroupContextMenu.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { MoreVertical, Edit2, Trash2 } from 'lucide-react';
 import { useChatGroups } from '@/state/useChatGroups';
-import type { GroupEntry } from 'apps/Chat';
+import type { GroupEntry } from 'officerdev';
 
 type GroupContextMenuProps = {
   group: GroupEntry;

src/apps/officer-web/Screens/Dashboard/ChatHistory/SessionContextMenu.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { MoreVertical, FolderInput, Edit2, Trash2 } from 'lucide-react';
 import { useChatGroups } from '@/state/useChatGroups';
 import { useChatSessions } from '@/state/useChatSessions';
-import type { SessionEntry } from 'apps/Chat';
+import type { SessionEntry } from 'officerdev';
 
 type SessionContextMenuProps = {
   session: SessionEntry;

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

@@ -1,14 +1,13 @@
 import { useRef, useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router';
 import { useChatSessions } from '@/state/useChatSessions';
-import { SessionBar } from 'apps/ChatHistory';
-import { EmbeddableChat, type UsePiType, type Attachment } from 'apps/Chat';
+import { SessionBar, EmbeddableChat, type UsePiChatType, type Attachment } from 'officerdev';
 import { Card } from '@/components/Card';
 
 export type { Attachment };
 
 type ChatPanelProps = {
-  chat: UsePiType;
+  chat: UsePiChatType;
 };
 
 export const ChatScreen = ({ chat }: ChatPanelProps) => {

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

@@ -1,4 +1,4 @@
-import { CodeEditorView } from 'apps/CodeEditor';
+import { CodeEditorView } from 'officerdev';
 import { Widget } from 'widgets/Widget';
 
 export const CodeEditor = () => (

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

@@ -1,15 +1,17 @@
 import type { LayoutNode } from '@/components/Workspace';
 import { WorkspaceView } from '@/components/Workspace';
 import { useWorkspacesState } from '@/state/useWorkspacesState';
+import { useFileViewerPanels } from 'officerdev';
 import { appRegistry } from '../Workspaces/app-registry';
 import { defaultLayout } from './defaultLayout';
 
 export const FilesScreen = () => {
   const workspace = useWorkspacesState<LayoutNode>('screens/files', defaultLayout);
+  const ephemeral = useFileViewerPanels();
 
   return (
     <div className="h-full w-full">
-      <WorkspaceView workspace={workspace} registry={appRegistry} />
+      <WorkspaceView workspace={workspace} registry={appRegistry} ephemeral={ephemeral} />
     </div>
   );
 };

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

@@ -6,8 +6,7 @@ import type { LayoutNode, PanelComponents } from '@/components/Workspace';
 import { WorkspaceLayout } from '@/components/Workspace';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useClient } from 'hooks/useClient';
-import { TerminalView } from 'apps/Terminal';
-import { FileViewerView } from 'apps/FileViewer';
+import { TerminalView, FileViewerView } from 'officerdev';
 import { appRegistry } from '../../Workspaces/app-registry';
 import { Resources } from './Resources';
 import { ResourceSidebar } from './ResourceSidebar';

src/apps/officer-web/Screens/Dashboard/Settings/SystemSettings.tsx

@@ -11,7 +11,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import type { LayoutNode, PanelComponents } from '@/components/Workspace';
 import { WorkspaceLayout } from '@/components/Workspace';
 import { usePanelChannel } from 'hooks/usePanelChannel';
-import { TerminalView } from 'apps/Terminal';
+import { TerminalView } from 'officerdev';
 import { appRegistry } from '../Workspaces/app-registry';
 import { createSettingsPanelComponents, type SettingsSectionGroup } from './SettingsPanel';
 import { useSettings } from '@/state/useSettings';

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

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Search, AlertCircle, CheckCircle2, Clock, ArrowLeft } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { Card } from '@/components/Card';
-import { MessageBubble, type ChatMessage } from 'apps/Chat';
+import { MessageBubble, type ChatMessage } from 'officerdev';
 
 type LogMetadata = {
   filename: string;

src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspaceListScreen.tsx

@@ -10,7 +10,7 @@ import { WorkspaceLayout, WorkspaceView, createDefaultLayout } from '@/component
 import type { LayoutNode, WorkspaceDefinition } from '@/components/Workspace';
 import { Button } from '@/components/ui/button';
 import { generateSlug, slugify } from 'helpers/slug';
-import { Files } from 'apps/FileBrowser';
+import { FileBrowserApp } from 'officerdev';
 import { appRegistry } from './app-registry';
 import { SELECTED_WORKSPACE_KEY, CREATING_WORKSPACE_KEY, EDITING_WORKSPACE_KEY, NEW_WS_NAME_KEY, NEW_WS_DESC_KEY, NEW_WS_TEMPLATE_KEY } from './constants';
 
@@ -396,7 +396,7 @@ const CreatePanel = () => {
 const CwdFileBrowser = () => {
   const [currentPath] = useUserState<string>('files/currentPath', '/');
   const [basePath] = useState(currentPath);
-  return <Files basePath={basePath} />;
+  return <FileBrowserApp basePath={basePath} />;
 };
 
 // --- New Workspace Layout ---

src/apps/officer-web/Screens/Dashboard/Workspaces/app-registry.tsx

@@ -5,15 +5,11 @@ import { Monitor, LayoutGrid, LayoutDashboard, Sparkles, Eye, FolderKanban, Colu
 import { useAuth } from 'hooks/useAuth';
 import type { AppRegistry } from '@/components/Workspace';
 import { useWorkspace } from '@/components/Workspace';
-import { CodeEditorView } from 'apps/CodeEditor';
-import { TerminalView } from 'apps/Terminal';
+import { CodeEditorView, TerminalView, FileViewerProvider, FileViewerHeader, FileViewerBody, EmbeddableChat, ChatLauncher, usePiChat, FileBrowserApp } from 'officerdev';
 import { useWorkspacesState } from '@/state/useWorkspacesState';
 import { usePanelChannel } from 'hooks/usePanelChannel';
-import { FileViewerProvider, FileViewerHeader, FileViewerBody } from 'apps/FileViewer';
-import { EmbeddableChat, ChatLauncher, usePi } from 'apps/Chat';
 import { useVisiblePiModels } from '@/state/useModels';
 import { ChatHistoryApp as ChatHistory } from '../ChatHistory';
-import { Files } from 'apps/FileBrowser';
 import { Catalog } from 'sounds';
 import { WorkspaceListApp } from './WorkspaceListApp';
 import { ProjectListApp } from '../Projects/ProjectListApp';
@@ -23,7 +19,7 @@ import { WidgetPanel } from 'widgets/WidgetPanel';
 const ChatWidget = () => <EmbeddableChat className="h-full" />;
 
 const ChatLauncherWidget = () => {
-  const pi = usePi();
+  const pi = usePiChat();
   const models = useVisiblePiModels();
   console.log(models)
   return (
@@ -41,7 +37,7 @@ const cwdToPath = (cwd: string) => (cwd === '~' ? '/' : cwd.slice(1));
 const FileBrowserWrapper = () => {
   const { cwd } = useWorkspace();
   const basePath = cwdToPath(cwd);
-  return <Files basePath={basePath} />;
+  return <FileBrowserApp basePath={basePath} />;
 };
 
 const CodeEditorWrapper = () => <CodeEditorView className="h-full w-full" />;