@principal-ai/subsystems-react 0.24.8 → 0.24.10

package/src/subsystem/DiagnosticToggle.tsx

@@ -1,10 +1,11 @@
 /**
- * DiagnosticToggle — the subsystem graph's status/report chip.
+ * DiagnosticToggle — the subsystem graph's status + diagnostics-view toggle.
  *
  * A compact button that lives in the sidebar title row (beside the description
  * toggle). It carries the *status* of the graph's last verification pass in its
- * icon color + count and, on click, opens the full report (the host owns that
- * report; this component only surfaces state and calls `onOpen`).
+ * icon color + count, and toggles the sidebar between the diagnostics list and
+ * the normal files/walkthroughs view. The graph owns that view; this component
+ * only surfaces state and calls `onToggle`.
  *
  * Status → color (theme):
  * - `ok`      → success (green)
@@ -19,6 +20,7 @@
 import { useState } from 'react';
 import { Activity, Loader2 } from 'lucide-react';
 import { useTheme } from '@principal-ade/industry-theme';
+import { hexWithAlpha } from './nodes';
 
 export type SubsystemDiagnosticStatus = 'ok' | 'issues' | 'gaps' | 'unknown';
 
@@ -30,10 +32,12 @@ export interface SubsystemDiagnostic {
   stale?: boolean;
   /** A verification pass is running right now. */
   busy?: boolean;
+  /** True while the diagnostics list is showing (pressed state). */
+  active?: boolean;
   /** Tooltip / a11y label override; otherwise derived from `status`. */
   title?: string;
-  /** Click — open the report. */
-  onOpen?: () => void;
+  /** Click — toggle the diagnostics list. */
+  onToggle?: () => void;
 }
 
 /** Resolve the status accent from the active theme. */
@@ -66,8 +70,8 @@ export function diagnosticTitle(diagnostic: SubsystemDiagnostic): string {
         : 'Diagnostics: unconfirmed claims';
   else head = 'Diagnostics: not checked yet';
   if (busy) return `${head} — checking…`;
-  if (stale) return `${head} (stale) — open for details`;
-  return `${head} — open report`;
+  if (stale) return `${head} (stale) — toggle the list`;
+  return `${head} — toggle the list`;
 }
 
 export interface SubsystemDiagnosticToggleProps extends SubsystemDiagnostic {
@@ -80,16 +84,22 @@ export function SubsystemDiagnosticToggle({
   issueCount,
   stale = false,
   busy = false,
+  active = false,
   size = 14,
-  onOpen,
+  onToggle,
   ...rest
 }: SubsystemDiagnosticToggleProps) {
   const { theme } = useTheme();
   const [hover, setHover] = useState(false);
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const color = diagnosticStatusColor(status, theme.colors, muted);
-  const label = diagnosticTitle({ status, issueCount, stale, busy, ...rest });
+  const label = diagnosticTitle({ status, issueCount, stale, busy, active, ...rest });
   const showCount = issueCount != null && issueCount > 0;
+  const background = active
+    ? hexWithAlpha(color, hover ? 0.24 : 0.16)
+    : hover
+      ? theme.colors.border
+      : 'transparent';
 
   return (
     <>
@@ -98,12 +108,12 @@ export function SubsystemDiagnosticToggle({
       )}
       <button
         type="button"
-        onClick={onOpen}
+        onClick={onToggle}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         title={label}
         aria-label={label}
-        aria-haspopup="dialog"
+        aria-pressed={active}
         style={{
           display: 'inline-flex',
           alignItems: 'center',
@@ -112,7 +122,7 @@ export function SubsystemDiagnosticToggle({
           padding: showCount ? '0 7px 0 6px' : '0 5px',
           border: 'none',
           borderRadius: 4,
-          background: hover ? theme.colors.border : 'transparent',
+          background,
           color,
           cursor: 'pointer',
           flexShrink: 0,

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -169,19 +169,20 @@ export interface SubsystemComponentGraphProps {
   sidebarAfterDescription?: ReactNode;
   /**
    * Diagnostics status chip in the sidebar title row (beside the description
-   * toggle). Shows the last verification pass's state as an icon color + count;
-   * `onOpen` opens the full report. Omit to hide the chip.
+   * toggle). Shows the last verification pass's state as an icon color + count,
+   * and toggles the sidebar between the diagnostics list and the normal
+   * files/walkthroughs view. Omit to hide the chip.
    */
   diagnostic?: SubsystemDiagnostic;
   /**
    * Verification issues for this graph (audit findings). When diagnostics are
-   * active (see `showIssues`) the sidebar's bottom panel becomes the issue
-   * list instead of the file tree / walkthroughs.
+   * active the sidebar's bottom panel becomes the issue list instead of the
+   * file tree / walkthroughs.
    */
   issues?: SubsystemIssue[];
   /**
-   * Force the sidebar into diagnostics mode. Defaults to `true` whenever
-   * `issues` is non-empty (and nothing else has been forced).
+   * Pin diagnostics mode (controlled). When omitted, the sidebar seeds
+   * diagnostics on iff `issues` is non-empty, and the title-row chip toggles it.
    */
   showIssues?: boolean;
   /** Click an issue — focus its target on the graph / open detail. */
@@ -965,10 +966,17 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
   // own owner-avatar header. Clicking a header collapses that repo's tree.
   const repoGroups = useMemo(() => buildRepoGroups(components), [components]);
   const hasWalkthroughs = useMemo(() => (walkthroughs?.length ?? 0) > 0, [walkthroughs]);
-  // Diagnostics mode: the bottom panel shows the issue list instead of the
-  // file tree / walkthroughs. Explicit `showIssues` wins; otherwise any issues
-  // present turn it on.
-  const issuesActive = showIssues ?? (issues?.length ?? 0) > 0;
+  // Diagnostics view in the sidebar. Uncontrolled unless the host pins
+  // `showIssues`: the title-row chip toggles it, seeded from issues presence.
+  const [diagnosticsOpen, setDiagnosticsOpen] = useState<boolean>(
+    showIssues ?? (issues?.length ?? 0) > 0,
+  );
+  const controlledIssues = showIssues !== undefined;
+  const issuesActive = controlledIssues ? showIssues : diagnosticsOpen;
+  const toggleIssues = () => {
+    if (!controlledIssues) setDiagnosticsOpen((v) => !v);
+    diagnostic?.onToggle?.();
+  };
   const [collapsedRepos, setCollapsedRepos] = useState<Set<string>>(new Set());
   const toggleRepoCollapsed = useCallback((key: string) => {
     setCollapsedRepos((prev) => {
@@ -1512,7 +1520,13 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
                   marginLeft: title ? undefined : 'auto',
                 }}
               >
-                {diagnostic && <SubsystemDiagnosticToggle {...diagnostic} />}
+                {diagnostic && (
+                  <SubsystemDiagnosticToggle
+                    {...diagnostic}
+                    active={issuesActive}
+                    onToggle={toggleIssues}
+                  />
+                )}
                 {description && (
                   <button
                     type="button"