@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/jdw/JdwPreview.tsx

@@ -1,8 +1,23 @@
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import type { WidgetRegistryContract } from '@workbench-kit/contracts';
-import { parseJsonWidgetData, type LayoutConstraints } from '@workbench-kit/jdw';
+import {
+  collectJsonWidgetChangedValuePaths,
+  collectJsonWidgetInvalidations,
+  expandJsonWidgetDocumentRefs,
+  parseJsonWidgetData,
+  resolveJsonWidgetValues,
+  validateJsonWidgetNode,
+  type LayoutConstraints,
+  type JsonWidgetValueMap,
+  type JsonWidgetInvalidation,
+  type ValidationIssue,
+  type WidgetPath,
+} from '@workbench-kit/jdw';
 
 import { WorkbenchParseError, WorkbenchRenderSurface } from '../layout/WorkbenchLayout.js';
-import { useRenderJdw } from './renderJdw.js';
+import { renderJdwWithLayout } from './cssRenderBackend.js';
+
+const EMPTY_CHANGED_VALUE_PATHS: readonly string[] = [];
 
 export interface JdwPreviewProps {
   json: string;
@@ -10,6 +25,49 @@ export interface JdwPreviewProps {
   emptyLabel?: string | undefined;
   className?: string | undefined;
   layoutConstraints?: LayoutConstraints | undefined;
+  selectedPath?: WidgetPath | null | undefined;
+  strictKnownTypes?: boolean | undefined;
+  values?: JsonWidgetValueMap | undefined;
+  changedValuePaths?: readonly string[] | undefined;
+  onSelectPath?: ((path: WidgetPath) => void) | undefined;
+  /**
+   * When set, expand `type: "ref"` before validate/layout so composed documents
+   * draw without mutating the authored JSON shown in Code/Form outline.
+   */
+  documentPath?: string | null | undefined;
+  loadDocument?: ((path: string) => string | null) | undefined;
+}
+
+function formatValidationMessage(issue: { readonly message: string; readonly path: string }) {
+  return issue.path ? `${issue.path}: ${issue.message}` : issue.message;
+}
+
+export function getJdwPreviewInvalidations(
+  json: string,
+  changedValuePaths: readonly string[] = [],
+): readonly JsonWidgetInvalidation[] {
+  const parsed = parseJsonWidgetData(json);
+  if (parsed.parseError !== null || parsed.value === null) {
+    return [];
+  }
+
+  return collectJsonWidgetInvalidations(parsed.value, changedValuePaths);
+}
+
+function mergeChangedValuePaths(
+  first: readonly string[],
+  second: readonly string[],
+): readonly string[] {
+  return [
+    ...new Set([...first, ...second].map((path) => path.trim()).filter((path) => path.length > 0)),
+  ];
+}
+
+interface JdwPreviewState {
+  readonly invalidations: readonly JsonWidgetInvalidation[];
+  readonly issues: readonly ValidationIssue[];
+  readonly renderOutput: ReactNode;
+  readonly valid: boolean;
 }
 
 export function JdwPreview({
@@ -18,21 +76,120 @@ export function JdwPreview({
   emptyLabel = 'No render output.',
   className,
   layoutConstraints,
+  selectedPath = null,
+  strictKnownTypes = true,
+  values,
+  changedValuePaths = EMPTY_CHANGED_VALUE_PATHS,
+  onSelectPath,
+  documentPath = null,
+  loadDocument,
 }: JdwPreviewProps) {
-  const parsed = parseJsonWidgetData(json);
-  const renderOutput = useRenderJdw(json, { registry, emptyLabel, layoutConstraints });
+  const previousValuesRef = useRef<JsonWidgetValueMap | undefined>(values);
+  const onSelectPathRef = useRef(onSelectPath);
+  onSelectPathRef.current = onSelectPath;
+
+  const changedValuePathsFromValues = useMemo(
+    () => collectJsonWidgetChangedValuePaths(previousValuesRef.current, values),
+    [values],
+  );
+  const activeChangedValuePaths = useMemo(
+    () => mergeChangedValuePaths(changedValuePaths, changedValuePathsFromValues),
+    [changedValuePaths, changedValuePathsFromValues],
+  );
+
+  useEffect(() => {
+    previousValuesRef.current = values;
+  }, [values]);
+
+  const previewState = useMemo<JdwPreviewState>(() => {
+    const parsed = parseJsonWidgetData(json);
+    if (parsed.parseError !== null || parsed.value === null) {
+      return {
+        invalidations: [],
+        issues: [
+          {
+            path: 'root',
+            message: parsed.parseError ?? 'Invalid JSON widget data.',
+          },
+        ],
+        renderOutput: null,
+        valid: false,
+      };
+    }
+
+    let drawableNode = parsed.value;
+    if (loadDocument) {
+      const expanded = expandJsonWidgetDocumentRefs(parsed.value, {
+        documentPath,
+        loadDocument,
+      });
+      if (expanded.issues.length > 0 || expanded.value === null) {
+        return {
+          invalidations: [],
+          issues: expanded.issues.map((issue) => ({
+            path: issue.path,
+            message: issue.message,
+          })),
+          renderOutput: null,
+          valid: false,
+        };
+      }
+      drawableNode = expanded.value;
+    }
+
+    const resolvedNode = resolveJsonWidgetValues(drawableNode, values);
+    const issues: ValidationIssue[] = [];
+    validateJsonWidgetNode(resolvedNode, 'root', issues, {
+      registeredTypes: registry?.types(),
+      strictKnownTypes,
+    });
+
+    return {
+      invalidations: collectJsonWidgetInvalidations(drawableNode, activeChangedValuePaths),
+      issues,
+      renderOutput:
+        issues.length === 0
+          ? renderJdwWithLayout(resolvedNode, {
+              registry,
+              emptyLabel,
+              layoutConstraints,
+              selectedPath,
+              onSelectPath: (path) => onSelectPathRef.current?.(path),
+            })
+          : null,
+      valid: issues.length === 0,
+    };
+  }, [
+    activeChangedValuePaths,
+    documentPath,
+    emptyLabel,
+    json,
+    layoutConstraints,
+    loadDocument,
+    registry,
+    selectedPath,
+    strictKnownTypes,
+    values,
+  ]);
 
-  if (parsed.parseError !== null) {
+  if (!previewState.valid) {
+    const firstIssue = previewState.issues[0];
     return (
       <WorkbenchParseError role="alert" data-testid="jdw-preview-error">
-        {parsed.parseError}
+        {firstIssue ? formatValidationMessage(firstIssue) : 'Invalid JDW document.'}
       </WorkbenchParseError>
     );
   }
 
   return (
-    <WorkbenchRenderSurface className={className} data-testid="jdw-preview-output">
-      {renderOutput ?? emptyLabel}
+    <WorkbenchRenderSurface
+      className={className}
+      data-jdw-invalidations={
+        previewState.invalidations.length > 0 ? previewState.invalidations.length : undefined
+      }
+      data-testid="jdw-preview-output"
+    >
+      {previewState.renderOutput ?? emptyLabel}
     </WorkbenchRenderSurface>
   );
 }

package/src/jdw/JdwPreviewViewport.tsx

@@ -0,0 +1,190 @@
+import { useLayoutEffect, useMemo, useState, type ReactNode } from 'react';
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+import {
+  DEFAULT_LAYOUT_CONSTRAINTS,
+  createWidgetDocument,
+  layoutWidget,
+  type LayoutConstraints,
+} from '@workbench-kit/jdw';
+
+import { WorkbenchPreviewCanvas } from '../layout/WorkbenchCanvas.js';
+import { usePreviewViewport } from '../layout/usePreviewViewport.js';
+import { cx } from '../utils/cx.js';
+import { JdwPreview, type JdwPreviewProps } from './JdwPreview.js';
+
+import './jdw-preview-viewport.css';
+
+const FALLBACK_FRAME_SIZE = { height: 320, width: 400 } as const;
+
+export type JdwPreviewViewportFit = 'container' | 'content';
+
+export interface JdwPreviewViewportProps extends JdwPreviewProps {
+  /**
+   * `container` (default): outside-in — host size drives layout constraints.
+   * `content`: inside-out — document/layoutConstraints size the frame, then scale-to-fit.
+   */
+  readonly fit?: JdwPreviewViewportFit | undefined;
+  readonly help?: ReactNode | undefined;
+  readonly showReset?: boolean | undefined;
+  readonly showViewportGrid?: boolean | undefined;
+  /**
+   * When false, only middle-mouse pans (safer when preview nodes are selectable).
+   * Default true for read-only preview surfaces.
+   */
+  readonly enablePrimaryPointerPan?: boolean | undefined;
+}
+
+export function resolveJdwPreviewFrameSize(
+  json: string,
+  layoutConstraints: LayoutConstraints = DEFAULT_LAYOUT_CONSTRAINTS,
+  registry?: WidgetRegistryContract<unknown> | undefined,
+): { readonly height: number; readonly width: number } {
+  const document = createWidgetDocument(json);
+  if (document.root === null) {
+    return FALLBACK_FRAME_SIZE;
+  }
+
+  try {
+    const layout = layoutWidget(document.root, layoutConstraints, { x: 0, y: 0 }, { registry });
+    return {
+      height: Math.max(1, Math.round(layout.rect.height)),
+      width: Math.max(1, Math.round(layout.rect.width)),
+    };
+  } catch {
+    return FALLBACK_FRAME_SIZE;
+  }
+}
+
+export function resolveContainerLayoutConstraints(
+  hostWidth: number,
+  hostHeight: number,
+  inset = 0,
+): LayoutConstraints {
+  return {
+    minWidth: 0,
+    maxWidth: Math.max(1, Math.floor(hostWidth) - inset),
+    minHeight: 0,
+    maxHeight: Math.max(1, Math.floor(hostHeight) - inset),
+  };
+}
+
+export function JdwPreviewViewport({
+  className,
+  enablePrimaryPointerPan = true,
+  fit = 'container',
+  help = 'Ctrl + Scroll to zoom | Drag or scroll to pan',
+  json,
+  layoutConstraints = DEFAULT_LAYOUT_CONSTRAINTS,
+  registry,
+  showReset = true,
+  showViewportGrid = true,
+  ...previewProps
+}: JdwPreviewViewportProps) {
+  const [hostElement, setHostElement] = useState<HTMLDivElement | null>(null);
+  const [hostSize, setHostSize] = useState<{ height: number; width: number } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!hostElement) {
+      return undefined;
+    }
+
+    const updateSize = () => {
+      const rect = hostElement.getBoundingClientRect();
+      const width = Math.max(0, Math.floor(rect.width));
+      const height = Math.max(0, Math.floor(rect.height));
+      setHostSize((current) =>
+        current && current.width === width && current.height === height
+          ? current
+          : { width, height },
+      );
+    };
+
+    updateSize();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(hostElement);
+    return () => observer.disconnect();
+  }, [hostElement]);
+
+  const effectiveConstraints = useMemo(() => {
+    if (fit === 'container' && hostSize && hostSize.width > 0 && hostSize.height > 0) {
+      return resolveContainerLayoutConstraints(hostSize.width, hostSize.height);
+    }
+    return layoutConstraints;
+  }, [fit, hostSize, layoutConstraints]);
+
+  const frame = useMemo(() => {
+    if (fit === 'container' && hostSize && hostSize.width > 0 && hostSize.height > 0) {
+      // Outside-in: host size is the frame. Layout still uses the same constraints.
+      return {
+        width: Math.max(1, Math.floor(hostSize.width)),
+        height: Math.max(1, Math.floor(hostSize.height)),
+      };
+    }
+    return resolveJdwPreviewFrameSize(json, effectiveConstraints, registry);
+  }, [effectiveConstraints, fit, hostSize, json, registry]);
+  const viewport = usePreviewViewport({
+    contentHeight: frame.height,
+    contentWidth: frame.width,
+    enablePrimaryPointerPan,
+    ignoreInteractiveTargets: true,
+    viewportPadding: fit === 'container' ? 0 : 24,
+  });
+
+  const document = useMemo(() => createWidgetDocument(json), [json]);
+  const canRenderViewport = document.root !== null && document.parseError === null;
+
+  return (
+    <div
+      ref={setHostElement}
+      className={cx('ui-jdw-preview-viewport-host', className)}
+      data-fit={fit}
+      data-testid="jdw-preview-viewport-host"
+    >
+      {!canRenderViewport ? (
+        <JdwPreview
+          {...previewProps}
+          json={json}
+          layoutConstraints={effectiveConstraints}
+          registry={registry}
+        />
+      ) : hostSize === null ? null : (
+        <WorkbenchPreviewCanvas
+          className="ui-jdw-preview-viewport"
+          data-testid="jdw-preview-viewport"
+          frameHeight={frame.height}
+          frameTitle="JDW Preview"
+          frameWidth={frame.width}
+          help={help}
+          isPanning={viewport.isPanning}
+          onResetView={showReset ? viewport.resetView : undefined}
+          resetLabel={`Reset (${Math.round(viewport.effectiveZoom * 100)}%)`}
+          resetTitle="Reset zoom and pan"
+          showViewportGrid={showViewportGrid}
+          showWindowFrame={false}
+          stageStyle={viewport.stageStyle}
+          viewportGridSize={8}
+          viewportProps={{
+            ref: viewport.setViewportElement,
+          }}
+        >
+          <div
+            className="ui-jdw-preview-viewport__stage"
+            style={{ width: frame.width, height: frame.height }}
+          >
+            <JdwPreview
+              {...previewProps}
+              className="ui-jdw-preview-viewport__render"
+              json={json}
+              layoutConstraints={effectiveConstraints}
+              registry={registry}
+            />
+          </div>
+        </WorkbenchPreviewCanvas>
+      )}
+    </div>
+  );
+}

package/src/jdw/JsonCodeEditorPane.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { WidgetJsonSchema } from '@workbench-kit/contracts';
-import type { OnMount } from '@monaco-editor/react';
-import type * as Monaco from 'monaco-editor';
+import type { IDisposable, OnMount, WorkbenchMonaco, editor } from '@workbench-kit/monaco';
 
-import { IconButton } from '../primitives/IconButton';
-import { ListEmptyState } from '../primitives/List';
+import { IconButton } from '../primitives/icon-button';
+import { ListEmptyState } from '../primitives/list';
 import {
   WorkbenchEditorBody,
   WorkbenchEditorBottomPanel,
@@ -21,11 +20,11 @@ import {
   StatusBar as WorkbenchStatusBar,
   StatusBarItem as WorkbenchStatusBarItem,
   StatusBarSection as WorkbenchStatusBarSection,
-} from '../workbench/StatusBar';
+} from '../workbench/shell/StatusBar';
 import { WorkspaceEditor, type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';
 import type { WorkspaceFile } from '../workbench/workspace/types';
 
-interface JsonEditorProblem {
+export interface JsonEditorProblem {
   endColumn: number;
   endLineNumber: number;
   message: string;
@@ -40,12 +39,69 @@ function toWorkbenchProblemSeverity(severity: number): WorkbenchProblemSeverity
   return 'info';
 }
 
+function pluralizeProblemLabel(count: number, label: string): string {
+  return `${count} ${label}${count === 1 ? '' : 's'}`;
+}
+
+export function summarizeJsonEditorProblems(problems: readonly JsonEditorProblem[]): {
+  readonly icon: string;
+  readonly label: string;
+  readonly status: 'completed' | 'failed' | 'warning';
+} {
+  const errorCount = problems.filter(
+    (problem) => toWorkbenchProblemSeverity(problem.severity) === 'error',
+  ).length;
+  const warningCount = problems.filter(
+    (problem) => toWorkbenchProblemSeverity(problem.severity) === 'warning',
+  ).length;
+
+  if (errorCount > 0) {
+    return {
+      icon: 'error',
+      label:
+        warningCount > 0
+          ? `${pluralizeProblemLabel(errorCount, 'Error')}, ${pluralizeProblemLabel(
+              warningCount,
+              'Warning',
+            )}`
+          : pluralizeProblemLabel(errorCount, 'Error'),
+      status: 'failed',
+    };
+  }
+
+  if (warningCount > 0) {
+    return {
+      icon: 'warning',
+      label: pluralizeProblemLabel(warningCount, 'Warning'),
+      status: 'warning',
+    };
+  }
+
+  if (problems.length > 0) {
+    return {
+      icon: 'info',
+      label: pluralizeProblemLabel(problems.length, 'Info'),
+      status: 'completed',
+    };
+  }
+
+  return {
+    icon: 'check',
+    label: 'No Problems',
+    status: 'completed',
+  };
+}
+
 export interface JsonCodeEditorPaneProps {
+  activeSourceRange?: JsonEditorRange | null | undefined;
   documentParseError?: string | null | undefined;
   file: WorkspaceFile;
   jsonSchema?: WidgetJsonSchema | null | undefined;
+  revealPosition?: JsonEditorPosition | null | undefined;
+  onCursorPositionChange?: ((position: JsonEditorPosition) => void) | undefined;
   onChange: (value: string) => void;
   onEditorMount?: OnMount | undefined;
+  problems?: readonly JsonEditorProblem[] | undefined;
   onSave?: (() => void) | undefined;
   readOnly?: boolean | undefined;
   showProblemsPanel?: boolean | undefined;
@@ -53,25 +109,66 @@ export interface JsonCodeEditorPaneProps {
   value: string;
 }
 
+export interface JsonEditorPosition {
+  readonly column: number;
+  readonly lineNumber: number;
+}
+
+export interface JsonEditorRange {
+  readonly startLineNumber: number;
+  readonly startColumn: number;
+  readonly endLineNumber: number;
+  readonly endColumn: number;
+}
+
+const MONACO_DECORATION_STICKINESS_NEVER_GROWS = 1;
+
+export function createJsonEditorActiveSourceRangeDecorations(
+  activeSourceRange: JsonEditorRange | null | undefined,
+): editor.IModelDeltaDecoration[] {
+  if (!activeSourceRange) return [];
+
+  return [
+    {
+      range: activeSourceRange,
+      options: {
+        className: 'ui-json-code-editor-pane__active-source-range',
+        stickiness: MONACO_DECORATION_STICKINESS_NEVER_GROWS,
+      },
+    },
+  ];
+}
+
 export function JsonCodeEditorPane({
+  activeSourceRange = null,
   documentParseError = null,
   file,
   jsonSchema = null,
+  revealPosition = null,
+  onCursorPositionChange,
   onChange,
   onEditorMount,
+  problems: externalProblems = [],
   onSave,
   readOnly = false,
   showProblemsPanel = true,
   theme = 'dark',
   value,
 }: JsonCodeEditorPaneProps) {
-  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
-  const markerListenerRef = useRef<Monaco.IDisposable | null>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const activeSourceRangeDecorationsRef = useRef<editor.IEditorDecorationsCollection | null>(null);
+  const markerListenerRef = useRef<IDisposable | null>(null);
+  const cursorListenerRef = useRef<IDisposable | null>(null);
+  const cursorChangeRef = useRef<typeof onCursorPositionChange>(onCursorPositionChange);
   const [monacoProblems, setMonacoProblems] = useState<JsonEditorProblem[]>([]);
   const [showProblems, setShowProblems] = useState(false);
 
+  useEffect(() => {
+    cursorChangeRef.current = onCursorPositionChange;
+  }, [onCursorPositionChange]);
+
   const problems = useMemo(() => {
-    if (!documentParseError) return monacoProblems;
+    if (!documentParseError) return [...externalProblems, ...monacoProblems];
     return [
       {
         endColumn: 1,
@@ -81,9 +178,11 @@ export function JsonCodeEditorPane({
         startColumn: 1,
         startLineNumber: 1,
       },
+      ...externalProblems,
       ...monacoProblems,
     ];
-  }, [documentParseError, monacoProblems]);
+  }, [documentParseError, externalProblems, monacoProblems]);
+  const problemSummary = useMemo(() => summarizeJsonEditorProblems(problems), [problems]);
 
   const previousProblemCountRef = useRef(0);
   useEffect(() => {
@@ -97,18 +196,61 @@ export function JsonCodeEditorPane({
     () => () => {
       markerListenerRef.current?.dispose();
       markerListenerRef.current = null;
+      cursorListenerRef.current?.dispose();
+      cursorListenerRef.current = null;
+      activeSourceRangeDecorationsRef.current?.clear();
+      activeSourceRangeDecorationsRef.current = null;
     },
     [],
   );
 
-  const configureJsonSchema = (monaco: typeof Monaco, path: string) => {
+  useEffect(() => {
+    if (!revealPosition) return;
+
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    editor.setPosition(revealPosition);
+    editor.revealPositionInCenter(revealPosition);
+  }, [revealPosition?.column, revealPosition?.lineNumber]);
+
+  const syncActiveSourceRangeDecorations = (monacoEditor: editor.IStandaloneCodeEditor) => {
+    const decorations = createJsonEditorActiveSourceRangeDecorations(activeSourceRange);
+    if (decorations.length === 0) {
+      activeSourceRangeDecorationsRef.current?.clear();
+      return;
+    }
+
+    if (!activeSourceRangeDecorationsRef.current) {
+      activeSourceRangeDecorationsRef.current =
+        monacoEditor.createDecorationsCollection(decorations);
+      return;
+    }
+
+    activeSourceRangeDecorationsRef.current.set(decorations);
+  };
+
+  useEffect(() => {
+    const monacoEditor = editorRef.current;
+    if (!monacoEditor) return;
+
+    syncActiveSourceRangeDecorations(monacoEditor);
+  }, [
+    activeSourceRange?.endColumn,
+    activeSourceRange?.endLineNumber,
+    activeSourceRange?.startColumn,
+    activeSourceRange?.startLineNumber,
+  ]);
+
+  const configureJsonSchema = (monaco: WorkbenchMonaco, path: string) => {
     if (!jsonSchema) return;
 
-    const jsonDefaults = (
-      monaco.languages.json as unknown as {
-        jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
-      }
-    ).jsonDefaults;
+    const jsonLanguage = monaco.languages.json as unknown as
+      | {
+          jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
+        }
+      | undefined;
+    const jsonDefaults = jsonLanguage?.jsonDefaults;
     if (!jsonDefaults) return;
 
     jsonDefaults.setDiagnosticsOptions({
@@ -116,7 +258,7 @@ export function JsonCodeEditorPane({
       enableSchemaRequest: false,
       schemas: [
         {
-          uri: 'https://workbench-kit.dev/schemas/widget-document.schema.json',
+          uri: 'https://workbench-kit.dev/schemas/widget-document.v1.jdw.schema.json',
           fileMatch: [path],
           schema: jsonSchema,
         },
@@ -126,9 +268,18 @@ export function JsonCodeEditorPane({
 
   const handleMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
+    syncActiveSourceRangeDecorations(editor);
     configureJsonSchema(monaco, file.path);
     onEditorMount?.(editor, monaco);
 
+    cursorListenerRef.current?.dispose();
+    cursorListenerRef.current = editor.onDidChangeCursorPosition((event) => {
+      cursorChangeRef.current?.({
+        column: event.position.column,
+        lineNumber: event.position.lineNumber,
+      });
+    });
+
     if (onSave) {
       editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
         onSave();
@@ -146,7 +297,7 @@ export function JsonCodeEditorPane({
     const updateProblems = () => {
       const markers = monaco.editor.getModelMarkers({ resource: model.uri });
       setMonacoProblems(
-        markers.map((marker: Monaco.editor.IMarker) => ({
+        markers.map((marker: editor.IMarker) => ({
           message: marker.message,
           severity: marker.severity,
           startLineNumber: marker.startLineNumber,
@@ -225,12 +376,12 @@ export function JsonCodeEditorPane({
           <WorkbenchStatusBarSection>
             <WorkbenchStatusBarItem
               active={showProblems}
-              icon={problems.length > 0 ? 'error' : 'check'}
-              status={problems.length > 0 ? 'failed' : 'completed'}
+              icon={problemSummary.icon}
+              status={problemSummary.status}
               title="Toggle problems"
               onClick={() => setShowProblems((current) => !current)}
             >
-              {problems.length > 0 ? `${problems.length} Problems` : 'No Problems'}
+              {problemSummary.label}
             </WorkbenchStatusBarItem>
           </WorkbenchStatusBarSection>
         </WorkbenchStatusBar>