noHeader in WorkspaceLayout

src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx

@@ -227,7 +227,7 @@ const tplRegistry = Object.fromEntries(
 );
 
 const TemplatePanel = () => (
-  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} />
+  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} noHeader />
 );
 
 // --- Panel: Details (Name + Description + Project Type + Backend/Auth toggles) ---
@@ -432,7 +432,7 @@ const TemplatePreviewInner = ({ templateIdx }: { templateIdx: number }) => {
     queryClient.setQueryData(PREVIEW_LAYOUT_KEY, next);
   };
 
-  return <WorkspaceLayout layout={layout} onLayoutChange={handleLayoutChange} />;
+  return <WorkspaceLayout layout={layout} onLayoutChange={handleLayoutChange} noHeader />;
 };
 
 const TemplatePreviewPanel = () => {
@@ -484,7 +484,7 @@ const NewProjectForm = () => {
     'new-proj-create': { name: 'Create', icon: Rocket, component: CreatePanel },
   };
 
-  return <WorkspaceLayout layout={newProjLayout} onLayoutChange={() => {}} registry={newProjRegistry} />;
+  return <WorkspaceLayout layout={newProjLayout} onLayoutChange={() => {}} registry={newProjRegistry} noHeader />;
 };
 
 const ProjectPreviewEmpty = () => {

src/workspaces/officerdev/src/apps/Workspaces/WorkspacePreview.tsx

@@ -225,7 +225,7 @@ const tplRegistry = Object.fromEntries(
 );
 
 const TemplatePanel = () => (
-  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} />
+  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} noHeader />
 );
 
 // --- Panel: Name ---
@@ -440,7 +440,7 @@ const NewWorkspaceForm = () => {
     'new-ws-create': { name: 'Create', icon: Rocket, component: CreatePanel },
   };
 
-  return <WorkspaceLayout layout={newWsLayout} onLayoutChange={() => {}} registry={newWsRegistry} />;
+  return <WorkspaceLayout layout={newWsLayout} onLayoutChange={() => {}} registry={newWsRegistry} noHeader />;
 };
 
 // --- Empty State ---

src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx

@@ -19,6 +19,7 @@ type PanelSlotProps = {
   registry: AppRegistry;
   components?: PanelComponents;
   interactive: boolean;
+  noHeader: boolean;
   isLastPanel: boolean;
   onSetApp: (panelId: string, appType: string | null) => void;
   onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
@@ -181,7 +182,7 @@ const TrafficLights = ({ panelId, isLastPanel, onRemove, onClearApp }: { panelId
 //   return <div className="absolute inset-0 z-20 rounded-lg bg-duck-dark/10 pointer-events-none" />;
 // };
 
-export const PanelSlot = ({ panel, registry, components, interactive, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
+export const PanelSlot = ({ panel, registry, components, interactive, noHeader, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
   const { maximizedPanelId, transitioningPanelId } = useWorkspace();
   const isMaximized = maximizedPanelId === panel.id;
 
@@ -287,12 +288,12 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
 
   const inner = ProviderComponent ? (
     <ProviderComponent panelId={panel.id}>
-      {headerBar}
+      {!noHeader && headerBar}
       {body}
     </ProviderComponent>
   ) : (
     <>
-      {headerBar}
+      {!noHeader && headerBar}
       {body}
     </>
   );
@@ -320,11 +321,15 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
     );
   }
 
+  const panelStyle = noHeader
+    ? { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(0, 0, 0, 0.25)', ...(transitioningPanelId === panel.id ? { viewTransitionName: `panel-${panel.id}` } : {}) }
+    : { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)', ...(transitioningPanelId === panel.id ? { viewTransitionName: `panel-${panel.id}` } : {}) };
+
   return (
     <div data-panel-id={panel.id} className="group/panel relative h-full w-full p-1">
       <div
         className="relative h-full w-full overflow-hidden rounded-lg border backdrop-blur-xl p-2 flex flex-col"
-        style={{ backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)', ...(transitioningPanelId === panel.id ? { viewTransitionName: `panel-${panel.id}` } : {}) } as React.CSSProperties}
+        style={panelStyle as React.CSSProperties}
       >
         {inner}
       </div>

src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx

@@ -12,11 +12,12 @@ type WorkspaceLayoutProps = {
   components?: PanelComponents;
   workspaceId?: string;
   cwd?: string;
+  noHeader?: boolean;
 };
 
 const noop = () => {};
 
-export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp, components, workspaceId, cwd }: WorkspaceLayoutProps) => {
+export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp, components, workspaceId, cwd, noHeader }: WorkspaceLayoutProps) => {
   const { registry: globalRegistry } = useAppRegistry();
   const registry = registryProp ?? globalRegistry;
 
@@ -33,6 +34,7 @@ export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp
         layout={layout}
         registry={registry}
         components={components}
+        noHeader={noHeader}
         onSetApp={noop}
         onSplit={noop}
         onRemove={noop}

src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx

@@ -9,6 +9,7 @@ type WorkspaceRendererProps = {
   registry: AppRegistry;
   components?: PanelComponents;
   interactive?: boolean;
+  noHeader?: boolean;
   onSetApp: (panelId: string, appType: string | null) => void;
   onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
   onRemove: (panelId: string) => void;
@@ -20,6 +21,7 @@ export const WorkspaceRenderer = ({
   registry,
   components,
   interactive = false,
+  noHeader = false,
   onSetApp,
   onSplit,
   onRemove,
@@ -34,6 +36,7 @@ export const WorkspaceRenderer = ({
         registry={registry}
         components={components}
         interactive={interactive}
+        noHeader={noHeader}
         totalPanels={totalPanels}
         onSetApp={onSetApp}
         onSplit={onSplit}
@@ -49,6 +52,7 @@ type LayoutNodeRendererProps = {
   registry: AppRegistry;
   components?: PanelComponents;
   interactive: boolean;
+  noHeader: boolean;
   totalPanels: number;
   onSetApp: (panelId: string, appType: string | null) => void;
   onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
@@ -66,6 +70,7 @@ const LayoutNodeRenderer = ({
   registry,
   components,
   interactive,
+  noHeader,
   totalPanels,
   onSetApp,
   onSplit,
@@ -97,6 +102,7 @@ const LayoutNodeRenderer = ({
         registry={registry}
         components={components}
         interactive={interactive}
+        noHeader={noHeader}
         isLastPanel={totalPanels <= 1}
         onSetApp={onSetApp}
         onSplit={onSplit}
@@ -119,6 +125,7 @@ const LayoutNodeRenderer = ({
                 registry={registry}
                 components={components}
                 interactive={interactive}
+                noHeader={noHeader}
                 totalPanels={totalPanels}
                 onSetApp={onSetApp}
                 onSplit={onSplit}
@@ -143,6 +150,7 @@ const LayoutNodeRenderer = ({
                 registry={registry}
                 components={components}
                 interactive={interactive}
+                noHeader={noHeader}
                 totalPanels={totalPanels}
                 onSetApp={onSetApp}
                 onSplit={onSplit}