feat: enhance plugin configuration with diagnostics options and refactor build hash computation

2026-08-06 00:43:22 +02:00 · 2025-12-10 20:03:59 -08:00
parent 7349d81102
commit 56d13d3e08
9 changed files with 322 additions and 161 deletions
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button"
 import { TARGETS } from "@/constants/targets"
 import type { Doc } from "@/convex/_generated/dataModel"
 import { ArtifactType, getArtifactFilenameBase } from "@/convex/lib/filename"
+import { computeFlagsFromConfig } from "@/convex/lib/flags"
 import modulesData from "@/convex/modules.json"
 import { getImplicitDependencies, humanizeStatus } from "@/lib/utils"
 import registryData from "@/public/registry.json"
@@ -48,7 +49,7 @@ export function BuildProgress({ build, isAdmin = false, onRetry, showActions = t
      ? `https://github.com/MeshEnvy/mesh-forge/actions/runs/${build.githubRunId}`
      : null

-  const shareUrl = `${window.location.origin}/builds?clone=${build.buildHash}`
+  const shareUrl = `${window.location.origin}/builds?hash=${build.buildHash}`

  const handleShare = async () => {
    try {
@@ -64,7 +65,10 @@ export function BuildProgress({ build, isAdmin = false, onRetry, showActions = t
  }

  const generateBashCommand = (): string => {
-    const flags = computeFlagsFromConfig(build.config)
+    const flags = computeFlagsFromConfig(
+      build.config,
+      registryData as Record<string, { configOptions?: Record<string, { define: string }> }>
+    )
    const target = build.config.target
    const version = build.config.version
    const plugins = build.config.pluginsEnabled || []
@@ -102,9 +106,8 @@ export function BuildProgress({ build, isAdmin = false, onRetry, showActions = t
    }

    // Set build flags and build
-    if (flags) {
-      commands.push(`export PLATFORMIO_BUILD_FLAGS="${flags}"`)
-    }
+    // Always export PLATFORMIO_BUILD_FLAGS (even if empty) so users can see what was used
+    commands.push(`export PLATFORMIO_BUILD_FLAGS="${flags || ""}"`)
    commands.push(`pio run -e ${target}`)

    return commands.join("\n")
@@ -129,15 +132,6 @@ export function BuildProgress({ build, isAdmin = false, onRetry, showActions = t
    }
  }

-  // Compute build flags from config (same logic as computeFlagsFromConfig in convex/builds.ts)
-  const computeFlagsFromConfig = (config: typeof build.config): string => {
-    return Object.keys(config.modulesExcluded)
-      .sort()
-      .filter(module => config.modulesExcluded[module])
-      .map((moduleExcludedName: string) => `-D${moduleExcludedName}=1`)
-      .join(" ")
-  }
-
  const handleRetry = async () => {
    if (!build?._id || !onRetry) return
    try {
@@ -216,10 +210,10 @@ export function BuildProgress({ build, isAdmin = false, onRetry, showActions = t
              <h2 className="text-2xl font-semibold mb-2 flex items-center gap-2">
                {getStatusIcon()}
                <a
-                  href={`/builds?id=${build.buildHash}`}
+                  href={`/builds?hash=${build.buildHash}`}
                  onClick={e => {
                    e.preventDefault()
-                    navigate(`/builds?id=${build.buildHash}`)
+                    navigate(`/builds?hash=${build.buildHash}`)
                  }}
                  className="hover:text-cyan-400 transition-colors"
                >
@@ -40,6 +40,7 @@ export default function Builder({ cloneHash, pluginParam }: BuilderProps) {
  const [selectedVersion, setSelectedVersion] = useState<string>(VERSIONS[0])
  const [moduleConfig, setModuleConfig] = useState<Record<string, boolean>>({})
  const [pluginConfig, setPluginConfig] = useState<Record<string, boolean>>({})
+  const [pluginOptionsConfig, setPluginOptionsConfig] = useState<Record<string, Record<string, boolean>>>({})
  const [isFlashing, setIsFlashing] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)
  const [showModuleOverrides, setShowModuleOverrides] = useState(false)
@@ -49,6 +50,12 @@ export default function Builder({ cloneHash, pluginParam }: BuilderProps) {
  // Get all enabled plugins
  const enabledPlugins = Object.keys(pluginConfig).filter(id => pluginConfig[id] === true)

+  // Compute all enabled plugins (explicit + implicit)
+  const allEnabledPlugins = getDependedPlugins(
+    enabledPlugins,
+    registryData as Record<string, { dependencies?: Record<string, string> }>
+  )
+
  // Calculate plugin compatibility
  const { compatibleTargets, filteredGroupedTargets, filteredTargetCategories } = usePluginCompatibility(
    enabledPlugins,
@@ -132,6 +139,10 @@ export default function Builder({ cloneHash, pluginParam }: BuilderProps) {
      setPluginConfig(pluginObj)
      setShowPlugins(true)
    }
+
+    if (config.pluginConfigs) {
+      setPluginOptionsConfig(config.pluginConfigs)
+    }
  }, [cloneHash, sharedBuild, handleSelectTarget, setActiveCategory, TARGET_CATEGORIES])

  const selectedTargetLabel = (selectedTarget && TARGETS[selectedTarget]?.name) || selectedTarget
@@ -197,6 +208,27 @@ export default function Builder({ cloneHash, pluginParam }: BuilderProps) {
    })
  }

+  const handleTogglePluginOption = (pluginId: string, optionKey: string, enabled: boolean) => {
+    setPluginOptionsConfig(prev => {
+      const next = { ...prev }
+      if (!next[pluginId]) {
+        next[pluginId] = {}
+      }
+      const pluginOptions = { ...next[pluginId] }
+      if (enabled) {
+        pluginOptions[optionKey] = true
+      } else {
+        delete pluginOptions[optionKey]
+      }
+      if (Object.keys(pluginOptions).length === 0) {
+        delete next[pluginId]
+      } else {
+        next[pluginId] = pluginOptions
+      }
+      return next
+    })
+  }
+
  const handleFlash = async () => {
    if (!selectedTarget) return
    setIsFlashing(true)
@@ -214,13 +246,27 @@ export default function Builder({ cloneHash, pluginParam }: BuilderProps) {
        const plugin = (registryData as Record<string, { version: string }>)[slug]
        return `${slug}@${plugin.version}`
      })
+
+      // Filter plugin config to only include enabled plugins
+      const filteredPluginConfig = Object.keys(pluginOptionsConfig).reduce(
+        (acc, pluginId) => {
+          if (allEnabledPlugins.includes(pluginId)) {
+            acc[pluginId] = pluginOptionsConfig[pluginId]
+          }
+          return acc
+        },
+        {} as Record<string, Record<string, boolean>>
+      )
+
      const result = await ensureBuildFromConfig({
        target: selectedTarget,
        version: selectedVersion,
        modulesExcluded: moduleConfig,
        pluginsEnabled: pluginsEnabled.length > 0 ? pluginsEnabled : undefined,
+        pluginConfigs: Object.keys(filteredPluginConfig).length > 0 ? filteredPluginConfig : undefined,
+        registryData: registryData,
      })
-      navigate(`/builds?id=${result.buildHash}`)
+      navigate(`/builds?hash=${result.buildHash}`)
    } catch (error) {
      const message = error instanceof Error ? error.message : String(error)
      setErrorMessage("Failed to start build. Please try again.")
@@ -273,13 +319,18 @@ export default function Builder({ cloneHash, pluginParam }: BuilderProps) {

          <PluginConfig
            pluginConfig={pluginConfig}
+            pluginOptionsConfig={pluginOptionsConfig}
            selectedTarget={selectedTarget}
            pluginParam={pluginParam}
            pluginFlashCounts={pluginFlashCounts}
            showPlugins={showPlugins}
            onToggleShow={() => setShowPlugins(prev => !prev)}
            onTogglePlugin={handleTogglePlugin}
-            onReset={() => setPluginConfig({})}
+            onTogglePluginOption={handleTogglePluginOption}
+            onReset={() => {
+              setPluginConfig({})
+              setPluginOptionsConfig({})
+            }}
          />

          <BuildActions
@@ -1,3 +1,4 @@
+import { Checkbox } from "@/components/ui/checkbox"
 import { Switch } from "@/components/ui/switch"
 import { Download, Star, Zap } from "lucide-react"
 import { navigate } from "vike/client/router"
@@ -55,6 +56,10 @@ interface PluginCardLinkToggleProps extends PluginCardBaseProps {
  onToggle: (enabled: boolean) => void
  disabled?: boolean
  enabledLabel?: string
+  diagnostics?: {
+    checked: boolean
+    onCheckedChange: (checked: boolean) => void
+  }
 }

 type PluginCardProps = PluginCardToggleProps | PluginCardLinkProps | PluginCardLinkToggleProps
@@ -176,49 +181,35 @@ export function PluginCard(props: PluginCardProps) {
              {isIncompatible && incompatibleReason && (
                <p className="text-xs text-red-400 mt-1 font-medium">{incompatibleReason}</p>
              )}
+              {/* Diagnostics checkbox - only show for link-toggle variant when enabled */}
+              {isLinkToggle && props.isEnabled && props.diagnostics && (
+                <div className="mt-2">
+                  <label className="flex items-start gap-2 cursor-pointer group" htmlFor={`${id}-diagnostics`}>
+                    <Checkbox
+                      id={`${id}-diagnostics`}
+                      checked={props.diagnostics.checked}
+                      onCheckedChange={props.diagnostics.onCheckedChange}
+                      className="mt-0.5"
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-xs font-medium text-slate-300 group-hover:text-white transition-colors">
+                        Include Diagnostics
+                      </div>
+                      <div className="text-xs text-slate-500 mt-0.5">Enable diagnostic logging for this plugin</div>
+                    </div>
+                  </label>
+                </div>
+              )}
            </div>
          </div>

-          {/* Metadata row */}
-          <div className="flex items-center gap-3 flex-wrap text-xs text-slate-400">
-            {version && <span className="text-slate-500">v{version}</span>}
-            {isLinkToggle && flashCount !== undefined && (
-              <div className="flex items-center gap-1">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  className="text-slate-400"
-                  fill="currentColor"
-                  role="img"
-                  aria-label="Download"
-                >
-                  <path d="m14 2l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4 18V9h-5V4H6v16zm-6-1l-4-4h2.5v-3h3v3H16z" />
-                </svg>
-                <span>{flashCount}</span>
-              </div>
-            )}
-            {isLink && downloads !== undefined && (
-              <div className="flex items-center gap-1">
-                <Download className="w-3.5 h-3.5" />
-                <span>{downloads.toLocaleString()}</span>
-              </div>
-            )}
-            {homepage &&
-              homepage !== repo &&
-              (isLink || isLinkToggle) &&
-              (isLink ? (
-                <button
-                  type="button"
-                  onClick={e => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    window.open(homepage, "_blank", "noopener,noreferrer")
-                  }}
-                  className="hover:opacity-80 transition-opacity"
-                  aria-label="Homepage"
-                >
+          {/* Footer with metadata and toggle */}
+          <div className="flex items-center justify-between gap-3 mt-auto pt-2 border-t border-slate-700/50">
+            {/* Metadata row */}
+            <div className="flex items-center gap-3 flex-wrap text-xs text-slate-400">
+              {version && <span className="text-slate-500">v{version}</span>}
+              {isLinkToggle && flashCount !== undefined && (
+                <div className="flex items-center gap-1">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
@@ -227,103 +218,131 @@ export function PluginCard(props: PluginCardProps) {
                    className="text-slate-400"
                    fill="currentColor"
                    role="img"
+                    aria-label="Download"
+                  >
+                    <path d="m14 2l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4 18V9h-5V4H6v16zm-6-1l-4-4h2.5v-3h3v3H16z" />
+                  </svg>
+                  <span>{flashCount}</span>
+                </div>
+              )}
+              {isLink && downloads !== undefined && (
+                <div className="flex items-center gap-1">
+                  <Download className="w-3.5 h-3.5" />
+                  <span>{downloads.toLocaleString()}</span>
+                </div>
+              )}
+              {homepage &&
+                homepage !== repo &&
+                (isLink || isLinkToggle) &&
+                (isLink ? (
+                  <button
+                    type="button"
+                    onClick={e => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      window.open(homepage, "_blank", "noopener,noreferrer")
+                    }}
+                    className="hover:opacity-80 transition-opacity"
                    aria-label="Homepage"
                  >
-                    <path
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      className="text-slate-400"
                      fill="currentColor"
-                      d="m12 3l11 8.25l-1.2 1.6L20 11.5V21H4v-9.5l-1.8 1.35l-1.2-1.6zm-4.65 9.05q0 1.325 1.425 2.825T12 18q1.8-1.625 3.225-3.125t1.425-2.825q0-1.1-.75-1.825T14.1 9.5q-.65 0-1.188.263T12 10.45q-.375-.425-.937-.687T9.9 9.5q-1.05 0-1.8.725t-.75 1.825"
-                    />
-                  </svg>
-                </button>
-              ) : (
-                <a
-                  href={homepage}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={e => e.stopPropagation()}
-                  className="hover:opacity-80 transition-opacity"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    className="text-slate-400"
-                    fill="currentColor"
-                    role="img"
-                    aria-label="Homepage"
+                      role="img"
+                      aria-label="Homepage"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="m12 3l11 8.25l-1.2 1.6L20 11.5V21H4v-9.5l-1.8 1.35l-1.2-1.6zm-4.65 9.05q0 1.325 1.425 2.825T12 18q1.8-1.625 3.225-3.125t1.425-2.825q0-1.1-.75-1.825T14.1 9.5q-.65 0-1.188.263T12 10.45q-.375-.425-.937-.687T9.9 9.5q-1.05 0-1.8.725t-.75 1.825"
+                      />
+                    </svg>
+                  </button>
+                ) : (
+                  <a
+                    href={homepage}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={e => e.stopPropagation()}
+                    className="hover:opacity-80 transition-opacity"
                  >
-                    <path
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      className="text-slate-400"
                      fill="currentColor"
-                      d="m12 3l11 8.25l-1.2 1.6L20 11.5V21H4v-9.5l-1.8 1.35l-1.2-1.6zm-4.65 9.05q0 1.325 1.425 2.825T12 18q1.8-1.625 3.225-3.125t1.425-2.825q0-1.1-.75-1.825T14.1 9.5q-.65 0-1.188.263T12 10.45q-.375-.425-.937-.687T9.9 9.5q-1.05 0-1.8.725t-.75 1.825"
-                    />
-                  </svg>
-                </a>
-              ))}
-            {starsBadgeUrl &&
-              repo &&
-              (isLink ? (
-                <button
-                  type="button"
-                  onClick={e => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    window.open(repo, "_blank", "noopener,noreferrer")
-                  }}
-                  className="hover:opacity-80 transition-opacity"
-                  aria-label="GitHub repository"
-                >
-                  <img src={starsBadgeUrl} alt="GitHub stars" className="h-4" />
-                </button>
-              ) : (
-                <a
-                  href={repo}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={e => e.stopPropagation()}
-                  className="hover:opacity-80 transition-opacity"
-                >
-                  <img src={starsBadgeUrl} alt="GitHub stars" className="h-4" />
-                </a>
-              ))}
-          </div>
-          {/* Build Now button - absolutely positioned in lower right */}
-          {isLink && (
-            <div className="absolute bottom-4 right-4 z-10">
+                      role="img"
+                      aria-label="Homepage"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="m12 3l11 8.25l-1.2 1.6L20 11.5V21H4v-9.5l-1.8 1.35l-1.2-1.6zm-4.65 9.05q0 1.325 1.425 2.825T12 18q1.8-1.625 3.225-3.125t1.425-2.825q0-1.1-.75-1.825T14.1 9.5q-.65 0-1.188.263T12 10.45q-.375-.425-.937-.687T9.9 9.5q-1.05 0-1.8.725t-.75 1.825"
+                      />
+                    </svg>
+                  </a>
+                ))}
+              {starsBadgeUrl &&
+                repo &&
+                (isLink ? (
+                  <button
+                    type="button"
+                    onClick={e => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      window.open(repo, "_blank", "noopener,noreferrer")
+                    }}
+                    className="hover:opacity-80 transition-opacity"
+                    aria-label="GitHub repository"
+                  >
+                    <img src={starsBadgeUrl} alt="GitHub stars" className="h-4" />
+                  </button>
+                ) : (
+                  <a
+                    href={repo}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={e => e.stopPropagation()}
+                    className="hover:opacity-80 transition-opacity"
+                  >
+                    <img src={starsBadgeUrl} alt="GitHub stars" className="h-4" />
+                  </a>
+                ))}
+            </div>
+            {/* Toggle switch or Build Now button */}
+            {isLinkToggle ? (
+              <Switch
+                checked={props.isEnabled}
+                onCheckedChange={props.onToggle}
+                disabled={props.disabled}
+                labelLeft="Skip"
+                labelRight={props.enabledLabel || "Add"}
+                className={props.isEnabled ? "bg-green-600" : "bg-slate-600"}
+              />
+            ) : isLink ? (
              <button
                onClick={e => {
                  e.preventDefault()
                  e.stopPropagation()
                  navigate(`/builds?plugin=${id}`)
                }}
-                className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-cyan-400 bg-cyan-400/10 border border-cyan-400/20 rounded hover:bg-cyan-400/20 transition-colors cursor-pointer"
+                className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-cyan-400 bg-cyan-400/10 border border-cyan-400/20 rounded hover:bg-cyan-400/20 transition-colors cursor-pointer shrink-0"
              >
                <Zap className="w-3 h-3" />
                Build Now
              </button>
-            </div>
-          )}
-          {/* Toggle switch - absolutely positioned in lower right */}
-          {isLinkToggle && (
-            <div className="absolute bottom-4 right-4 z-10">
-              <div className="flex flex-col items-end gap-1 shrink-0">
-                <Switch
-                  checked={props.isEnabled}
-                  onCheckedChange={props.onToggle}
-                  disabled={props.disabled}
-                  labelLeft="Skip"
-                  labelRight={props.enabledLabel || "Add"}
-                  className={props.isEnabled ? "bg-green-600" : "bg-slate-600"}
-                />
-              </div>
-            </div>
-          )}
+            ) : null}
+          </div>
        </>
      )}
    </>
  )

-  const baseClassName = `relative flex ${isToggle ? "items-start gap-4" : "flex-col gap-3"} p-4 rounded-lg border-2 transition-colors h-full ${
+  const baseClassName = `relative flex ${isToggle ? "items-start gap-4" : "flex-col"} p-4 rounded-lg border-2 transition-colors h-full ${
    isIncompatible
      ? "border-slate-800 bg-slate-900/30 opacity-60 cursor-not-allowed"
      : prominent
@@ -10,23 +10,27 @@ import { ChevronDown, ChevronRight } from "lucide-react"

 interface PluginConfigProps {
  pluginConfig: Record<string, boolean>
+  pluginOptionsConfig: Record<string, Record<string, boolean>>
  selectedTarget: string
  pluginParam?: string
  pluginFlashCounts: Record<string, number>
  showPlugins: boolean
  onToggleShow: () => void
  onTogglePlugin: (id: string, enabled: boolean) => void
+  onTogglePluginOption: (pluginId: string, optionKey: string, enabled: boolean) => void
  onReset: () => void
 }

 export function PluginConfig({
  pluginConfig,
+  pluginOptionsConfig,
  selectedTarget,
  pluginParam,
  pluginFlashCounts,
  showPlugins,
  onToggleShow,
  onTogglePlugin,
+  onTogglePluginOption,
  onReset,
 }: PluginConfigProps) {
  const pluginCount = Object.keys(pluginConfig).filter(id => pluginConfig[id] === true).length
@@ -86,13 +90,13 @@ export function PluginConfig({
            {Object.entries(registryData)
              .sort(([, pluginA], [, pluginB]) => {
                // Featured plugins first
-                const featuredA = pluginA.featured ?? false
-                const featuredB = pluginB.featured ?? false
+                const featuredA = (pluginA as { featured?: boolean }).featured ?? false
+                const featuredB = (pluginB as { featured?: boolean }).featured ?? false
                if (featuredA !== featuredB) {
                  return featuredA ? -1 : 1
                }
                // Then alphabetical by name
-                return pluginA.name.localeCompare(pluginB.name)
+                return (pluginA as { name: string }).name.localeCompare((pluginB as { name: string }).name)
              })
              .map(([slug, plugin]) => {
                // Check if plugin is required by another explicitly selected plugin
@@ -129,6 +133,12 @@ export function PluginConfig({
                // Check if this is the preselected plugin from URL
                const isPreselected = pluginParam === slug

+                const pluginRegistry = plugin as {
+                  featured?: boolean
+                }
+                const isPluginEnabled = allEnabledPlugins.includes(slug)
+                const pluginOptions = pluginOptionsConfig[slug] ?? {}
+
                return (
                  <PluginCard
                    key={`${slug}-${selectedTarget}`}
@@ -137,16 +147,24 @@ export function PluginConfig({
                    name={plugin.name}
                    description={plugin.description}
                    imageUrl={plugin.imageUrl}
-                    isEnabled={allEnabledPlugins.includes(slug)}
+                    isEnabled={isPluginEnabled}
                    onToggle={enabled => onTogglePlugin(slug, enabled)}
                    disabled={isImplicit || isIncompatible || isPreselected}
                    enabledLabel={isPreselected ? "Locked" : isImplicit ? "Required" : "Add"}
                    incompatibleReason={isIncompatible ? "Not compatible with this target" : undefined}
-                    featured={plugin.featured ?? false}
+                    featured={pluginRegistry.featured ?? false}
                    flashCount={pluginFlashCounts[slug] ?? 0}
                    homepage={plugin.homepage}
                    version={plugin.version}
                    repo={plugin.repo}
+                    diagnostics={
+                      isPluginEnabled
+                        ? {
+                            checked: pluginOptions.diagnostics ?? false,
+                            onCheckedChange: checked => onTogglePluginOption(slug, "diagnostics", checked === true),
+                          }
+                        : undefined
+                    }
                  />
                )
              })}