refactor: reorganize Financials toolbar and flatten UI

- Group toolbar controls by function (Statement, Period, Mode, Scale)
- Move Trend Chart above Matrix, hidden by default
- Add chart toggle to toolbar actions
- Flatten all sections: remove card styling, use subtle dividers
- Update StatementRowInspector and NormalizationSummary with flat layout

components/financials/statement-row-inspector.tsx

@@ -1,86 +1,145 @@
-'use client';
+"use client";
 
-import { Panel } from '@/components/ui/panel';
 import type {
   DetailFinancialRow,
   DimensionBreakdownRow,
   FinancialStatementPeriod,
   FinancialSurfaceKind,
-  SurfaceFinancialRow
-} from '@/lib/types';
-import type { ResolvedStatementSelection } from '@/lib/financials/statement-view-model';
+  SurfaceFinancialRow,
+} from "@/lib/types";
+import type { ResolvedStatementSelection } from "@/lib/financials/statement-view-model";
 
 type StatementRowInspectorProps = {
   selection: ResolvedStatementSelection | null;
   dimensionRows: DimensionBreakdownRow[];
   periods: FinancialStatementPeriod[];
-  surfaceKind: Extract<FinancialSurfaceKind, 'income_statement' | 'balance_sheet' | 'cash_flow_statement'>;
-  renderValue: (row: SurfaceFinancialRow | DetailFinancialRow, periodId: string, previousPeriodId: string | null) => string;
-  renderDimensionValue: (value: number | null, rowKey: string, unit: SurfaceFinancialRow['unit']) => string;
+  surfaceKind: Extract<
+    FinancialSurfaceKind,
+    "income_statement" | "balance_sheet" | "cash_flow_statement"
+  >;
+  renderValue: (
+    row: SurfaceFinancialRow | DetailFinancialRow,
+    periodId: string,
+    previousPeriodId: string | null,
+  ) => string;
+  renderDimensionValue: (
+    value: number | null,
+    rowKey: string,
+    unit: SurfaceFinancialRow["unit"],
+  ) => string;
 };
 
-function InspectorCard(props: {
-  label: string;
-  value: string;
-}) {
+function InspectorField(props: { label: string; value: string }) {
   return (
-    <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
-      <p className="text-[color:var(--terminal-muted)]">{props.label}</p>
-      <p className="font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
+    <div className="py-1.5">
+      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+        {props.label}
+      </p>
+      <p className="text-sm font-medium text-[color:var(--terminal-bright)]">
+        {props.value}
+      </p>
     </div>
   );
 }
 
 function renderList(values: string[] | null | undefined) {
-  return (values ?? []).length > 0 ? (values ?? []).join(', ') : 'n/a';
+  return (values ?? []).length > 0 ? (values ?? []).join(", ") : "n/a";
 }
 
 export function StatementRowInspector(props: StatementRowInspectorProps) {
   const selection = props.selection;
-  const parentSurfaceLabel = selection?.kind === 'detail'
-    ? selection.parentSurfaceRow?.label ?? (selection.row.parentSurfaceKey === 'unmapped' ? 'Unmapped / Residual' : selection.row.parentSurfaceKey)
-    : null;
+  const parentSurfaceLabel =
+    selection?.kind === "detail"
+      ? (selection.parentSurfaceRow?.label ??
+        (selection.row.parentSurfaceKey === "unmapped"
+          ? "Unmapped / Residual"
+          : selection.row.parentSurfaceKey))
+      : null;
 
   return (
-    <Panel
-      title="Row Details"
-      subtitle="Inspect compact-surface resolution, raw drill-down rows, and dimensional evidence."
-      variant="surface"
-    >
+    <section className="border-t border-[color:var(--line-weak)] pt-4">
+      <header className="mb-3">
+        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+          Row Details
+        </h3>
+        <p className="text-xs text-[color:var(--terminal-muted)]">
+          Inspect compact-surface resolution, raw drill-down rows, and
+          dimensional evidence.
+        </p>
+      </header>
+
       {!selection ? (
-        <p className="text-sm text-[color:var(--terminal-muted)]">Select a compact surface row or raw detail row to inspect details.</p>
-      ) : selection.kind === 'surface' ? (
+        <p className="text-sm text-[color:var(--terminal-muted)]">
+          Select a compact surface row or raw detail row to inspect details.
+        </p>
+      ) : selection.kind === "surface" ? (
         <div className="space-y-4 text-sm">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
-            <InspectorCard label="Label" value={selection.row.label} />
-            <InspectorCard label="Key" value={selection.row.key} />
-            <InspectorCard label="Resolution" value={selection.row.resolutionMethod ?? 'direct'} />
-            <InspectorCard label="Confidence" value={selection.row.confidence ?? 'high'} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
+            <InspectorField label="Label" value={selection.row.label} />
+            <InspectorField label="Key" value={selection.row.key} />
+            <InspectorField
+              label="Resolution"
+              value={selection.row.resolutionMethod ?? "direct"}
+            />
+            <InspectorField
+              label="Confidence"
+              value={selection.row.confidence ?? "high"}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Source Row Keys" value={renderList(selection.row.sourceRowKeys)} />
-            <InspectorCard label="Source Concepts" value={renderList(selection.row.sourceConcepts)} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Source Row Keys"
+              value={renderList(selection.row.sourceRowKeys)}
+            />
+            <InspectorField
+              label="Source Concepts"
+              value={renderList(selection.row.sourceConcepts)}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
-            <InspectorCard label="Warning Codes" value={renderList(selection.row.warningCodes ?? [])} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Source Fact IDs"
+              value={
+                (selection.row.sourceFactIds ?? []).length > 0
+                  ? (selection.row.sourceFactIds ?? []).join(", ")
+                  : "n/a"
+              }
+            />
+            <InspectorField
+              label="Warning Codes"
+              value={renderList(selection.row.warningCodes ?? [])}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Child Surface Rows" value={selection.childSurfaceRows.length > 0 ? selection.childSurfaceRows.map((row) => row.label).join(', ') : 'None'} />
-            <InspectorCard label="Raw Detail Rows" value={String(selection.detailRows.length)} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Child Surface Rows"
+              value={
+                selection.childSurfaceRows.length > 0
+                  ? selection.childSurfaceRows
+                      .map((row) => row.label)
+                      .join(", ")
+                  : "None"
+              }
+            />
+            <InspectorField
+              label="Raw Detail Rows"
+              value={String(selection.detailRows.length)}
+            />
           </div>
 
           {selection.detailRows.length > 0 ? (
-            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
-              <p className="text-[color:var(--terminal-muted)]">Raw Detail Labels</p>
+            <div className="border-t border-[color:var(--line-weak)] pt-3">
+              <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+                Raw Detail Labels
+              </p>
               <div className="mt-2 flex flex-wrap gap-2">
                 {selection.detailRows.map((row) => (
                   <span
                     key={`${selection.row.key}-${row.key}`}
-                    className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
+                    className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
                   >
                     {row.label}
                   </span>
@@ -91,8 +150,106 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
 
           {selection.row.hasDimensions ? (
             props.dimensionRows.length === 0 ? (
-              <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected compact row.</p>
+              <p className="text-sm text-[color:var(--terminal-muted)]">
+                No dimensional facts were returned for the selected compact row.
+              </p>
             ) : (
+              <div className="border-t border-[color:var(--line-weak)] pt-3">
+                <div className="data-table-wrap">
+                  <table className="data-table min-w-[760px]">
+                    <thead>
+                      <tr>
+                        <th>Period</th>
+                        <th>Axis</th>
+                        <th>Member</th>
+                        <th>Value</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {props.dimensionRows.map((row, index) => (
+                        <tr
+                          key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}
+                        >
+                          <td>
+                            {props.periods.find(
+                              (period) => period.id === row.periodId,
+                            )?.periodLabel ?? row.periodId}
+                          </td>
+                          <td>{row.axis}</td>
+                          <td>{row.member}</td>
+                          <td>
+                            {props.renderDimensionValue(
+                              row.value,
+                              selection.row.key,
+                              selection.row.unit,
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )
+          ) : (
+            <p className="text-sm text-[color:var(--terminal-muted)]">
+              No dimensional drill-down is available for this compact surface
+              row.
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4 text-sm">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
+            <InspectorField label="Label" value={selection.row.label} />
+            <InspectorField label="Key" value={selection.row.key} />
+            <InspectorField
+              label="Parent Surface"
+              value={parentSurfaceLabel ?? selection.row.parentSurfaceKey}
+            />
+            <InspectorField
+              label="Residual"
+              value={selection.row.residualFlag ? "Yes" : "No"}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Concept Key"
+              value={selection.row.conceptKey}
+            />
+            <InspectorField label="QName" value={selection.row.qname} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Local Name"
+              value={selection.row.localName}
+            />
+            <InspectorField
+              label="Source Fact IDs"
+              value={
+                (selection.row.sourceFactIds ?? []).length > 0
+                  ? (selection.row.sourceFactIds ?? []).join(", ")
+                  : "n/a"
+              }
+            />
+          </div>
+
+          <div className="border-t border-[color:var(--line-weak)] pt-3">
+            <InspectorField
+              label="Dimensions Summary"
+              value={renderList(selection.row.dimensionsSummary)}
+            />
+          </div>
+
+          {props.dimensionRows.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">
+              No dimensional facts were returned for the selected raw detail
+              row.
+            </p>
+          ) : (
+            <div className="border-t border-[color:var(--line-weak)] pt-3">
               <div className="data-table-wrap">
                 <table className="data-table min-w-[760px]">
                   <thead>
@@ -105,73 +262,34 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
                   </thead>
                   <tbody>
                     {props.dimensionRows.map((row, index) => (
-                      <tr key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
-                        <td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
+                      <tr
+                        key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}
+                      >
+                        <td>
+                          {props.periods.find(
+                            (period) => period.id === row.periodId,
+                          )?.periodLabel ?? row.periodId}
+                        </td>
                         <td>{row.axis}</td>
                         <td>{row.member}</td>
-                        <td>{props.renderDimensionValue(row.value, selection.row.key, selection.row.unit)}</td>
+                        <td>
+                          {props.renderDimensionValue(
+                            row.value,
+                            selection.row.key,
+                            props.surfaceKind === "balance_sheet"
+                              ? "currency"
+                              : "currency",
+                          )}
+                        </td>
                       </tr>
                     ))}
                   </tbody>
                 </table>
               </div>
-            )
-          ) : (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional drill-down is available for this compact surface row.</p>
-          )}
-        </div>
-      ) : (
-        <div className="space-y-4 text-sm">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
-            <InspectorCard label="Label" value={selection.row.label} />
-            <InspectorCard label="Key" value={selection.row.key} />
-            <InspectorCard label="Parent Surface" value={parentSurfaceLabel ?? selection.row.parentSurfaceKey} />
-            <InspectorCard label="Residual" value={selection.row.residualFlag ? 'Yes' : 'No'} />
-          </div>
-
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Concept Key" value={selection.row.conceptKey} />
-            <InspectorCard label="QName" value={selection.row.qname} />
-          </div>
-
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Local Name" value={selection.row.localName} />
-            <InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
-          </div>
-
-          <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
-            <p className="text-[color:var(--terminal-muted)]">Dimensions Summary</p>
-            <p className="font-semibold text-[color:var(--terminal-bright)]">{renderList(selection.row.dimensionsSummary)}</p>
-          </div>
-
-          {props.dimensionRows.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected raw detail row.</p>
-          ) : (
-            <div className="data-table-wrap">
-              <table className="data-table min-w-[760px]">
-                <thead>
-                  <tr>
-                    <th>Period</th>
-                    <th>Axis</th>
-                    <th>Member</th>
-                    <th>Value</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {props.dimensionRows.map((row, index) => (
-                    <tr key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}>
-                      <td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
-                      <td>{row.axis}</td>
-                      <td>{row.member}</td>
-                      <td>{props.renderDimensionValue(row.value, selection.row.key, props.surfaceKind === 'balance_sheet' ? 'currency' : 'currency')}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
             </div>
           )}
         </div>
       )}
-    </Panel>
+    </section>
   );
 }