diff --git a/docs/wireframes/control-panel-main-wireframe.png b/docs/wireframes/control-panel-main-wireframe.png
new file mode 100644
index 0000000..a76b606
Binary files /dev/null and b/docs/wireframes/control-panel-main-wireframe.png differ
diff --git a/docs/wireframes/control-panel-main-wireframe.svg b/docs/wireframes/control-panel-main-wireframe.svg
new file mode 100644
index 0000000..c2a6794
--- /dev/null
+++ b/docs/wireframes/control-panel-main-wireframe.svg
@@ -0,0 +1,175 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1120" viewBox="0 0 1600 1120">
+  <defs>
+    <style>
+      .bg { fill: #f4f6f8; }
+      .panel { fill: #ffffff; stroke: #c9d1d9; stroke-width: 2; }
+      .panel-disabled { fill: #eef1f4; stroke: #c9d1d9; stroke-width: 2; }
+      .panel-active { fill: #ffffff; stroke: #2f80ed; stroke-width: 3; }
+      .preview { fill: #101820; stroke: #2f80ed; stroke-width: 2; }
+      .title { font-family: Arial; font-size: 25px; font-weight: 700; fill: #17202a; }
+      .subtitle { font-family: Arial; font-size: 16px; fill: #52616f; }
+      .section { font-family: Arial; font-size: 17px; font-weight: 700; fill: #17202a; }
+      .label { font-family: Arial; font-size: 14px; fill: #27313b; }
+      .muted { font-family: Arial; font-size: 13px; fill: #7b8794; }
+      .disabled-text { font-family: Arial; font-size: 14px; fill: #8a96a3; }
+      .mono { font-family: Courier; font-size: 12px; fill: #39434d; }
+      .mono-light { font-family: Courier; font-size: 12px; fill: #c9d9ea; }
+      .chip-ok { fill: #d9f5e5; stroke: #31a66a; }
+      .chip-warn { fill: #fff4d7; stroke: #d99000; }
+      .chip-off { fill: #e5e9ee; stroke: #a4afba; }
+      .button { fill: #f8fafc; stroke: #aab4bf; stroke-width: 1.5; }
+      .button-primary { fill: #e8f1ff; stroke: #2f80ed; stroke-width: 1.5; }
+      .button-disabled { fill: #e3e7eb; stroke: #c2cbd3; stroke-width: 1.5; }
+    </style>
+  </defs>
+
+  <rect class="bg" x="0" y="0" width="1600" height="1120"/>
+
+  <text class="title" x="40" y="50">kiwii-sdk-control-panel</text>
+  <text class="subtitle" x="40" y="78">AAR SDK validation control panel. Device components stay visible; unavailable components stay gray until capability detected.</text>
+
+  <rect class="panel-active" x="40" y="105" width="1520" height="120" rx="8"/>
+  <text class="section" x="64" y="140">Global RuntimeHost Status</text>
+  <rect class="chip-warn" x="64" y="158" width="145" height="32" rx="16"/>
+  <text class="label" x="86" y="179">Bound: false</text>
+  <rect class="chip-off" x="228" y="158" width="175" height="32" rx="16"/>
+  <text class="label" x="250" y="179">Ping: NOT_BOUND</text>
+  <text class="muted" x="425" y="178">Last API: none</text>
+  <text class="muted" x="610" y="178">Last error: waiting for RuntimeHost bind</text>
+  <rect class="button-primary" x="64" y="200" width="85" height="32" rx="6"/>
+  <text class="label" x="92" y="221">Bind</text>
+  <rect class="button" x="160" y="200" width="95" height="32" rx="6"/>
+  <text class="label" x="187" y="221">Unbind</text>
+  <rect class="button" x="266" y="200" width="85" height="32" rx="6"/>
+  <text class="label" x="295" y="221">Ping</text>
+  <text class="mono" x="375" y="220">RuntimeHost bound enables component detection; component availability is still per-device.</text>
+
+  <rect class="panel-active" x="40" y="255" width="365" height="205" rx="8"/>
+  <text class="section" x="62" y="290">RuntimeHostStatusComponent</text>
+  <rect class="chip-ok" x="62" y="307" width="112" height="28" rx="14"/>
+  <text class="label" x="84" y="326">Active</text>
+  <text class="muted" x="62" y="357">Always interactive; owns bind state refresh.</text>
+  <rect class="button-primary" x="62" y="382" width="112" height="30" rx="6"/>
+  <text class="label" x="86" y="402">Bind Host</text>
+  <rect class="button" x="186" y="382" width="112" height="30" rx="6"/>
+  <text class="label" x="214" y="402">Runtime</text>
+  <rect class="button" x="62" y="420" width="112" height="30" rx="6"/>
+  <text class="label" x="90" y="440">Health</text>
+  <rect class="button" x="186" y="420" width="112" height="30" rx="6"/>
+  <text class="label" x="212" y="440">Lifecycle</text>
+
+  <rect class="panel-disabled" x="425" y="255" width="365" height="205" rx="8"/>
+  <text class="section" x="447" y="290">CameraComponent</text>
+  <rect class="chip-off" x="447" y="307" width="150" height="28" rx="14"/>
+  <text class="disabled-text" x="469" y="326">Gray: not detected</text>
+  <text class="disabled-text" x="447" y="357">Needs RuntimeHost bound + camera state available.</text>
+  <rect class="button" x="447" y="382" width="112" height="30" rx="6"/>
+  <text class="label" x="486" y="402">Detect</text>
+  <rect class="button-disabled" x="571" y="382" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="598" y="402">State</text>
+  <rect class="button-disabled" x="447" y="420" width="236" height="30" rx="6"/>
+  <text class="disabled-text" x="502" y="440">Open Full Camera View</text>
+
+  <rect class="panel-disabled" x="810" y="255" width="365" height="205" rx="8"/>
+  <text class="section" x="832" y="290">LeftHandleComponent</text>
+  <rect class="chip-off" x="832" y="307" width="150" height="28" rx="14"/>
+  <text class="disabled-text" x="854" y="326">Gray: not detected</text>
+  <text class="disabled-text" x="832" y="357">Needs left handle data.</text>
+  <rect class="button" x="832" y="382" width="112" height="30" rx="6"/>
+  <text class="label" x="871" y="402">Detect</text>
+  <rect class="button-disabled" x="956" y="382" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="984" y="402">IMU</text>
+  <rect class="button-disabled" x="832" y="420" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="864" y="440">HE Static</text>
+  <rect class="button-disabled" x="956" y="420" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="987" y="440">HE Stream</text>
+
+  <rect class="panel-disabled" x="1195" y="255" width="365" height="205" rx="8"/>
+  <text class="section" x="1217" y="290">RightHandleComponent</text>
+  <rect class="chip-off" x="1217" y="307" width="150" height="28" rx="14"/>
+  <text class="disabled-text" x="1239" y="326">Gray: not detected</text>
+  <text class="disabled-text" x="1217" y="357">Needs right handle data.</text>
+  <rect class="button" x="1217" y="382" width="112" height="30" rx="6"/>
+  <text class="label" x="1256" y="402">Detect</text>
+  <rect class="button-disabled" x="1341" y="382" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="1369" y="402">IMU</text>
+  <rect class="button-disabled" x="1217" y="420" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="1249" y="440">HE Static</text>
+  <rect class="button-disabled" x="1341" y="420" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="1372" y="440">HE Stream</text>
+
+  <rect class="panel-disabled" x="40" y="485" width="365" height="205" rx="8"/>
+  <text class="section" x="62" y="520">BalanceBoardComponent</text>
+  <rect class="chip-off" x="62" y="537" width="150" height="28" rx="14"/>
+  <text class="disabled-text" x="84" y="556">Gray: not detected</text>
+  <text class="disabled-text" x="62" y="587">Needs balance board data.</text>
+  <rect class="button" x="62" y="612" width="112" height="30" rx="6"/>
+  <text class="label" x="101" y="632">Detect</text>
+  <rect class="button-disabled" x="186" y="612" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="216" y="632">State</text>
+  <rect class="button-disabled" x="62" y="650" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="93" y="670">Balance</text>
+  <rect class="button-disabled" x="186" y="650" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="217" y="670">Telemetry</text>
+
+  <rect class="panel-disabled" x="425" y="485" width="365" height="205" rx="8"/>
+  <text class="section" x="447" y="520">MotorComponent</text>
+  <rect class="chip-off" x="447" y="537" width="150" height="28" rx="14"/>
+  <text class="disabled-text" x="469" y="556">Gray: not detected</text>
+  <text class="disabled-text" x="447" y="587">Needs motor state/control state.</text>
+  <rect class="button" x="447" y="612" width="112" height="30" rx="6"/>
+  <text class="label" x="486" y="632">Detect</text>
+  <rect class="button-disabled" x="571" y="612" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="605" y="632">Set Kg</text>
+  <rect class="button-disabled" x="447" y="650" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="475" y="670">Set Mode</text>
+  <rect class="button-disabled" x="571" y="650" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="604" y="670">State</text>
+
+  <rect class="panel-disabled" x="810" y="485" width="365" height="205" rx="8"/>
+  <text class="section" x="832" y="520">TelemetrySafetyComponent</text>
+  <rect class="chip-off" x="832" y="537" width="125" height="28" rx="14"/>
+  <text class="disabled-text" x="854" y="556">Gray: bound</text>
+  <text class="disabled-text" x="832" y="587">Available after RuntimeHost bound.</text>
+  <rect class="button-disabled" x="832" y="612" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="858" y="632">Telemetry</text>
+  <rect class="button-disabled" x="956" y="612" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="987" y="632">Safety</text>
+  <rect class="button-disabled" x="832" y="650" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="852" y="670">Device Cmd</text>
+  <rect class="button-disabled" x="956" y="650" width="112" height="30" rx="6"/>
+  <text class="disabled-text" x="990" y="670">Trace</text>
+
+  <rect class="panel" x="1195" y="485" width="365" height="205" rx="8"/>
+  <text class="section" x="1217" y="520">SessionLogComponent</text>
+  <rect class="chip-ok" x="1217" y="537" width="112" height="28" rx="14"/>
+  <text class="label" x="1239" y="556">Active</text>
+  <text class="muted" x="1217" y="587">Records all SDK calls.</text>
+  <rect x="1217" y="612" width="305" height="58" rx="6" fill="#f8fafc" stroke="#d5dde5"/>
+  <text class="mono" x="1232" y="636">16:27:00 bind() -> false</text>
+  <text class="mono" x="1232" y="660">16:27:05 camera.detect -> skipped</text>
+
+  <rect class="panel" x="40" y="720" width="930" height="350" rx="8"/>
+  <text class="section" x="64" y="756">CameraComponent Detail View</text>
+  <text class="muted" x="64" y="786">When CameraComponent is selected, user can open full camera preview without hiding device cards.</text>
+  <rect class="preview" x="64" y="805" width="610" height="230" rx="8"/>
+  <text class="mono-light" x="268" y="925">Full Camera Preview</text>
+  <text class="mono-light" x="248" y="950">16:9 frame, full visible image</text>
+  <rect class="button-disabled" x="700" y="805" width="180" height="34" rx="6"/>
+  <text class="disabled-text" x="738" y="827">Camera State</text>
+  <rect class="button-disabled" x="700" y="852" width="180" height="34" rx="6"/>
+  <text class="disabled-text" x="736" y="874">Refresh Frame</text>
+  <rect class="button-disabled" x="700" y="899" width="180" height="34" rx="6"/>
+  <text class="disabled-text" x="730" y="921">Open Fullscreen</text>
+  <text class="mono" x="700" y="970">status: unavailable</text>
+  <text class="mono" x="700" y="996">reason: Host not bound</text>
+
+  <rect class="panel" x="1000" y="720" width="560" height="350" rx="8"/>
+  <text class="section" x="1024" y="756">Selected Component Result</text>
+  <text class="muted" x="1024" y="786">Latest call, params, status, return summary, error summary.</text>
+  <rect x="1024" y="805" width="500" height="150" rx="6" fill="#f8fafc" stroke="#d5dde5"/>
+  <text class="mono" x="1044" y="835">selected=CameraComponent</text>
+  <text class="mono" x="1044" y="862">call=detect</text>
+  <text class="mono" x="1044" y="889">status=idle</text>
+  <text class="mono" x="1044" y="916">result=waiting for RuntimeHost bind</text>
+</svg>