Adding Custom Tabs

Step 1 — Implement the Tab Component

A custom tab content component is a standard React component. It reads from flowObserverPanelStore and any custom stores you create:

// MetricsTabContent.tsx
import { useFlowObserverPanelStore } from 'flow-observer-core';

export function MetricsTabContent() {
  // Read from the shared store
  const completedCount = useFlowObserverPanelStore(s => s.completedNodeCount);
  const totalCount = useFlowObserverPanelStore(s => s.totalNodeCount);

  // Read from a custom store you manage
  const { apiCallCount, averageApiLatencyMs } = useMetricsStore();

  return (
    <div className="custom-tab-content">
      <div className="metric">
        <span className="label">Progress</span>
        <span className="value">{completedCount} / {totalCount}</span>
      </div>
      <div className="metric">
        <span className="label">HTTP Calls</span>
        <span className="value">{apiCallCount}</span>
      </div>
      <div className="metric">
        <span className="label">Avg API Latency</span>
        <span className="value">{averageApiLatencyMs}ms</span>
      </div>
    </div>
  );
}

Step 2 — Register with the Engine

// In your app's initialisation (e.g., FlowStudioProvider setup)
import { useFlowObserverPanelEngine } from 'flow-observer-core';

function AppInitialiser({ children }) {
  const engine = useFlowObserverPanelEngine();

  useEffect(() => {
    engine.registerTab({
      id: 'metrics',
      label: 'Metrics',
      icon: 'fa-solid fa-chart-bar',
      component: MetricsTabContent,
      order: 60,          // appears after the built-in tabs (10–50)
      onEvent: (event) => {
        // Filter only HTTP node events and update your custom store
        if (event.type === 'NodeExecutionCompleted' &&
            event.nodeType === 'http-request') {
          metricsStore.getState().recordApiCall(event.durationMs);
        }
      }
    });

    return () => engine.unregisterTab('metrics');
  }, [engine]);

  return children;
}

Step 3 — Badge Counts

Badge counts draw attention to the tab when something important happens. Update the badge via the engine:

// Set badge to number of failed HTTP calls
engine.setTabBadge('metrics', failedCallCount);

// Clear the badge
engine.setTabBadge('metrics', null);

Custom Tab Checklist