Move mapping beside database status

agent.md

@@ -54,7 +54,7 @@ This project replaces the Excel/VBA workflow named `Catalog maker - 20` with a N
 - Custom select controls may use a native select as an interaction layer, but the native label must be visually transparent when a separate display label is rendered; never show the same control text twice.
 - Runtime button labels must update the existing direct child label span instead of replacing `button.textContent`; state changes must never remove the button icon.
 - Parser tools are always visible in the left panel. Do not hide, collapse or replace the parser action buttons with a toggle; the user must see the complete parser action set at all times.
-- Mapping status and mapping source details belong directly with the parser action group, because mapping is parser output; keep the existing mapping behavior and only change its placement when refining the sidebar.
+- Mapping status and mapping source details belong beside the database connection status at the bottom of the sidebar. Style it as a shared sidebar section header with icon, centered status and a fixed right chevron; keep the existing mapping behavior.
 
 ## TypeScript workflow
 

public/index.html

@@ -39,15 +39,6 @@
             <button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#eye"></use></svg><span>Preview parsed data</span></button>
             <button class="action-button" type="button" disabled><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#save"></use></svg><span>Apply / Save</span></button>
           </div>
-          <div class="mapping-box parser-mapping-box" id="mappingBox">
-            <details class="mapping-details" id="mappingDetails">
-              <summary>
-                <span class="mapping-state is-missing" id="mappingState">Mapping not loaded</span>
-                <span class="mapping-toggle" aria-hidden="true"></span>
-              </summary>
-              <div class="mapping-list" id="mappingList"></div>
-            </details>
-          </div>
         </div>
 
         <button class="action-button" id="loadProductButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#info"></use></svg><span>Get product info - 00</span></button>
@@ -91,6 +82,17 @@
         <button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#scan"></use></svg><span>Scraper - 03</span></button>
         <button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#erase"></use></svg><span>BG remover - 04</span></button>
         <div class="sidebar-footer">
+          <div class="mapping-box sidebar-mapping-box" id="mappingBox">
+            <details class="mapping-details" id="mappingDetails">
+              <summary class="mapping-summary">
+                <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg>
+                <span class="mapping-title">Mapping</span>
+                <span class="mapping-state is-missing" id="mappingState">Mapping not loaded</span>
+                <span class="mapping-toggle" aria-hidden="true"></span>
+              </summary>
+              <div class="mapping-list" id="mappingList"></div>
+            </details>
+          </div>
           <div class="app-status">
             <span class="safe-mode" id="databaseStatus">DB read-only</span>
           </div>

src/tailwind.css

@@ -115,6 +115,11 @@
   .picture-slot { @apply aspect-square w-full overflow-hidden rounded border border-dashed border-slate-500 bg-catalog-panel-soft p-1 text-center text-[11px] text-slate-200; }
   .picture-slot img { @apply h-full w-full object-contain; }
   .mapping-box { @apply rounded border border-slate-500 bg-catalog-panel-soft; }
+  .sidebar-mapping-box { @apply overflow-hidden border-slate-700 bg-slate-900; }
+  .mapping-summary { @apply flex min-h-8 items-center justify-center gap-1.5 rounded bg-slate-800 px-2 text-center text-[11px] font-semibold text-slate-100; }
+  .mapping-title { @apply shrink-0; }
+  .mapping-summary .mapping-state { @apply min-w-0 flex-1 truncate bg-transparent text-center text-[10px] font-normal text-slate-300; }
+  .mapping-summary .mapping-toggle { @apply ml-auto shrink-0; }
   .mapping-details summary { @apply grid cursor-pointer grid-cols-[minmax(0,1fr)_22px] items-center px-1 py-1 list-none; }
   .mapping-details summary::-webkit-details-marker { display: none; }
   .mapping-toggle::before { content: "›"; @apply inline-block text-center text-lg leading-none text-slate-100; }
@@ -270,6 +275,9 @@
   html:not(.dark) .mapping-box { @apply border-slate-300 bg-white text-slate-600; }
   html:not(.dark) .mapping-toggle::before { @apply text-slate-700; }
   html:not(.dark) .app-status { @apply border-slate-300 bg-white text-slate-700; }
+  html:not(.dark) .sidebar-mapping-box { @apply border-slate-300 bg-slate-100; }
+  html:not(.dark) .mapping-summary { @apply border border-slate-300 bg-white text-slate-700; }
+  html:not(.dark) .mapping-summary .mapping-state { @apply text-slate-600; }
   html:not(.dark) .manufacturer-trigger { @apply border-slate-300 bg-white text-slate-700; }
   html:not(.dark) .manufacturer-trigger:hover { @apply border-slate-400 bg-slate-200; }
   html.contrast-light-high:not(.dark) .control-panel { @apply bg-slate-200 text-slate-900; }