@principal-ai/subsystems-react 0.38.0 → 0.39.0

package/src/stories/Subsystem/ComponentGraph/NodeAnatomy.stories.tsx

@@ -1,21 +1,27 @@
 import React from 'react';
 import '@xyflow/react/dist/style.css';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ReactFlowProvider, type NodeProps } from '@xyflow/react';
+import { ReactFlowProvider, type Node, type NodeProps } from '@xyflow/react';
 import { ThemeProvider, defaultEditorTheme, useTheme } from '@principal-ade/industry-theme';
-import { FileX, Search, MapPin, Shapes, Sigma } from 'lucide-react';
 import { SubsystemComponentNode } from '../../../subsystem/nodes';
 import type { GraphifyComponentDetail } from '../../../graphify';
-import type { SubsystemComponent, SubsystemGraphNode } from '../../../subsystem/model';
+import type {
+  SubsystemComponent,
+  SubsystemGraphNodeData,
+  SubsystemNodeIssue,
+} from '../../../subsystem/model';
 
 /**
  * NodeAnatomy — a dissection of the component node's visual language.
  *
  * Section 1 lays out every channel the node already spends (border, corners,
  * left badge, right badge cluster, fill) so an added channel can be chosen
- * against it. Section 2 shows the *proposed* diagnostics layer (severity ring +
- * earliest-rung corner chip) composed over real nodes. Nothing here is wired
- * into the production node yet — this is the reference to design against.
+ * against it. Section 2 shows the diagnostics layer (dotted border +
+ * earliest-rung corner chip) composed over real nodes — now wired into the
+ * production node as `data.issue` (see `NodeIssueOverlay` in `nodes.tsx` and
+ * `issueBadgeByAlias` in `SubsystemComponentGraph`); this story stays the
+ * visual reference. Sections 3–4 (verification ladder, diagnostic hover) are
+ * still proposals.
  */
 const meta = {
   title: 'Subsystem/ComponentGraph/NodeAnatomy',
@@ -42,14 +48,19 @@ const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
 
 function nodeProps(
   component: SubsystemComponent,
-  opts?: { selected?: boolean; width?: number; height?: number },
-): NodeProps<SubsystemGraphNode> {
+  opts?: {
+    selected?: boolean;
+    width?: number;
+    height?: number;
+    issue?: SubsystemNodeIssue;
+  },
+): NodeProps<Node<SubsystemGraphNodeData, 'subsystem-component'>> {
   return {
-    data: { component },
+    data: { component, ...(opts?.issue ? { issue: opts.issue } : {}) },
     selected: opts?.selected ?? false,
     width: opts?.width ?? NODE_W,
     height: opts?.height ?? NODE_H,
-  } as unknown as NodeProps<SubsystemGraphNode>;
+  } as unknown as NodeProps<Node<SubsystemGraphNodeData, 'subsystem-component'>>;
 }
 
 // ---------------------------------------------------------------------------
@@ -219,7 +230,7 @@ function ChannelCell({ channel }: { channel: Channel }) {
 
 const LEGEND: Array<[string, string]> = [
   ['border color', 'construct kind (Pierre palette) — or primary when a file is open (spotlight)'],
-  ['border style', 'solid normally; dashed goldenrod when `proposed`'],
+  ['border style', 'solid normally; dashed goldenrod when `proposed`; dotted when the node has findings'],
   ['border width', '2px; 4px when selected or file-matched'],
   ['corners', '8px rounded; square for `external`'],
   ['left badge (top edge)', 'construct / framework stereotype / entityKind'],
@@ -290,14 +301,6 @@ function Legend() {
 type Severity = 'error' | 'info';
 type Rung = 'file' | 'symbol' | 'declaration' | 'type' | 'signature';
 
-const RUNG_ICON = {
-  file: FileX,
-  symbol: Search,
-  declaration: MapPin,
-  type: Shapes,
-  signature: Sigma,
-} as const;
-
 const RUNG_LABEL: Record<Rung, string> = {
   file: 'file',
   symbol: 'symbol',
@@ -317,51 +320,13 @@ function IssueOverlayNode({
   rung: Rung;
   count?: number;
 }) {
-  const { theme } = useTheme();
-  const color =
-    severity === 'error'
-      ? (theme.colors.error ?? '#e5534b')
-      : (theme.colors.info ?? '#0893d2');
-  // Gaps (info) read hollow/dashed — "couldn't confirm"; errors solid.
-  const dashed = severity === 'info';
-  const Icon = RUNG_ICON[rung];
-  const badgeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
+  // The diagnostics layer is wired into the production node — the border turns
+  // dotted (construct color kept) and the chip carries severity + rung + count.
   return (
     <div style={{ position: 'relative', width: NODE_W, height: NODE_H }}>
-      <SubsystemComponentNode {...nodeProps(component)} />
-      {/* severity ring — additive, outside the construct-colored border */}
-      <div
-        style={{
-          position: 'absolute',
-          inset: -5,
-          borderRadius: 11,
-          border: `2px ${dashed ? 'dashed' : 'solid'} ${color}`,
-          pointerEvents: 'none',
-        }}
+      <SubsystemComponentNode
+        {...nodeProps(component, { issue: { severity, rung, count } })}
       />
-      {/* earliest-rung corner chip + count */}
-      <div
-        style={{
-          position: 'absolute',
-          right: -8,
-          bottom: -7,
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: 3,
-          padding: '1px 6px',
-          borderRadius: 999,
-          border: `1.5px solid ${color}`,
-          background: badgeBg,
-          color,
-          fontFamily: MONO,
-          fontSize: 10,
-          fontWeight: 600,
-          lineHeight: 1.4,
-        }}
-      >
-        <Icon size={11} color={color} />
-        {count > 1 ? <span>{count}</span> : null}
-      </div>
     </div>
   );
 }
@@ -454,7 +419,7 @@ const ISSUE_EXAMPLES: Array<{
   },
 ];
 
-/** Proposed diagnostics layer over real nodes — ring by severity, chip = earliest rung. */
+/** Diagnostics layer over real nodes — dotted border + earliest-rung chip. */
 export const IssueOverlayProposal: Story = {
   render: () => {
     return (
@@ -470,20 +435,22 @@ export const IssueOverlayProposal: Story = {
               marginBottom: 10,
             }}
           >
-            Proposed · not wired yet
+            Wired · data.issue
           </div>
           <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, lineHeight: 1.7, color: '#b0b0b0' }}>
             <li>
-              <b>Ring</b> (outside the construct border): <b>solid</b> = error (contradicts
-              source), <b>dashed</b> = info/gap (couldn&apos;t confirm). Color = severity.
+              <b>Dotted border</b> (keeps the construct color) = the node has findings — a sibling of
+              <b> proposed</b>&apos;s dashed, kept distinct so the two don&apos;t read alike.
             </li>
             <li>
-              <b>Corner chip</b> = the <i>earliest failing rung</i> by verification order (file →
-              symbol → declaration → type → signature), with a count when a node has more than one.
+              <b>Corner chip</b> carries severity (<b>red</b> = error / contradicts source,{' '}
+              <b>amber</b> = info/gap / couldn&apos;t confirm) and the <i>earliest failing rung</i> by
+              verification order (file → symbol → declaration → type → signature), with a count when a
+              node has more than one.
             </li>
             <li>
-              First cell is the clean node for contrast — no ring, no chip. Compose with selection,
-              file-open spotlight, and dimming without touching the border.
+              First cell is the clean node for contrast — solid border, no chip. Severity rides on the
+              chip so it never competes with the construct palette.
             </li>
           </ul>
         </div>
@@ -526,7 +493,7 @@ function VerificationSquares({ statuses }: { statuses: RungStatus[] }) {
   const { theme } = useTheme();
   const success = theme.colors.success ?? '#2da44e';
   const error = theme.colors.error ?? '#e5534b';
-  const info = theme.colors.info ?? '#0893d2';
+  const warning = theme.colors.warning ?? '#d4a017';
   const dim = theme.colors.border ?? '#444';
   const nodeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
   return (
@@ -549,7 +516,7 @@ function VerificationSquares({ statuses }: { statuses: RungStatus[] }) {
         if (status === 'failed') return <span key={i} style={{ ...base, background: error }} />;
         if (status === 'unconfirmed')
           return (
-            <span key={i} style={{ ...base, boxShadow: `inset 0 0 0 1.5px ${info}` }} />
+            <span key={i} style={{ ...base, boxShadow: `inset 0 0 0 1.5px ${warning}` }} />
           );
         // not reached / skipped — a filled neutral so it stays legible on the node
         return <span key={i} style={{ ...base, background: dim }} />;
@@ -653,7 +620,7 @@ export const VerificationSteps: Story = {
         </div>
         <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, lineHeight: 1.7, color: '#b0b0b0' }}>
           <li>
-            <b>green</b> = verified, <b>red</b> = failed, <b>hollow blue</b> = unconfirmed (info),
+            <b>green</b> = verified, <b>red</b> = failed, <b>hollow amber</b> = unconfirmed (info),
             <b> grey</b> = skipped / not reached.
           </li>
           <li>
@@ -694,7 +661,7 @@ function IssueHoverBadge({ severity, label }: { severity: Severity; label: strin
   const color =
     severity === 'error'
       ? (theme.colors.error ?? '#e5534b')
-      : (theme.colors.info ?? '#0893d2');
+      : (theme.colors.warning ?? '#d4a017');
   return (
     <div
       style={{

package/src/stories/Subsystem/ComponentGraph/StoreValueType.stories.tsx

@@ -0,0 +1,261 @@
+import '@xyflow/react/dist/style.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactFlowProvider, type NodeProps } from '@xyflow/react';
+import { ThemeProvider, defaultEditorTheme, useTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentNode } from '../../../subsystem/nodes';
+import type { GraphifyComponentDetail } from '../../../graphify';
+import type { SubsystemComponent, SubsystemGraphNode } from '../../../subsystem/model';
+
+/**
+ * StoreValueType — proposal sketch (not wired yet).
+ *
+ * A store is a state declaration, so it should name and type itself like every
+ * other declaration. `SubsystemStoreDeclaration` has no field for a store's value
+ * type today; the value type lives in the **declaration panel** (see the
+ * `Subsystem/StoreValueTypeDeclaration` story), shown when the node is clicked —
+ * NOT as a node subtitle.
+ *
+ *   title    = the state declaration's name (the variable name) — already shipped
+ *   badge    = storage backing (memory / disk / db) — already shipped
+ *   valueType = declaration panel only (no node channel)
+ *
+ * Cases also contrast what a wrong anchor renders: a store whose anchor is the
+ * accessor shows the accessor's name instead of the state's.
+ */
+const meta = {
+  title: 'Subsystem/ComponentGraph/StoreValueType',
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <ReactFlowProvider>
+          <Story />
+        </ReactFlowProvider>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PURL = 'pkg:github/principal-ai/subsystem-modeling';
+const NODE_W = 230;
+const NODE_H = 92;
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+
+/**
+ * A store component with the *proposed* `valueType` field. The field is not in
+ * the schema yet, so it is carried here as `declaration.valueType` (the shape we
+ * intend to land) and read directly by this story graph.
+ */
+type ProposedStoreComponent = SubsystemComponent & {
+  declaration: GraphifyComponentDetail & { valueType?: string };
+};
+
+function nodeProps(
+  component: SubsystemComponent,
+  opts?: { selected?: boolean; width?: number; height?: number },
+): NodeProps<SubsystemGraphNode> {
+  return {
+    data: { component },
+    selected: opts?.selected ?? false,
+    width: opts?.width ?? NODE_W,
+    height: opts?.height ?? NODE_H,
+  } as unknown as NodeProps<SubsystemGraphNode>;
+}
+
+// ---------------------------------------------------------------------------
+// Fixtures — the 23-store audit shapes, rendered with the proposed channels.
+// ---------------------------------------------------------------------------
+
+const CASES: Array<{ label: string; note: string; component: ProposedStoreComponent }> = [
+  {
+    label: 'memory · declares its value type',
+    note: 'title = state name · subtitle = value type · badge = memory.',
+    component: {
+      alias: 'feeds',
+      name: 'feeds',
+      construct: 'store',
+      file: 'packages/subsystems-studio/src/bun/opencode-v2-live.ts',
+      purl: PURL,
+      symbol: 'feeds',
+      declaration: {
+        kind: 'store',
+        storage: 'memory',
+        properties: [],
+        valueType: 'Map<string, OpencodeLiveFeedState>',
+      } as GraphifyComponentDetail & { valueType: string },
+    },
+  },
+  {
+    label: 'memory · closure-local (no addressable symbol)',
+    note: 'state is a factory-local Map; anchor is non-exact → agent-confirmed store.',
+    component: {
+      alias: 'landed',
+      name: 'landed',
+      construct: 'store',
+      file: 'packages/subsystems-studio/src/bun/maintainer-probe.ts',
+      purl: PURL,
+      symbol: 'landed',
+      declaration: {
+        kind: 'store',
+        storage: 'memory',
+        properties: [],
+        valueType: 'Map<string, number>',
+      } as GraphifyComponentDetail & { valueType: string },
+    },
+  },
+  {
+    label: 'memory · no value type (the gap)',
+    note: 'subtitle shows a muted `type: ?` — the completeness finding made visible.',
+    component: {
+      alias: 'tabs',
+      name: 'tabs',
+      construct: 'store',
+      file: 'packages/subsystems-studio/src/bun/index.ts',
+      purl: PURL,
+      symbol: 'tabs',
+      declaration: {
+        kind: 'store',
+        storage: 'memory',
+        properties: [],
+      } as GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'disk · value type',
+    note: 'run log on the filesystem — badge reads `disk`.',
+    component: {
+      alias: 'runs',
+      name: 'runs',
+      construct: 'store',
+      file: 'packages/subsystems-studio/src/bun/subsystem-model-runs.ts',
+      purl: PURL,
+      symbol: 'runs',
+      declaration: {
+        kind: 'store',
+        storage: 'disk',
+        properties: [],
+        valueType: 'SubsystemModelRun[]',
+      } as GraphifyComponentDetail & { valueType: string },
+    },
+  },
+  {
+    label: 'db · row / members shape',
+    note: 'table name as title; value type is the row shape (members[]).',
+    component: {
+      alias: 'session_v2',
+      name: 'session_v2',
+      construct: 'store',
+      file: 'packages/subsystems-studio/src/bun/maintain-sessions.ts',
+      purl: PURL,
+      symbol: 'session_v2',
+      declaration: {
+        kind: 'store',
+        storage: 'external',
+        properties: [
+          { name: 'id', type: 'text' },
+          { name: 'title', type: 'text' },
+          { name: 'agent', type: 'text' },
+          { name: 'time_created', type: 'integer' },
+        ],
+      } as GraphifyComponentDetail,
+    },
+  },
+];
+
+/**
+ * Renders the component node as it should appear: title = the state
+ * declaration's name, badge = storage backing. The value type is intentionally
+ * NOT shown here — it belongs to the declaration panel (see
+ * `Subsystem/StoreValueTypeDeclaration`), shown when the node is clicked.
+ */
+function StoreNode({ component }: { component: ProposedStoreComponent }) {
+  return (
+    <div style={{ position: 'relative', width: NODE_W, height: NODE_H }}>
+      <SubsystemComponentNode {...nodeProps(component)} />
+    </div>
+  );
+}
+
+function Cell({
+  label,
+  note,
+  component,
+}: {
+  label: string;
+  note: string;
+  component: ProposedStoreComponent;
+}) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const valueType = component.declaration?.valueType;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: 280 }}>
+      <div style={{ fontFamily: MONO, fontSize: 11, color: muted }}>{label}</div>
+      <div style={{ position: 'relative', width: NODE_W, height: NODE_H, margin: '14px 0 16px' }}>
+        <StoreNode component={component} />
+      </div>
+      <div style={{ fontSize: 10, fontFamily: MONO, color: muted, lineHeight: 1.5 }}>
+        {note}
+        <br />
+        panel: {valueType ?? '(no value type — gap)'}
+      </div>
+    </div>
+  );
+}
+
+/** Store nodes: title = state name, badge = storage. Value type lives in the panel. */
+export const StoreValueType: Story = {
+  render: () => (
+    <div style={{ padding: 32, minHeight: '100vh', boxSizing: 'border-box' }}>
+      <Header
+        title="Store nodes"
+        lines={[
+          'A store is a state declaration, so its node names it: title = the state declaration (the variable name). The storage badge (memory / disk / db) shows how it persists.',
+          'The value type is not a node channel — it belongs to the declaration panel, shown when the node is clicked (see Subsystem/StoreValueTypeDeclaration).',
+          'The caption under each node shows what the declaration panel renders for it.',
+        ]}
+      />
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '40px 28px',
+          alignItems: 'flex-start',
+          marginTop: 28,
+        }}
+      >
+        {CASES.map((c) => (
+          <Cell key={c.component.alias} label={c.label} note={c.note} component={c.component} />
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+function Header({ title, lines }: { title: string; lines: string[] }) {
+  return (
+    <div style={{ maxWidth: 760 }}>
+      <div
+        style={{
+          fontSize: 12,
+          fontFamily: MONO,
+          textTransform: 'uppercase',
+          letterSpacing: 0.4,
+          color: '#a0a0a0',
+          marginBottom: 10,
+        }}
+      >
+        {title}
+      </div>
+      <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12, lineHeight: 1.7, color: '#b0b0b0' }}>
+        {lines.map((l) => (
+          <li key={l}>{l}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/stories/Subsystem/StoreValueTypeDeclaration.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { generateDeclarationString } from '../../subsystem/formatDeclaration';
+import type { SubsystemComponent } from '../../subsystem/model';
+
+/**
+ * StoreValueType — how a store's declared value type renders in the
+ * **declaration panel** (the click panel), not on the node.
+ *
+ * A store is a state declaration, so it declares its type the way every other
+ * declaration does: `declaration.valueType` (`Map<string, FeedState>` for a state
+ * block, a row type for a table), orthogonal to `declaration.storage`. The
+ * rendered string comes from the real `generateStore` in
+ * `formatDeclaration.ts` — not a sketch.
+ *
+ * The node itself is unchanged: title = the state declaration's name, badge =
+ * storage backing. The value type is panel-only.
+ */
+const meta = {
+  title: 'Subsystem/StoreValueTypeDeclaration',
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ maxWidth: '80ch', margin: '0 auto' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta;
+export default meta;
+
+type Case = {
+  label: string;
+  note: string;
+  component: SubsystemComponent;
+};
+
+const CASES: Case[] = [
+  {
+    label: 'memory · value type, no named members',
+    note: 'The store declares what it holds; nothing else to render.',
+    component: {
+      id: 'feeds',
+      name: 'feeds',
+      construct: 'store',
+      symbol: 'feeds',
+      file: 'packages/subsystems-studio/src/bun/opencode-v2-live.ts',
+      purl: 'pkg:github/principal-ai/subsystem-modeling',
+      declaration: {
+        kind: 'store',
+        storage: 'memory',
+        properties: [],
+        valueType: 'Map<string, OpencodeLiveFeedState>',
+      },
+    },
+  },
+  {
+    label: 'memory · closure-local state',
+    note: 'State created inside a factory, reached through an accessor. Still a declaration.',
+    component: {
+      id: 'landed',
+      name: 'landed',
+      construct: 'store',
+      symbol: 'landed',
+      file: 'packages/subsystems-studio/src/bun/maintainer-probe.ts',
+      purl: 'pkg:github/principal-ai/subsystem-modeling',
+      declaration: {
+        kind: 'store',
+        storage: 'memory',
+        properties: [],
+        valueType: 'Map<string, number>',
+      },
+    },
+  },
+  {
+    label: 'disk · value type + named members',
+    note: 'Members render as a typed body under the value type.',
+    component: {
+      id: 'runs',
+      name: 'runs',
+      construct: 'store',
+      symbol: 'runs',
+      file: 'packages/subsystems-studio/src/bun/subsystem-model-runs.ts',
+      purl: 'pkg:github/principal-ai/subsystem-modeling',
+      declaration: {
+        kind: 'store',
+        storage: 'disk',
+        valueType: 'SubsystemModelRun[]',
+        properties: [{ name: 'runs', type: 'SubsystemModelRun[]' }],
+      },
+    },
+  },
+  {
+    label: 'memory · no value type → the gap',
+    note: 'Says so explicitly — the completeness finding reads this back.',
+    component: {
+      id: 'tabs',
+      name: 'tabs',
+      construct: 'store',
+      symbol: 'tabs',
+      file: 'packages/subsystems-studio/src/bun/index.ts',
+      purl: 'pkg:github/principal-ai/subsystem-modeling',
+      declaration: { kind: 'store', storage: 'memory', properties: [] },
+    },
+  },
+  {
+    label: 'db · row shape, no scalar value type',
+    note: 'A table names its row/record type; columns stay as members.',
+    component: {
+      id: 'session_v2',
+      name: 'session_v2',
+      construct: 'store',
+      symbol: 'session_v2',
+      file: 'packages/subsystems-studio/src/bun/maintain-sessions.ts',
+      purl: 'pkg:github/principal-ai/subsystem-modeling',
+      declaration: {
+        kind: 'store',
+        storage: 'external',
+        properties: [
+          { name: 'id', type: 'text' },
+          { name: 'title', type: 'text' },
+          { name: 'agent', type: 'text' },
+          { name: 'time_created', type: 'integer' },
+        ],
+      },
+    },
+  },
+];
+
+function Panel({ component }: { component: SubsystemComponent }) {
+  return (
+    <pre
+      style={{
+        margin: 0,
+        padding: '10px 12px',
+        borderRadius: 6,
+        background: 'rgba(0,0,0,0.35)',
+        border: '1px solid rgba(255,255,255,0.08)',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        fontSize: 12,
+        lineHeight: 1.5,
+        color: '#e5e7eb',
+        whiteSpace: 'pre-wrap',
+        overflowX: 'auto',
+      }}
+    >
+      {generateDeclarationString(component)}
+    </pre>
+  );
+}
+
+export const StoreDeclaration: StoryObj = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
+      <div style={{ fontSize: 12, color: '#b0b0b0', lineHeight: 1.7 }}>
+        <strong>Rendered by the real <code>generateStore</code>.</strong> A store declares
+        its type the way every other declaration does — <code>declaration.valueType</code> —
+        and the value type is panel-only, not a node channel. The node stays{' '}
+        <code>name → title</code>, <code>storage → badge</code>.
+      </div>
+      {CASES.map((c) => (
+        <div key={c.component.id}>
+          <div
+            style={{
+              fontFamily: 'ui-monospace, monospace',
+              fontSize: 12,
+              color: '#f3f4f6',
+              marginBottom: 6,
+            }}
+          >
+            {c.label}
+          </div>
+          <div style={{ fontSize: 11, color: '#9ca3af', marginBottom: 8 }}>{c.note}</div>
+          <Panel component={c.component} />
+        </div>
+      ))}
+    </div>
+  ),
+};