App Preview

src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx

@@ -6,9 +6,10 @@ 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 { appRegistryMetas as previewMetas } from '../apps/Preview';
 import { useAppRegistry } from './useAppRegistry';
 
-const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...workspaceMetas, ...projectMetas, ...chatHistoryMetas];
+const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...workspaceMetas, ...projectMetas, ...chatHistoryMetas, ...previewMetas];
 
 export const AppRegistry = () => {
   useAppRegistry(apps);

src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,27 @@
+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;
+  isSuperAdmin: boolean;
+  iframeKey: number;
+  projects: ProjectDefinition[];
+  startServer: (slug: string) => void;
+  stopServer: () => 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

@@ -0,0 +1,37 @@
+import { Globe, RefreshCw, Square } from 'lucide-react';
+import { usePreview } from './PreviewContext';
+
+export const PreviewHeader = () => {
+  const { slug, url, port, isSuperAdmin, refresh, stopServer } = 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={refresh}
+            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>
+          {isSuperAdmin && 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>
+        </>
+      )}
+    </>
+  );
+};

src/workspaces/officerdev/src/apps/Preview/PreviewProvider.tsx

@@ -0,0 +1,106 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import { useClient } from 'hooks/useClient';
+import { useAuth } from 'hooks/useAuth';
+import { useWorkspace } from '@/components/Workspace';
+import type { ProjectDefinition } from '@/components/Workspace';
+import { useWorkspacesState } from 'state/useWorkspacesState';
+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 = ({ children }: PreviewProviderProps) => {
+  const { cwd } = useWorkspace();
+  const client = useClient();
+  const { user } = useAuth();
+  const { value: projects } = useWorkspacesState<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 isSuperAdmin = user?.role === 'Super Admin';
+  const cwdSlug = extractSlug(cwd);
+  const slug = cwdSlug ?? selectedSlug;
+
+  const startServer = useCallback(async (targetSlug: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await client.post<DevServerResponse>('/dev-server/start', { slug: targetSlug });
+      setUrl(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);
+  }, [slug, client]);
+
+  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) {
+          setUrl(status.url);
+          setPort(status.port ?? null);
+        } else {
+          startServer(slug);
+        }
+      } catch {
+        if (!cancelled) startServer(slug);
+      }
+    };
+    check();
+
+    return () => { cancelled = true; };
+  }, [slug]);
+
+  return (
+    <PreviewContext
+      value={{
+        slug, cwdSlug, url, port, loading, error, isSuperAdmin, iframeKey, projects,
+        startServer, stopServer, 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

@@ -0,0 +1,16 @@
+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,
+  },
+];