Files
AutoMetabuilder/frontend/autometabuilder/components/workflow/WorkflowInspector.tsx
copilot-swe-agent[bot] 6e9ff896e7 Phase 9: Implement atomic hooks-based workflow canvas components
- Created custom hooks: useWorkflowGraph, useWorkflowPlugins, usePluginSearch, useTabNavigation
- Decomposed canvas logic into: useCanvasNodes, useCanvasEdges, useCanvasDragDrop
- Built atomic node components: NodeHeader, NodeBody, NodePorts
- Created canvas UI components: CanvasInfoPanel, CanvasHintPanel
- Split builder into: LoadingState, ErrorState, WorkflowBuilderHeader, WorkflowBuilderTabs, WorkflowBuilderContent
- Added React Flow for n8n-style visual canvas with drag-and-drop
- All components now under 100 LOC following PROMPT.md guidelines

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
2026-01-10 12:25:36 +00:00

29 lines
916 B
TypeScript

"use client";
import { Paper, Stack, Typography } from "@mui/material";
type WorkflowInspectorProps = {
t: (key: string, fallback?: string) => string;
};
export default function WorkflowInspector({ t }: WorkflowInspectorProps) {
return (
<Paper sx={{ p: 2, minHeight: 400, backgroundColor: "var(--color-panel-alt)" }}>
<Typography variant="subtitle1" gutterBottom>
{t("ui.workflow.inspector.title", "Inspector")}
</Typography>
<Typography variant="body2" color="text.secondary">
{t(
"ui.workflow.inspector.empty",
"Select a node or edge to view and edit properties"
)}
</Typography>
<Stack spacing={2} sx={{ mt: 2 }}>
<Typography variant="caption" color="text.secondary">
{t("ui.workflow.inspector.hint", "Node properties will appear here when selected")}
</Typography>
</Stack>
</Paper>
);
}