Function EncodingShelfCard

src/views/EncodingShelfCard.tsx:361–1733

({ chartId })

export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId }) {
    const { t } = useTranslation();
    const theme = useTheme();

    const getChartNameTip = (chartName: string) => {
        const key = chartNameToI18nKey[chartName];
        return key ? t(`chart.templateNames.${key}`) : '';
    };
    const getChartCategoryTip = (category: string) => {
        const key = chartCategoryToI18nKey[category];
        return key ? t(`chart.chartCategoryTip.${key}`) : '';
    };

    // reference to states
    const tables = useSelector((state: DataFormulatorState) => state.tables);
    const focusedId = useSelector((state: DataFormulatorState) => state.focusedId);

    let allCharts = useSelector(dfSelectors.getAllCharts);

    // The table the user is currently looking at (from focused state)
    const focusedTableId = (() => {
        if (!focusedId) return undefined;
        if (focusedId.type === 'table') return focusedId.tableId;
        if (focusedId.type === 'chart') {
            const focusedChart = allCharts.find(c => c.id === focusedId.chartId);
            return focusedChart?.tableRef;
        }
        return undefined;
    })();

    let chart = allCharts.find(c => c.id == chartId) as Chart;
    let trigger = chart.source == "trigger" ? tables.find(t => t.derive?.trigger?.chart?.id == chartId)?.derive?.trigger : undefined;

    const triggerPrompt = trigger?.interaction?.find(e => e.role === 'instruction')?.content || '';
    let [prompt, setPrompt] = useState<string>(triggerPrompt);

    // Restyle (chart style refinement agent) — see design-docs/28-chart-style-refinement-agent.md
    const [isRestyling, setIsRestyling] = useState<boolean>(false);
    // Per-variant refresh in progress (variantId being refreshed, or null).
    const [refreshingVariantId, setRefreshingVariantId] = useState<string | null>(null);
    // Intent-classifier round-trip in progress. Distinct from isRestyling so
    // the UI can show a single "thinking" state on the submit button covering
    // classify → route → execute. See submitPrompt() and the discussion in
    // chat about routing on Enter.
    const [isClassifying, setIsClassifying] = useState<boolean>(false);
    // Phase shown in the inline status banner below the prompt input. Covers
    // the whole submit pipeline so the user always knows what's happening:
    //   classifying → restyling | formulating → idle.
    // Set explicitly inside submitPrompt() and cleared by the effect below
    // that watches chartSynthesisInProgress for the data-agent path.
    const [submitPhase, setSubmitPhase] = useState<
        'idle' | 'classifying' | 'restyling' | 'formulating'
    >('idle');
    const chartSynthesisInProgress = useSelector(
        (state: DataFormulatorState) => state.chartSynthesisInProgress,
    );
    const isDataAgentRunning = chartSynthesisInProgress.includes(chartId);
    // While we're in 'formulating' phase, watch the redux flag and clear the