Fix terminal not appearing in developer panel (#7753)

`isPanelHidden` was called at module load time when computing
`DEFAULT_PANEL_LAYOUT`, before capabilities were received from the
backend. This meant terminal was filtered out and never added to the
stored layout.

These changes check static `hidden` property at module init, defer
capability checks to render time.

Author: manzt

frontend/src/components/editor/chrome/state.ts

@@ -8,7 +8,7 @@ import { createReducerAndAtoms } from "@/utils/createReducer";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
 import type { PanelSection, PanelType } from "./types";
-import { isPanelHidden, PANELS } from "./types";
+import { PANELS } from "./types";
 
 export interface ChromeState {
   selectedPanel: PanelType | undefined;
@@ -28,10 +28,10 @@ export interface PanelLayout {
 
 const DEFAULT_PANEL_LAYOUT: PanelLayout = {
   sidebar: PANELS.filter(
-    (p) => !isPanelHidden(p) && p.defaultSection === "sidebar",
+    (p) => !p.hidden && p.defaultSection === "sidebar",
   ).map((p) => p.type),
   developerPanel: PANELS.filter(
-    (p) => !isPanelHidden(p) && p.defaultSection === "developer-panel",
+    (p) => !p.hidden && p.defaultSection === "developer-panel",
   ).map((p) => p.type),
 };
 

frontend/src/components/editor/chrome/types.ts

@@ -18,7 +18,6 @@ import {
   VariableIcon,
   XCircleIcon,
 } from "lucide-react";
-import { hasCapability } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import type { Capabilities } from "@/core/kernel/messages";
 import { isWasm } from "@/core/wasm/utils";
@@ -188,12 +187,15 @@ export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
  * Check if a panel should be hidden based on its `hidden` property
  * and `requiredCapability`.
  */
-export function isPanelHidden(panel: PanelDescriptor): boolean {
+export function isPanelHidden(
+  panel: PanelDescriptor,
+  capabilities: Capabilities,
+): boolean {
   if (panel.hidden) {
     return true;
   }
   if (panel.requiredCapability) {
-    if (!hasCapability(panel.requiredCapability)) {
+    if (!capabilities[panel.requiredCapability]) {
       return true;
     }
   }

frontend/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -22,6 +22,7 @@ import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LazyMount } from "@/components/utils/lazy-mount";
 import { cellErrorCount } from "@/core/cells/cells";
+import { capabilitiesAtom } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
@@ -83,14 +84,20 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const { dependencyPanelTab, setDependencyPanelTab } = useDependencyPanelTab();
   const errorCount = useAtomValue(cellErrorCount);
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
+  // Subscribe to capabilities to re-render when they change (e.g., terminal capability)
+  const capabilities = useAtomValue(capabilitiesAtom);
 
   // Convert current developer panel items to PanelDescriptors
+  // Filter out hidden panels (e.g., terminal when capability is not available)
   const devPanelItems = useMemo(() => {
     return panelLayout.developerPanel.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      return panel ? [panel] : [];
+      if (!panel || isPanelHidden(panel, capabilities)) {
+        return [];
+      }
+      return [panel];
     });
-  }, [panelLayout.developerPanel]);
+  }, [panelLayout.developerPanel, capabilities]);
 
   const handleSetDevPanelItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({
@@ -127,7 +134,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const availableDevPanels = useMemo(() => {
     const sidebarIds = new Set(panelLayout.sidebar);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p)) {
+      if (isPanelHidden(p, capabilities)) {
         return false;
       }
       // Exclude panels that are in the sidebar
@@ -136,7 +143,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       }
       return true;
     });
-  }, [panelLayout.sidebar]);
+  }, [panelLayout.sidebar, capabilities]);
 
   // sync sidebar
   useEffect(() => {

frontend/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -11,6 +11,7 @@ import {
   cellErrorCount,
   notebookQueuedOrRunningCountAtom,
 } from "@/core/cells/cells";
+import { capabilitiesAtom } from "@/core/config/capabilities";
 import { cn } from "@/utils/cn";
 import { FeedbackButton } from "../components/feedback-button";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -25,6 +26,8 @@ export const Sidebar: React.FC = () => {
   const { selectedPanel, selectedDeveloperPanelTab } = useChromeState();
   const { toggleApplication, openApplication } = useChromeActions();
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
+  // Subscribe to capabilities to re-render when they change
+  const capabilities = useAtomValue(capabilitiesAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
     return <Icon className={cn("h-5 w-5", className)} />;
@@ -35,7 +38,7 @@ export const Sidebar: React.FC = () => {
   const availableSidebarPanels = useMemo(() => {
     const devPanelIds = new Set(panelLayout.developerPanel);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p)) {
+      if (isPanelHidden(p, capabilities)) {
         return false;
       }
       // Exclude panels that are in the developer panel
@@ -44,15 +47,19 @@ export const Sidebar: React.FC = () => {
       }
       return true;
     });
-  }, [panelLayout.developerPanel]);
+  }, [panelLayout.developerPanel, capabilities]);
 
   // Convert current sidebar items to PanelDescriptors
+  // Filter out hidden panels (e.g., when capability is not available)
   const sidebarItems = useMemo(() => {
     return panelLayout.sidebar.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      return panel ? [panel] : [];
+      if (!panel || isPanelHidden(panel, capabilities)) {
+        return [];
+      }
+      return [panel];
     });
-  }, [panelLayout.sidebar]);
+  }, [panelLayout.sidebar, capabilities]);
 
   const handleSetSidebarItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({