diff --git a/src/ui.tsx b/src/ui.tsx
index b9ecd48..bd53acb 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -135,14 +135,25 @@ function Plugin () {
           <VerticalSpace space="small" />
           <Muted>AI assistant (MVP) — bootstrap</Muted>
           {windowInfo != null && (
-            <div>
-              <VerticalSpace space="small" />
-              <Muted>x: {windowInfo.x}  y: {windowInfo.y}</Muted>
-              <Muted>w: {windowInfo.width}  h: {windowInfo.height}</Muted>
-              <Muted>zoom: {windowInfo.zoom}</Muted>
-              <Muted>viewport: {windowInfo.viewport.x},{windowInfo.viewport.y} {windowInfo.viewport.width}×{windowInfo.viewport.height}</Muted>
-              <Muted>gaps L/R/T/B: {windowInfo.gapL}/{windowInfo.gapR}/{windowInfo.gapT}/{windowInfo.gapB}</Muted>
-              <Muted>center: {windowInfo.center.x},{windowInfo.center.y}</Muted>
+            <div style={{ width: '100%', marginTop: '8px', padding: '8px 10px', border: '1px solid var(--figma-color-border)', borderRadius: '4px', background: 'var(--figma-color-bg-secondary)' }}>
+              <Text style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--figma-color-text-secondary)' }}>
+                Окно плагина
+              </Text>
+              <div style={{ marginTop: '4px', display: 'grid', gridTemplateColumns: 'auto 1fr', rowGap: '2px', columnGap: '12px', fontSize: '11px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontVariantNumeric: 'tabular-nums' }}>
+                <span>x</span><span style={{ textAlign: 'right' }}>{windowInfo.x}</span>
+                <span>y</span><span style={{ textAlign: 'right' }}>{windowInfo.y}</span>
+                <span>w</span><span style={{ textAlign: 'right' }}>{windowInfo.width}</span>
+                <span>h</span><span style={{ textAlign: 'right' }}>{windowInfo.height}</span>
+              </div>
+              <Text style={{ marginTop: '8px', fontSize: '11px', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--figma-color-text-secondary)' }}>
+                Canvas / viewport
+              </Text>
+              <div style={{ marginTop: '4px', display: 'grid', gridTemplateColumns: 'auto 1fr', rowGap: '2px', columnGap: '12px', fontSize: '11px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontVariantNumeric: 'tabular-nums' }}>
+                <span>zoom</span><span style={{ textAlign: 'right' }}>{windowInfo.zoom}</span>
+                <span>viewport</span><span style={{ textAlign: 'right' }}>{windowInfo.viewport.x},{windowInfo.viewport.y} · {windowInfo.viewport.width}×{windowInfo.viewport.height}</span>
+                <span>gaps L/R/T/B</span><span style={{ textAlign: 'right' }}>{windowInfo.gapL} / {windowInfo.gapR} / {windowInfo.gapT} / {windowInfo.gapB}</span>
+                <span>center</span><span style={{ textAlign: 'right' }}>{windowInfo.center.x},{windowInfo.center.y}</span>
+              </div>
             </div>
           )}
         </div>