Function Status

src/components/Settings/Status.tsx:101–149

({ context, diagnosticsPromise }: Props)

}

export function Status({ context, diagnosticsPromise }: Props): React.ReactNode {
  const mainLoopModel = useAppState(s => s.mainLoopModel);
  const mcp = useAppState(s => s.mcp);
  const [theme] = useTheme();

  // Sections are synchronous — compute in render so they're never empty.
  // diagnosticsPromise is created once in Settings.tsx so it resolves once
  // per pane invocation instead of re-fetching on every tab switch (Tab
  // unmounts children when not selected, which was causing the flash).
  const sections = React.useMemo(
    () => [buildPrimarySection(), buildSecondarySection({ mainLoopModel, mcp, theme, context })],
    [mainLoopModel, mcp, theme, context],
  );

  // flexGrow so the "Esc to cancel" footer pins to the bottom of the
  // Modal's inner ScrollBox when content is short. The ScrollBox content
  // wrapper has flexGrow:1 (fills at least the viewport), so this stretches
  // to match. Without it, short Status content floats at the top and the
  // footer sits mid-modal with 2-3 trailing blank rows below. Outside a
  // Modal (non-fullscreen), leave layout alone — no ScrollBox to fill.
  const grow = useIsInsideModal() ? 1 : undefined;

  return (
    <Box flexDirection="column" flexGrow={grow}>
      <Box flexDirection="column" gap={1} flexGrow={grow}>
        {sections.map(
          (properties, i) =>
            properties.length > 0 && (
              <Box key={i} flexDirection="column">
                {properties.map(({ label, value }, j) => (
                  <Box key={j} flexDirection="row" gap={1} flexShrink={0}>
                    {label !== undefined && <Text bold>{label}:</Text>}
                    <PropertyValue value={value} />
                  </Box>
                ))}
              </Box>
            ),
        )}

        <Suspense fallback={null}>
          <Diagnostics promise={diagnosticsPromise} />
        </Suspense>
      </Box>
      <Text dimColor>
        <ConfigurableShortcutHint action="confirm:no" context="Settings" fallback="Esc" description="cancel" />
      </Text>
    </Box>
  );
}

function Diagnostics({ promise }: { promise: Promise<Diagnostic[]> }): React.ReactNode {
  const diagnostics = use(promise);