From ab03b175e7a22da1a0df225645dafac18bc5611c Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Sun, 22 Feb 2026 01:50:15 +0000
Subject: [PATCH] Projects

---
 src/apps/officer-web/App.tsx                  |   3 +-
 .../Dashboard/ChatHistory/defaultLayout.ts    |  11 +
 .../Screens/Dashboard/ChatHistory/index.tsx   |  34 +-
 .../Dashboard/ChatScreen/ChatScreen.tsx       |  81 ---
 .../Screens/Dashboard/ChatScreen/index.tsx    |   1 -
 .../Screens/Dashboard/CodeEditor/index.tsx    |  10 -
 .../Dashboard/Projects/ProjectListScreen.tsx  | 610 +-----------------
 .../Dashboard/Projects/ProjectScreen.tsx      |  15 +-
 .../Dashboard/Projects/defaultLayout.ts       |  11 +
 .../Dashboard/Workspaces/WorkspaceScreen.tsx  |  21 +-
 .../Dashboard/Workspaces/WorkspacesScreen.tsx |  14 +
 .../Screens/Dashboard/Workspaces/index.tsx    |   1 +
 .../officer-web/Screens/Dashboard/index.tsx   |   2 -
 src/servers/api/settings/projects.ts          | 128 ----
 src/servers/api/terminal/websocket.ts         |   1 +
 src/servers/api/workspaces/types.ts           |   2 +-
 src/servers/api/workspaces/utils.ts           |  66 +-
 src/servers/api/workspaces/workspaces.ts      |  33 +-
 src/servers/data-path.ts                      |   2 +-
 src/servers/hono.ts                           |   2 -
 .../src/AppRegistry/AppRegistry.tsx           |   4 +-
 .../src/apps}/ChatHistory/ChatDetailPanel.tsx |  13 +-
 .../apps}/ChatHistory/CreateGroupDialog.tsx   |   2 +-
 .../apps}/ChatHistory/GroupContextMenu.tsx    |   2 +-
 .../apps}/ChatHistory/SessionContextMenu.tsx  |   2 +-
 .../src/apps/ChatHistory/SessionList.tsx}     |   2 +-
 .../officerdev/src/apps/ChatHistory/index.ts  |  25 +
 .../FileBrowserApp/FileBrowserApp.tsx         |   5 +-
 .../FileBrowserPanelWrapper.tsx               |   3 +-
 .../FileBrowserApp/useFileBrowserApp.ts       |  10 +-
 .../src/apps}/Projects/ProjectListApp.tsx     |  24 +-
 .../src/apps/Projects/ProjectPreview.tsx      | 549 ++++++++++++++++
 .../src/apps}/Projects/constants.ts           |   0
 .../officerdev/src/apps/Projects/index.ts     |  36 ++
 .../apps/Terminal/CommandTerminalWrapper.tsx  |   3 +-
 .../officerdev/src/apps/Terminal/Headers.tsx  |   5 +-
 .../src/apps/Terminal/TerminalWrapper.tsx     |   3 +-
 src/workspaces/officerdev/src/index.ts        |   4 +-
 src/workspaces/state/src/index.ts             |   1 -
 src/workspaces/state/src/useProjectsState.ts  |  44 --
 40 files changed, 829 insertions(+), 956 deletions(-)
 create mode 100644 src/apps/officer-web/Screens/Dashboard/ChatHistory/defaultLayout.ts
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/ChatScreen/ChatScreen.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/ChatScreen/index.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx
 create mode 100644 src/apps/officer-web/Screens/Dashboard/Projects/defaultLayout.ts
 create mode 100644 src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspacesScreen.tsx
 delete mode 100644 src/servers/api/settings/projects.ts
 rename src/{apps/officer-web/Screens/Dashboard => workspaces/officerdev/src/apps}/ChatHistory/ChatDetailPanel.tsx (92%)
 rename src/{apps/officer-web/Screens/Dashboard => workspaces/officerdev/src/apps}/ChatHistory/CreateGroupDialog.tsx (99%)
 rename src/{apps/officer-web/Screens/Dashboard => workspaces/officerdev/src/apps}/ChatHistory/GroupContextMenu.tsx (98%)
 rename src/{apps/officer-web/Screens/Dashboard => workspaces/officerdev/src/apps}/ChatHistory/SessionContextMenu.tsx (99%)
 rename src/{apps/officer-web/Screens/Dashboard/ChatHistory/Screen.tsx => workspaces/officerdev/src/apps/ChatHistory/SessionList.tsx} (99%)
 rename src/{apps/officer-web/Screens/Dashboard => workspaces/officerdev/src/apps}/Projects/ProjectListApp.tsx (89%)
 create mode 100644 src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx
 rename src/{apps/officer-web/Screens/Dashboard => workspaces/officerdev/src/apps}/Projects/constants.ts (100%)
 create mode 100644 src/workspaces/officerdev/src/apps/Projects/index.ts
 delete mode 100644 src/workspaces/state/src/useProjectsState.ts

diff --git a/src/apps/officer-web/App.tsx b/src/apps/officer-web/App.tsx
index 78fc74e6..991113ea 100644
--- a/src/apps/officer-web/App.tsx
+++ b/src/apps/officer-web/App.tsx
@@ -51,7 +51,8 @@ export function App() {
             <Route path="/tasks" element={<Dashboard.Tasks />} />
             <Route path="/processes" element={<Dashboard.Processes />} />
             <Route path="/task-logs" element={<Dashboard.TaskLogs />} />
-            <Route path="/workspaces" element={<Dashboard.WorkspaceScreen />} />
+            <Route path="/workspaces" element={<Dashboard.WorkspacesScreen />} />
+            <Route path="/workspaces/:id" element={<Dashboard.WorkspaceScreen />} />
             <Route path="/projects" element={<Dashboard.ProjectListScreen />} />
             <Route path="/projects/new" element={<Dashboard.NewProjectRedirect />} />
             <Route path="/projects/:id" element={<Dashboard.ProjectScreen />} />
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/defaultLayout.ts b/src/apps/officer-web/Screens/Dashboard/ChatHistory/defaultLayout.ts
new file mode 100644
index 00000000..70c8d2df
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/ChatHistory/defaultLayout.ts
@@ -0,0 +1,11 @@
+import type { LayoutNode } from '@/components/Workspace';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'chat-history-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'chat-list', appType: 'chat-session-list' }, size: 35 },
+    { node: { type: 'panel', id: 'chat-detail', appType: 'chat-detail' }, size: 65 },
+  ],
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx b/src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx
index e2222060..852f0912 100644
--- a/src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx
@@ -1,25 +1,14 @@
-import { useMemo, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router';
-import type { LayoutNode, PanelComponents } from '@/components/Workspace';
-import { WorkspaceLayout } from '@/components/Workspace';
+import { WorkspaceView } from '@/components/Workspace';
+import type { LayoutNode } from '@/components/Workspace';
+import { useWorkspacesState } from 'state/useWorkspacesState';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from 'state/useChatSessions';
-
-import { SessionList } from './Screen';
-import { ChatDetailPanel, type SelectedSession } from './ChatDetailPanel';
+import type { SelectedSession } from 'officerdev';
+import { defaultLayout } from './defaultLayout';
 
 export { ChatHistory as ChatHistoryApp } from './Widget';
-export { SessionList };
-
-const layout: LayoutNode = {
-  type: 'group',
-  id: 'chat-history-root',
-  direction: 'horizontal',
-  children: [
-    { node: { type: 'panel', id: 'chat-list', appType: null }, size: 35 },
-    { node: { type: 'panel', id: 'chat-detail', appType: null }, size: 65 },
-  ],
-};
 
 type SessionListPageProps = {
   isNew?: boolean;
@@ -29,6 +18,7 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
   const { sessionId } = useParams<{ sessionId: string }>();
   const { sessions } = useChatSessions();
   const [, setSelected] = usePanelChannel<SelectedSession>('chat:selected-session', null);
+  const workspace = useWorkspacesState<LayoutNode>('screens/chat', defaultLayout);
 
   useEffect(() => {
     if (isNew) {
@@ -40,17 +30,9 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
     setSelected({ id: sessionId, model: session?.model ?? null });
   }, [sessionId, isNew]);
 
-  const panelComponents: PanelComponents = useMemo(
-    () => ({
-      'chat-list': SessionList,
-      'chat-detail': ChatDetailPanel,
-    }),
-    [],
-  );
-
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
+      <WorkspaceView workspace={workspace} />
     </div>
   );
 };
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatScreen/ChatScreen.tsx b/src/apps/officer-web/Screens/Dashboard/ChatScreen/ChatScreen.tsx
deleted file mode 100644
index 5ebf205e..00000000
--- a/src/apps/officer-web/Screens/Dashboard/ChatScreen/ChatScreen.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useRef, useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router';
-import { useChatSessions } from 'state/useChatSessions';
-import { SessionBar, EmbeddableChat, type UsePiChatType, type Attachment } from 'officerdev';
-import { Card } from '@/components/Card';
-
-export type { Attachment };
-
-type ChatPanelProps = {
-  chat: UsePiChatType;
-};
-
-export const ChatScreen = ({ chat }: ChatPanelProps) => {
-  const { isConnected, isGenerating, sessionId, setSelectedModel, sendPrompt } = chat;
-
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [fullscreen, setFullscreen] = useState(false);
-
-  const { sessions, deleteSession } = useChatSessions();
-  const sessionTitle = sessionId ? sessions.find((s) => s.id === sessionId)?.title : undefined;
-  const listPath = '/chat';
-
-  // Capture initial state from navigation
-  const locationState = location.state as {
-    initialMessage?: string;
-    prefillInput?: string;
-    model?: string;
-    cwd?: { root?: string; path: string };
-    attachmentIds?: string[];
-    images?: { filename: string; dataUrl: string }[];
-  } | null;
-
-  const initialMessage = locationState?.initialMessage
-    ? {
-      text: locationState.initialMessage,
-      attachmentIds: locationState.attachmentIds,
-      images: locationState.images,
-      cwd: locationState.cwd,
-    }
-    : undefined;
-
-  const defaultInput = locationState?.prefillInput ?? '';
-  const initialModel = locationState?.model ?? null;
-
-  // Clear location state after capturing
-  useEffect(() => {
-    if (locationState) {
-      window.history.replaceState({}, '', location.pathname);
-    }
-  }, []);
-
-  return (
-    <Card
-      className={`flex flex-col overflow-hidden transition-all duration-200 rounded-none border-0 md:rounded-xl md:border-2 ${fullscreen ? 'fixed inset-0 m-auto z-50 w-[90vw] h-[calc(90vh-4.5rem)]' : 'h-full'
-        }`}
-    >
-      <SessionBar
-        listPath={listPath}
-        sessionTitle={sessionTitle}
-        isConnected={isConnected}
-        isGenerating={isGenerating}
-        fullscreen={fullscreen}
-        onDelete={async () => {
-          if (!sessionId) return;
-          await deleteSession(sessionId);
-          navigate(listPath);
-        }}
-        onToggleFullscreen={() => setFullscreen((f) => !f)}
-      />
-
-      <EmbeddableChat
-        sessionId={sessionId ?? undefined}
-        initialModel={initialModel}
-        initialMessage={initialMessage}
-        defaultInput={defaultInput}
-        className="flex-1 min-h-0"
-      />
-    </Card>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatScreen/index.tsx b/src/apps/officer-web/Screens/Dashboard/ChatScreen/index.tsx
deleted file mode 100644
index 18188300..00000000
--- a/src/apps/officer-web/Screens/Dashboard/ChatScreen/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ChatScreen';
diff --git a/src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx b/src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx
deleted file mode 100644
index 7cb4c18e..00000000
--- a/src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CodeEditorView } from 'officerdev';
-import { Widget } from 'widgets/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>
-);
diff --git a/src/apps/officer-web/Screens/Dashboard/Projects/ProjectListScreen.tsx b/src/apps/officer-web/Screens/Dashboard/Projects/ProjectListScreen.tsx
index a7aeb758..74dbf363 100644
--- a/src/apps/officer-web/Screens/Dashboard/Projects/ProjectListScreen.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Projects/ProjectListScreen.tsx
@@ -1,15 +1,10 @@
-import { useEffect, useState } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router';
-import { FolderKanban, Plus, ArrowRight, Type, Rocket, FileText, Layout } from 'lucide-react';
-import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router';
 import { useGlobal } from 'hooks/useGlobal';
-import { useClient } from 'hooks/useClient';
-import { useProjectsState } from 'state/useProjectsState';
-import { WorkspaceLayout, WorkspaceView, createDefaultLayout } from '@/components/Workspace';
-import type { LayoutNode, ProjectDefinition, ProjectType } from '@/components/Workspace';
-import { Button } from '@/components/ui/button';
-import { generateSlug, slugify } from 'helpers/slug';
-import { useAppRegistry } from 'officerdev';
+import { useWorkspacesState } from 'state/useWorkspacesState';
+import { WorkspaceView } from '@/components/Workspace';
+import type { LayoutNode, ProjectType } from '@/components/Workspace';
+import { generateSlug } from 'helpers/slug';
 import {
   SELECTED_PROJECT,
   CREATING_PROJECT,
@@ -20,600 +15,15 @@ import {
   NEW_PROJ_TYPE,
   NEW_PROJ_HAS_BACKEND,
   NEW_PROJ_HAS_AUTH,
-  NEW_PROJ_PREVIEW_LAYOUT,
-} from './constants';
-import { ProjectListApp } from './ProjectListApp';
-
-const defaultLayout: LayoutNode = {
-  type: 'group',
-  id: 'proj-home-root',
-  direction: 'horizontal',
-  children: [
-    { node: { type: 'panel', id: 'proj-home-list', appType: 'project-list' }, size: 25 },
-    { node: { type: 'panel', id: 'proj-home-right', appType: 'project-preview' }, size: 75 },
-  ],
-};
-
-// --- Layout Templates ---
-
-let tplCounter = 0;
-const tplUid = () => `ptpl-${++tplCounter}`;
-
-type LayoutTemplate = {
-  name: string;
-  layout: () => LayoutNode;
-};
-
-const templates: LayoutTemplate[] = [
-  {
-    name: 'Single',
-    layout: () => ({ type: 'panel', id: tplUid(), appType: null }),
-  },
-  {
-    name: '2 Columns',
-    layout: () => ({
-      type: 'group',
-      id: tplUid(),
-      direction: 'horizontal',
-      children: [
-        { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-        { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-      ],
-    }),
-  },
-  {
-    name: 'Main + Side',
-    layout: () => ({
-      type: 'group',
-      id: tplUid(),
-      direction: 'horizontal',
-      children: [
-        { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-        {
-          node: {
-            type: 'group',
-            id: tplUid(),
-            direction: 'vertical',
-            children: [
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-            ],
-          },
-          size: 50,
-        },
-      ],
-    }),
-  },
-  {
-    name: 'Sidebar',
-    layout: () => ({
-      type: 'group',
-      id: tplUid(),
-      direction: 'horizontal',
-      children: [
-        { node: { type: 'panel', id: tplUid(), appType: null }, size: 25 },
-        { node: { type: 'panel', id: tplUid(), appType: null }, size: 75 },
-      ],
-    }),
-  },
-  {
-    name: '2x2 Grid',
-    layout: () => ({
-      type: 'group',
-      id: tplUid(),
-      direction: 'vertical',
-      children: [
-        {
-          node: {
-            type: 'group',
-            id: tplUid(),
-            direction: 'horizontal',
-            children: [
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-            ],
-          },
-          size: 50,
-        },
-        {
-          node: {
-            type: 'group',
-            id: tplUid(),
-            direction: 'horizontal',
-            children: [
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-            ],
-          },
-          size: 50,
-        },
-      ],
-    }),
-  },
-  {
-    name: 'Cols + Bottom',
-    layout: () => ({
-      type: 'group',
-      id: tplUid(),
-      direction: 'vertical',
-      children: [
-        {
-          node: {
-            type: 'group',
-            id: tplUid(),
-            direction: 'horizontal',
-            children: [
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
-            ],
-          },
-          size: 70,
-        },
-        { node: { type: 'panel', id: tplUid(), appType: null }, size: 30 },
-      ],
-    }),
-  },
-];
-
-// --- Template Thumbnails ---
-
-const ThumbnailNode = ({ node }: { node: LayoutNode }) => {
-  if (node.type === 'panel') {
-    return <div className="h-full w-full bg-emerald-500/15 border border-emerald-500/20 rounded-sm" />;
-  }
-  const isH = node.direction === 'horizontal';
-  return (
-    <div className={`flex h-full w-full gap-1.5 ${isH ? 'flex-row' : 'flex-col'}`}>
-      {node.children.map((child) => (
-        <div key={child.node.id} style={{ flex: child.size }} className="min-h-0 min-w-0">
-          <ThumbnailNode node={child.node} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const TemplateCell = ({ index }: { index: number }) => {
-  const tpl = templates[index]!;
-  const [selected, setSelected] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
-  const node = tpl.layout();
-  const isSelected = selected === index;
-
-  return (
-    <div className="h-full w-full">
-      <button
-        type="button"
-        onClick={() => setSelected(index)}
-        className={`flex h-full w-full flex-col items-center justify-center gap-2 p-3 cursor-pointer transition-colors ${
-          isSelected ? 'bg-emerald-500/10' : 'hover:bg-duck-dark/5'
-        }`}
-      >
-        <div className="w-full flex-1 min-h-0 rounded border border-duck-dark/20 overflow-hidden">
-          <ThumbnailNode node={node} />
-        </div>
-        <span className={`text-xs font-medium ${isSelected ? 'text-emerald-400' : 'text-duck-dark/60'}`}>{tpl.name}</span>
-      </button>
-    </div>
-  );
-};
-
-// --- Panel: Template Picker (3x2 workspace) ---
-
-const tplPanelLayout: LayoutNode = {
-  type: 'group',
-  id: 'ptpl-root',
-  direction: 'vertical',
-  children: [
-    {
-      node: {
-        type: 'group',
-        id: 'ptpl-row-0',
-        direction: 'horizontal',
-        children: [
-          { node: { type: 'panel', id: 'ptpl-0', appType: 'ptpl-0' }, size: 33.33 },
-          { node: { type: 'panel', id: 'ptpl-1', appType: 'ptpl-1' }, size: 33.33 },
-          { node: { type: 'panel', id: 'ptpl-2', appType: 'ptpl-2' }, size: 33.34 },
-        ],
-      },
-      size: 50,
-    },
-    {
-      node: {
-        type: 'group',
-        id: 'ptpl-row-1',
-        direction: 'horizontal',
-        children: [
-          { node: { type: 'panel', id: 'ptpl-3', appType: 'ptpl-3' }, size: 33.33 },
-          { node: { type: 'panel', id: 'ptpl-4', appType: 'ptpl-4' }, size: 33.33 },
-          { node: { type: 'panel', id: 'ptpl-5', appType: 'ptpl-5' }, size: 33.34 },
-        ],
-      },
-      size: 50,
-    },
-  ],
-};
-
-const tplRegistry = Object.fromEntries(
-  templates.map((tpl, i) => [`ptpl-${i}`, { name: tpl.name, icon: Layout, component: () => <TemplateCell index={i} /> }]),
-);
-
-const TemplatePanel = () => (
-  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} />
-);
-
-// --- Panel: Details (Name + Description + Project Type + Backend/Auth toggles) ---
-
-const PROJECT_TYPE_OPTIONS: { value: ProjectType; label: string }[] = [
-  { value: 'landing-page', label: 'Landing Page' },
-  { value: 'website', label: 'Website' },
-  { value: 'app', label: 'App' },
-];
-
-const DetailsPanel = () => {
-  const [name, setName] = useGlobal<string>(NEW_PROJ_NAME, '');
-  const [description, setDescription] = useGlobal<string>(NEW_PROJ_DESC, '');
-  const [projectType, setProjectType] = useGlobal<ProjectType>(NEW_PROJ_TYPE, 'app');
-  const [hasBackend, setHasBackend] = useGlobal<boolean>(NEW_PROJ_HAS_BACKEND, false);
-  const [hasAuth, setHasAuth] = useGlobal<boolean>(NEW_PROJ_HAS_AUTH, false);
-
-  return (
-    <div className="h-full w-full overflow-y-auto">
-      <div className="flex h-full flex-col gap-4 p-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-duck-dark/50 flex items-center gap-1.5">
-            <Type className="h-3 w-3" />
-            Name
-          </label>
-          <input
-            type="text"
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            placeholder="My Project"
-            autoFocus
-            className="rounded-lg border border-duck-dark/20 bg-background px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500/50"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-duck-dark/50 flex items-center gap-1.5">
-            <FileText className="h-3 w-3" />
-            Description
-          </label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="What is this project for?"
-            rows={3}
-            className="resize-none rounded-lg border border-duck-dark/20 bg-background px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500/50"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-duck-dark/50">Project Type</label>
-          <div className="flex gap-2">
-            {PROJECT_TYPE_OPTIONS.map((opt) => (
-              <button
-                key={opt.value}
-                type="button"
-                onClick={() => setProjectType(opt.value)}
-                className={`flex-1 py-1.5 px-2 rounded-lg text-xs font-medium border transition-colors cursor-pointer ${
-                  projectType === opt.value
-                    ? 'bg-emerald-500/15 border-emerald-500/40 text-emerald-400'
-                    : 'border-duck-dark/20 text-duck-dark/50 hover:border-duck-dark/30'
-                }`}
-              >
-                {opt.label}
-              </button>
-            ))}
-          </div>
-        </div>
-        {projectType === 'app' && (
-          <div className="flex flex-col gap-2">
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={hasBackend}
-                onChange={(ev) => setHasBackend(ev.target.checked)}
-                className="accent-emerald-500"
-              />
-              <span className="text-xs text-duck-dark/60">Has Backend</span>
-            </label>
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={hasAuth}
-                onChange={(ev) => setHasAuth(ev.target.checked)}
-                className="accent-emerald-500"
-              />
-              <span className="text-xs text-duck-dark/60">Has Auth</span>
-            </label>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// --- Panel: Create ---
-
-const CreatePanel = () => {
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  const client = useClient();
-  const [name, setName] = useGlobal<string>(NEW_PROJ_NAME, '');
-  const [projects, setProjects] = useProjectsState<ProjectDefinition[]>('projects', []);
-
-  const [description, setDescription] = useGlobal<string>(NEW_PROJ_DESC, '');
-  const [templateIdx, setTemplateIdx] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
-  const [previewLayout] = useGlobal<LayoutNode>(NEW_PROJ_PREVIEW_LAYOUT, createDefaultLayout());
-  const [projectType] = useGlobal<ProjectType>(NEW_PROJ_TYPE, 'app');
-  const [hasBackend] = useGlobal<boolean>(NEW_PROJ_HAS_BACKEND, false);
-  const [hasAuth] = useGlobal<boolean>(NEW_PROJ_HAS_AUTH, false);
-  const [editingId, setEditingId] = useGlobal<string | null>(EDITING_PROJECT, null);
-  const [, setCreating] = useGlobal<boolean>(CREATING_PROJECT, false);
-  const [, setSelected] = useGlobal<string | null>(SELECTED_PROJECT, null);
-
-  const isEditing = !!editingId;
-  const slug = slugify(name.trim()) || generateSlug();
-
-  const handleSubmit = () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    const desc = description.trim();
-
-    if (isEditing) {
-      const existingIds = new Set(projects.filter((p) => p.id !== editingId).map((p) => p.id));
-      let newId = slugify(trimmed) || generateSlug();
-      while (existingIds.has(newId)) newId = `${newId}-${generateSlug(1)}`;
-
-      const idChanged = newId !== editingId;
-
-      setProjects((prev) =>
-        prev.map((p) =>
-          p.id === editingId
-            ? {
-                ...p,
-                id: newId,
-                name: trimmed,
-                cwd: '',
-                description: desc || undefined,
-                projectType,
-                hasBackend: projectType === 'app' ? hasBackend : undefined,
-                hasAuth: projectType === 'app' ? hasAuth : undefined,
-                templateIdx,
-              }
-            : p,
-        ),
-      );
-
-      const currentState = queryClient.getQueryData<Record<string, unknown>>(['PROJECTS_STATE']) ?? {};
-      const newLayoutKey = `proj-layout-${newId}`;
-
-      if (idChanged) {
-        const oldKeys = [`proj-layout-${editingId}`, `proj-terminals-${editingId}`, `proj-host-terminals-${editingId}`];
-        const cleaned = { ...currentState };
-        for (const k of oldKeys) delete cleaned[k];
-        queryClient.setQueryData(['PROJECTS_STATE'], { ...cleaned, [newLayoutKey]: previewLayout });
-
-        const patch: Record<string, unknown> = { [newLayoutKey]: previewLayout };
-        for (const k of oldKeys) patch[k] = null;
-        client.patch('/user/projects-state', patch).catch(() => {});
-      } else {
-        queryClient.setQueryData(['PROJECTS_STATE'], { ...currentState, [newLayoutKey]: previewLayout });
-        client.patch('/user/projects-state', { [newLayoutKey]: previewLayout }).catch(() => {});
-      }
-
-      setEditingId(null);
-      setSelected(newId);
-    } else {
-      const existingIds = new Set(projects.map((p) => p.id));
-      let id = slugify(trimmed) || generateSlug();
-      while (existingIds.has(id)) id = `${id}-${generateSlug(1)}`;
-
-      const proj: ProjectDefinition = {
-        id,
-        name: trimmed,
-        cwd: '',
-        description: desc || undefined,
-        projectType,
-        hasBackend: projectType === 'app' ? hasBackend : undefined,
-        hasAuth: projectType === 'app' ? hasAuth : undefined,
-        templateIdx,
-      };
-      const layoutKey = `proj-layout-${proj.id}`;
-
-      setProjects((prev) => [...prev, proj]);
-      const currentState = queryClient.getQueryData<Record<string, unknown>>(['PROJECTS_STATE']) ?? {};
-      queryClient.setQueryData(['PROJECTS_STATE'], { ...currentState, [layoutKey]: previewLayout });
-      client.patch('/user/projects-state', { [layoutKey]: previewLayout }).catch(() => {});
-
-      setName('');
-      setDescription('');
-      setTemplateIdx(0);
-      navigate(`/projects/${proj.id}`);
-    }
-  };
-
-  return (
-    <div className="h-full w-full">
-      <div className="flex h-full flex-col items-center justify-center gap-4 p-4">
-        <Rocket className="h-8 w-8 text-emerald-500/40" />
-        <div className="text-center">
-          <p className="text-sm font-medium text-duck-dark/70">{name.trim() || 'Untitled'}</p>
-          <p className="text-xs font-mono text-duck-dark/40 mt-1">projects/{slug}</p>
-        </div>
-        <Button
-          onClick={handleSubmit}
-          disabled={!name.trim()}
-          className="bg-emerald-500 hover:bg-emerald-500/90 cursor-pointer disabled:opacity-40"
-        >
-          <Plus className="h-4 w-4 mr-1" />
-          {isEditing ? 'Update Project' : 'Create Project'}
-        </Button>
-        {isEditing && (
-          <Button
-            onClick={() => navigate(`/projects/${editingId}`)}
-            variant="outline"
-            className="cursor-pointer"
-          >
-            <ArrowRight className="h-4 w-4 mr-1" />
-            Open Project
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// --- Panel: Live Template Preview (full interactive sub-workspace) ---
-// Uses local state for WorkspaceView to avoid cascading re-renders,
-// and syncs to global query cache (write-only) so CreatePanel can read it.
-
-const PREVIEW_LAYOUT_KEY = ['USE_GLOBAL', NEW_PROJ_PREVIEW_LAYOUT];
-
-const TemplatePreviewInner = ({ templateIdx }: { templateIdx: number }) => {
-  const queryClient = useQueryClient();
-  const [layout, setLocalLayout] = useState<LayoutNode>(() => {
-    const initial = templates[templateIdx]!.layout();
-    queryClient.setQueryData(PREVIEW_LAYOUT_KEY, initial);
-    return initial;
-  });
-
-  const handleLayoutChange = (next: LayoutNode) => {
-    setLocalLayout(next);
-    queryClient.setQueryData(PREVIEW_LAYOUT_KEY, next);
-  };
-
-  return <WorkspaceView workspace={null} layout={layout} onLayoutChange={handleLayoutChange} />;
-};
-
-const TemplatePreviewPanel = () => {
-  const [selectedIdx] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
-  return <TemplatePreviewInner key={selectedIdx} templateIdx={selectedIdx} />;
-};
-
-// --- New Project Layout ---
-
-const newProjLayout: LayoutNode = {
-  type: 'group',
-  id: 'new-proj-root',
-  direction: 'vertical',
-  children: [
-    {
-      node: {
-        type: 'group',
-        id: 'new-proj-top',
-        direction: 'horizontal',
-        children: [
-          { node: { type: 'panel', id: 'new-proj-details', appType: 'new-proj-details' }, size: 30 },
-          { node: { type: 'panel', id: 'new-proj-template', appType: 'new-proj-template' }, size: 70 },
-        ],
-      },
-      size: 50,
-    },
-    {
-      node: {
-        type: 'group',
-        id: 'new-proj-bottom',
-        direction: 'horizontal',
-        children: [
-          { node: { type: 'panel', id: 'new-proj-placeholder', appType: 'new-proj-placeholder' }, size: 70 },
-          { node: { type: 'panel', id: 'new-proj-create', appType: 'new-proj-create' }, size: 30 },
-        ],
-      },
-      size: 50,
-    },
-  ],
-};
-
-const NewProjectForm = () => {
-  const { registry } = useAppRegistry();
-  const newProjRegistry = {
-    ...registry,
-    'new-proj-details': { name: 'Details', icon: Type, component: DetailsPanel },
-    'new-proj-placeholder': { name: 'Preview', icon: Layout, component: TemplatePreviewPanel },
-    'new-proj-template': { name: 'Template', icon: Layout, component: TemplatePanel },
-    'new-proj-create': { name: 'Create', icon: Rocket, component: CreatePanel },
-  };
-
-  return <WorkspaceLayout layout={newProjLayout} onLayoutChange={() => {}} registry={newProjRegistry} />;
-};
-
-const ProjectPreviewEmpty = () => {
-  const [creating, setCreating] = useGlobal<boolean>(CREATING_PROJECT, false);
-  const [editingId] = useGlobal<string | null>(EDITING_PROJECT, null);
-  const [, setName] = useGlobal<string>(NEW_PROJ_NAME, '');
-  const [, setDescription] = useGlobal<string>(NEW_PROJ_DESC, '');
-  const [, setTemplateIdx] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
-  const [, setProjectType] = useGlobal<ProjectType>(NEW_PROJ_TYPE, 'app');
-  const [, setHasBackend] = useGlobal<boolean>(NEW_PROJ_HAS_BACKEND, false);
-  const [, setHasAuth] = useGlobal<boolean>(NEW_PROJ_HAS_AUTH, false);
-
-  if (creating || editingId) return <NewProjectForm />;
-
-  const handleCreate = () => {
-    setName(generateSlug());
-    setDescription('');
-    setTemplateIdx(0);
-    setProjectType('app');
-    setHasBackend(false);
-    setHasAuth(false);
-    setCreating(true);
-  };
-
-  return (
-    <div className="h-full w-full">
-      <div className="flex h-full w-full flex-col items-center justify-center gap-4">
-        <FolderKanban className="h-10 w-10 text-white/80" />
-        <p className="text-sm text-white/80">Select a project or create a new one</p>
-        <Button onClick={handleCreate} className="bg-emerald-500 hover:bg-emerald-500/90 cursor-pointer">
-          <Plus className="h-4 w-4 mr-1" />
-          New Project
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const ProjectPreviewInner = ({ project }: { project: ProjectDefinition }) => {
-  const [layout, setLayout] = useProjectsState<LayoutNode>(`proj-layout-${project.id}`, createDefaultLayout());
-  const workspace = { id: project.id, name: project.name, cwd: project.cwd };
-
-  return <WorkspaceView workspace={workspace} layout={layout} onLayoutChange={setLayout} />;
-};
-
-const ProjectPreview = () => {
-  const [selectedId] = useGlobal<string | null>(SELECTED_PROJECT, null);
-  const [projects] = useProjectsState<ProjectDefinition[]>('projects', []);
-  const project = selectedId ? projects.find((p) => p.id === selectedId) : null;
-
-  if (!project) return <ProjectPreviewEmpty />;
-
-  return (
-    <div className="relative h-full w-full">
-      <ProjectPreviewInner key={project.id} project={project} />
-      <Link
-        to={`/projects/${project.id}`}
-        className="absolute inset-0 z-10 flex items-center justify-center bg-transparent hover:bg-duck-dark/10 transition-colors group"
-      >
-        <ArrowRight className="h-16 w-16 text-emerald-500/0 group-hover:text-emerald-500/60 transition-colors" />
-      </Link>
-    </div>
-  );
-};
+} from 'officerdev';
+import { defaultLayout } from './defaultLayout';
 
 export const ProjectListScreen = () => {
-  const [layout, setLayout, isLoaded] = useProjectsState<LayoutNode>('proj-layout-proj-homepage', defaultLayout);
-  const { registry } = useAppRegistry();
-  const projHomeRegistry = {
-    ...registry,
-    'project-list': { name: 'Projects', icon: FolderKanban, component: () => <ProjectListApp /> },
-    'project-preview': { name: 'Project Preview', icon: FolderKanban, component: ProjectPreview },
-  };
-
-  if (!isLoaded) return null;
+  const workspace = useWorkspacesState<LayoutNode>('screens/projects', defaultLayout);
 
   return (
     <div className="h-full w-full">
-      <WorkspaceLayout layout={layout} onLayoutChange={setLayout} registry={projHomeRegistry} />
+      <WorkspaceView workspace={workspace} />
     </div>
   );
 };
diff --git a/src/apps/officer-web/Screens/Dashboard/Projects/ProjectScreen.tsx b/src/apps/officer-web/Screens/Dashboard/Projects/ProjectScreen.tsx
index e5900134..fadc3fed 100644
--- a/src/apps/officer-web/Screens/Dashboard/Projects/ProjectScreen.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Projects/ProjectScreen.tsx
@@ -1,12 +1,11 @@
 import { useParams, Navigate } from 'react-router';
-import { useProjectsState } from 'state/useProjectsState';
+import { useWorkspacesState } from 'state/useWorkspacesState';
 import { WorkspaceView, createDefaultLayout } from '@/components/Workspace';
 import type { LayoutNode, ProjectDefinition } from '@/components/Workspace';
 
-
 export const ProjectScreen = () => {
   const { id } = useParams<{ id: string }>();
-  const [projects, , isLoaded] = useProjectsState<ProjectDefinition[]>('projects', []);
+  const { value: projects, isLoaded } = useWorkspacesState<ProjectDefinition[]>('projects', []);
   const project = projects.find((p) => p.id === id);
 
   if (!isLoaded) return null;
@@ -16,17 +15,11 @@ export const ProjectScreen = () => {
 };
 
 const ProjectScreenInner = ({ project }: { project: ProjectDefinition }) => {
-  const [layout, setLayout] = useProjectsState<LayoutNode>(`proj-layout-${project.id}`, createDefaultLayout());
-  const workspace = { id: project.id, name: project.name, cwd: project.cwd };
+  const workspace = useWorkspacesState<LayoutNode>(`proj-layout-${project.id}`, createDefaultLayout());
 
   return (
     <div className="h-full w-full">
-      <WorkspaceView
-        workspace={workspace}
-        layout={layout}
-        onLayoutChange={setLayout}
-
-      />
+      <WorkspaceView workspace={workspace} cwd={project.cwd} />
     </div>
   );
 };
diff --git a/src/apps/officer-web/Screens/Dashboard/Projects/defaultLayout.ts b/src/apps/officer-web/Screens/Dashboard/Projects/defaultLayout.ts
new file mode 100644
index 00000000..ea6d69ff
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/Projects/defaultLayout.ts
@@ -0,0 +1,11 @@
+import type { LayoutNode } from '@/components/Workspace';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'proj-home-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'proj-home-list', appType: 'project-list' }, size: 25 },
+    { node: { type: 'panel', id: 'proj-home-right', appType: 'project-preview' }, size: 75 },
+  ],
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspaceScreen.tsx b/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspaceScreen.tsx
index 98ffebbd..ed179c2c 100644
--- a/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspaceScreen.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspaceScreen.tsx
@@ -1,14 +1,25 @@
-import type { LayoutNode } from '@/components/Workspace';
-import { WorkspaceView } from '@/components/Workspace';
+import { useParams, Navigate } from 'react-router';
 import { useWorkspacesState } from 'state/useWorkspacesState';
-import { defaultLayout } from './defaultLayout';
+import { WorkspaceView, createDefaultLayout } from '@/components/Workspace';
+import type { LayoutNode, WorkspaceDefinition } from '@/components/Workspace';
 
 export const WorkspaceScreen = () => {
-  const workspace = useWorkspacesState<LayoutNode>('screens/workspaces', defaultLayout);
+  const { id } = useParams<{ id: string }>();
+  const { value: workspaces, isLoaded } = useWorkspacesState<WorkspaceDefinition[]>('workspaces', []);
+  const ws = workspaces.find((w) => w.id === id);
+
+  if (!isLoaded) return null;
+  if (!ws) return <Navigate to="/workspaces" replace />;
+
+  return <WorkspaceScreenInner workspace={ws} />;
+};
+
+const WorkspaceScreenInner = ({ workspace }: { workspace: WorkspaceDefinition }) => {
+  const wsState = useWorkspacesState<LayoutNode>(`ws-layout-${workspace.id}`, createDefaultLayout());
 
   return (
     <div className="h-full w-full">
-      <WorkspaceView workspace={workspace} />
+      <WorkspaceView workspace={wsState} cwd={workspace.cwd} />
     </div>
   );
 };
diff --git a/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspacesScreen.tsx b/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspacesScreen.tsx
new file mode 100644
index 00000000..c48773a3
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/Workspaces/WorkspacesScreen.tsx
@@ -0,0 +1,14 @@
+import type { LayoutNode } from '@/components/Workspace';
+import { WorkspaceView } from '@/components/Workspace';
+import { useWorkspacesState } from 'state/useWorkspacesState';
+import { defaultLayout } from './defaultLayout';
+
+export const WorkspacesScreen = () => {
+  const workspace = useWorkspacesState<LayoutNode>('screens/workspaces', defaultLayout);
+
+  return (
+    <div className="h-full w-full">
+      <WorkspaceView workspace={workspace} />
+    </div>
+  );
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Workspaces/index.tsx b/src/apps/officer-web/Screens/Dashboard/Workspaces/index.tsx
index 5868f861..4dbb5a34 100644
--- a/src/apps/officer-web/Screens/Dashboard/Workspaces/index.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Workspaces/index.tsx
@@ -1 +1,2 @@
+export { WorkspacesScreen } from './WorkspacesScreen';
 export { WorkspaceScreen } from './WorkspaceScreen';
diff --git a/src/apps/officer-web/Screens/Dashboard/index.tsx b/src/apps/officer-web/Screens/Dashboard/index.tsx
index f95c79c1..c8d0b63e 100644
--- a/src/apps/officer-web/Screens/Dashboard/index.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/index.tsx
@@ -1,6 +1,5 @@
 export * from './Layout';
 export * from './Home';
-export * from './ChatScreen';
 export * from './OnboardingAdmin';
 export * from './PasskeyGate';
 export * from './Plans';
@@ -14,7 +13,6 @@ export * from './Tasks';
 
 export * from './Files';
 export * from './ChatHistory';
-export * from './CodeEditor';
 export * from './Workspaces';
 export * from './Projects';
 export * from './Terminal';
diff --git a/src/servers/api/settings/projects.ts b/src/servers/api/settings/projects.ts
deleted file mode 100644
index ba50282e..00000000
--- a/src/servers/api/settings/projects.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { mkdir, readdir, rm } from 'node:fs/promises';
-import { join } from 'node:path';
-import { createRouter } from '../../create-router';
-import { getUserProjectsDir } from '@@/data-path';
-
-export const projectsRouter = createRouter();
-
-type KeyMapping = { file: string; dir?: string };
-
-function resolveKey(projDir: string, key: string): KeyMapping | null {
-  if (key === 'projects') return { file: join(projDir, 'index.json') };
-
-  const layoutMatch = key.match(/^proj-layout-(.+)$/);
-  if (layoutMatch) {
-    const id = layoutMatch[1]!;
-    const dir = join(projDir, id);
-    return { file: join(dir, 'layout.json'), dir };
-  }
-
-  const terminalsMatch = key.match(/^proj-terminals-(.+)$/);
-  if (terminalsMatch) {
-    const id = terminalsMatch[1]!;
-    const dir = join(projDir, id);
-    return { file: join(dir, 'terminals.json'), dir };
-  }
-
-  const hostTerminalsMatch = key.match(/^proj-host-terminals-(.+)$/);
-  if (hostTerminalsMatch) {
-    const id = hostTerminalsMatch[1]!;
-    const dir = join(projDir, id);
-    return { file: join(dir, 'host-terminals.json'), dir };
-  }
-
-  return null;
-}
-
-async function readJsonFile(path: string): Promise<unknown | null> {
-  const file = Bun.file(path);
-  if (await file.exists()) return file.json();
-  return null;
-}
-
-async function writeJsonFile(path: string, data: unknown) {
-  await Bun.write(path, JSON.stringify(data, null, 2));
-}
-
-async function readProjectDir(dirPath: string, id: string, result: Record<string, unknown>) {
-  const layout = await readJsonFile(join(dirPath, 'layout.json'));
-  if (layout !== null) result[`proj-layout-${id}`] = layout;
-
-  const terminals = await readJsonFile(join(dirPath, 'terminals.json'));
-  if (terminals !== null) result[`proj-terminals-${id}`] = terminals;
-
-  const hostTerminals = await readJsonFile(join(dirPath, 'host-terminals.json'));
-  if (hostTerminals !== null) result[`proj-host-terminals-${id}`] = hostTerminals;
-}
-
-async function readAllProjectsState(projDir: string): Promise<Record<string, unknown>> {
-  const result: Record<string, unknown> = {};
-
-  const indexData = await readJsonFile(join(projDir, 'index.json'));
-  if (indexData !== null) result['projects'] = indexData;
-
-  let entries: import('node:fs').Dirent[] = [];
-  try {
-    entries = await readdir(projDir, { withFileTypes: true });
-  } catch {
-    return result;
-  }
-
-  for (const entry of entries) {
-    if (!entry.isDirectory()) continue;
-    await readProjectDir(join(projDir, entry.name), entry.name, result);
-  }
-
-  return result;
-}
-
-// GET /projects-state
-projectsRouter.get('/projects-state', async (ctx) => {
-  const email = ctx.get('user').email;
-  const projDir = getUserProjectsDir(email);
-
-  const state = await readAllProjectsState(projDir);
-  return ctx.json(state);
-});
-
-// PATCH /projects-state
-projectsRouter.patch('/projects-state', async (ctx) => {
-  const email = ctx.get('user').email;
-  const body = ctx.get('body') as Record<string, unknown>;
-  const projDir = getUserProjectsDir(email);
-
-  await mkdir(projDir, { recursive: true });
-
-  for (const [key, value] of Object.entries(body)) {
-    // When writing the projects list, resolve cwds and create project dirs
-    if (key === 'projects' && Array.isArray(value)) {
-      for (const project of value) {
-        const projectFilesDir = join(projDir, project.id, 'files');
-        project.cwd = projectFilesDir;
-        await mkdir(projectFilesDir, { recursive: true });
-      }
-    }
-
-    const mapping = resolveKey(projDir, key);
-    if (!mapping) continue;
-
-    if (value === null) {
-      try {
-        await rm(mapping.file, { force: true });
-        if (mapping.dir) {
-          const remaining = await readdir(mapping.dir);
-          if (remaining.length === 0) await rm(mapping.dir, { recursive: true, force: true });
-        }
-      } catch {
-        // ignore
-      }
-      continue;
-    }
-
-    if (mapping.dir) await mkdir(mapping.dir, { recursive: true });
-    await writeJsonFile(mapping.file, value);
-  }
-
-  const state = await readAllProjectsState(projDir);
-  return ctx.json(state);
-});
diff --git a/src/servers/api/terminal/websocket.ts b/src/servers/api/terminal/websocket.ts
index 8f1bf1cb..8bcb1577 100644
--- a/src/servers/api/terminal/websocket.ts
+++ b/src/servers/api/terminal/websocket.ts
@@ -288,6 +288,7 @@ const containerHome = '/home/officer';
 const resolveCwd = (home: string, cwd?: string) => {
   if (!cwd || cwd === '~') return home;
   if (cwd.startsWith('~/')) return join(home, cwd.slice(2));
+  if (cwd.startsWith('/')) return join(home, cwd.slice(1));
   return home;
 };
 
diff --git a/src/servers/api/workspaces/types.ts b/src/servers/api/workspaces/types.ts
index 3a731779..21f43768 100644
--- a/src/servers/api/workspaces/types.ts
+++ b/src/servers/api/workspaces/types.ts
@@ -1,3 +1,3 @@
 export type KeyMapping = { file: string; dir?: string };
 
-export type ResolveDirs = { wsDir: string; screensDir: string };
+export type ResolveDirs = { wsDir: string; screensDir: string; projDir: string };
diff --git a/src/servers/api/workspaces/utils.ts b/src/servers/api/workspaces/utils.ts
index a333e6bc..64d5a7c7 100644
--- a/src/servers/api/workspaces/utils.ts
+++ b/src/servers/api/workspaces/utils.ts
@@ -1,6 +1,6 @@
 import { mkdir, readdir, rename, rm } from 'node:fs/promises';
 import { join } from 'node:path';
-import { getUserWorkspacesDir, getUserHomepageWorkspaceDir, getUserStateFile } from '@@/data-path';
+import { getUserWorkspacesDir, getUserHomepageWorkspaceDir, getUserStateFile, getUserProjectsDir } from '@@/data-path';
 import type { KeyMapping, ResolveDirs } from './types';
 
 const RESERVED_DIRS = new Set(['screens']);
@@ -39,6 +39,35 @@ export function resolveKey(dirs: ResolveDirs, key: string): KeyMapping | null {
     return { file: join(dir, 'host-terminals.json'), dir };
   }
 
+  // Project keys — stored in {projDir}/{slug}/.officerdev/
+  const projMetaMatch = key.match(/^proj-meta-(.+)$/);
+  if (projMetaMatch) {
+    const slug = projMetaMatch[1]!;
+    const dir = join(dirs.projDir, slug, '.officerdev');
+    return { file: join(dir, 'meta.json'), dir };
+  }
+
+  const projLayoutMatch = key.match(/^proj-layout-(.+)$/);
+  if (projLayoutMatch) {
+    const slug = projLayoutMatch[1]!;
+    const dir = join(dirs.projDir, slug, '.officerdev');
+    return { file: join(dir, 'layout.json'), dir };
+  }
+
+  const projTerminalsMatch = key.match(/^proj-terminals-(.+)$/);
+  if (projTerminalsMatch) {
+    const slug = projTerminalsMatch[1]!;
+    const dir = join(dirs.projDir, slug, '.officerdev');
+    return { file: join(dir, 'terminals.json'), dir };
+  }
+
+  const projHostTerminalsMatch = key.match(/^proj-host-terminals-(.+)$/);
+  if (projHostTerminalsMatch) {
+    const slug = projHostTerminalsMatch[1]!;
+    const dir = join(dirs.projDir, slug, '.officerdev');
+    return { file: join(dir, 'host-terminals.json'), dir };
+  }
+
   return null;
 }
 
@@ -125,6 +154,23 @@ async function readWorkspaceDir(dirPath: string, id: string, result: Record<stri
   if (hostTerminals !== null) result[`ws-host-terminals-${id}`] = hostTerminals;
 }
 
+async function readProjectDir(projectPath: string, slug: string, result: Record<string, unknown>): Promise<unknown | null> {
+  const officerdevDir = join(projectPath, '.officerdev');
+  const meta = await readJsonFile(join(officerdevDir, 'meta.json'));
+  if (!meta) return null;
+
+  const layout = await readJsonFile(join(officerdevDir, 'layout.json'));
+  if (layout !== null) result[`proj-layout-${slug}`] = layout;
+
+  const terminals = await readJsonFile(join(officerdevDir, 'terminals.json'));
+  if (terminals !== null) result[`proj-terminals-${slug}`] = terminals;
+
+  const hostTerminals = await readJsonFile(join(officerdevDir, 'host-terminals.json'));
+  if (hostTerminals !== null) result[`proj-host-terminals-${slug}`] = hostTerminals;
+
+  return { ...(meta as object), id: slug, cwd: `/Projects/${slug}` };
+}
+
 async function readScreensDir(screensDir: string, result: Record<string, unknown>) {
   let entries: import('node:fs').Dirent[] = [];
   try {
@@ -168,6 +214,23 @@ export async function readAllWorkspacesState(dirs: ResolveDirs): Promise<Record<
     await readWorkspaceDir(join(dirs.wsDir, entry.name), entry.name, result);
   }
 
+  // Read project data — scan directories containing .officerdev/meta.json
+  const projects: unknown[] = [];
+  let projEntries: import('node:fs').Dirent[] = [];
+  try {
+    projEntries = await readdir(dirs.projDir, { withFileTypes: true });
+  } catch {
+    result['projects'] = projects;
+    return result;
+  }
+
+  for (const entry of projEntries) {
+    if (!entry.isDirectory()) continue;
+    const meta = await readProjectDir(join(dirs.projDir, entry.name), entry.name, result);
+    if (meta) projects.push(meta);
+  }
+  result['projects'] = projects;
+
   return result;
 }
 
@@ -175,5 +238,6 @@ export function getDirs(email: string): ResolveDirs {
   return {
     wsDir: getUserWorkspacesDir(email),
     screensDir: join(getUserWorkspacesDir(email), 'screens'),
+    projDir: getUserProjectsDir(email),
   };
 }
diff --git a/src/servers/api/workspaces/workspaces.ts b/src/servers/api/workspaces/workspaces.ts
index 20084712..b20693d5 100644
--- a/src/servers/api/workspaces/workspaces.ts
+++ b/src/servers/api/workspaces/workspaces.ts
@@ -1,14 +1,7 @@
 import { mkdir, readdir, rm } from 'node:fs/promises';
 import { join } from 'node:path';
 import { createRouter } from '@@/create-router';
-import {
-  getDirs,
-  migrateFromState,
-  migrateHomepageToScreens,
-  readAllWorkspacesState,
-  resolveKey,
-  writeJsonFile,
-} from './utils';
+import { getDirs, migrateFromState, migrateHomepageToScreens, readAllWorkspacesState, resolveKey, writeJsonFile } from './utils';
 
 export const workspacesRouter = createRouter();
 
@@ -37,6 +30,30 @@ workspacesRouter.patch('/', async (ctx) => {
   await mkdir(dirs.wsDir, { recursive: true });
 
   for (const [key, value] of Object.entries(body)) {
+    // Handle proj-meta-{slug}: create/update/delete project
+    const projMetaMatch = key.match(/^proj-meta-(.+)$/);
+    if (projMetaMatch) {
+      const slug = projMetaMatch[1]!;
+      const projectDir = join(dirs.projDir, slug);
+
+      if (value === null) {
+        await rm(projectDir, { recursive: true, force: true });
+        continue;
+      }
+
+      const officerdevDir = join(projectDir, '.officerdev');
+      const metaFile = join(officerdevDir, 'meta.json');
+      const isNew = !(await Bun.file(metaFile).exists());
+      await mkdir(officerdevDir, { recursive: true });
+      await writeJsonFile(metaFile, value);
+
+      if (isNew) {
+        const proc = Bun.spawn(['git', 'init', projectDir]);
+        await proc.exited;
+      }
+      continue;
+    }
+
     const mapping = resolveKey(dirs, key);
     if (!mapping) continue;
 
diff --git a/src/servers/data-path.ts b/src/servers/data-path.ts
index 9b3c3f98..3a90941a 100644
--- a/src/servers/data-path.ts
+++ b/src/servers/data-path.ts
@@ -36,7 +36,7 @@ export const getUserStateFile = (email: string) => join(DATA_PATH, email, 'state
 
 export const getUserWorkspacesDir = (email: string) => join(DATA_PATH, email, 'workspaces');
 
-export const getUserProjectsDir = (email: string) => join(DATA_PATH, email, 'projects');
+export const getUserProjectsDir = (email: string) => join(DATA_PATH, email, 'home', 'Projects');
 
 export const getUserHomepageWorkspaceDir = (email: string) => join(DATA_PATH, email, 'ws-homepage');
 
diff --git a/src/servers/hono.ts b/src/servers/hono.ts
index 05571818..b799c4f0 100644
--- a/src/servers/hono.ts
+++ b/src/servers/hono.ts
@@ -15,7 +15,6 @@ import { scrapeRouter } from './api/scrape/scrape';
 import { uploadRouter } from './api/upload/upload';
 import { settingsRouter } from './api/settings/settings';
 import { workspacesRouter } from './api/workspaces';
-import { projectsRouter } from './api/settings/projects';
 import { taskLogsRouter } from './api/task-logs/task-logs';
 import { router as fileBrowserRouter } from './api/file-browser/router';
 import { piRestRouter } from './api/pi/rest';
@@ -55,7 +54,6 @@ protectedRouter.route('/scrape', scrapeRouter);
 protectedRouter.route('/upload', uploadRouter);
 protectedRouter.route('/user', settingsRouter);
 protectedRouter.route('/workspaces', workspacesRouter);
-protectedRouter.route('/user', projectsRouter);
 protectedRouter.route('/task-logs', taskLogsRouter);
 protectedRouter.route('/file-browser', fileBrowserRouter);
 protectedRouter.route('/', piRestRouter);
diff --git a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
index b5ae0b9d..27a346f8 100644
--- a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
+++ b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
@@ -4,9 +4,11 @@ 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 { appRegistryMetas as projectMetas } from '../apps/Projects';
+import { appRegistryMetas as chatHistoryMetas } from '../apps/ChatHistory';
 import { useAppRegistry } from './useAppRegistry';
 
-const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...workspaceMetas];
+const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...workspaceMetas, ...projectMetas, ...chatHistoryMetas];
 
 export const AppRegistry = () => {
   useAppRegistry(apps);
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/ChatDetailPanel.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
similarity index 92%
rename from src/apps/officer-web/Screens/Dashboard/ChatHistory/ChatDetailPanel.tsx
rename to src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
index fbe8ecb3..2cdf7081 100644
--- a/src/apps/officer-web/Screens/Dashboard/ChatHistory/ChatDetailPanel.tsx
+++ b/src/workspaces/officerdev/src/apps/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 { usePiChat, EmbeddableChat } from 'officerdev';
+import { usePiChat, EmbeddableChat } from '../Chat';
 
 export type SelectedSession = {
   id: string;
@@ -68,8 +68,6 @@ function SessionChat({ sessionId, model }: SessionChatProps) {
   const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
   const sessionTitle = sessions.find((s) => s.id === sessionId)?.title;
 
-  // 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 = usePiChat(sessionId, model, { replaceUrl: false });
 
   return (
@@ -84,10 +82,10 @@ function SessionChat({ sessionId, model }: SessionChatProps) {
           window.history.replaceState(null, '', '/chat');
         }}
       />
-      <EmbeddableChat 
+      <EmbeddableChat
         sessionId={sessionId}
         initialModel={model ?? undefined}
-        className="flex-1 min-h-0" 
+        className="flex-1 min-h-0"
       />
     </div>
   );
@@ -98,7 +96,6 @@ function NewChat() {
   const locationState = location.state as ChatLocationState;
   const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
 
-  // We need connection status for DetailBar, so call usePi
   const chat = usePiChat();
 
   useEffect(() => {
@@ -146,7 +143,7 @@ function NewChatPanel() {
   return <NewChat key="new" />;
 }
 
-export function ChatDetailPanel() {
+export const ChatDetailPanel = () => {
   const [selected] = usePanelChannel<SelectedSession>(CHANNEL, null);
 
   if (!selected) {
@@ -162,4 +159,4 @@ export function ChatDetailPanel() {
   }
 
   return <SessionChat key={selected.id} sessionId={selected.id} model={selected.model} />;
-}
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/CreateGroupDialog.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/CreateGroupDialog.tsx
similarity index 99%
rename from src/apps/officer-web/Screens/Dashboard/ChatHistory/CreateGroupDialog.tsx
rename to src/workspaces/officerdev/src/apps/ChatHistory/CreateGroupDialog.tsx
index be2349b5..764ef2f4 100644
--- a/src/apps/officer-web/Screens/Dashboard/ChatHistory/CreateGroupDialog.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/CreateGroupDialog.tsx
@@ -22,7 +22,7 @@ export function CreateGroupDialog({ onClose }: CreateGroupDialogProps) {
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-    
+
     if (!name.trim()) {
       setError('Name is required');
       return;
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/GroupContextMenu.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/GroupContextMenu.tsx
similarity index 98%
rename from src/apps/officer-web/Screens/Dashboard/ChatHistory/GroupContextMenu.tsx
rename to src/workspaces/officerdev/src/apps/ChatHistory/GroupContextMenu.tsx
index e9be9384..974b7bd2 100644
--- a/src/apps/officer-web/Screens/Dashboard/ChatHistory/GroupContextMenu.tsx
+++ b/src/workspaces/officerdev/src/apps/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 'officerdev';
+import type { GroupEntry } from '../Chat';
 
 type GroupContextMenuProps = {
   group: GroupEntry;
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/SessionContextMenu.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/SessionContextMenu.tsx
similarity index 99%
rename from src/apps/officer-web/Screens/Dashboard/ChatHistory/SessionContextMenu.tsx
rename to src/workspaces/officerdev/src/apps/ChatHistory/SessionContextMenu.tsx
index 5665c2d5..af5fb79c 100644
--- a/src/apps/officer-web/Screens/Dashboard/ChatHistory/SessionContextMenu.tsx
+++ b/src/workspaces/officerdev/src/apps/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 'officerdev';
+import type { SessionEntry } from '../Chat';
 
 type SessionContextMenuProps = {
   session: SessionEntry;
diff --git a/src/apps/officer-web/Screens/Dashboard/ChatHistory/Screen.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/SessionList.tsx
similarity index 99%
rename from src/apps/officer-web/Screens/Dashboard/ChatHistory/Screen.tsx
rename to src/workspaces/officerdev/src/apps/ChatHistory/SessionList.tsx
index 4caff5f9..cfa7b3ed 100644
--- a/src/apps/officer-web/Screens/Dashboard/ChatHistory/Screen.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/SessionList.tsx
@@ -14,7 +14,7 @@ export const SessionList = () => {
   const [selected, setSelected] = usePanelChannel<SelectedSession>('chat:selected-session', null);
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
   const [showCreateGroup, setShowCreateGroup] = useState(false);
-  
+
   const scrolledRef = useRef(false);
   const selectedRef = useCallback(
     (node: HTMLDivElement | null) => {
diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/index.ts b/src/workspaces/officerdev/src/apps/ChatHistory/index.ts
index b3650247..fbce3b09 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/index.ts
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/index.ts
@@ -1 +1,26 @@
+import type { AppRegistryMeta } from '../../AppRegistry';
+import { MessageSquare, List } from 'lucide-react';
+import { SessionList } from './SessionList';
+import { ChatDetailPanel } from './ChatDetailPanel';
+
 export { SessionBar } from './SessionBar';
+export { SessionList };
+export { ChatDetailPanel };
+export type { SelectedSession } from './ChatDetailPanel';
+
+export const appRegistryMetas: AppRegistryMeta[] = [
+  {
+    key: 'chat-session-list',
+    name: 'Sessions',
+    icon: List,
+    component: SessionList,
+    availableOnPanel: false,
+  },
+  {
+    key: 'chat-detail',
+    name: 'Chat',
+    icon: MessageSquare,
+    component: ChatDetailPanel,
+    availableOnPanel: false,
+  },
+];
diff --git a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserApp.tsx b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserApp.tsx
index 87084bd3..7cebabff 100644
--- a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserApp.tsx
+++ b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserApp.tsx
@@ -9,10 +9,11 @@ import { useFileBrowserApp } from './useFileBrowserApp';
 
 type FileBrowserAppProps = {
   basePath?: string;
+  rootOverride?: string;
 };
 
-export const FileBrowserApp = ({ basePath = '/' }: FileBrowserAppProps) => {
-  const fileBrowserManager = useFileBrowserApp(basePath);
+export const FileBrowserApp = ({ basePath = '/', rootOverride }: FileBrowserAppProps) => {
+  const fileBrowserManager = useFileBrowserApp(basePath, rootOverride);
   const { handleNavigate } = fileBrowserManager;
 
   return (
diff --git a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx
index ffa9beb7..970c3909 100644
--- a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx
+++ b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/FileBrowserPanelWrapper.tsx
@@ -5,5 +5,6 @@ const cwdToPath = (cwd: string) => (cwd === '~' ? '/' : cwd.slice(1));
 
 export const FileBrowserPanelWrapper = () => {
   const { cwd } = useWorkspace();
-  return <FileBrowserApp basePath={cwdToPath(cwd)} />;
+  const basePath = cwdToPath(cwd);
+  return <FileBrowserApp basePath={basePath} rootOverride={basePath !== '/' ? 'home' : undefined} />;
 };
diff --git a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/useFileBrowserApp.ts b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/useFileBrowserApp.ts
index 0d3d83e2..1dfa5c11 100644
--- a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/useFileBrowserApp.ts
+++ b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/useFileBrowserApp.ts
@@ -6,12 +6,16 @@ import { useTasks, type TaskSummary } from '../useTasks';
 import { useUserState } from 'state/useUserState';
 import { useAuth } from 'hooks/useAuth';
 
-export const useFileBrowserApp = (basePath: string) => {
+export const useFileBrowserApp = (basePath: string, rootOverride?: string) => {
   const { user } = useAuth();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const [homeRoot, setHomeRoot] = useUserState<HomeRoot>('files/homeRoot', 'home');
-  const [currentPath, setCurrentPath] = useUserState<string>('files/currentPath', '/');
+  const [globalPath, setGlobalPath] = useUserState<string>('files/currentPath', '/');
+  const [localPath, setLocalPath] = useState(basePath);
+  const scoped = basePath !== '/';
+  const currentPath = scoped ? localPath : globalPath;
+  const setCurrentPath = scoped ? setLocalPath : setGlobalPath;
   const [entries, setEntries] = useState<DirEntry[]>([]);
   const [loading, setLoading] = useState(true);
   const [viewMode, setViewMode] = useUserState<'grid' | 'list'>('files/viewMode', 'grid');
@@ -37,7 +41,7 @@ export const useFileBrowserApp = (basePath: string) => {
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const fileScrollRef = useRef<HTMLDivElement | null>(null);
   const viewPath = searchParams.get('view');
-  const files = useFilesAPI(homeRoot);
+  const files = useFilesAPI(rootOverride ?? homeRoot);
   const filesRef = useRef(files);
   filesRef.current = files;
   const currentPathRef = useRef(currentPath);
diff --git a/src/apps/officer-web/Screens/Dashboard/Projects/ProjectListApp.tsx b/src/workspaces/officerdev/src/apps/Projects/ProjectListApp.tsx
similarity index 89%
rename from src/apps/officer-web/Screens/Dashboard/Projects/ProjectListApp.tsx
rename to src/workspaces/officerdev/src/apps/Projects/ProjectListApp.tsx
index aa04981d..d27f9b85 100644
--- a/src/apps/officer-web/Screens/Dashboard/Projects/ProjectListApp.tsx
+++ b/src/workspaces/officerdev/src/apps/Projects/ProjectListApp.tsx
@@ -5,7 +5,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useGlobal } from 'hooks/useGlobal';
 import { useClient } from 'hooks/useClient';
 import { generateSlug } from 'helpers/slug';
-import { useProjectsState } from 'state/useProjectsState';
+import { useWorkspacesState } from 'state/useWorkspacesState';
 import type { ProjectDefinition, ProjectType } from '@/components/Workspace';
 import {
   AlertDialog,
@@ -40,7 +40,7 @@ export const ProjectListApp = () => {
   const navigate = useNavigate();
   const client = useClient();
   const queryClient = useQueryClient();
-  const [projects, setProjects] = useProjectsState<ProjectDefinition[]>('projects', []);
+  const { value: projects } = useWorkspacesState<ProjectDefinition[]>('projects', []);
   const [selected, setSelected] = useGlobal<string | null>(SELECTED_PROJECT, null);
   const [, setCreating] = useGlobal<boolean>(CREATING_PROJECT, false);
   const [, setEditing] = useGlobal<string | null>(EDITING_PROJECT, null);
@@ -83,15 +83,21 @@ export const ProjectListApp = () => {
 
   const confirmDelete = () => {
     if (!deleting) return;
-    setProjects((prev) => prev.filter((p) => p.id !== deleting.id));
-    if (selected === deleting.id) setSelected(null);
+    // Optimistic: remove from cache immediately
+    const current = queryClient.getQueryData<Record<string, unknown>>(['WORKSPACES_STATE']) ?? {};
+    const optimistic = { ...current };
+    optimistic['projects'] = (optimistic['projects'] as ProjectDefinition[]).filter((p) => p.id !== deleting.id);
+    delete optimistic[`proj-layout-${deleting.id}`];
+    delete optimistic[`proj-terminals-${deleting.id}`];
+    delete optimistic[`proj-host-terminals-${deleting.id}`];
+    queryClient.setQueryData(['WORKSPACES_STATE'], optimistic);
 
-    const layoutKey = `proj-layout-${deleting.id}`;
-    const currentState = queryClient.getQueryData<Record<string, unknown>>(['PROJECTS_STATE']) ?? {};
-    const { [layoutKey]: _, ...rest } = currentState;
-    queryClient.setQueryData(['PROJECTS_STATE'], rest);
-    client.patch('/user/projects-state', { [layoutKey]: null }).catch(() => {});
+    if (selected === deleting.id) setSelected(null);
     setDeleting(null);
+    client
+      .patch('/workspaces', { [`proj-meta-${deleting.id}`]: null })
+      .then((res) => queryClient.setQueryData(['WORKSPACES_STATE'], res))
+      .catch(() => {});
   };
 
   const handleClick = (p: ProjectDefinition) => {
diff --git a/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx b/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx
new file mode 100644
index 00000000..155b8de1
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx
@@ -0,0 +1,549 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router';
+import { FolderKanban, Plus, ArrowRight, Type, Rocket, FileText, Layout } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useGlobal } from 'hooks/useGlobal';
+import { useClient } from 'hooks/useClient';
+import { useWorkspacesState } from 'state/useWorkspacesState';
+import { WorkspaceLayout, WorkspaceView, createDefaultLayout } from '@/components/Workspace';
+import type { LayoutNode, ProjectDefinition, ProjectType } from '@/components/Workspace';
+import { Button } from '@/components/ui/button';
+import { generateSlug, slugify } from 'helpers/slug';
+import { useAppRegistry } from '../../AppRegistry';
+import {
+  SELECTED_PROJECT,
+  CREATING_PROJECT,
+  EDITING_PROJECT,
+  NEW_PROJ_NAME,
+  NEW_PROJ_DESC,
+  NEW_PROJ_TEMPLATE,
+  NEW_PROJ_TYPE,
+  NEW_PROJ_HAS_BACKEND,
+  NEW_PROJ_HAS_AUTH,
+  NEW_PROJ_PREVIEW_LAYOUT,
+} from './constants';
+
+// --- Layout Templates ---
+
+let tplCounter = 0;
+const tplUid = () => `ptpl-${++tplCounter}`;
+
+type LayoutTemplate = {
+  name: string;
+  layout: () => LayoutNode;
+};
+
+const templates: LayoutTemplate[] = [
+  {
+    name: 'Single',
+    layout: () => ({ type: 'panel', id: tplUid(), appType: null }),
+  },
+  {
+    name: '2 Columns',
+    layout: () => ({
+      type: 'group',
+      id: tplUid(),
+      direction: 'horizontal',
+      children: [
+        { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+        { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+      ],
+    }),
+  },
+  {
+    name: 'Main + Side',
+    layout: () => ({
+      type: 'group',
+      id: tplUid(),
+      direction: 'horizontal',
+      children: [
+        { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+        {
+          node: {
+            type: 'group',
+            id: tplUid(),
+            direction: 'vertical',
+            children: [
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+            ],
+          },
+          size: 50,
+        },
+      ],
+    }),
+  },
+  {
+    name: 'Sidebar',
+    layout: () => ({
+      type: 'group',
+      id: tplUid(),
+      direction: 'horizontal',
+      children: [
+        { node: { type: 'panel', id: tplUid(), appType: null }, size: 25 },
+        { node: { type: 'panel', id: tplUid(), appType: null }, size: 75 },
+      ],
+    }),
+  },
+  {
+    name: '2x2 Grid',
+    layout: () => ({
+      type: 'group',
+      id: tplUid(),
+      direction: 'vertical',
+      children: [
+        {
+          node: {
+            type: 'group',
+            id: tplUid(),
+            direction: 'horizontal',
+            children: [
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+            ],
+          },
+          size: 50,
+        },
+        {
+          node: {
+            type: 'group',
+            id: tplUid(),
+            direction: 'horizontal',
+            children: [
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+            ],
+          },
+          size: 50,
+        },
+      ],
+    }),
+  },
+  {
+    name: 'Cols + Bottom',
+    layout: () => ({
+      type: 'group',
+      id: tplUid(),
+      direction: 'vertical',
+      children: [
+        {
+          node: {
+            type: 'group',
+            id: tplUid(),
+            direction: 'horizontal',
+            children: [
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+              { node: { type: 'panel', id: tplUid(), appType: null }, size: 50 },
+            ],
+          },
+          size: 70,
+        },
+        { node: { type: 'panel', id: tplUid(), appType: null }, size: 30 },
+      ],
+    }),
+  },
+];
+
+// --- Template Thumbnails ---
+
+const ThumbnailNode = ({ node }: { node: LayoutNode }) => {
+  if (node.type === 'panel') {
+    return <div className="h-full w-full bg-emerald-500/15 border border-emerald-500/20 rounded-sm" />;
+  }
+  const isH = node.direction === 'horizontal';
+  return (
+    <div className={`flex h-full w-full gap-1.5 ${isH ? 'flex-row' : 'flex-col'}`}>
+      {node.children.map((child) => (
+        <div key={child.node.id} style={{ flex: child.size }} className="min-h-0 min-w-0">
+          <ThumbnailNode node={child.node} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const TemplateCell = ({ index }: { index: number }) => {
+  const tpl = templates[index]!;
+  const [selected, setSelected] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
+  const node = tpl.layout();
+  const isSelected = selected === index;
+
+  return (
+    <div className="h-full w-full">
+      <button
+        type="button"
+        onClick={() => setSelected(index)}
+        className={`flex h-full w-full flex-col items-center justify-center gap-2 p-3 cursor-pointer transition-colors ${
+          isSelected ? 'bg-emerald-500/10' : 'hover:bg-duck-dark/5'
+        }`}
+      >
+        <div className="w-full flex-1 min-h-0 rounded border border-duck-dark/20 overflow-hidden">
+          <ThumbnailNode node={node} />
+        </div>
+        <span className={`text-xs font-medium ${isSelected ? 'text-emerald-400' : 'text-duck-dark/60'}`}>{tpl.name}</span>
+      </button>
+    </div>
+  );
+};
+
+// --- Panel: Template Picker (3x2 workspace) ---
+
+const tplPanelLayout: LayoutNode = {
+  type: 'group',
+  id: 'ptpl-root',
+  direction: 'vertical',
+  children: [
+    {
+      node: {
+        type: 'group',
+        id: 'ptpl-row-0',
+        direction: 'horizontal',
+        children: [
+          { node: { type: 'panel', id: 'ptpl-0', appType: 'ptpl-0' }, size: 33.33 },
+          { node: { type: 'panel', id: 'ptpl-1', appType: 'ptpl-1' }, size: 33.33 },
+          { node: { type: 'panel', id: 'ptpl-2', appType: 'ptpl-2' }, size: 33.34 },
+        ],
+      },
+      size: 50,
+    },
+    {
+      node: {
+        type: 'group',
+        id: 'ptpl-row-1',
+        direction: 'horizontal',
+        children: [
+          { node: { type: 'panel', id: 'ptpl-3', appType: 'ptpl-3' }, size: 33.33 },
+          { node: { type: 'panel', id: 'ptpl-4', appType: 'ptpl-4' }, size: 33.33 },
+          { node: { type: 'panel', id: 'ptpl-5', appType: 'ptpl-5' }, size: 33.34 },
+        ],
+      },
+      size: 50,
+    },
+  ],
+};
+
+const tplRegistry = Object.fromEntries(
+  templates.map((tpl, i) => [`ptpl-${i}`, { name: tpl.name, icon: Layout, component: () => <TemplateCell index={i} /> }]),
+);
+
+const TemplatePanel = () => (
+  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} />
+);
+
+// --- Panel: Details (Name + Description + Project Type + Backend/Auth toggles) ---
+
+const PROJECT_TYPE_OPTIONS: { value: ProjectType; label: string }[] = [
+  { value: 'landing-page', label: 'Landing Page' },
+  { value: 'website', label: 'Website' },
+  { value: 'app', label: 'App' },
+];
+
+const DetailsPanel = () => {
+  const [name, setName] = useGlobal<string>(NEW_PROJ_NAME, '');
+  const [description, setDescription] = useGlobal<string>(NEW_PROJ_DESC, '');
+  const [projectType, setProjectType] = useGlobal<ProjectType>(NEW_PROJ_TYPE, 'app');
+  const [hasBackend, setHasBackend] = useGlobal<boolean>(NEW_PROJ_HAS_BACKEND, false);
+  const [hasAuth, setHasAuth] = useGlobal<boolean>(NEW_PROJ_HAS_AUTH, false);
+
+  return (
+    <div className="h-full w-full overflow-y-auto">
+      <div className="flex h-full flex-col gap-4 p-4">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs font-medium text-duck-dark/50 flex items-center gap-1.5">
+            <Type className="h-3 w-3" />
+            Name
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={(ev) => setName(ev.target.value)}
+            placeholder="My Project"
+            autoFocus
+            className="rounded-lg border border-duck-dark/20 bg-background px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500/50"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs font-medium text-duck-dark/50 flex items-center gap-1.5">
+            <FileText className="h-3 w-3" />
+            Description
+          </label>
+          <textarea
+            value={description}
+            onChange={(ev) => setDescription(ev.target.value)}
+            placeholder="What is this project for?"
+            rows={3}
+            className="resize-none rounded-lg border border-duck-dark/20 bg-background px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500/50"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs font-medium text-duck-dark/50">Project Type</label>
+          <div className="flex gap-2">
+            {PROJECT_TYPE_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => setProjectType(opt.value)}
+                className={`flex-1 py-1.5 px-2 rounded-lg text-xs font-medium border transition-colors cursor-pointer ${
+                  projectType === opt.value
+                    ? 'bg-emerald-500/15 border-emerald-500/40 text-emerald-400'
+                    : 'border-duck-dark/20 text-duck-dark/50 hover:border-duck-dark/30'
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        {projectType === 'app' && (
+          <div className="flex flex-col gap-2">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={hasBackend}
+                onChange={(ev) => setHasBackend(ev.target.checked)}
+                className="accent-emerald-500"
+              />
+              <span className="text-xs text-duck-dark/60">Has Backend</span>
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={hasAuth}
+                onChange={(ev) => setHasAuth(ev.target.checked)}
+                className="accent-emerald-500"
+              />
+              <span className="text-xs text-duck-dark/60">Has Auth</span>
+            </label>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// --- Panel: Create ---
+
+const CreatePanel = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const client = useClient();
+  const [name, setName] = useGlobal<string>(NEW_PROJ_NAME, '');
+  const { value: projects } = useWorkspacesState<ProjectDefinition[]>('projects', []);
+
+  const [description, setDescription] = useGlobal<string>(NEW_PROJ_DESC, '');
+  const [templateIdx, setTemplateIdx] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
+  const [previewLayout] = useGlobal<LayoutNode>(NEW_PROJ_PREVIEW_LAYOUT, createDefaultLayout());
+  const [projectType] = useGlobal<ProjectType>(NEW_PROJ_TYPE, 'app');
+  const [hasBackend] = useGlobal<boolean>(NEW_PROJ_HAS_BACKEND, false);
+  const [hasAuth] = useGlobal<boolean>(NEW_PROJ_HAS_AUTH, false);
+  const [editingId, setEditingId] = useGlobal<string | null>(EDITING_PROJECT, null);
+  const [, setCreating] = useGlobal<boolean>(CREATING_PROJECT, false);
+  const [, setSelected] = useGlobal<string | null>(SELECTED_PROJECT, null);
+
+  const isEditing = !!editingId;
+  const slug = isEditing ? editingId : slugify(name.trim()) || generateSlug();
+
+  const handleSubmit = () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const desc = description.trim();
+
+    const meta = {
+      name: trimmed,
+      description: desc || undefined,
+      projectType,
+      hasBackend: projectType === 'app' ? hasBackend : undefined,
+      hasAuth: projectType === 'app' ? hasAuth : undefined,
+      templateIdx,
+    };
+
+    if (isEditing) {
+      client
+        .patch('/workspaces', { [`proj-meta-${editingId}`]: meta, [`proj-layout-${editingId}`]: previewLayout })
+        .then((res) => queryClient.setQueryData(['WORKSPACES_STATE'], res))
+        .catch(() => {});
+
+      setEditingId(null);
+      setSelected(editingId);
+    } else {
+      const existingIds = new Set(projects.map((p) => p.id));
+      let id = slugify(trimmed) || generateSlug();
+      while (existingIds.has(id)) id = `${id}-${generateSlug(1)}`;
+
+      setName('');
+      setDescription('');
+      setTemplateIdx(0);
+
+      client
+        .patch('/workspaces', { [`proj-meta-${id}`]: meta, [`proj-layout-${id}`]: previewLayout })
+        .then((res) => {
+          queryClient.setQueryData(['WORKSPACES_STATE'], res);
+          navigate(`/projects/${id}`);
+        })
+        .catch(() => {});
+    }
+  };
+
+  return (
+    <div className="h-full w-full">
+      <div className="flex h-full flex-col items-center justify-center gap-4 p-4">
+        <Rocket className="h-8 w-8 text-emerald-500/40" />
+        <div className="text-center">
+          <p className="text-sm font-medium text-duck-dark/70">{name.trim() || 'Untitled'}</p>
+          <p className="text-xs font-mono text-duck-dark/40 mt-1">~/Projects/{slug}</p>
+        </div>
+        <Button
+          onClick={handleSubmit}
+          disabled={!name.trim()}
+          className="bg-emerald-500 hover:bg-emerald-500/90 cursor-pointer disabled:opacity-40"
+        >
+          <Plus className="h-4 w-4 mr-1" />
+          {isEditing ? 'Update Project' : 'Create Project'}
+        </Button>
+        {isEditing && (
+          <Button
+            onClick={() => navigate(`/projects/${editingId}`)}
+            variant="outline"
+            className="cursor-pointer"
+          >
+            <ArrowRight className="h-4 w-4 mr-1" />
+            Open Project
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// --- Panel: Live Template Preview (full interactive sub-workspace) ---
+
+const PREVIEW_LAYOUT_KEY = ['USE_GLOBAL', NEW_PROJ_PREVIEW_LAYOUT];
+
+const TemplatePreviewInner = ({ templateIdx }: { templateIdx: number }) => {
+  const queryClient = useQueryClient();
+  const [layout, setLocalLayout] = useState<LayoutNode>(() => {
+    const initial = templates[templateIdx]!.layout();
+    queryClient.setQueryData(PREVIEW_LAYOUT_KEY, initial);
+    return initial;
+  });
+
+  const handleLayoutChange = (next: LayoutNode) => {
+    setLocalLayout(next);
+    queryClient.setQueryData(PREVIEW_LAYOUT_KEY, next);
+  };
+
+  return <WorkspaceLayout layout={layout} onLayoutChange={handleLayoutChange} />;
+};
+
+const TemplatePreviewPanel = () => {
+  const [selectedIdx] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
+  return <TemplatePreviewInner key={selectedIdx} templateIdx={selectedIdx} />;
+};
+
+// --- New Project Layout ---
+
+const newProjLayout: LayoutNode = {
+  type: 'group',
+  id: 'new-proj-root',
+  direction: 'vertical',
+  children: [
+    {
+      node: {
+        type: 'group',
+        id: 'new-proj-top',
+        direction: 'horizontal',
+        children: [
+          { node: { type: 'panel', id: 'new-proj-details', appType: 'new-proj-details' }, size: 30 },
+          { node: { type: 'panel', id: 'new-proj-template', appType: 'new-proj-template' }, size: 70 },
+        ],
+      },
+      size: 50,
+    },
+    {
+      node: {
+        type: 'group',
+        id: 'new-proj-bottom',
+        direction: 'horizontal',
+        children: [
+          { node: { type: 'panel', id: 'new-proj-placeholder', appType: 'new-proj-placeholder' }, size: 70 },
+          { node: { type: 'panel', id: 'new-proj-create', appType: 'new-proj-create' }, size: 30 },
+        ],
+      },
+      size: 50,
+    },
+  ],
+};
+
+const NewProjectForm = () => {
+  const { registry } = useAppRegistry();
+  const newProjRegistry = {
+    ...registry,
+    'new-proj-details': { name: 'Details', icon: Type, component: DetailsPanel },
+    'new-proj-placeholder': { name: 'Preview', icon: Layout, component: TemplatePreviewPanel },
+    'new-proj-template': { name: 'Template', icon: Layout, component: TemplatePanel },
+    'new-proj-create': { name: 'Create', icon: Rocket, component: CreatePanel },
+  };
+
+  return <WorkspaceLayout layout={newProjLayout} onLayoutChange={() => {}} registry={newProjRegistry} />;
+};
+
+const ProjectPreviewEmpty = () => {
+  const [creating, setCreating] = useGlobal<boolean>(CREATING_PROJECT, false);
+  const [editingId] = useGlobal<string | null>(EDITING_PROJECT, null);
+  const [, setName] = useGlobal<string>(NEW_PROJ_NAME, '');
+  const [, setDescription] = useGlobal<string>(NEW_PROJ_DESC, '');
+  const [, setTemplateIdx] = useGlobal<number>(NEW_PROJ_TEMPLATE, 0);
+  const [, setProjectType] = useGlobal<ProjectType>(NEW_PROJ_TYPE, 'app');
+  const [, setHasBackend] = useGlobal<boolean>(NEW_PROJ_HAS_BACKEND, false);
+  const [, setHasAuth] = useGlobal<boolean>(NEW_PROJ_HAS_AUTH, false);
+
+  if (creating || editingId) return <NewProjectForm />;
+
+  const handleCreate = () => {
+    setName(generateSlug());
+    setDescription('');
+    setTemplateIdx(0);
+    setProjectType('app');
+    setHasBackend(false);
+    setHasAuth(false);
+    setCreating(true);
+  };
+
+  return (
+    <div className="h-full w-full">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-4">
+        <FolderKanban className="h-10 w-10 text-white/80" />
+        <p className="text-sm text-white/80">Select a project or create a new one</p>
+        <Button onClick={handleCreate} className="bg-emerald-500 hover:bg-emerald-500/90 cursor-pointer">
+          <Plus className="h-4 w-4 mr-1" />
+          New Project
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const ProjectPreviewInner = ({ project }: { project: ProjectDefinition }) => {
+  const ws = useWorkspacesState<LayoutNode>(`proj-layout-${project.id}`, createDefaultLayout());
+  return <WorkspaceView workspace={ws} cwd={project.cwd} />;
+};
+
+export const ProjectPreview = () => {
+  const [selectedId] = useGlobal<string | null>(SELECTED_PROJECT, null);
+  const { value: projects } = useWorkspacesState<ProjectDefinition[]>('projects', []);
+  const project = selectedId ? projects.find((p) => p.id === selectedId) : null;
+
+  if (!project) return <ProjectPreviewEmpty />;
+
+  return (
+    <div className="relative h-full w-full">
+      <ProjectPreviewInner key={project.id} project={project} />
+      <Link
+        to={`/projects/${project.id}`}
+        className="absolute inset-0 z-10 flex items-center justify-center bg-transparent hover:bg-duck-dark/10 transition-colors group"
+      >
+        <ArrowRight className="h-16 w-16 text-emerald-500/0 group-hover:text-emerald-500/60 transition-colors" />
+      </Link>
+    </div>
+  );
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Projects/constants.ts b/src/workspaces/officerdev/src/apps/Projects/constants.ts
similarity index 100%
rename from src/apps/officer-web/Screens/Dashboard/Projects/constants.ts
rename to src/workspaces/officerdev/src/apps/Projects/constants.ts
diff --git a/src/workspaces/officerdev/src/apps/Projects/index.ts b/src/workspaces/officerdev/src/apps/Projects/index.ts
new file mode 100644
index 00000000..5ecf7a87
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Projects/index.ts
@@ -0,0 +1,36 @@
+import type { AppRegistryMeta } from '../../AppRegistry';
+import { FolderKanban } from 'lucide-react';
+import { ProjectListApp } from './ProjectListApp';
+import { ProjectPreview } from './ProjectPreview';
+
+export { ProjectListApp };
+export { ProjectPreview };
+export {
+  SELECTED_PROJECT,
+  CREATING_PROJECT,
+  EDITING_PROJECT,
+  NEW_PROJ_NAME,
+  NEW_PROJ_DESC,
+  NEW_PROJ_TEMPLATE,
+  NEW_PROJ_TYPE,
+  NEW_PROJ_HAS_BACKEND,
+  NEW_PROJ_HAS_AUTH,
+  NEW_PROJ_PREVIEW_LAYOUT,
+} from './constants';
+
+export const appRegistryMetas: AppRegistryMeta[] = [
+  {
+    key: 'project-list',
+    name: 'Projects',
+    icon: FolderKanban,
+    component: ProjectListApp,
+    availableOnPanel: false,
+  },
+  {
+    key: 'project-preview',
+    name: 'Project Preview',
+    icon: FolderKanban,
+    component: ProjectPreview,
+    availableOnPanel: false,
+  },
+];
diff --git a/src/workspaces/officerdev/src/apps/Terminal/CommandTerminalWrapper.tsx b/src/workspaces/officerdev/src/apps/Terminal/CommandTerminalWrapper.tsx
index 465b269b..b931a3bb 100644
--- a/src/workspaces/officerdev/src/apps/Terminal/CommandTerminalWrapper.tsx
+++ b/src/workspaces/officerdev/src/apps/Terminal/CommandTerminalWrapper.tsx
@@ -37,7 +37,8 @@ export const CommandTerminalWrapper = ({ panelId, command, statePrefix }: Comman
 
   if (!sessionId) return null;
 
-  const fullCommand = cwd && cwd !== '~' ? `cd ${cwd} && ${command}` : command;
+  const cwdPath = cwd && cwd !== '~' ? `~/${cwd.replace(/^\//, '')}` : null;
+  const fullCommand = cwdPath ? `cd ${cwdPath} && ${command}` : command;
 
   return <TerminalView className="h-full w-full p-2" sessionId={sessionId} cwd={cwd} initialInput={fullCommand} />;
 };
diff --git a/src/workspaces/officerdev/src/apps/Terminal/Headers.tsx b/src/workspaces/officerdev/src/apps/Terminal/Headers.tsx
index 765f97f1..03f7d39d 100644
--- a/src/workspaces/officerdev/src/apps/Terminal/Headers.tsx
+++ b/src/workspaces/officerdev/src/apps/Terminal/Headers.tsx
@@ -8,13 +8,14 @@ export const TerminalHeader = ({ panelId }: { panelId: string }) => {
   const { user } = useAuth();
   const { mode, toggle } = useTerminalMode(panelId);
   const isHost = mode === 'host';
-  const Icon = isHost ? Monitor : TerminalSquare;
+  const scoped = cwd !== '~';
+  const Icon = isHost && !scoped ? Monitor : TerminalSquare;
 
   return (
     <>
       <Icon className="h-3.5 w-3.5 shrink-0" />
       <span className="text-xs font-medium shrink-0">Terminal</span>
-      {user?.role === 'Super Admin' && (
+      {user?.role === 'Super Admin' && !scoped && (
         <button
           type="button"
           onClick={toggle}
diff --git a/src/workspaces/officerdev/src/apps/Terminal/TerminalWrapper.tsx b/src/workspaces/officerdev/src/apps/Terminal/TerminalWrapper.tsx
index 2f357050..21a9746f 100644
--- a/src/workspaces/officerdev/src/apps/Terminal/TerminalWrapper.tsx
+++ b/src/workspaces/officerdev/src/apps/Terminal/TerminalWrapper.tsx
@@ -9,7 +9,8 @@ const EMPTY_TERMINALS: Record<string, string> = {};
 export const TerminalWrapper = ({ panelId }: { panelId: string }) => {
   const { workspaceId, cwd } = useWorkspace();
   const { mode } = useTerminalMode(panelId);
-  const sandboxed = mode === 'sandboxed';
+  const scoped = cwd !== '~';
+  const sandboxed = scoped || mode === 'sandboxed';
   const stateKey = workspaceId ? `ws-terminals-${mode}-${workspaceId}` : `ws-terminals-${mode}-default`;
   const { value: terminals, setValue: setTerminals } = useWorkspacesState<Record<string, string>>(stateKey, EMPTY_TERMINALS);
   const setTerminalsRef = useRef(setTerminals);
diff --git a/src/workspaces/officerdev/src/index.ts b/src/workspaces/officerdev/src/index.ts
index 9684a77e..88df2b22 100644
--- a/src/workspaces/officerdev/src/index.ts
+++ b/src/workspaces/officerdev/src/index.ts
@@ -5,7 +5,8 @@ export * from './AppRegistry';
 export { MessageList, MessageBubble, StreamingBubble, ToolActivity, QuestionActivity, ModelSelector, InputArea, ChatLauncher, AttachmentList, AttachButton, WebpageDialog, EmbeddableChat, usePiChat, ChatList, useSlashCommands, useChatSessions, useChatSession, useAttachments, useAudioRecording } from './apps/Chat';
 export type { UseEmbeddableChatType, UsePiChatType, UseChatSessionsType, UseChatSessionType, UseAttachmentsType, UseAudioRecordingType } from './apps/Chat';
 export * from './apps/Chat/types';
-export { SessionBar } from './apps/ChatHistory';
+export { SessionBar, SessionList, ChatDetailPanel } from './apps/ChatHistory';
+export type { SelectedSession } from './apps/ChatHistory';
 export { CodeEditorView } from './apps/CodeEditor';
 export { useFilesAPI, useTasks, useRecentFiles, usePinnedFiles, FileBrowserApp, FileBrowserPanelWrapper, FileBrowserWidget, TaskRunnerModal } from './apps/FileBrowser';
 export type { DirEntry, TaskSummary } from './apps/FileBrowser';
@@ -14,3 +15,4 @@ export type { FileType } from './apps/FileViewer';
 export { TerminalView } from './apps/Terminal';
 export type { TerminalViewProps } from './apps/Terminal';
 export { WorkspaceListApp, WorkspacePreview, SELECTED_WORKSPACE_KEY, CREATING_WORKSPACE_KEY, EDITING_WORKSPACE_KEY, NEW_WS_NAME_KEY, NEW_WS_DESC_KEY, NEW_WS_TEMPLATE_KEY } from './apps/Workspaces';
+export { ProjectListApp, ProjectPreview, SELECTED_PROJECT, CREATING_PROJECT, EDITING_PROJECT, NEW_PROJ_NAME, NEW_PROJ_DESC, NEW_PROJ_TEMPLATE, NEW_PROJ_TYPE, NEW_PROJ_HAS_BACKEND, NEW_PROJ_HAS_AUTH, NEW_PROJ_PREVIEW_LAYOUT } from './apps/Projects';
diff --git a/src/workspaces/state/src/index.ts b/src/workspaces/state/src/index.ts
index ef2eace7..ab09f451 100644
--- a/src/workspaces/state/src/index.ts
+++ b/src/workspaces/state/src/index.ts
@@ -2,7 +2,6 @@ export { useSettings, DEFAULT_SETTINGS } from './useSettings';
 export type { UseSettingsType, UserSettings, UserState } from './useSettings';
 export { useUserState } from './useUserState';
 export { useWorkspacesState } from './useWorkspacesState';
-export { useProjectsState } from './useProjectsState';
 export { usePiModels, useVisiblePiModels, modelKey } from './useModels';
 export type { ModelOption } from './useModels';
 export { useRecentModels } from './useRecentModels';
diff --git a/src/workspaces/state/src/useProjectsState.ts b/src/workspaces/state/src/useProjectsState.ts
deleted file mode 100644
index 201cb0fc..00000000
--- a/src/workspaces/state/src/useProjectsState.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useClient } from 'hooks/useClient';
-import { useAuth } from 'hooks/useAuth';
-import type { UserState } from './useSettings';
-
-const QUERY_KEY = ['PROJECTS_STATE'];
-
-export function useProjectsState<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void, boolean] {
-  const client = useClient();
-  const { isAuthenticated } = useAuth();
-  const queryClient = useQueryClient();
-  const clientRef = useRef(client);
-  clientRef.current = client;
-
-  const { data: state = {}, isSuccess } = useQuery<UserState>({
-    queryKey: QUERY_KEY,
-    enabled: isAuthenticated,
-    queryFn: () => client.get<UserState>('/user/projects-state'),
-    staleTime: Infinity,
-  });
-
-  const value = key in state ? (state[key] as T) : defaultValue;
-
-  const setValue = useCallback(
-    (update: T | ((prev: T) => T)) => {
-      const currentState = queryClient.getQueryData<UserState>(QUERY_KEY) ?? {};
-      const currentValue = key in currentState ? (currentState[key] as T) : defaultValue;
-      const newValue = typeof update === 'function' ? (update as (prev: T) => T)(currentValue) : update;
-
-      queryClient.setQueryData(QUERY_KEY, { ...currentState, [key]: newValue });
-
-      clientRef.current
-        .patch<UserState>('/user/projects-state', { [key]: newValue })
-        .then((serverState) => {
-          if (serverState) queryClient.setQueryData(QUERY_KEY, serverState);
-        })
-        .catch(() => {});
-    },
-    [key, defaultValue, queryClient],
-  );
-
-  return [value, setValue, isSuccess];
-}