+ ),
+}));
const mockPrefetchResourceCounts = vi.fn();
const mockFetchEntityData = vi.fn();
@@ -73,6 +78,7 @@ function setStore(overrides: Record) {
statusByEntity: {},
actuationByEntity: {},
watchEntityStatus: vi.fn(() => () => {}),
+ scriptsSupported: false,
...overrides,
};
}
@@ -151,3 +157,57 @@ describe('EntityDetailPanel - nested entity types', () => {
expect(screen.queryByText(/No detailed information available/i)).not.toBeInTheDocument();
});
});
+
+describe('EntityDetailPanel - scripts tab gating (component view)', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockPrefetchResourceCounts.mockResolvedValue({ data: 0, operations: 0, configurations: 0, faults: 0, logs: 0 });
+ mockFetchEntityData.mockResolvedValue([]);
+ });
+
+ it('hides the Scripts tab when the gateway does not report the capability', async () => {
+ setStore({
+ selectedPath: '/server/area1/component1',
+ selectedEntity: {
+ id: 'component1',
+ name: 'component1',
+ type: 'component',
+ },
+ scriptsSupported: false,
+ });
+
+ render(
+
+ {}} />
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByRole('button', { name: /Data/ })).toBeInTheDocument();
+ });
+ expect(screen.queryByRole('button', { name: /scripts/i })).not.toBeInTheDocument();
+ });
+
+ it('shows the Scripts tab and renders its content when the capability is reported', async () => {
+ setStore({
+ selectedPath: '/server/area1/component1',
+ selectedEntity: {
+ id: 'component1',
+ name: 'component1',
+ type: 'component',
+ },
+ scriptsSupported: true,
+ });
+
+ render(
+
+ {}} />
+
+ );
+
+ const scriptsButton = await screen.findByRole('button', { name: /scripts/i });
+ fireEvent.click(scriptsButton);
+
+ expect(await screen.findByTestId('tab-content-scripts')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/EntityDetailPanel.tsx b/src/components/EntityDetailPanel.tsx
index b5b39a4..6a419c5 100644
--- a/src/components/EntityDetailPanel.tsx
+++ b/src/components/EntityDetailPanel.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { useShallow } from 'zustand/shallow';
import {
Copy,
@@ -24,7 +24,7 @@ import { EntityDetailSkeleton } from '@/components/EntityDetailSkeleton';
import { DataPanel } from '@/components/DataPanel';
import { ConfigurationPanel } from '@/components/ConfigurationPanel';
import { OperationsPanel } from '@/components/OperationsPanel';
-import { RESOURCE_TABS, renderResourceTabContent, type ResourceTabId } from '@/components/ResourceTabs';
+import { RESOURCE_TABS, renderResourceTabContent, SCRIPTS_TAB, type ResourceTabId } from '@/components/ResourceTabs';
import { AreasPanel } from '@/components/AreasPanel';
import { AppsPanel } from '@/components/AppsPanel';
import { FunctionsPanel } from '@/components/FunctionsPanel';
@@ -44,7 +44,7 @@ interface TabConfig {
description?: string;
}
-const COMPONENT_TABS: TabConfig[] = RESOURCE_TABS;
+const BASE_COMPONENT_TABS: TabConfig[] = RESOURCE_TABS;
/**
* Determine entity type for API calls based on entity type
@@ -377,6 +377,7 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
configurations: 0,
faults: 0,
logs: 0,
+ scripts: 0,
});
// Store fetched topics data for the Data tab. `null` means "not yet loaded
// for the current entity" so the Data tab can render a skeleton instead of
@@ -395,6 +396,7 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
refreshSelectedEntity,
prefetchResourceCounts,
fetchEntityData,
+ scriptsSupported,
} = useAppStore(
useShallow((state: AppState) => ({
selectedPath: state.selectedPath,
@@ -407,9 +409,15 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
refreshSelectedEntity: state.refreshSelectedEntity,
prefetchResourceCounts: state.prefetchResourceCounts,
fetchEntityData: state.fetchEntityData,
+ scriptsSupported: state.scriptsSupported,
}))
);
+ const componentTabs = useMemo(
+ () => (scriptsSupported ? [...BASE_COMPONENT_TABS, SCRIPTS_TAB] : BASE_COMPONENT_TABS),
+ [scriptsSupported]
+ );
+
// Notify parent when entity is selected
useEffect(() => {
if (selectedPath && onEntitySelect) {
@@ -417,6 +425,12 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
}
}, [selectedPath, onEntitySelect]);
+ // Fall back to the default tab when the Scripts tab disappears (e.g. the
+ // gateway capability flips off) while it is the active tab.
+ useEffect(() => {
+ if (!scriptsSupported && activeTab === 'scripts') setActiveTab('data');
+ }, [scriptsSupported, activeTab]);
+
// Reset the component-view resource tab to Data when the entity changes,
// so switching between components doesn't show stale tab state.
useEffect(() => {
@@ -431,6 +445,7 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
configurations: 0,
faults: 0,
logs: 0,
+ scripts: 0,
};
// Guard against late results from a previous entity overwriting the
// current entity's state. The cleanup aborts in-flight requests AND
@@ -483,7 +498,7 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
setTopicsData(fetchedData);
// Use the already-fetched data length instead of a separate request
- setResourceCounts({ ...counts, data: fetchedData.length, logs: 0 });
+ setResourceCounts({ ...counts, data: fetchedData.length, logs: 0, scripts: 0 });
} catch {
if (cancelled) return;
// On unexpected failure fall back to "loaded empty" so the UI
@@ -821,7 +836,7 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
{isComponent && (
- {COMPONENT_TABS.map((tab) => {
+ {componentTabs.map((tab) => {
const TabIcon = tab.icon;
const isActive = activeTab === tab.id;
const count = resourceCounts[tab.id];
diff --git a/src/components/EntityResourceTabs.tsx b/src/components/EntityResourceTabs.tsx
index 8aba64b..0ea967a 100644
--- a/src/components/EntityResourceTabs.tsx
+++ b/src/components/EntityResourceTabs.tsx
@@ -23,6 +23,7 @@ interface LoadedResources {
configurations: boolean;
faults: boolean;
logs: boolean;
+ scripts: boolean;
}
/**
@@ -40,6 +41,7 @@ export function EntityResourceTabs({ entityId, entityType, basePath, onNavigate
configurations: false,
faults: false,
logs: false,
+ scripts: false,
});
const loadedTabsRef = useRef(loadedTabs);
loadedTabsRef.current = loadedTabs;
@@ -141,6 +143,7 @@ export function EntityResourceTabs({ entityId, entityType, basePath, onNavigate
configurations: false,
faults: false,
logs: false,
+ scripts: false,
};
setActiveTab('data');
setLoadedTabs(reset);
diff --git a/src/components/ResourceTabs.test.tsx b/src/components/ResourceTabs.test.tsx
new file mode 100644
index 0000000..2aacf5f
--- /dev/null
+++ b/src/components/ResourceTabs.test.tsx
@@ -0,0 +1,47 @@
+// Copyright 2026 bburda
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { isResourceTabId, renderResourceTabContent, RESOURCE_TABS, SCRIPTS_TAB } from './ResourceTabs';
+
+vi.mock('@/components/ScriptsPanel', () => ({
+ ScriptsPanel: ({ entityId, entityType }: { entityId: string; entityType: string }) => (
+
{`${entityType}:${entityId}`}
+ ),
+}));
+
+describe('isResourceTabId', () => {
+ it('accepts scripts', () => expect(isResourceTabId('scripts')).toBe(true));
+ it('rejects unknown ids', () => expect(isResourceTabId('nope')).toBe(false));
+});
+
+describe('RESOURCE_TABS', () => {
+ it('does not include scripts so areas and functions never show it', () => {
+ expect(RESOURCE_TABS.map((t) => t.id)).toEqual(['data', 'operations', 'configurations', 'faults', 'logs']);
+ expect(SCRIPTS_TAB.id).toBe('scripts');
+ });
+});
+
+describe('renderResourceTabContent for scripts', () => {
+ it.each(['apps', 'components'] as const)('renders the scripts panel for %s', (entityType) => {
+ render(<>{renderResourceTabContent('scripts', 'e1', entityType)});
+ expect(screen.getByTestId('scripts-panel')).toHaveTextContent(`${entityType}:e1`);
+ });
+
+ it.each(['areas', 'functions'] as const)('renders nothing for %s', (entityType) => {
+ const { container } = render(<>{renderResourceTabContent('scripts', 'e1', entityType)});
+ expect(container).toBeEmptyDOMElement();
+ });
+});
diff --git a/src/components/ResourceTabs.tsx b/src/components/ResourceTabs.tsx
index 7fbd5c2..59eb680 100644
--- a/src/components/ResourceTabs.tsx
+++ b/src/components/ResourceTabs.tsx
@@ -13,11 +13,12 @@
// limitations under the License.
import type { ReactNode } from 'react';
-import { AlertTriangle, Database, ScrollText, Settings, Zap } from 'lucide-react';
+import { AlertTriangle, Database, ScrollText, Settings, Terminal, Zap } from 'lucide-react';
import { ConfigurationPanel } from '@/components/ConfigurationPanel';
import { FaultsPanel } from '@/components/FaultsPanel';
import { LogsPanel } from '@/components/LogsPanel';
import { OperationsPanel } from '@/components/OperationsPanel';
+import { ScriptsPanel } from '@/components/ScriptsPanel';
import type { SovdResourceEntityType } from '@/lib/types';
/**
@@ -32,11 +33,11 @@ import type { SovdResourceEntityType } from '@/lib/types';
* rendering stays per-panel because each entity type displays data
* differently (apps: topics list, components: DataTabContent grid,
* areas: aggregated grid). The helper `renderResourceTabContent` below
- * therefore only handles operations / configurations / faults / logs;
+ * therefore only handles operations / configurations / faults / logs / scripts;
* callers are responsible for rendering their own data tab content.
*/
-export type ResourceTabId = 'data' | 'operations' | 'configurations' | 'faults' | 'logs';
+export type ResourceTabId = 'data' | 'operations' | 'configurations' | 'faults' | 'logs' | 'scripts';
export interface ResourceTabConfig {
id: ResourceTabId;
@@ -52,8 +53,22 @@ export const RESOURCE_TABS: ResourceTabConfig[] = [
{ id: 'logs', label: 'Logs', icon: ScrollText },
];
+/**
+ * Not part of RESOURCE_TABS: script routes exist for apps and components only,
+ * and the tab additionally requires the gateway to report capabilities.scripts.
+ * Panels append it themselves.
+ */
+export const SCRIPTS_TAB: ResourceTabConfig = { id: 'scripts', label: 'Scripts', icon: Terminal };
+
export function isResourceTabId(id: string): id is ResourceTabId {
- return id === 'data' || id === 'operations' || id === 'configurations' || id === 'faults' || id === 'logs';
+ return (
+ id === 'data' ||
+ id === 'operations' ||
+ id === 'configurations' ||
+ id === 'faults' ||
+ id === 'logs' ||
+ id === 'scripts'
+ );
}
/**
@@ -76,6 +91,10 @@ export function renderResourceTabContent(
return ;
case 'logs':
return ;
+ case 'scripts':
+ return entityType === 'apps' || entityType === 'components' ? (
+
+ ) : null;
case 'data':
return null;
}
diff --git a/src/components/ScriptEditor.tsx b/src/components/ScriptEditor.tsx
new file mode 100644
index 0000000..253dbef
--- /dev/null
+++ b/src/components/ScriptEditor.tsx
@@ -0,0 +1,92 @@
+// Copyright 2026 bburda
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { useEffect, useMemo, useState } from 'react';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
+import type { Extension } from '@uiw/react-codemirror';
+import { python } from '@codemirror/lang-python';
+import { StreamLanguage } from '@codemirror/language';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { languageForFilename } from '@/lib/script-language';
+
+interface ScriptEditorProps {
+ value: string;
+ onChange: (value: string) => void;
+ filename: string;
+ /**
+ * Accessible name for the editor's contenteditable region. CodeMirror's
+ * content element is the one that actually carries the textbox role, so
+ * a wrapping