officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove projects and apps end to end

Browse Source 
deletes the last of the projects/apps cluster: the published-app store
(/api/apps + /api/app-serve), the project dev-server and its websocket
proxy (/api/dev-server + /api/dev-server-proxy), the shared html-rewrite
they were the only consumers of, and their frontend — the Preview panel,
the UserApp panel/header, useUserApps and the /settings/apps screen.

also drops getUserProjectsDir and getUserAppsDir, the ProjectType and
ProjectDefinition types, and the 'dev-server' websocket provider from
server.tsx. nothing on disk is touched.

1440 deletions, 31 insertions. tsgo clean.
This commit is contained in:
pastilhas
2026-07-31 07:39:29 +00:00
parent 13b7f56b0f
commit 188b45c113
28 changed files with 31 additions and 1440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
+1 -28
View File
@@ -1,4 +1,3 @@
import { useEffect, useRef } from 'react';
import { appRegistryMetas as fileBrowserMetas } from '../apps/FileBrowser';
import { appRegistryMetas as terminalMetas } from '../apps/Terminal';
import { appRegistryMetas as codeEditorMetas } from '../apps/CodeEditor';
@@ -6,7 +5,6 @@ import { appRegistryMetas as chatMetas } from '../apps/Chat';
import { appRegistryMetas as fileViewerMetas } from '../apps/FileViewer';
import { appRegistryMetas as dashboardMetas } from '../apps/Dashboards';
import { appRegistryMetas as chatHistoryMetas } from '../apps/ChatHistory';
import { appRegistryMetas as previewMetas } from '../apps/Preview';
import { appRegistryMetas as widgetMetas } from '../apps/Widgets';
import { appRegistryMetas as desktopMetas } from '../apps/Desktop';
import { appRegistryMetas as musicMetas } from '../apps/Music';
@@ -17,10 +15,6 @@ import { appRegistryMetas as invoicesMetas } from '../apps/Invoices';
import { appRegistryMetas as walletMetas } from '../apps/Wallet';
import { appRegistryMetas as monitorMetas } from '../apps/SystemMonitor';
import { useAppRegistry } from './useAppRegistry';
import { useUserApps } from 'state/useUserApps';
import { createUserAppPanel } from '../apps/UserApp/UserAppPanel';
import { createUserAppHeader } from '../apps/UserApp/UserAppHeader';
import { resolveIcon } from '../utils/resolve-icon';
const apps = [
...fileBrowserMetas,
@@ -30,7 +24,6 @@ const apps = [
...fileViewerMetas,
...dashboardMetas,
...chatHistoryMetas,
...previewMetas,
...widgetMetas,
...desktopMetas,
...musicMetas,
@@ -43,26 +36,6 @@ const apps = [
];
export const AppRegistry = () => {
const { registerApp } = useAppRegistry(apps);
const { apps: userApps, email } = useUserApps();
const registeredRef = useRef(new Set<string>());
useEffect(() => {
if (!email || userApps.length === 0) return;
for (const app of userApps) {
const key = `${email}/${app.slug}`;
if (registeredRef.current.has(key)) continue;
registeredRef.current.add(key);
registerApp(key, {
name: app.name,
icon: resolveIcon(app.icon),
component: createUserAppPanel(app.slug),
header: createUserAppHeader(app.name, resolveIcon(app.icon)),
});
}
}, [userApps, email, registerApp]);
useAppRegistry(apps);
return null;
};
src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx
-69
View File
@@ -1,69 +0,0 @@
import { Loader2, FolderKanban } from 'lucide-react';
import { usePreview } from './PreviewContext';
export const PreviewApp = () => {
const { slug, cwdSlug, url, loading, error, iframeKey, projects, startServer, setSelectedSlug, clearError } =
usePreview();
if (!slug) {
if (projects.length === 0) {
return (
<div className="flex h-full w-full items-center justify-center text-duck-dark/30 text-sm">
No projects found
</div>
);
}
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-3">
<FolderKanban className="h-6 w-6 text-duck-dark/30" />
<span className="text-sm text-duck-dark/40">Select a project to preview</span>
<div className="flex flex-col gap-1 w-48">
{projects.map((p) => (
<button
key={p.id}
onClick={() => setSelectedSlug(p.id)}
className="rounded px-3 py-1.5 text-xs text-left hover:bg-duck-dark/10 transition-colors cursor-pointer"
>
{p.name}
</button>
))}
</div>
</div>
);
}
if (loading) {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-2 text-duck-dark/50 text-sm">
<Loader2 className="h-5 w-5 animate-spin" />
<span>Starting dev server...</span>
</div>
);
}
if (error) {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-2 text-sm">
<span className="text-red-500 px-4 text-center">{error}</span>
<div className="flex gap-2">
<button
onClick={() => startServer(slug)}
className="rounded px-3 py-1 text-xs bg-duck-dark/10 hover:bg-duck-dark/20 cursor-pointer"
>
Retry
</button>
{!cwdSlug && (
<button onClick={clearError} className="rounded px-3 py-1 text-xs bg-duck-dark/10 hover:bg-duck-dark/20 cursor-pointer">
Back
</button>
)}
</div>
</div>
);
}
if (!url) return null;
return <iframe key={iframeKey} src={url} className="h-full w-full border-none" title="Preview" />;
};
src/workspaces/officerdev/src/apps/Preview/PreviewContext.tsx
-28
View File
@@ -1,28 +0,0 @@
import { createContext, useContext } from 'react';
import type { ProjectDefinition } from '../../components/Workspace';
export type PreviewContextValue = {
slug: string | null;
cwdSlug: string | null;
url: string | null;
port: number | null;
loading: boolean;
error: string | null;
stopped: boolean;
iframeKey: number;
projects: ProjectDefinition[];
startServer: (slug: string) => void;
stopServer: () => void;
restartServer: () => void;
refresh: () => void;
setSelectedSlug: (slug: string | null) => void;
clearError: () => void;
};
export const PreviewContext = createContext<PreviewContextValue | null>(null);
export const usePreview = () => {
const ctx = useContext(PreviewContext);
if (!ctx) throw new Error('usePreview must be used within PreviewProvider');
return ctx;
};
src/workspaces/officerdev/src/apps/Preview/PreviewHeader.tsx
-45
View File
@@ -1,45 +0,0 @@
import { Globe, RefreshCw, Square, Play } from 'lucide-react';
import { usePreview } from './PreviewContext';
export const PreviewHeader = () => {
const { slug, url, port, stopped, stopServer, restartServer } = usePreview();
return (
<>
<Globe className="h-3.5 w-3.5 text-duck-teal shrink-0" />
<span className="text-xs font-medium shrink-0">Preview</span>
{url && (
<>
<button
type="button"
onClick={restartServer}
className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
title="Refresh"
>
<RefreshCw className="h-3 w-3" />
</button>
<span className="text-[10px] font-mono truncate opacity-60">{slug}</span>
{port && <span className="text-[10px] font-mono opacity-40 shrink-0">:{port}</span>}
<button
type="button"
onClick={stopServer}
className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
title="Stop server"
>
<Square className="h-3 w-3" />
</button>
</>
)}
{!url && stopped && slug && (
<button
type="button"
onClick={restartServer}
className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
title="Start server"
>
<Play className="h-3 w-3" />
</button>
)}
</>
);
};
src/workspaces/officerdev/src/apps/Preview/PreviewProvider.tsx
-164
View File
@@ -1,164 +0,0 @@
import { useState, useEffect, useCallback } from 'react';
import type { ReactNode } from 'react';
import { useClient } from 'hooks/useClient';
import { useAuth } from 'hooks/useAuth';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { useWorkspace } from '../../components/Workspace';
import type { ProjectDefinition } from '../../components/Workspace';
import { useDashboardState } from 'state/useDashboardState';
import { PreviewContext } from './PreviewContext';
type DevServerResponse = { url: string; port: number };
type DevServerStatus = { running: boolean; url?: string; port?: number };
type PreviewProviderProps = { panelId: string; children: ReactNode };
export const PreviewProvider = ({ panelId, children }: PreviewProviderProps) => {
const { cwd } = useWorkspace();
const client = useClient();
const { user } = useAuth();
const { value: projects } = useDashboardState<ProjectDefinition[]>('projects', []);
const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
const [url, setUrl] = useState<string | null>(null);
const [port, setPort] = useState<number | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [iframeKey, setIframeKey] = useState(0);
const [stopped, setStopped] = useState(false);
const cwdSlug = extractSlug(cwd);
const slug = cwdSlug ?? selectedSlug;
const startServer = useCallback(
async (targetSlug: string) => {
setLoading(true);
setError(null);
setStopped(false);
try {
const res = await client.post<DevServerResponse>('/dev-server/start', { slug: targetSlug });
const token = client.token;
setUrl(token ? `${res.url}?token=${encodeURIComponent(token)}` : res.url);
setPort(res.port);
} catch (err: unknown) {
const msg =
err && typeof err === 'object' && 'message' in err ? String(err.message) : 'Failed to start dev server';
setError(msg);
} finally {
setLoading(false);
}
},
[client],
);
const stopServer = useCallback(async () => {
if (!slug) return;
try {
await client.post('/dev-server/stop', { slug });
} catch {
// ignore
}
setUrl(null);
setPort(null);
setStopped(true);
}, [slug, client]);
const restartServer = useCallback(async () => {
if (!slug) return;
try {
await client.post('/dev-server/stop', { slug });
} catch {
// ignore — server may not be running
}
startServer(slug);
}, [slug, client, startServer]);
const refresh = useCallback(() => setIframeKey((k) => k + 1), []);
const clearError = useCallback(() => {
setError(null);
setSelectedSlug(null);
}, []);
useEffect(() => {
if (!slug) return;
setUrl(null);
setPort(null);
setError(null);
let cancelled = false;
const check = async () => {
try {
const status = await client.get<DevServerStatus>(`/dev-server/status?slug=${encodeURIComponent(slug)}`);
if (cancelled) return;
if (status.running && status.url) {
const token = client.token;
setUrl(token ? `${status.url}?token=${encodeURIComponent(token)}` : status.url);
setPort(status.port ?? null);
} else {
startServer(slug);
}
} catch {
if (!cancelled) startServer(slug);
}
};
check();
return () => {
cancelled = true;
};
}, [slug]);
// Poll status while a server is supposedly running — auto-restart if it died (e.g. idle timeout)
useEffect(() => {
if (!slug || !url) return;
const interval = setInterval(async () => {
try {
const status = await client.get<DevServerStatus>(`/dev-server/status?slug=${encodeURIComponent(slug)}`);
if (!status.running) {
startServer(slug);
}
} catch {
// ignore transient failures
}
}, 30_000);
return () => clearInterval(interval);
}, [slug, url]);
// Listen for preview:refresh signal from chat panel (triggers after tool-call turns)
const [refreshSignal] = usePanelChannel<number>('preview:refresh', 0);
useEffect(() => {
if (refreshSignal && slug && url) restartServer();
}, [refreshSignal]);
return (
<PreviewContext
value={{
slug,
cwdSlug,
url,
port,
loading,
error,
stopped,
iframeKey,
projects,
startServer,
stopServer,
restartServer,
refresh,
setSelectedSlug,
clearError,
}}
>
{children}
</PreviewContext>
);
};
const extractSlug = (cwd: string): string | null => {
if (!cwd || cwd === '~') return null;
const match = cwd.match(/^\/Projects\/(.+?)(?:\/|$)/);
return match?.[1] ?? null;
};
src/workspaces/officerdev/src/apps/Preview/index.ts
-16
View File
@@ -1,16 +0,0 @@
import type { AppRegistryMeta } from '../../AppRegistry';
import { Globe } from 'lucide-react';
import { PreviewApp } from './PreviewApp';
import { PreviewHeader } from './PreviewHeader';
import { PreviewProvider } from './PreviewProvider';
export const appRegistryMetas: AppRegistryMeta[] = [
{
key: 'officerdev/preview',
name: 'Preview',
icon: Globe,
component: PreviewApp,
header: PreviewHeader,
provider: PreviewProvider,
},
];
src/workspaces/officerdev/src/apps/UserApp/UserAppHeader.tsx
-31
View File
@@ -1,31 +0,0 @@
import type { ComponentType } from 'react';
import type { LucideIcon } from 'lucide-react';
import { RefreshCw } from 'lucide-react';
import { useGlobal } from 'hooks/useGlobal';
type UserAppHeaderProps = { panelId: string };
export const createUserAppHeader = (name: string, Icon: LucideIcon): ComponentType<UserAppHeaderProps> => {
const UserAppHeader = ({ panelId }: UserAppHeaderProps) => {
const iframeRefreshKey = `USER_APP_REFRESH_${panelId}`;
const [, setRefresh] = useGlobal<number>(iframeRefreshKey, 0);
return (
<>
<Icon className="h-3.5 w-3.5 text-duck-teal shrink-0" />
<span className="text-xs font-medium shrink-0">{name}</span>
<button
type="button"
onClick={() => setRefresh((k) => k + 1)}
className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
title="Refresh"
>
<RefreshCw className="h-3 w-3" />
</button>
</>
);
};
UserAppHeader.displayName = `UserAppHeader(${name})`;
return UserAppHeader;
};
src/workspaces/officerdev/src/apps/UserApp/UserAppPanel.tsx
-41
View File
@@ -1,41 +0,0 @@
import type { ComponentType } from 'react';
import { useState, useCallback } from 'react';
import { Loader2 } from 'lucide-react';
import { useClient } from 'hooks/useClient';
type UserAppPanelProps = { panelId: string };
export const createUserAppPanel = (slug: string): ComponentType<UserAppPanelProps> => {
const UserAppPanel = ({ panelId }: UserAppPanelProps) => {
const client = useClient();
const [iframeKey, setIframeKey] = useState(0);
const [loading, setLoading] = useState(true);
const token = client.token;
const src = token
? `/api/app-serve/${slug}/?token=${encodeURIComponent(token)}`
: `/api/app-serve/${slug}/`;
const handleLoad = useCallback(() => setLoading(false), []);
return (
<div className="relative h-full w-full">
{loading && (
<div className="absolute inset-0 flex items-center justify-center text-duck-dark/50">
<Loader2 className="h-5 w-5 animate-spin" />
</div>
)}
<iframe
key={iframeKey}
src={src}
className="h-full w-full border-none"
title={slug}
onLoad={handleLoad}
/>
</div>
);
};
UserAppPanel.displayName = `UserAppPanel(${slug})`;
return UserAppPanel;
};
src/workspaces/officerdev/src/apps/UserApp/index.ts
-2
View File
@@ -1,2 +0,0 @@
export { createUserAppPanel } from './UserAppPanel';
export { createUserAppHeader } from './UserAppHeader';
src/workspaces/officerdev/src/components/Workspace/index.ts
+25 -2
View File
@@ -1,6 +1,29 @@
export type { LayoutNode, LayoutGroup, LayoutPanel, DashboardDefinition, DashboardState, ProjectType, ProjectDefinition, AppRegistryMap, AppRegistryEntry, PanelComponents, PanelComponentEntry, EphemeralPanels, HomeRoot } from './types';
export type {
LayoutNode,
LayoutGroup,
LayoutPanel,
DashboardDefinition,
DashboardState,
AppRegistryMap,
AppRegistryEntry,
PanelComponents,
PanelComponentEntry,
EphemeralPanels,
HomeRoot,
} from './types';
export type { DropPosition } from './layout-utils';
export { createDefaultLayout, splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, pruneEmptyPanels, countPanels, hasAnyApp } from './layout-utils';
export {
createDefaultLayout,
splitPanel,
removePanel,
setApp,
updateSizes,
swapPanels,
movePanel,
pruneEmptyPanels,
countPanels,
hasAnyApp,
} from './layout-utils';
export type { DefaultFileSort } from './WorkspaceContext';
export { WorkspaceProvider, useWorkspace } from './WorkspaceContext';
export { WorkspaceView } from './WorkspaceView';
src/workspaces/officerdev/src/components/Workspace/types.ts
-14
View File
@@ -35,20 +35,6 @@ export type DashboardState = {
isLoaded: boolean;
};
export type ProjectType = 'landing-page' | 'website' | 'app';
export type ProjectDefinition = {
id: string;
name: string;
cwd: string;
description?: string;
projectType: ProjectType;
hasBackend?: boolean;
hasAuth?: boolean;
gitRepo?: string;
templateIdx?: number;
};
export type AppRegistryEntry = {
name: string;
icon: LucideIcon;
src/workspaces/officerdev/src/index.ts
-3
View File
@@ -86,7 +86,6 @@ export {
NEW_DASH_DESC_KEY,
NEW_DASH_TEMPLATE_KEY,
} from './apps/Dashboards';
export { createUserAppPanel, createUserAppHeader } from './apps/UserApp';
export { resolveIcon, availableIconNames } from './utils/resolve-icon';
// Workspace
@@ -109,8 +108,6 @@ export type {
LayoutPanel,
DashboardDefinition,
DashboardState,
ProjectType,
ProjectDefinition,
AppRegistryMap,
AppRegistryEntry,
PanelComponents,
src/workspaces/state/src/index.ts
-2
View File
@@ -11,7 +11,5 @@ export { useRecentModels } from './useRecentModels';
export { usePlans } from './usePlans';
export { useLandingPage } from './useLandingPage';
export { useServerSettings } from './useServerSettings';
export { useUserApps } from './useUserApps';
export type { AppManifest } from './useUserApps';
export { useServerEnvironment } from './useServerEnvironment';
export type { ServerEnvironment } from './useServerEnvironment';
src/workspaces/state/src/useUserApps.ts
-34
View File
@@ -1,34 +0,0 @@
import { useAuth } from 'hooks/useAuth';
import { useClient } from 'hooks/useClient';
import { useQuery, useQueryClient } from '@tanstack/react-query';
export type AppManifest = {
slug: string;
name: string;
version: string;
icon: string;
description: string;
sourceProject: string;
commitHash: string;
publishedAt: string;
buildDir: string;
};
const QUERY_KEY = ['USER_APPS'] as const;
export function useUserApps() {
const client = useClient();
const queryClient = useQueryClient();
const { user, isAuthenticated } = useAuth();
const { data: apps = [], isLoading } = useQuery<AppManifest[]>({
queryKey: QUERY_KEY,
enabled: isAuthenticated,
queryFn: () => client.get<{ apps: AppManifest[] }>('/apps').then((r) => r.apps),
staleTime: 30_000,
});
const refetch = () => queryClient.invalidateQueries({ queryKey: QUERY_KEY });
return { apps, isLoading, refetch, email: user?.email ?? '' };
}