@fragments-sdk/cli 0.8.1 → 0.9.1

package/src/viewer/components/TokenStylePanel.tsx

@@ -9,9 +9,11 @@
  */
 
 import { useState, useEffect, useCallback } from "react";
-import { Badge } from "@fragments-sdk/ui";
+import { Badge, Stack, Text, Button, Box } from "@fragments-sdk/ui";
 import type { DesignToken, EnhancedStyleDiffItem, TokenUsageSummary } from "../../core/index.js";
+import { Palette } from "@phosphor-icons/react";
 import { CheckIcon, XIcon, LoadingIcon, FigmaIcon, WandIcon } from "./Icons.js";
+import { PanelShell } from "./PanelShell.js";
 
 // Alias for semantic clarity
 const SyncingIcon = LoadingIcon;
@@ -241,50 +243,29 @@ export function TokenStylePanel({
     setTimeout(() => setCopiedFix(null), 2000);
   }, []);
 
-  // Show loading state
-  if (figmaLoading) {
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px' }}>
-        <SyncingIcon style={{ width: 16, height: 16, animation: 'spin 1s linear infinite' }} />
-        <span style={{ fontSize: '12px' }}>Loading Figma styles...</span>
-      </div>
-    );
-  }
-
-  // Show error state
-  if (figmaError) {
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px' }}>
-        <XIcon style={{ width: 16, height: 16, color: '#ef4444' }} />
-        <span style={{ fontSize: '12px' }}>{figmaError}</span>
-        <button
-          onClick={onFetchFigma}
-          style={{ fontSize: '12px', color: 'var(--color-accent)', background: 'none', border: 'none', cursor: 'pointer', marginLeft: '8px', textDecoration: 'underline' }}
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  // Show idle state
-  if (!figmaStyles) {
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px' }}>
-        <FigmaIcon style={{ width: 16, height: 16 }} />
-        <span style={{ fontSize: '12px' }}>Click to load style comparison</span>
-        <button
-          onClick={onFetchFigma}
-          style={{ fontSize: '12px', color: 'var(--color-accent)', background: 'none', border: 'none', cursor: 'pointer', marginLeft: '8px', textDecoration: 'underline' }}
-        >
-          Load
-        </button>
-      </div>
-    );
-  }
+  // Determine empty config for error / idle states
+  const emptyConfig = (() => {
+    if (!figmaLoading && figmaError) {
+      return {
+        icon: <Palette size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
+        title: "Style comparison failed",
+        description: figmaError,
+        action: <Button variant="secondary" size="sm" onClick={onFetchFigma}>Retry</Button>,
+      };
+    }
+    if (!figmaLoading && !figmaStyles) {
+      return {
+        icon: <Palette size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
+        title: "No style data",
+        description: "Load Figma styles to compare design tokens with rendered output.",
+        action: <Button size="sm" onClick={onFetchFigma}>Load Styles</Button>,
+      };
+    }
+    return undefined;
+  })();
 
-  // Build comparison data
-  const figma = figmaStyles;
+  // Build comparison data (safe — only used when figmaStyles exist, i.e. PanelShell renders children)
+  const figma = figmaStyles || {};
   const rendered = renderedStyles || {};
   const allProps = [...new Set([...Object.keys(figma), ...Object.keys(rendered)])];
 
@@ -293,7 +274,6 @@ export function TokenStylePanel({
     const renderedValue = rendered[prop] || "(not set)";
     const match = compareValue(prop, figma[prop] || "", rendered[prop] || "");
 
-    // Find matching tokens (with category-aware filtering)
     const figmaMatch = figma[prop] ? tokenByValue(figma[prop], prop) : null;
     const renderedMatch = rendered[prop] ? tokenByValue(rendered[prop], prop) : null;
 
@@ -302,7 +282,6 @@ export function TokenStylePanel({
     const figmaConfidence = figmaMatch?.confidence;
     const renderedConfidence = renderedMatch?.confidence;
 
-    // Determine if hardcoded (Figma uses a token but rendered doesn't)
     const isHardcoded = !!figmaToken && !renderedToken && figma[prop] !== rendered[prop];
 
     return {
@@ -323,184 +302,178 @@ export function TokenStylePanel({
   const fixableCount = properties.filter((p) => p.isHardcoded && p.figmaToken).length;
   const tokenUsageCount = properties.filter((p) => p.renderedToken).length;
 
-  // Calculate compliance
   const compliancePercent =
     properties.length > 0
       ? Math.round(((tokenUsageCount + properties.filter((p) => p.match && !p.figmaToken).length) / properties.length) * 100)
       : 100;
 
-  return (
-    <div style={{ overflowX: 'auto', padding: '16px' }}>
-      {/* Summary Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-          <span style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-primary)' }}>Style Comparison</span>
-
-          {/* Token info badge */}
-          {tokenData && (
-            <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>
-              {tokenData.meta?.totalTokens || tokenData.tokens.length} tokens loaded
-            </span>
-          )}
-          {tokenLoading && (
-            <span style={{ fontSize: '12px', color: 'var(--text-tertiary)', display: 'flex', alignItems: 'center', gap: '4px' }}>
-              <SyncingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
-              Loading tokens...
-            </span>
-          )}
-          {tokenError && !tokenLoading && (
-            <span style={{ fontSize: '12px', color: '#d97706' }} title={tokenError}>
-              Tokens not configured
-            </span>
-          )}
-        </div>
-
-        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          {/* Compliance badge */}
-          {tokenData && (
-            <Badge
-              variant={compliancePercent >= 80 ? 'success' : compliancePercent >= 50 ? 'warning' : 'danger'}
-            >
-              {compliancePercent}% token compliance
-            </Badge>
-          )}
-
-          {/* Match summary */}
-          <Badge variant={differences === 0 ? 'success' : 'warning'}>
-            {differences === 0 ? "All styles match" : `${differences} difference${differences !== 1 ? "s" : ""}`}
+  // Toolbar with token status + summary badges (only when data is loaded)
+  const toolbar = figmaStyles ? (
+    <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
+      <Stack direction="row" align="center" gap="md">
+        {tokenData && (
+          <Text size="xs" color="tertiary">
+            {tokenData.meta?.totalTokens || tokenData.tokens.length} tokens loaded
+          </Text>
+        )}
+        {tokenLoading && (
+          <Stack direction="row" align="center" gap="xs" style={{ color: 'var(--text-tertiary)' }}>
+            <SyncingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
+            <Text size="xs">Loading tokens...</Text>
+          </Stack>
+        )}
+        {tokenError && !tokenLoading && (
+          <Text size="xs" style={{ color: '#d97706' }} title={tokenError}>
+            Tokens not configured
+          </Text>
+        )}
+      </Stack>
+
+      <Stack direction="row" align="center" gap="sm">
+        {tokenData && (
+          <Badge
+            variant={compliancePercent >= 80 ? 'success' : compliancePercent >= 50 ? 'warning' : 'danger'}
+          >
+            {compliancePercent}% token compliance
           </Badge>
+        )}
 
-          {/* Hardcoded warning */}
-          {hardcodedCount > 0 && (
-            <Badge variant="danger">
-              {hardcodedCount} hardcoded
-            </Badge>
-          )}
-        </div>
-      </div>
+        <Badge variant={differences === 0 ? 'success' : 'warning'}>
+          {differences === 0 ? "All styles match" : `${differences} difference${differences !== 1 ? "s" : ""}`}
+        </Badge>
 
-      {/* Comparison Table */}
-      <table style={{ width: '100%', fontSize: '12px' }}>
-        <thead>
-          <tr style={{ borderBottom: '1px solid var(--border)' }}>
-            <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Property</th>
-            <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Figma</th>
-            {tokenData && (
-              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Token</th>
-            )}
-            <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Rendered</th>
-            <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '48px' }}>Match</th>
-            {tokenData && fixableCount > 0 && (
-              <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '64px' }}>Fix</th>
-            )}
-          </tr>
-        </thead>
-        <tbody>
-          {properties.map((prop, index) => (
-            <tr
-              key={prop.property}
-              style={{
-                borderBottom: index < properties.length - 1 ? '1px solid var(--border)' : undefined,
-                background: prop.isHardcoded
-                  ? 'color-mix(in srgb, #ef4444 5%, transparent)'
-                  : !prop.match
-                  ? 'color-mix(in srgb, #f59e0b 5%, transparent)'
-                  : undefined,
-              }}
-            >
-              <td style={{ padding: '8px 12px', fontFamily: 'monospace', color: 'var(--text-primary)' }}>{prop.property}</td>
-              <td style={{ padding: '8px 12px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  {/* Color swatch */}
-                  {isColorProperty(prop.property) && prop.figma !== "(not set)" && (
-                    <ColorSwatch color={prop.figma} />
-                  )}
-                  <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.figma}>
-                    {prop.figma}
-                  </span>
-                </div>
-              </td>
+        {hardcodedCount > 0 && (
+          <Badge variant="danger">
+            {hardcodedCount} hardcoded
+          </Badge>
+        )}
+      </Stack>
+    </Stack>
+  ) : undefined;
+
+  return (
+    <PanelShell loading={figmaLoading} toolbar={toolbar} empty={emptyConfig}>
+      <div style={{ overflowX: 'auto' }}>
+        {/* Comparison Table */}
+        <table style={{ width: '100%', fontSize: '12px' }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid var(--border)' }}>
+              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Property</th>
+              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Figma</th>
               {tokenData && (
+                <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Token</th>
+              )}
+              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Rendered</th>
+              <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '48px' }}>Match</th>
+              {tokenData && fixableCount > 0 && (
+                <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '64px' }}>Fix</th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {properties.map((prop, index) => (
+              <tr
+                key={prop.property}
+                style={{
+                  borderBottom: index < properties.length - 1 ? '1px solid var(--border)' : undefined,
+                  background: prop.isHardcoded
+                    ? 'color-mix(in srgb, #ef4444 5%, transparent)'
+                    : !prop.match
+                    ? 'color-mix(in srgb, #f59e0b 5%, transparent)'
+                    : undefined,
+                }}
+              >
+                <td style={{ padding: '8px 12px', fontFamily: 'monospace', color: 'var(--text-primary)' }}>{prop.property}</td>
                 <td style={{ padding: '8px 12px' }}>
-                  {prop.figmaToken ? (
-                    <TokenBadge token={prop.figmaToken} confidence={prop.figmaConfidence} />
-                  ) : prop.renderedToken ? (
-                    <TokenBadge token={prop.renderedToken} confidence={prop.renderedConfidence} />
-                  ) : (
-                    <span style={{ color: 'var(--text-tertiary)' }}>-</span>
-                  )}
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    {isColorProperty(prop.property) && prop.figma !== "(not set)" && (
+                      <ColorSwatch color={prop.figma} />
+                    )}
+                    <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.figma}>
+                      {prop.figma}
+                    </span>
+                  </div>
                 </td>
-              )}
-              <td style={{ padding: '8px 12px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  {/* Color swatch */}
-                  {isColorProperty(prop.property) && prop.rendered !== "(not set)" && (
-                    <ColorSwatch color={prop.rendered} />
-                  )}
-                  <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.rendered}>
-                    {prop.rendered}
-                  </span>
-                  {/* Hardcoded badge */}
-                  {prop.isHardcoded && (
-                    <Badge variant="danger">HC</Badge>
-                  )}
-                </div>
-              </td>
-              <td style={{ padding: '8px 12px', textAlign: 'center' }}>
-                {prop.match ? (
-                  <CheckIcon style={{ width: 16, height: 16, color: '#16a34a', margin: '0 auto' }} />
-                ) : (
-                  <XIcon style={{ width: 16, height: 16, color: '#d97706', margin: '0 auto' }} />
+                {tokenData && (
+                  <td style={{ padding: '8px 12px' }}>
+                    {prop.figmaToken ? (
+                      <TokenBadge token={prop.figmaToken} confidence={prop.figmaConfidence} />
+                    ) : prop.renderedToken ? (
+                      <TokenBadge token={prop.renderedToken} confidence={prop.renderedConfidence} />
+                    ) : (
+                      <span style={{ color: 'var(--text-tertiary)' }}>-</span>
+                    )}
+                  </td>
                 )}
-              </td>
-              {tokenData && fixableCount > 0 && (
+                <td style={{ padding: '8px 12px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    {isColorProperty(prop.property) && prop.rendered !== "(not set)" && (
+                      <ColorSwatch color={prop.rendered} />
+                    )}
+                    <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.rendered}>
+                      {prop.rendered}
+                    </span>
+                    {prop.isHardcoded && (
+                      <Badge variant="danger">HC</Badge>
+                    )}
+                  </div>
+                </td>
                 <td style={{ padding: '8px 12px', textAlign: 'center' }}>
-                  {prop.isHardcoded && prop.figmaToken && (
-                    <button
-                      onClick={() => copyFix(prop.property, prop.figmaToken!.name)}
-                      style={{
-                        padding: '4px',
-                        borderRadius: '4px',
-                        transition: 'color 0.15s, background 0.15s',
-                        background: copiedFix === prop.property ? 'color-mix(in srgb, #22c55e 15%, transparent)' : 'transparent',
-                        color: copiedFix === prop.property ? '#16a34a' : 'var(--text-tertiary)',
-                        border: 'none',
-                        cursor: 'pointer',
-                      }}
-                      title={`Copy: ${prop.property.replace(/([A-Z])/g, "-$1").toLowerCase()}: var(${prop.figmaToken.name});`}
-                    >
-                      {copiedFix === prop.property ? (
-                        <CheckIcon style={{ width: 12, height: 12 }} />
-                      ) : (
-                        <WandIcon style={{ width: 12, height: 12 }} />
-                      )}
-                    </button>
+                  {prop.match ? (
+                    <CheckIcon style={{ width: 16, height: 16, color: '#16a34a', margin: '0 auto' }} />
+                  ) : (
+                    <XIcon style={{ width: 16, height: 16, color: '#d97706', margin: '0 auto' }} />
                   )}
                 </td>
-              )}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {/* Hardcoded fixes summary */}
-      {hardcodedCount > 0 && tokenData && (
-        <div style={{ marginTop: '16px', padding: '12px', background: 'color-mix(in srgb, #f59e0b 8%, transparent)', borderRadius: '8px', border: '1px solid color-mix(in srgb, #f59e0b 20%, transparent)' }}>
-          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
-            <WandIcon style={{ width: 16, height: 16, color: '#d97706', marginTop: '2px' }} />
-            <div>
-              <p style={{ fontSize: '12px', fontWeight: 500, color: '#92400e' }}>
-                {hardcodedCount} hardcoded value{hardcodedCount !== 1 ? "s" : ""} detected
-              </p>
-              <p style={{ fontSize: '12px', color: '#a16207', marginTop: '4px' }}>
-                These values should use design tokens for consistency and theming support.
-                Click the fix button to copy the token-based CSS.
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
+                {tokenData && fixableCount > 0 && (
+                  <td style={{ padding: '8px 12px', textAlign: 'center' }}>
+                    {prop.isHardcoded && prop.figmaToken && (
+                      <button
+                        onClick={() => copyFix(prop.property, prop.figmaToken!.name)}
+                        style={{
+                          padding: '4px',
+                          borderRadius: '4px',
+                          transition: 'color 0.15s, background 0.15s',
+                          background: copiedFix === prop.property ? 'color-mix(in srgb, #22c55e 15%, transparent)' : 'transparent',
+                          color: copiedFix === prop.property ? '#16a34a' : 'var(--text-tertiary)',
+                          border: 'none',
+                          cursor: 'pointer',
+                        }}
+                        title={`Copy: ${prop.property.replace(/([A-Z])/g, "-$1").toLowerCase()}: var(${prop.figmaToken.name});`}
+                      >
+                        {copiedFix === prop.property ? (
+                          <CheckIcon style={{ width: 12, height: 12 }} />
+                        ) : (
+                          <WandIcon style={{ width: 12, height: 12 }} />
+                        )}
+                      </button>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {/* Hardcoded fixes summary */}
+        {hardcodedCount > 0 && tokenData && (
+          <Box padding="sm" rounded="md" style={{ marginTop: '16px', background: 'color-mix(in srgb, #f59e0b 8%, transparent)', border: '1px solid color-mix(in srgb, #f59e0b 20%, transparent)' }}>
+            <Stack direction="row" align="start" gap="sm">
+              <WandIcon style={{ width: 16, height: 16, color: '#d97706', marginTop: '2px' }} />
+              <div>
+                <Text size="xs" weight="medium" style={{ color: '#92400e' }}>
+                  {hardcodedCount} hardcoded value{hardcodedCount !== 1 ? "s" : ""} detected
+                </Text>
+                <Text size="xs" style={{ color: '#a16207', marginTop: '4px' }}>
+                  These values should use design tokens for consistency and theming support.
+                  Click the fix button to copy the token-based CSS.
+                </Text>
+              </div>
+            </Stack>
+          </Box>
+        )}
+      </div>
+    </PanelShell>
   );
 }
 

package/src/viewer/components/TopToolbar.tsx

@@ -0,0 +1,159 @@
+import type { RefObject } from "react";
+import type { FragmentDefinition } from "../../core/index.js";
+import type { useViewSettings } from "../hooks/useViewSettings.js";
+import type { useAppState } from "../hooks/useAppState.js";
+import {
+  Header,
+  Stack,
+  Text,
+  Separator,
+  Tooltip,
+  Button,
+  ThemeToggle,
+  FragmentsLogo,
+} from "@fragments-sdk/ui";
+import { DeviceMobile, GridFour, SidebarSimple } from "@phosphor-icons/react";
+import { GitHubIcon, FigmaIcon, CompareIcon } from "./Icons.js";
+import { PreviewToolbar } from "./PreviewToolbar.js";
+import { HeaderSearch } from "./HeaderSearch.js";
+import { useTheme } from "./ThemeProvider.js";
+import { WebMCPStatusIndicator } from "./WebMCPStatusIndicator.js";
+
+/** Normalize category to Title Case for display */
+function titleCase(str: string): string {
+  return str.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+interface TopToolbarProps {
+  fragment: { path: string; fragment: FragmentDefinition };
+  viewSettings: ReturnType<typeof useViewSettings>;
+  uiState: ReturnType<typeof useAppState>["state"];
+  uiActions: ReturnType<typeof useAppState>["actions"];
+  figmaUrl?: string;
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  searchInputRef: RefObject<HTMLInputElement>;
+}
+
+export function TopToolbar({
+  fragment,
+  viewSettings,
+  uiState,
+  uiActions,
+  figmaUrl,
+  searchQuery,
+  onSearchChange,
+  searchInputRef,
+}: TopToolbarProps) {
+  const { setTheme, resolvedTheme } = useTheme();
+  return (
+    <Header aria-label="Component preview toolbar">
+      <Header.Trigger />
+      <Header.Brand>
+        <Stack direction="row" align="center" gap="sm">
+          <FragmentsLogo size={20} />
+          <Text weight="medium" size="sm">
+            {fragment.fragment.meta.name}
+          </Text>
+          <Text size="xs" color="tertiary">
+            {titleCase(fragment.fragment.meta.category || '')}
+          </Text>
+        </Stack>
+      </Header.Brand>
+      <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
+      <Header.Spacer />
+      <Header.Actions>
+        <PreviewToolbar zoom={viewSettings.zoom} onZoomChange={viewSettings.setZoom} />
+        <Separator orientation="vertical" style={{ height: "16px" }} />
+        <Tooltip content={uiState.showMatrixView ? "Disable matrix view" : "Enable matrix view"}>
+          <Button
+            variant={uiState.showMatrixView ? "secondary" : "ghost"}
+            size="sm"
+            icon
+            aria-pressed={uiState.showMatrixView}
+            aria-label="Toggle matrix view"
+            onClick={() => uiActions.setMatrixView(!uiState.showMatrixView)}
+          >
+            <GridFour size={16} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          content={uiState.showMultiViewport ? "Disable responsive view" : "Enable responsive view"}
+        >
+          <Button
+            variant={uiState.showMultiViewport ? "secondary" : "ghost"}
+            size="sm"
+            icon
+            aria-pressed={uiState.showMultiViewport}
+            aria-label="Toggle responsive view"
+            onClick={() => uiActions.setMultiViewport(!uiState.showMultiViewport)}
+          >
+            <DeviceMobile size={16} />
+          </Button>
+        </Tooltip>
+        <Separator orientation="vertical" style={{ height: "16px" }} />
+        {figmaUrl && (
+          <>
+            <Tooltip
+              content={
+                uiState.showComparison ? "Hide Figma comparison" : "Compare with Figma design"
+              }
+            >
+              <Button
+                variant={uiState.showComparison ? "secondary" : "ghost"}
+                size="sm"
+                icon
+                onClick={uiActions.toggleComparison}
+              >
+                <CompareIcon style={{ width: "16px", height: "16px" }} />
+              </Button>
+            </Tooltip>
+            <Tooltip content="View in Figma">
+              <Button
+                onClick={() => window.open(figmaUrl, "_blank", "noopener,noreferrer")}
+                variant="ghost"
+                size="sm"
+                icon
+              >
+                <FigmaIcon style={{ width: "16px", height: "16px" }} />
+              </Button>
+            </Tooltip>
+            <Separator orientation="vertical" style={{ height: "16px" }} />
+          </>
+        )}
+        <WebMCPStatusIndicator />
+        <Tooltip content={uiState.showAside ? "Hide side panel" : "Show side panel"}>
+          <Button
+            variant={uiState.showAside ? "secondary" : "ghost"}
+            size="sm"
+            icon
+            aria-pressed={uiState.showAside}
+            aria-label="Toggle side panel"
+            onClick={uiActions.toggleAside}
+          >
+            <SidebarSimple size={16} style={{ transform: "scaleX(-1)" }} />
+          </Button>
+        </Tooltip>
+        <Separator orientation="vertical" style={{ height: "16px" }} />
+        <ThemeToggle
+          size="sm"
+          value={resolvedTheme}
+          onValueChange={(value) => setTheme(value)}
+          aria-label={`Theme: ${resolvedTheme}`}
+        />
+        <Button
+          as="a"
+          variant="ghost"
+          size="sm"
+          icon
+          href="https://github.com/ConanMcN/fragments"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="View on GitHub"
+        >
+          <GitHubIcon />
+        </Button>
+      </Header.Actions>
+    </Header>
+  );
+}