fix(genre-tree): always render the Summary field in the info panel

CHANGELOG.md

@@ -15,7 +15,8 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
   removed along with its export from `@behindthemusictree/app-kit`.
 - **genre-tree**: `CriteriaDetailed` now includes `summary` (nullable string), matching the
   backend's detail genre response, and `GenreTreeView`'s `renderExtraDetails` now displays it
-  above the essential tracks list when present.
+  as a labeled "Summary" field above the essential tracks list, showing "—" when there is no
+  value, consistent with the always-visible core fields.
 
 ### Fixed
 

packages/app-kit/src/genre-tree/GenreTreeView.test.tsx

@@ -839,7 +839,7 @@ describe("GenreTreeView", () => {
       expect(output).toBeNull();
     });
 
-    it("returns null when there is no summary, no essential tracks, and nothing archived", () => {
+    it("renders a blank summary placeholder when there is no summary, no essential tracks, and nothing archived", () => {
       useListFullGenrePlaylistsMock.mockReturnValue({
         data: { results: [makePlaylist({ uuid: "gp1", criteria: { uuid: "c1", name: "Jazz" } })] },
         isPending: false,
@@ -867,8 +867,10 @@ describe("GenreTreeView", () => {
       const output = treeWheelPropsMock.mock.calls.at(-1)?.[0].renderExtraDetails({
         id: "gp1",
       });
+      render(<>{output}</>);
 
-      expect(output).toBeNull();
+      expect(screen.getByText("Summary")).toBeInTheDocument();
+      expect(screen.getByText("—")).toBeInTheDocument();
     });
   });
 });

packages/app-kit/src/genre-tree/GenreTreeView.tsx

@@ -108,30 +108,34 @@ export function GenreTreeView<T extends TrackBase>({
       }
 
       const { summary, essentialTracks, tracksArchivedCount } = selectedGenreDetail;
-      if (!summary && essentialTracks.length === 0 && tracksArchivedCount === 0) {
-        return null;
-      }
 
       return (
-        <div className="flex flex-col gap-3 text-sm text-gray-700">
-          {summary && <p>{summary}</p>}
+        <>
+          <div className="gtv-info-panel-children">
+            <span className="gtv-info-panel-children-title">Summary</span>
+            <p>{summary ?? "—"}</p>
+          </div>
           {tracksArchivedCount > 0 && (
-            <div>
-              <span className="font-semibold">Archived tracks: </span>
-              {tracksArchivedCount}
+            <div className="gtv-info-panel-children">
+              <span className="gtv-info-panel-children-title">
+                Archived tracks
+              </span>
+              <p>{tracksArchivedCount}</p>
             </div>
           )}
           {essentialTracks.length > 0 && (
-            <div>
-              <div className="font-semibold mb-1">Essential tracks</div>
+            <div className="gtv-info-panel-children">
+              <span className="gtv-info-panel-children-title">
+                Essential tracks
+              </span>
               <ul className="list-disc pl-5">
                 {essentialTracks.map((track) => (
                   <li key={track.uuid}>{track.title}</li>
                 ))}
               </ul>
             </div>
           )}
-        </div>
+        </>
       );
     },
     [