From 81abd5a591a1ac38c14fa904bc113eac6c44ff39 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sun, 19 Jul 2026 16:55:46 +0200
Subject: [PATCH] Add missing SolvedVariablesBlock component for properties
 panel.

Fixes the UI compile break from referencing an undefined helper when showing z_dp and other solved actuators.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/panels/PropertiesPanel.tsx | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/apps/web/src/components/panels/PropertiesPanel.tsx b/apps/web/src/components/panels/PropertiesPanel.tsx
index 005573f..14e3e37 100644
--- a/apps/web/src/components/panels/PropertiesPanel.tsx
+++ b/apps/web/src/components/panels/PropertiesPanel.tsx
@@ -977,6 +977,43 @@ function ModelicaResultsView({
   );
 }
 
+function SolvedVariablesBlock({
+  items,
+  title,
+}: {
+  items: SolvedVariable[];
+  title: string;
+}) {
+  if (items.length === 0) return null;
+  return (
+    <div className="overflow-hidden rounded-md border border-[var(--line)]">
+      <div className="border-b border-[var(--line)] bg-[var(--chrome-2)] px-2 py-1 text-[9px] font-semibold uppercase tracking-wide text-[var(--ink-faint)]">
+        {title}
+      </div>
+      <table className="w-full text-[10px]">
+        <thead>
+          <tr className="text-left text-[9px] text-[var(--ink-faint)]">
+            <th className="px-1.5 py-1 font-medium">Var</th>
+            <th className="px-1 py-1 font-medium">Value</th>
+            <th className="px-1 py-1 font-medium">Min</th>
+            <th className="px-1 py-1 font-medium">Max</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((sv) => (
+            <tr key={sv.id} className="border-t border-[var(--line)]">
+              <td className="mono px-1.5 py-1 text-[var(--ink)]">{sv.variable}</td>
+              <td className="mono px-1 py-1 text-[var(--ink)]">{fmtOpt(sv.value, 4)}</td>
+              <td className="mono px-1 py-1 text-[var(--ink-dim)]">{fmtOpt(sv.min, 3)}</td>
+              <td className="mono px-1 py-1 text-[var(--ink-dim)]">{fmtOpt(sv.max, 3)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 function MiniMetric({ label, value }: { label: string; value: string }) {
   return (
     <div className="rounded border border-[var(--line)] bg-[var(--chrome-2)] px-1.5 py-1">
@@ -989,3 +1026,50 @@ function MiniMetric({ label, value }: { label: string; value: string }) {
 function fmtOpt(v: number | null | undefined, digits: number): string {
   return typeof v === "number" && Number.isFinite(v) ? v.toFixed(digits) : "—";
 }
+
+/**
+ * Formats a solved-unknown value compactly: 4 significant digits with trailing
+ * zeros trimmed (e.g. 1.024, 0.62, 0.02, 2). Non-finite → "—".
+ */
+function fmtSolved(v: number): string {
+  if (!Number.isFinite(v)) return "—";
+  return Number(v.toPrecision(4)).toString();
+}
+
+/**
+ * Compact block listing solver-computed unknowns for the selected component.
+ * Renders one row per variable: `variable = value (min..max)`. Only shown when
+ * the component owns at least one solved variable.
+ */
+function SolvedVariablesBlock({
+  items,
+  title,
+}: {
+  items: SolvedVariable[];
+  title: string;
+}) {
+  if (items.length === 0) return null;
+  return (
+    <div className="rounded-md border border-[var(--line)] bg-[var(--chrome-2)] px-2 py-1.5">
+      <div className="mb-1 text-[9px] font-semibold uppercase tracking-wide text-[var(--ink-faint)]">
+        {title}
+      </div>
+      <div className="space-y-0.5">
+        {items.map((sv) => (
+          <div
+            key={sv.id}
+            className="mono flex items-baseline gap-1.5 text-[10px]"
+            title={`${sv.id} ∈ [${sv.min}, ${sv.max}]`}
+          >
+            <span className="text-[var(--ink)]">{sv.variable}</span>
+            <span className="text-[var(--ink-faint)]">=</span>
+            <span className="tabular-nums text-[var(--accent)]">{fmtSolved(sv.value)}</span>
+            <span className="tabular-nums text-[var(--ink-faint)]">
+              ({fmtSolved(sv.min)}..{fmtSolved(sv.max)})
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}