12  IoT Product Explorer

Interactive analysis of real-world IoT products

12.1 Learning Objectives

⏱️ ~8 min | ⭐ Foundational | 📋 P01.C06.U01

By using the IoT Product Explorer, you will be able to:

• Compare architectures across real products (device ↔︎ edge ↔︎ cloud)
• Identify trade-offs in connectivity, power, security, and privacy
• Extract patterns (what succeeds, what fails, and why)
• Connect products to chapters for deeper study

12.2 Prerequisites

⏱️ ~4 min | ⭐ Foundational | 📋 P01.C06.U02

• A modern browser with JavaScript enabled
• Internet access (first load) for d3@7 and Mermaid from CDNs
• Optional: keyboard navigation (arrows/Enter/Escape)

Tip🎯 Interactive Product Analysis

Explore 10 real-world IoT products through an interactive interface. Search, filter, compare, and learn from successful products and failures. Click any product card to see detailed architecture diagrams, lessons learned, and comprehensive analysis.

d3 = require("d3@7")

// Error handling: Load product data with validation
rawData = FileAttachment("data/products/products-10-complete.json").json()
  .catch(err => {
    console.error('Failed to load product data:', err);
    return { products: [], error: 'Failed to load product data. Please refresh the page.' };
  })

// Data validation helper
validateProduct = (product) => {
  if (!product || typeof product !== 'object') return false;
  const required = ['id', 'name', 'category', 'summary', 'overview', 'hardware', 'connectivity'];
  return required.every(field => product[field]);
}

// Validated product data with error state
productsData = {
  if (rawData.error) {
    return { products: [], error: rawData.error };
  }
  if (!rawData.products || !Array.isArray(rawData.products)) {
    return { products: [], error: 'Invalid data format' };
  }
  const validProducts = rawData.products.filter(validateProduct);
  if (validProducts.length === 0) {
    return { products: [], error: 'No valid products found' };
  }
  return { products: validProducts, error: null };
}

// XSS Protection: Sanitize text for safe HTML insertion
sanitize = (str) => {
  if (typeof str !== 'string') return '';
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;');
}

// XSS Protection: Validate and sanitize product IDs
safeId = (id) => {
  if (typeof id !== 'string') return '';
  // Only allow alphanumeric characters and hyphens
  const safe = id.replace(/[^a-zA-Z0-9-]/g, '');
  return safe.substring(0, 100);
}

// Get valid product IDs for validation
validProductIds = new Set(productsData.products.map(p => p.id))

// State management
mutable selectedProductId = null
mutable panelOpen = false
mutable activeTab = "overview"
mutable dataError = productsData.error
mutable isLoading = false

// Search input
viewof searchTerm = Inputs.text({
  placeholder: "🔍 Search products by name, category, or technology...",
  width: "100%"
})

// Category filter
viewof selectedCategory = Inputs.select(
  ["All Categories", "Proximity & Positioning", "Wearables", "Communication Devices", "Smart Home", "Maker Platforms", "Environmental Monitoring", "Healthcare"],
  {
    label: "Category Filter:",
    value: "All Categories"
  }
)

// Filter products based on search and category
filteredProducts = {
  const searchLower = (searchTerm || "").toLowerCase();

  return productsData.products.filter(p => {
    // Text search
    if (searchTerm) {
      const matchesName = p.name.toLowerCase().includes(searchLower);
      const matchesCategory = p.category.toLowerCase().includes(searchLower);
      const matchesTags = p.tags.some(tag => tag.toLowerCase().includes(searchLower));
      const matchesSummary = p.summary.oneLine.toLowerCase().includes(searchLower);

      if (!(matchesName || matchesCategory || matchesTags || matchesSummary)) {
        return false;
      }
    }

    // Category filter
    if (selectedCategory !== "All Categories" && p.category !== selectedCategory) {
      return false;
    }

    return true;
  });
}

// Define global functions for onclick handlers with validation (must be before HTML rendering)
globalFunctionsSetup = {
  // Store valid IDs in window for validation
  window._validProductIds = new Set();

  window.selectProduct = function(productId) {
    // XSS Protection: Validate product ID format
    if (!window.isValidProductId || !window.isValidProductId(productId)) {
      console.warn('Invalid product ID format:', productId);
      return;
    }
    // Validate against actual product list
    if (!window._validProductIds.has(productId)) {
      console.warn('Product ID not found:', productId);
      return;
    }
    window.dispatchEvent(new CustomEvent('selectProduct', { detail: productId }));
  };

  window.closePanel = function() {
    window.dispatchEvent(new CustomEvent('closePanel'));
  };

  window.setActiveTab = function(tab) {
    // XSS Protection: Validate tab ID
    const validTabs = ['overview', 'architecture', 'security', 'privacy', 'business'];
    if (!validTabs.includes(tab)) {
      console.warn('Invalid tab:', tab);
      return;
    }
    window.dispatchEvent(new CustomEvent('setActiveTab', { detail: tab }));
  };

  return null;  // Return null to prevent 'undefined' output
}

// Update valid product IDs in window for validation
validIdsUpdate = {
  validProductIds.forEach(id => window._validProductIds.add(id));
  return null;  // Return null to prevent 'undefined' output
}

// Error display and product count
errorDisplayHtml = {
  if (dataError) {
    return html`
      <div role="alert" style="margin: 2rem 0; padding: 1.5rem; background: #fee2e2; border: 2px solid #ef4444; border-radius: 8px; color: #991b1b;">
        <strong>⚠️ Error:</strong> ${sanitize(dataError)}
        <button onclick="location.reload()" style="margin-left: 1rem; padding: 0.5rem 1rem; background: #ef4444; color: white; border: none; border-radius: 4px; cursor: pointer;">
          Reload Page
        </button>
      </div>
    `;
  }
  return html`
    <div aria-live="polite" style="margin: 1rem 0; color: #7F8C8D; font-size: 0.95rem;">
      Showing <strong>${filteredProducts.length}</strong> of <strong>${productsData.products.length}</strong> products
      ${filteredProducts.length === 0 && searchTerm ? html`<br><em>No products match your search. Try different keywords.</em>` : ''}
    </div>
  `;
}

html`${errorDisplayHtml}`

loadingStateHtml = {
  // Show loading state only if we're actually loading and have no data yet
  // In practice, data loads very quickly from FileAttachment, so this is mostly for UX polish
  if (isLoading && productsData.products.length === 0) {
    return html`
      <div class="loading-container" role="status" aria-live="polite" aria-label="Loading products">
        <div class="loading-spinner"></div>
        <div class="loading-text">Loading IoT products...</div>
      </div>
      <div class="product-grid">
        ${Array(6).fill(0).map(() => html`
          <div class="skeleton skeleton-card" aria-hidden="true"></div>
        `)}
      </div>
    `;
  }
  return html``;
}

html`${loadingStateHtml}`

html`
<style>
  /* Hide Observable undefined outputs */
  .observablehq--inspect {
    display: none !important;
  }

  .observablehq--undefined {
    display: none !important;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
    padding: 0;
  }

  .product-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .product-card:hover,
  .product-card:focus {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    border-color: #16A085;
    outline: none;
  }

  .product-card:focus-visible {
    box-shadow: 0 12px 24px rgba(0,0,0,0.15), 0 0 0 3px #16A085;
  }

  .product-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: linear-gradient(135deg, #2C3E50 0%, #16A085 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .product-card h3 {
    margin: 0 0 0.5rem 0;
    color: #2C3E50;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .product-category {
    color: #16A085;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
  }

  .product-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex-grow: 1;
  }

  .product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
  }

  .badge {
    background: #16A085;
    color: white;
    padding: 0.35rem 0.85rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
  }

  .product-stats {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
  }

  .stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
  }

  .stat-icon {
    font-size: 1.2rem;
  }

  .product-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .btn-primary {
    flex: 1;
    background: #16A085;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary:hover {
    background: #138D75;
    transform: translateY(-2px);
  }

  .btn-secondary {
    flex: 1;
    background: transparent;
    color: #16A085;
    border: 2px solid #16A085;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-secondary:hover {
    background: #16A085;
    color: white;
  }

  /* Detail Panel Styles */
  .detail-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }

  .detail-panel {
    position: fixed;
    right: -80vw;
    top: 0;
    width: 75vw;
    max-width: 1200px;
    height: 100vh;
    background: white;
    box-shadow: -8px 0 24px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow-y: auto;
    animation: slideIn 0.4s ease-out forwards;
  }

  @keyframes slideIn {
    to { right: 0; }
  }

  .panel-header {
    position: sticky;
    top: 0;
    background: white;
    padding: 2rem;
    border-bottom: 2px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }

  .panel-header h2 {
    margin: 0;
    color: #2C3E50;
    font-size: 2rem;
  }

  .close-btn {
    background: #e0e0e0;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .close-btn:hover {
    background: #E67E22;
    color: white;
  }

  .panel-tabs {
    position: sticky;
    top: 80px;
    background: white;
    display: flex;
    gap: 0.5rem;
    padding: 0 2rem;
    border-bottom: 2px solid #e0e0e0;
    z-index: 9;
  }

  .tab-button {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #7F8C8D;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

  .tab-button:hover {
    color: #2C3E50;
  }

  .tab-button.active {
    color: #16A085;
    border-bottom-color: #16A085;
  }

  .panel-content {
    padding: 2rem;
  }

  .content-section {
    margin-bottom: 2rem;
  }

  .content-section h3 {
    color: #2C3E50;
    margin-bottom: 1rem;
    font-size: 1.3rem;
  }

  .content-section p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .content-section ul {
    color: #555;
    line-height: 1.7;
  }

  .content-section ul li {
    margin-bottom: 0.5rem;
  }

  .architecture-diagram {
    margin: 2rem 0;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    overflow-x: auto;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
  }

  .feature-item {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #16A085;
  }

  .feature-item strong {
    color: #2C3E50;
    display: block;
    margin-bottom: 0.5rem;
  }

  .score-bar {
    display: flex;
    align-items: center;
    margin: 1rem 0;
  }

  .score-label {
    width: 120px;
    font-weight: 600;
    color: #2C3E50;
  }

  .score-visual {
    flex: 1;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
  }

  .score-fill {
    height: 100%;
    background: linear-gradient(90deg, #16A085 0%, #E67E22 100%);
    transition: width 0.6s ease;
  }

  .score-value {
    margin-left: 1rem;
    font-weight: 700;
    color: #2C3E50;
    font-size: 1.1rem;
  }

  /* Loading States */

  /* Skeleton loader */
  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
  }

  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .skeleton-card {
    height: 350px;
    border-radius: 12px;
  }

  /* Loading spinner */
  .loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #16A085;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
  }

  .loading-text {
    color: #7F8C8D;
    font-size: 1.1rem;
  }

  /* Mobile Optimization */

  /* Safe area for iPhone notch */
  @supports (padding: env(safe-area-inset-top)) {
    .detail-panel {
      padding-top: calc(1.5rem + env(safe-area-inset-top));
      padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .product-card,
    .skeleton,
    .loading-spinner {
      animation: none;
      transition: none;
    }

    .product-card:hover {
      transform: none;
    }

    .detail-panel {
      animation: none;
    }

    .detail-panel-overlay {
      animation: none;
    }
  }

  /* Improved touch targets */
  .btn-primary,
  .btn-secondary,
  .tab-button,
  .close-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Responsive design */
  @media (max-width: 768px) {
    .product-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .detail-panel {
      width: 100vw;
      right: -100vw;
    }

    .panel-tabs {
      overflow-x: auto;
      white-space: nowrap;
    }
  }
</style>

<div class="product-grid" role="list" aria-label="IoT Products">
  ${filteredProducts.map((product, index) => `
    <article
      class="product-card"
      role="listitem"
      tabindex="0"
      data-product-id="${safeId(product.id)}"
      onclick="selectProduct('${safeId(product.id)}')"
      onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectProduct('${safeId(product.id)}')}"
      aria-label="${sanitize(product.name)}: ${sanitize(product.category)}. ${sanitize(product.summary.oneLine)}"
    >
      <div class="product-card-image">
        <img src="${sanitize(product.image.main)}" alt="${sanitize(product.name)} product image" style="width: 100%; height: 100%; object-fit: cover;" loading="lazy">
      </div>
      <div class="product-card-content">
        <div class="product-category">${sanitize(product.category)}</div>
        <h3>${sanitize(product.name)}</h3>
        <p class="product-description">${sanitize(product.summary.short)}</p>

        <div class="product-badges" aria-label="Product tags">
          ${product.tags.slice(0, 3).map(tag => `
            <span class="badge">${sanitize(tag)}</span>
          `).join('')}
        </div>

        <div class="product-stats">
          <div class="stat">
            <span class="stat-icon" aria-hidden="true">📡</span>
            <span>${sanitize(product.connectivity.primary)}</span>
          </div>
          <div class="stat">
            <span class="stat-icon" aria-hidden="true">🔋</span>
            <span>${sanitize(product.hardware.power.lifetime)}</span>
          </div>
        </div>

        <div class="product-actions">
          <button class="btn-primary" onclick="event.stopPropagation(); selectProduct('${safeId(product.id)}')" aria-label="Learn more about ${sanitize(product.name)}">
            Learn More
          </button>
        </div>
      </div>
    </article>
  `).join('')}
</div>
`

eventListenersSetup = {
  window.addEventListener('selectProduct', (e) => {
    mutable selectedProductId = e.detail;
    mutable panelOpen = true;
    mutable activeTab = "overview";
  });

  window.addEventListener('closePanel', () => {
    mutable panelOpen = false;
  });

  window.addEventListener('setActiveTab', (e) => {
    mutable activeTab = e.detail;
  });

  return null;  // Return null to prevent 'undefined' output
}

// Detail Panel Component with sanitization and accessibility
detailPanelHtml = {
  if (!panelOpen || !selectedProductId) return "";

  // Validate product ID before lookup
  if (!validProductIds.has(selectedProductId)) return "";

  const product = productsData.products.find(p => p.id === selectedProductId);
  if (!product) return "";

  const tabs = [
    { id: "overview", label: "Overview", icon: "📋" },
    { id: "architecture", label: "Architecture", icon: "🏗️" },
    { id: "security", label: "Security", icon: "🔒" },
    { id: "privacy", label: "Privacy", icon: "👁️" },
    { id: "business", label: "Business", icon: "💼" }
  ];

  // Helper to safely get array content
  const safeArray = (arr) => Array.isArray(arr) ? arr : [];
  const safeJoin = (arr, sep = ', ') => safeArray(arr).map(sanitize).join(sep);

  let tabContent = "";

  if (activeTab === "overview") {
    tabContent = `
      <div class="content-section">
        <h3>Product Description</h3>
        <p>${sanitize(product.summary.full)}</p>
      </div>

      <div class="content-section">
        <h3>Target Market</h3>
        <ul>
          ${safeArray(product.overview.targetMarket).map(market => `<li>${sanitize(market)}</li>`).join('')}
        </ul>
      </div>

      <div class="content-section">
        <h3>Value Proposition</h3>
        <p>${sanitize(product.overview.valueProposition)}</p>
      </div>

      <div class="content-section">
        <h3>Key Features</h3>
        <div class="feature-grid">
          ${safeArray(product.overview.keyFeatures).map(feature => `
            <div class="feature-item">
              <strong aria-hidden="true">✓</strong> ${sanitize(feature)}
            </div>
          `).join('')}
        </div>
      </div>

      <div class="content-section">
        <h3>Hardware Components</h3>
        <p><strong>Sensors:</strong> ${safeJoin(product.hardware.sensors)}</p>
        <p><strong>Power:</strong> ${sanitize(product.hardware.power.source)} (${sanitize(product.hardware.power.lifetime)})</p>
        <p><strong>Processing:</strong> ${sanitize(product.hardware.processing)}</p>
      </div>

      <div class="content-section">
        <h3>Connectivity</h3>
        <p><strong>Technology:</strong> ${sanitize(product.connectivity.primary)}</p>
        <p><strong>Protocols:</strong> ${safeJoin(product.connectivity.protocols)}</p>
        <p><strong>Range:</strong> ${sanitize(product.connectivity.range)}</p>
        <p><strong>Topology:</strong> ${sanitize(product.connectivity.topology)}</p>
      </div>

      <div class="content-section">
        <h3>Product Scores</h3>
        ${Object.entries(product.scores || {}).filter(([key]) => key !== 'overall').map(([key, value]) => {
          const numValue = typeof value === 'number' ? value : 0;
          return `
          <div class="score-bar" role="progressbar" aria-valuenow="${numValue}" aria-valuemin="0" aria-valuemax="10" aria-label="${sanitize(key)}: ${numValue} out of 10">
            <div class="score-label">${sanitize(key.charAt(0).toUpperCase() + key.slice(1))}</div>
            <div class="score-visual">
              <div class="score-fill" style="width: ${Math.min(100, numValue * 10)}%"></div>
            </div>
            <div class="score-value">${numValue}/10</div>
          </div>
        `}).join('')}
      </div>

      <div class="content-section">
        <h3>Lessons Learned</h3>
        <p><strong>Successes:</strong></p>
        <ul>
          ${safeArray(product.lessonsLearned?.successes).map(s => `<li>${sanitize(s)}</li>`).join('')}
        </ul>
        <p><strong>Failures:</strong></p>
        <ul>
          ${safeArray(product.lessonsLearned?.failures).map(f => `<li>${sanitize(f)}</li>`).join('')}
        </ul>
        <p><strong>Key Insight:</strong> ${sanitize(product.lessonsLearned?.keyInsight || 'N/A')}</p>
      </div>
    `;
  } else if (activeTab === "architecture") {
    // Extract Mermaid code without markdown fence - note: Mermaid code needs to be preserved as-is
    const mermaidCode = (product.architectureDiagram || '')
      .replace(/^```mermaid\n?/i, '')
      .replace(/\n?```$/i, '')
      .trim();

    tabContent = `
      <div class="content-section">
        <h3>System Architecture Diagram</h3>
        <div class="architecture-diagram" role="img" aria-label="System architecture diagram for ${sanitize(product.name)}">
          <pre class="mermaid">${mermaidCode}</pre>
        </div>
        <p><em>This diagram shows the complete system architecture including hardware components, connectivity, and cloud services.</em></p>
      </div>

      <div class="content-section">
        <h3>Hardware Details</h3>
        <p><strong>Sensors:</strong> ${safeJoin(product.hardware.sensors)}</p>
        ${safeArray(product.hardware.actuators).length > 0 ? `<p><strong>Actuators:</strong> ${safeJoin(product.hardware.actuators)}</p>` : ''}
        <p><strong>Processing:</strong> ${sanitize(product.hardware.processing)}</p>
        <p><strong>Power Source:</strong> ${sanitize(product.hardware.power.source)}</p>
        <p><strong>Battery Life:</strong> ${sanitize(product.hardware.power.lifetime)}</p>
        ${product.hardware.power.notes ? `<p><em>${sanitize(product.hardware.power.notes)}</em></p>` : ''}
      </div>

      <div class="content-section">
        <h3>Connectivity Architecture</h3>
        <p><strong>Primary Technology:</strong> ${sanitize(product.connectivity.primary)}</p>
        <p><strong>Protocols:</strong> ${safeJoin(product.connectivity.protocols)}</p>
        <p><strong>Network Topology:</strong> ${sanitize(product.connectivity.topology)}</p>
        <p><strong>Range:</strong> ${sanitize(product.connectivity.range)}</p>
        <p><strong>Typical Bandwidth:</strong> ${sanitize(product.connectivity.bandwidth)}</p>
      </div>
    `;
  } else if (activeTab === "security") {
    const security = product.security || {};
    tabContent = `
      <div class="content-section">
        <h3>Security Overview</h3>
        <div class="score-bar" role="progressbar" aria-valuenow="${security.score || 0}" aria-valuemin="0" aria-valuemax="10" aria-label="Security score: ${security.score || 0} out of 10">
          <div class="score-label">Security Score</div>
          <div class="score-visual">
            <div class="score-fill" style="width: ${Math.min(100, (security.score || 0) * 10)}%"></div>
          </div>
          <div class="score-value">${security.score || 0}/10</div>
        </div>
      </div>

      <div class="content-section">
        <h3>Encryption & Authentication</h3>
        <p>${sanitize(security.encryption || 'Not specified')}</p>
      </div>

      <div class="content-section">
        <h3>Security Features</h3>
        <ul>
          ${safeArray(security.features).map(f => '<li>' + sanitize(f) + '</li>').join('') || '<li>No security features documented</li>'}
        </ul>
      </div>

      <div class="content-section">
        <h3>Security Notes</h3>
        <p><em>${sanitize(security.notes || 'No additional security notes available.')}</em></p>
      </div>
    `;
  } else if (activeTab === "privacy") {
    const privacy = product.privacy || {};
    tabContent = `
      <div class="content-section">
        <h3>Privacy Overview</h3>
        <div class="score-bar" role="progressbar" aria-valuenow="${privacy.score || 0}" aria-valuemin="0" aria-valuemax="10" aria-label="Privacy score: ${privacy.score || 0} out of 10">
          <div class="score-label">Privacy Score</div>
          <div class="score-visual">
            <div class="score-fill" style="width: ${Math.min(100, (privacy.score || 0) * 10)}%"></div>
          </div>
          <div class="score-value">${privacy.score || 0}/10</div>
        </div>
      </div>

      <div class="content-section">
        <h3>Data Collected</h3>
        <ul>
          ${safeArray(privacy.dataCollected).map(d => '<li>' + sanitize(d) + '</li>').join('') || '<li>No data collection documented</li>'}
        </ul>
      </div>

      <div class="content-section">
        <h3>Privacy Concerns</h3>
        <ul>
          ${safeArray(privacy.concerns).map(c => '<li>' + sanitize(c) + '</li>').join('') || '<li>No specific concerns documented</li>'}
        </ul>
      </div>

      <div class="content-section">
        <h3>Compliance</h3>
        <p>${sanitize(privacy.compliance || 'No compliance information available.')}</p>
      </div>
    `;
  } else if (activeTab === "business") {
    const business = product.business || {};
    tabContent = `
      <div class="content-section">
        <h3>Business Model</h3>
        <p><strong>Model:</strong> ${sanitize(business.model || 'Not specified')}</p>
        <p><strong>Pricing:</strong> ${sanitize(business.pricing || 'Not specified')}</p>
        <p><strong>Market Status:</strong> ${sanitize(business.marketStatus || 'Not specified')}</p>
      </div>

      <div class="content-section">
        <h3>Business Viability</h3>
        <div class="score-bar" role="progressbar" aria-valuenow="${business.viability || 0}" aria-valuemin="0" aria-valuemax="10" aria-label="Viability score: ${business.viability || 0} out of 10">
          <div class="score-label">Viability Score</div>
          <div class="score-visual">
            <div class="score-fill" style="width: ${Math.min(100, (business.viability || 0) * 10)}%"></div>
          </div>
          <div class="score-value">${business.viability || 0}/10</div>
        </div>
      </div>

      ${product.competitorComparison ? `
      <div class="content-section">
        <h3>Competitive Landscape</h3>
        <p><strong>Direct Competitors:</strong> ${safeJoin(product.competitorComparison.directCompetitors)}</p>
        <p><strong>Differentiators:</strong></p>
        <ul>
          ${safeArray(product.competitorComparison.differentiators).map(d => '<li>' + sanitize(d) + '</li>').join('')}
        </ul>
        <p><strong>Pricing Position:</strong> ${sanitize(product.competitorComparison.pricingPosition || 'N/A')}</p>
      </div>
      ` : ''}

      ${product.realWorldDeployments && product.realWorldDeployments.length > 0 ? `
      <div class="content-section">
        <h3>Real-World Deployments</h3>
        ${product.realWorldDeployments.map(dep => `
          <div class="feature-item" style="margin-bottom: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
            <strong>${sanitize(dep.customer)}</strong><br>
            <span>Scale: ${sanitize(dep.scale)}</span><br>
            <span>Outcome: ${sanitize(dep.outcome)}</span><br>
            <small><em>Source: ${sanitize(dep.source)}</em></small>
          </div>
        `).join('')}
      </div>
      ` : ''}
    `;
  }

  return `
    <div class="detail-panel-overlay" onclick="closePanel()" role="presentation"></div>
    <div class="detail-panel" role="dialog" aria-modal="true" aria-labelledby="panel-title">
      <div class="panel-header">
        <h2 id="panel-title">${sanitize(product.name)}</h2>
        <button class="close-btn" onclick="closePanel()" aria-label="Close panel" autofocus>✕</button>
      </div>

      <div class="panel-tabs" role="tablist" aria-label="Product information tabs">
        ${tabs.map(tab => `
          <button
            class="tab-button ${activeTab === tab.id ? 'active' : ''}"
            onclick="setActiveTab('${safeId(tab.id)}')"
            role="tab"
            aria-selected="${activeTab === tab.id}"
            aria-controls="tabpanel-${safeId(tab.id)}"
            id="tab-${safeId(tab.id)}"
          >
            <span aria-hidden="true">${tab.icon}</span> ${sanitize(tab.label)}
          </button>
        `).join('')}
      </div>

      <div class="panel-content" role="tabpanel" id="tabpanel-${safeId(activeTab)}" aria-labelledby="tab-${safeId(activeTab)}">
        ${tabContent}

        <div class="content-section" style="margin-top: 3rem; padding-top: 2rem; border-top: 2px solid #e0e0e0;">
          <a href="${sanitize((product.fullAnalysisUrl || '#').replace('.qmd', '.html'))}" class="btn-primary" style="display: inline-block; text-decoration: none; text-align: center;" aria-label="Read complete analysis of ${sanitize(product.name)}">
            <span aria-hidden="true">📖</span> Read Complete Analysis
          </a>
        </div>
      </div>
    </div>
  `;
}

html`${detailPanelHtml}`

---

12.3 📊 Products Included

10 Real-World IoT Products Analyzed:

Product	Category	Year	Status	Key Technology
Estimote Beacon	Proximity & Positioning	2013	Legacy	BLE iBeacon (3-year battery)
FiLIP Watch	Wearables	2013	Legacy	GPS + 2G Cellular (Child safety)
Good Night Lamp	Communication Devices	2005	Discontinued	Cellular M2M (Emotional IoT)
Honda Smart Home	Smart Home	2014	Demo	Solar + V2H (Zero-net-energy)
Angel Blocks	Maker Platforms	2015	Defunct	Sub-GHz RF (Unverified claims)
LIFX Smart Lighting	Smart Home	2012	Active	WiFi 802.11n (No hub required)
Nest Thermostat	Smart Home	2011	Active	WiFi + Thread (ML-powered)
SmartThings Hub	Smart Home	2012	Active	Zigbee/Z-Wave/WiFi (Multi-protocol)
Awair Monitor	Environmental Monitoring	2015	Active	WiFi (5-sensor IAQ)
AliveCor Kardia	Healthcare	2012	Active	BLE/Ultrasonic (FDA-cleared ECG)

---

12.4 🎓 Learning Features

Interactive Exploration: 1. Search: Try “BLE”, “GPS”, “cellular”, “battery”, “solar”, or “defunct” 2. Filter by Category: See products grouped by use case 3. Product Cards: Hover for lift animation, click for details 4. Detail Panel: Comprehensive overview + architecture diagrams 5. Architecture Diagrams: Mermaid diagrams showing complete system design

What You’ll Learn: - ✅ Technology Trade-offs: Battery life vs features, range vs power, simplicity vs flexibility - ✅ Design Patterns: BLE broadcast, cellular cloud-centric, V2H energy management - ✅ Success & Failure: Museum-recognized design (Good Night Lamp) vs vaporware (Angel Blocks) - ✅ Real Data: Actual battery life (3 years), range (70m), costs ($30-40/beacon) - ✅ Business Models: Hardware-only, subscription, platform, demonstration

---

12.5 🚀 Features & Roadmap

Available Now: - ✅ 5-Tab Analysis: Overview, Architecture, Security, Privacy, and Business analysis for each product - ✅ Interactive Search: Search by name, category, technology, or tags - ✅ Category Filtering: Filter by product category - ✅ Mermaid Diagrams: Interactive architecture diagrams with IEEE color scheme - ✅ Keyboard Navigation: Full accessibility with arrow keys, Enter, Escape - ✅ Mobile Responsive: Optimized for all screen sizes

Coming Soon: - 🔜 Comparison Mode: Select 2-4 products for side-by-side analysis - 🔜 Timeline View: See IoT product evolution from 2005-2025 - 🔜 Pattern Explorer: Automatically identify common design patterns - 🔜 Technology Stack View: Group products by primary connectivity - 🔜 Export Features: Download comparisons as CSV/PDF

Try the Explorer: 1. Search for “defunct” to see failed products and learn from their failures 2. Search for “cellular” to compare 3 different cellular IoT approaches 3. Filter by “Smart Home” to see 4 products in this category 4. Click any product → Security or Privacy tabs for detailed analysis 5. Click Business tab to see pricing, competitors, and real deployments

12.6 Summary

The IoT Product Explorer turns product case studies into a searchable, comparable dataset:

• Real products, real constraints: Compare connectivity, power, and architecture decisions across 10 devices
• Multi-lens analysis: Review each product through Architecture, Security, Privacy, and Business tabs
• Learn from outcomes: Contrast successful products with legacy/defunct designs to spot failure patterns
• Direct chapter integration: Jump from a product to its full written analysis for deeper study

12.7 Knowledge Check

NoteAuto-Gradable Quick Check

1. The primary purpose of the IoT Product Explorer is to:

This hub helps you explore real products and then connect architecture, networking, security, privacy, and business decisions back to the chapters.

2. Which set of tabs reflects the five-lens analysis available for each product?

Each product includes a structured view spanning technical architecture plus security, privacy, and business context.

3. If you open a product detail panel and want to close it quickly using the keyboard, you should press:

The app supports keyboard accessibility; Escape closes the detail panel.

4. The “Read Complete Analysis” button is intended to:

Use the explorer for discovery and comparison, then open the full chapter analysis when you want the complete narrative and deeper reasoning.

12.8 What’s Next

• Pick one product and follow “Read Complete Analysis” to study the full case study chapter
• Use the Knowledge Map to discover prerequisite chapters related to a product’s connectivity, sensing, and security choices
• Validate your understanding with Quizzes and capture weak spots in Knowledge Gaps