From 5e7b273b339cd11d7b4b55dd50a1bf6c823b41d5 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 5 Oct 2025 06:43:34 -0500
Subject: [PATCH] refactor: split deployment info into server/client components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor to use server component composition pattern where DeploymentInfoContent (server component) imports build info JSON directly and is rendered as a child of DeploymentInfoModal (client component). Eliminates unnecessary API fetch.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/DeploymentInfo.tsx    | 341 +-----------------
 .../src/components/DeploymentInfoContent.tsx  | 197 ++++++++++
 .../src/components/DeploymentInfoModal.tsx    | 115 ++++++
 3 files changed, 317 insertions(+), 336 deletions(-)
 create mode 100644 apps/web/src/components/DeploymentInfoContent.tsx
 create mode 100644 apps/web/src/components/DeploymentInfoModal.tsx

diff --git a/apps/web/src/components/DeploymentInfo.tsx b/apps/web/src/components/DeploymentInfo.tsx
index 55465c9c..c8fa5f34 100644
--- a/apps/web/src/components/DeploymentInfo.tsx
+++ b/apps/web/src/components/DeploymentInfo.tsx
@@ -1,341 +1,10 @@
-'use client'
-
-import React, { useState, useEffect } from 'react'
-import * as Dialog from '@radix-ui/react-dialog'
-import { Info, X, GitBranch, GitCommit, Clock, Package, Server } from 'lucide-react'
-import { css } from '../../styled-system/css'
-import { vstack, hstack } from '../../styled-system/patterns'
-
-interface BuildInfo {
-  version: string
-  buildTime: string
-  buildTimestamp: number
-  git: {
-    commit: string | null
-    commitShort: string | null
-    branch: string | null
-    tag: string | null
-    isDirty: boolean
-  }
-  environment: string
-  buildNumber: string | null
-  nodeVersion: string
-}
+import { DeploymentInfoModal } from './DeploymentInfoModal'
+import { DeploymentInfoContent } from './DeploymentInfoContent'
 
 export function DeploymentInfo() {
-  const [open, setOpen] = useState(false)
-  const [buildInfo, setBuildInfo] = useState<BuildInfo | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    // Keyboard shortcut: Cmd/Ctrl + Shift + I
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'I') {
-        e.preventDefault()
-        setOpen(prev => !prev)
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [])
-
-  useEffect(() => {
-    if (open && !buildInfo) {
-      fetch('/api/build-info')
-        .then(res => res.json())
-        .then(data => {
-          setBuildInfo(data)
-          setLoading(false)
-        })
-        .catch(err => {
-          console.error('Failed to load build info:', err)
-          setLoading(false)
-        })
-    }
-  }, [open, buildInfo])
-
-  const formatTimestamp = (timestamp: number) => {
-    const date = new Date(timestamp)
-    return date.toLocaleString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      timeZoneName: 'short'
-    })
-  }
-
-  const getTimeAgo = (timestamp: number) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000)
-
-    const intervals = {
-      year: 31536000,
-      month: 2592000,
-      week: 604800,
-      day: 86400,
-      hour: 3600,
-      minute: 60,
-      second: 1
-    }
-
-    for (const [unit, secondsInUnit] of Object.entries(intervals)) {
-      const interval = Math.floor(seconds / secondsInUnit)
-      if (interval >= 1) {
-        return `${interval} ${unit}${interval === 1 ? '' : 's'} ago`
-      }
-    }
-    return 'just now'
-  }
-
   return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Portal>
-        <Dialog.Overlay className={css({
-          position: 'fixed',
-          inset: '0',
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          zIndex: 9998,
-          animation: 'fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        })} />
-        <Dialog.Content className={css({
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          backgroundColor: 'white',
-          borderRadius: 'lg',
-          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-          padding: '6',
-          width: '90vw',
-          maxWidth: '500px',
-          maxHeight: '85vh',
-          overflow: 'auto',
-          zIndex: 9999,
-          animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        })}>
-          <Dialog.Title className={css({
-            fontSize: 'xl',
-            fontWeight: 'semibold',
-            marginBottom: '4',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '2'
-          })}>
-            <Info size={24} />
-            Deployment Information
-          </Dialog.Title>
-
-          {loading ? (
-            <div className={css({ textAlign: 'center', padding: '8' })}>
-              Loading...
-            </div>
-          ) : buildInfo ? (
-            <div className={vstack({ alignItems: 'stretch', gap: '4' })}>
-              <InfoRow
-                icon={<Package size={18} />}
-                label="Version"
-                value={buildInfo.version}
-              />
-
-              <InfoRow
-                icon={<Clock size={18} />}
-                label="Build Time"
-                value={
-                  <div className={vstack({ alignItems: 'flex-start', gap: '1' })}>
-                    <span>{formatTimestamp(buildInfo.buildTimestamp)}</span>
-                    <span className={css({ fontSize: 'sm', color: 'gray.600' })}>
-                      {getTimeAgo(buildInfo.buildTimestamp)}
-                    </span>
-                  </div>
-                }
-              />
-
-              {buildInfo.git.branch && (
-                <InfoRow
-                  icon={<GitBranch size={18} />}
-                  label="Branch"
-                  value={
-                    <span className={css({
-                      fontFamily: 'mono',
-                      fontSize: 'sm',
-                      backgroundColor: 'gray.100',
-                      padding: '1 2',
-                      borderRadius: 'sm'
-                    })}>
-                      {buildInfo.git.branch}
-                      {buildInfo.git.isDirty && (
-                        <span className={css({ color: 'orange.600', marginLeft: '2' })}>
-                          (dirty)
-                        </span>
-                      )}
-                    </span>
-                  }
-                />
-              )}
-
-              {buildInfo.git.commitShort && (
-                <InfoRow
-                  icon={<GitCommit size={18} />}
-                  label="Commit"
-                  value={
-                    <div className={vstack({ alignItems: 'flex-start', gap: '1' })}>
-                      <span className={css({
-                        fontFamily: 'mono',
-                        fontSize: 'sm',
-                        backgroundColor: 'gray.100',
-                        padding: '1 2',
-                        borderRadius: 'sm'
-                      })}>
-                        {buildInfo.git.commitShort}
-                      </span>
-                      {buildInfo.git.commit && (
-                        <span className={css({
-                          fontFamily: 'mono',
-                          fontSize: 'xs',
-                          color: 'gray.500'
-                        })}>
-                          {buildInfo.git.commit}
-                        </span>
-                      )}
-                    </div>
-                  }
-                />
-              )}
-
-              {buildInfo.git.tag && (
-                <InfoRow
-                  icon={<Package size={18} />}
-                  label="Tag"
-                  value={
-                    <span className={css({
-                      fontFamily: 'mono',
-                      fontSize: 'sm',
-                      backgroundColor: 'blue.100',
-                      color: 'blue.700',
-                      padding: '1 2',
-                      borderRadius: 'sm'
-                    })}>
-                      {buildInfo.git.tag}
-                    </span>
-                  }
-                />
-              )}
-
-              <InfoRow
-                icon={<Server size={18} />}
-                label="Environment"
-                value={
-                  <span className={css({
-                    fontFamily: 'mono',
-                    fontSize: 'sm',
-                    backgroundColor: buildInfo.environment === 'production' ? 'green.100' : 'yellow.100',
-                    color: buildInfo.environment === 'production' ? 'green.700' : 'yellow.700',
-                    padding: '1 2',
-                    borderRadius: 'sm'
-                  })}>
-                    {buildInfo.environment}
-                  </span>
-                }
-              />
-
-              {buildInfo.buildNumber && (
-                <InfoRow
-                  label="Build Number"
-                  value={buildInfo.buildNumber}
-                />
-              )}
-
-              <InfoRow
-                label="Node Version"
-                value={
-                  <span className={css({ fontFamily: 'mono', fontSize: 'sm' })}>
-                    {buildInfo.nodeVersion}
-                  </span>
-                }
-              />
-            </div>
-          ) : (
-            <div className={css({ textAlign: 'center', padding: '8', color: 'gray.600' })}>
-              Failed to load build information
-            </div>
-          )}
-
-          <div className={css({
-            marginTop: '6',
-            paddingTop: '4',
-            borderTop: '1px solid',
-            borderColor: 'gray.200',
-            fontSize: 'sm',
-            color: 'gray.600',
-            textAlign: 'center'
-          })}>
-            Press <kbd className={css({
-              fontFamily: 'mono',
-              backgroundColor: 'gray.100',
-              padding: '0.5 1.5',
-              borderRadius: 'sm',
-              border: '1px solid',
-              borderColor: 'gray.300'
-            })}>⌘⇧I</kbd> or <kbd className={css({
-              fontFamily: 'mono',
-              backgroundColor: 'gray.100',
-              padding: '0.5 1.5',
-              borderRadius: 'sm',
-              border: '1px solid',
-              borderColor: 'gray.300'
-            })}>Ctrl⇧I</kbd> to toggle
-          </div>
-
-          <Dialog.Close className={css({
-            position: 'absolute',
-            top: '4',
-            right: '4',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 'md',
-            padding: '2',
-            color: 'gray.700',
-            cursor: 'pointer',
-            _hover: {
-              backgroundColor: 'gray.100'
-            }
-          })}>
-            <X size={20} />
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  )
-}
-
-function InfoRow({
-  icon,
-  label,
-  value
-}: {
-  icon?: React.ReactNode
-  label: string
-  value: React.ReactNode
-}) {
-  return (
-    <div className={hstack({
-      justifyContent: 'space-between',
-      gap: '4',
-      paddingY: '2',
-      borderBottom: '1px solid',
-      borderColor: 'gray.100'
-    })}>
-      <div className={hstack({ gap: '2', color: 'gray.700' })}>
-        {icon}
-        <span className={css({ fontWeight: 'medium' })}>{label}</span>
-      </div>
-      <div className={css({ textAlign: 'right', flex: '1' })}>
-        {value}
-      </div>
-    </div>
+    <DeploymentInfoModal>
+      <DeploymentInfoContent />
+    </DeploymentInfoModal>
   )
 }
diff --git a/apps/web/src/components/DeploymentInfoContent.tsx b/apps/web/src/components/DeploymentInfoContent.tsx
new file mode 100644
index 00000000..35fb5031
--- /dev/null
+++ b/apps/web/src/components/DeploymentInfoContent.tsx
@@ -0,0 +1,197 @@
+import React from 'react'
+import { GitBranch, GitCommit, Clock, Package, Server } from 'lucide-react'
+import { css } from '../../styled-system/css'
+import { vstack, hstack } from '../../styled-system/patterns'
+import buildInfo from '@/generated/build-info.json'
+
+function formatTimestamp(timestamp: number) {
+  const date = new Date(timestamp)
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short'
+  })
+}
+
+function getTimeAgo(timestamp: number) {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000)
+
+  const intervals = {
+    year: 31536000,
+    month: 2592000,
+    week: 604800,
+    day: 86400,
+    hour: 3600,
+    minute: 60,
+    second: 1
+  }
+
+  for (const [unit, secondsInUnit] of Object.entries(intervals)) {
+    const interval = Math.floor(seconds / secondsInUnit)
+    if (interval >= 1) {
+      return `${interval} ${unit}${interval === 1 ? '' : 's'} ago`
+    }
+  }
+  return 'just now'
+}
+
+export function DeploymentInfoContent() {
+  return (
+    <div className={vstack({ alignItems: 'stretch', gap: '4' })}>
+      <InfoRow
+        icon={<Package size={18} />}
+        label="Version"
+        value={buildInfo.version}
+      />
+
+      <InfoRow
+        icon={<Clock size={18} />}
+        label="Build Time"
+        value={
+          <div className={vstack({ alignItems: 'flex-start', gap: '1' })}>
+            <span>{formatTimestamp(buildInfo.buildTimestamp)}</span>
+            <span className={css({ fontSize: 'sm', color: 'gray.600' })}>
+              {getTimeAgo(buildInfo.buildTimestamp)}
+            </span>
+          </div>
+        }
+      />
+
+      {buildInfo.git.branch && (
+        <InfoRow
+          icon={<GitBranch size={18} />}
+          label="Branch"
+          value={
+            <span className={css({
+              fontFamily: 'mono',
+              fontSize: 'sm',
+              backgroundColor: 'gray.100',
+              padding: '1 2',
+              borderRadius: 'sm'
+            })}>
+              {buildInfo.git.branch}
+              {buildInfo.git.isDirty && (
+                <span className={css({ color: 'orange.600', marginLeft: '2' })}>
+                  (dirty)
+                </span>
+              )}
+            </span>
+          }
+        />
+      )}
+
+      {buildInfo.git.commitShort && (
+        <InfoRow
+          icon={<GitCommit size={18} />}
+          label="Commit"
+          value={
+            <div className={vstack({ alignItems: 'flex-start', gap: '1' })}>
+              <span className={css({
+                fontFamily: 'mono',
+                fontSize: 'sm',
+                backgroundColor: 'gray.100',
+                padding: '1 2',
+                borderRadius: 'sm'
+              })}>
+                {buildInfo.git.commitShort}
+              </span>
+              {buildInfo.git.commit && (
+                <span className={css({
+                  fontFamily: 'mono',
+                  fontSize: 'xs',
+                  color: 'gray.500'
+                })}>
+                  {buildInfo.git.commit}
+                </span>
+              )}
+            </div>
+          }
+        />
+      )}
+
+      {buildInfo.git.tag && (
+        <InfoRow
+          icon={<Package size={18} />}
+          label="Tag"
+          value={
+            <span className={css({
+              fontFamily: 'mono',
+              fontSize: 'sm',
+              backgroundColor: 'blue.100',
+              color: 'blue.700',
+              padding: '1 2',
+              borderRadius: 'sm'
+            })}>
+              {buildInfo.git.tag}
+            </span>
+          }
+        />
+      )}
+
+      <InfoRow
+        icon={<Server size={18} />}
+        label="Environment"
+        value={
+          <span className={css({
+            fontFamily: 'mono',
+            fontSize: 'sm',
+            backgroundColor: buildInfo.environment === 'production' ? 'green.100' : 'yellow.100',
+            color: buildInfo.environment === 'production' ? 'green.700' : 'yellow.700',
+            padding: '1 2',
+            borderRadius: 'sm'
+          })}>
+            {buildInfo.environment}
+          </span>
+        }
+      />
+
+      {buildInfo.buildNumber && (
+        <InfoRow
+          label="Build Number"
+          value={buildInfo.buildNumber}
+        />
+      )}
+
+      <InfoRow
+        label="Node Version"
+        value={
+          <span className={css({ fontFamily: 'mono', fontSize: 'sm' })}>
+            {buildInfo.nodeVersion}
+          </span>
+        }
+      />
+    </div>
+  )
+}
+
+function InfoRow({
+  icon,
+  label,
+  value
+}: {
+  icon?: React.ReactNode
+  label: string
+  value: React.ReactNode
+}) {
+  return (
+    <div className={hstack({
+      justifyContent: 'space-between',
+      gap: '4',
+      paddingY: '2',
+      borderBottom: '1px solid',
+      borderColor: 'gray.100'
+    })}>
+      <div className={hstack({ gap: '2', color: 'gray.700' })}>
+        {icon}
+        <span className={css({ fontWeight: 'medium' })}>{label}</span>
+      </div>
+      <div className={css({ textAlign: 'right', flex: '1' })}>
+        {value}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/DeploymentInfoModal.tsx b/apps/web/src/components/DeploymentInfoModal.tsx
new file mode 100644
index 00000000..a81645eb
--- /dev/null
+++ b/apps/web/src/components/DeploymentInfoModal.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { Info, X } from 'lucide-react'
+import { css } from '../../styled-system/css'
+
+interface DeploymentInfoModalProps {
+  children: React.ReactNode
+}
+
+export function DeploymentInfoModal({ children }: DeploymentInfoModalProps) {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    // Keyboard shortcut: Cmd/Ctrl + Shift + I
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'I') {
+        e.preventDefault()
+        setOpen(prev => !prev)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className={css({
+          position: 'fixed',
+          inset: '0',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 9998,
+          animation: 'fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        })} />
+        <Dialog.Content className={css({
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          backgroundColor: 'white',
+          borderRadius: 'lg',
+          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+          padding: '6',
+          width: '90vw',
+          maxWidth: '500px',
+          maxHeight: '85vh',
+          overflow: 'auto',
+          zIndex: 9999,
+          animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        })}>
+          <Dialog.Title className={css({
+            fontSize: 'xl',
+            fontWeight: 'semibold',
+            marginBottom: '4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2'
+          })}>
+            <Info size={24} />
+            Deployment Information
+          </Dialog.Title>
+
+          {children}
+
+          <div className={css({
+            marginTop: '6',
+            paddingTop: '4',
+            borderTop: '1px solid',
+            borderColor: 'gray.200',
+            fontSize: 'sm',
+            color: 'gray.600',
+            textAlign: 'center'
+          })}>
+            Press <kbd className={css({
+              fontFamily: 'mono',
+              backgroundColor: 'gray.100',
+              padding: '0.5 1.5',
+              borderRadius: 'sm',
+              border: '1px solid',
+              borderColor: 'gray.300'
+            })}>⌘⇧I</kbd> or <kbd className={css({
+              fontFamily: 'mono',
+              backgroundColor: 'gray.100',
+              padding: '0.5 1.5',
+              borderRadius: 'sm',
+              border: '1px solid',
+              borderColor: 'gray.300'
+            })}>Ctrl⇧I</kbd> to toggle
+          </div>
+
+          <Dialog.Close className={css({
+            position: 'absolute',
+            top: '4',
+            right: '4',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'md',
+            padding: '2',
+            color: 'gray.700',
+            cursor: 'pointer',
+            _hover: {
+              backgroundColor: 'gray.100'
+            }
+          })}>
+            <X size={20} />
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}