chat history as plugin

src/apps/officer-web/App.tsx

@@ -5,7 +5,8 @@ import { useInitialData } from '@/state/useInitialData';
 import { LandingPage, AuthLayout } from './Screens/LandingPage';
 import { Home } from './Screens/Dashboard/Home';
 import { ProfileSettings } from './Screens/Dashboard/Settings/ProfileSettings';
-import { ClaudeSessions, ClaudeChat, OpenCodeChat, NewChat } from './Screens/Dashboard/Chat';
+import { ClaudeChat, OpenCodeChat, NewChat } from './Screens/Dashboard/Chat';
+import { Screen as ClaudeSessions } from 'plugins/ChatHistory/client';
 import { Plans } from './Screens/Dashboard/Plans';
 import { Skills } from './Screens/Dashboard/Skills';
 import { Tasks } from './Screens/Dashboard/Tasks';

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

@@ -2,19 +2,10 @@ import { useState } from 'react';
 import { useParams } from 'react-router';
 import { useQueryClient } from '@tanstack/react-query';
 import { useClaude, useOpenCode, type SessionEntry } from 'plugins/Chat/client';
+import { ChatPanel } from 'plugins/ChatHistory/client';
 import { DashboardLayout } from '../Layout';
-import { ChatPanel } from './ChatPanel';
-import { SessionList } from './SessionList';
 import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
 
-export const ClaudeSessions = () => {
-  return (
-    <DashboardLayout>
-      <SessionList />
-    </DashboardLayout>
-  );
-};
-
 export const ClaudeChat = () => {
   const { sessionId } = useParams<{ sessionId: string }>();
   const queryClient = useQueryClient();

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

@@ -1,7 +1,7 @@
 import { DashboardLayout } from '../Layout';
 import { ChatLauncher } from './ChatLauncher';
 import { Widget as FileBrowser } from 'plugins/FileBrowser/client';
-import { ChatHistory } from './ChatHistory';
+import { Widget as ChatHistory } from 'plugins/ChatHistory/client';
 import { Catalog } from 'sounds';
 import { useServerSettings } from '@/state/useServerSettings';
 

src/apps/officer-web/state/useInitialData.ts

@@ -1,4 +1,4 @@
-import { useSessions } from './useSessions';
+import { useSessions } from 'plugins/ChatHistory/client';
 import { usePlans } from './usePlans';
 import { useSettings } from './useSettings';
 import { useThemeSync } from './useThemeSync';

src/workspaces/plugins/Chat/client/useClaude.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { useChatWebSocket } from 'hooks/useChatWebSocket';
-import { useSessions } from '@/state/useSessions';
+import { useSessions } from 'plugins/ChatHistory/client';
 import type { ChatMessage, ServerMessage, TaskInfo } from './types';
 
 const SAVE_DEBOUNCE_MS = 1000;

src/workspaces/plugins/Chat/client/useOpenCode.ts

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useChatWebSocket } from 'hooks/useChatWebSocket';
 import { useSettings } from '@/state/useSettings';
 import { useVisibleOpenCodeModels } from '@/state/useModels';
-import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import { useOpenCodeSessions } from 'plugins/ChatHistory/client';
 import type { ChatMessage, ServerMessage, TaskInfo } from './types';
 
 type UseOpenCodeOptions = {

src/workspaces/plugins/ChatHistory/client/ChatPanel.tsx

@@ -1,11 +1,11 @@
 import { useRef, useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router';
-import { useSessions } from '@/state/useSessions';
+import { useSessions } from './state/useSessions';
 import type { ModelOption } from '@/state/useModels';
-import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import { useOpenCodeSessions } from './state/useOpenCodeSessions';
 import type { useClaude, Attachment } from 'plugins/Chat/client';
 import { EmbeddableChat } from 'plugins/Chat/client';
-import { useSlashCommands } from '@/state/useSlashCommands';
+import { useSlashCommands } from './state/useSlashCommands';
 import { Card } from '@/components/Card';
 import { SessionBar } from './SessionBar';
 

src/workspaces/plugins/ChatHistory/client/Screen.tsx

@@ -3,8 +3,8 @@ import { Link } from 'react-router';
 import { Plus, MessageSquare, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/Card';
-import { useSessions } from '@/state/useSessions';
-import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import { useSessions } from './state/useSessions';
+import { useOpenCodeSessions } from './state/useOpenCodeSessions';
 
 type Filter = 'all' | 'claude' | 'opencode';
 

src/workspaces/plugins/ChatHistory/client/Widget.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { Link } from 'react-router';
 import { MessageSquare, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
 import { Card } from '@/components/Card';
-import { useSessions } from '@/state/useSessions';
-import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import { useSessions } from './state/useSessions';
+import { useOpenCodeSessions } from './state/useOpenCodeSessions';
 import { useUserState } from '@/state/useUserState';
 
 export const ChatHistory = () => {

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

@@ -0,0 +1,7 @@
+export { ChatHistory as Widget } from './Widget';
+export { SessionList as Screen } from './Screen';
+export { ChatPanel } from './ChatPanel';
+export { SessionBar } from './SessionBar';
+export { useSessions } from './state/useSessions';
+export { useOpenCodeSessions } from './state/useOpenCodeSessions';
+export { useSlashCommands, type SlashCommandResult } from './state/useSlashCommands';

src/workspaces/plugins/ChatHistory/index.ts

@@ -0,0 +1,7 @@
+export { Widget, Screen, ChatPanel, SessionBar } from './client';
+
+export const plugin = {
+  id: 'ChatHistory',
+  name: 'Chat History',
+  description: 'Session management for chat history',
+};

src/workspaces/plugins/package.json

@@ -11,6 +11,8 @@
     "./Terminal/client": "./Terminal/client/index.ts",
     "./Terminal/server": "./Terminal/server/index.ts",
     "./Chat": "./Chat/index.ts",
-    "./Chat/client": "./Chat/client/index.ts"
+    "./Chat/client": "./Chat/client/index.ts",
+    "./ChatHistory": "./ChatHistory/index.ts",
+    "./ChatHistory/client": "./ChatHistory/client/index.ts"
   }
 }