@cat-factory/app 0.75.2 → 0.76.0

package/app/components/panels/inspector/FrontendConfig.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import type {
   Block,
   FrontendBackendBinding,
   FrontendConfig,
+  FrontendConfigRecommendation,
   FrontendEnvInjection,
   FrontendPackageManager,
   FrontendServeMode,
@@ -15,12 +16,16 @@ import type {
 // and its backend bindings. Each binding names an env var the frontend reads for an upstream
 // URL and where that URL resolves — a bound SERVICE frame's ephemeral env (the service under
 // test), or WireMock. The bindings ARE the board's frontend→service links. Persisted as a
-// serialized FrontendConfig on the block via the shared updateBlock PATCH.
+// serialized FrontendConfig on the block via the shared updateBlock PATCH. The fields are grouped
+// into collapsible sections (all collapsed by default), with a repo-driven "Detect from repo"
+// affordance that proposes most of them for the user to review + apply.
 const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const auth = useAuthStore()
 const preview = usePreviewStore()
+const infra = useInfraConfigStore()
+const github = useGitHubStore()
 const { t } = useI18n()
 
 // A browsable preview needs a long-lived host serve, so it is a local/node runtime capability
@@ -97,6 +102,77 @@ function removeBinding(index: number) {
   save({ backendBindings: bindings.value.filter((_, i) => i !== index) })
 }
 
+// ---- Collapsible groups (all collapsed by default) --------------------------------------
+const showBuild = ref(false)
+const showServe = ref(false)
+const showMocking = ref(false)
+const showEnv = ref(false)
+const showBindings = ref(false)
+const showPreview = ref(false)
+
+// ---- Detect from repo (preview → apply) --------------------------------------------------
+// Read the frontend repo checkout-free and propose a NON-BINDING recommended config. The result
+// is held as a preview the user reviews; NOTHING is persisted until they click Apply. The frontend
+// frame links to its repo the same way a service does (`github_repos.block_id`).
+const repoLink = computed(() => github.repoForBlock(props.block.id))
+const detecting = ref(false)
+const detectError = ref(false)
+const detectResult = ref<FrontendConfigRecommendation | null>(null)
+
+// A detection result is scoped to the inspected block — clear it (and any error) when the
+// selection changes, so block B never shows block A's stale recommendation.
+watch(
+  () => props.block.id,
+  () => {
+    detectResult.value = null
+    detectError.value = false
+  },
+)
+
+async function detectFromRepo() {
+  const repo = repoLink.value
+  if (!repo) {
+    detectError.value = true
+    return
+  }
+  detecting.value = true
+  detectError.value = false
+  detectResult.value = null
+  try {
+    const result = await infra.detectFrontendConfig({
+      owner: repo.owner,
+      repo: repo.name,
+      ...(config.value.directory ? { directory: config.value.directory } : {}),
+    })
+    detectResult.value = result
+    // When nothing was detected the "none" hint tells the user to set the frontend directory —
+    // that field lives in the (collapsed) Build group, so open it so the advice is actionable.
+    if (!result.detected) showBuild.value = true
+  } catch {
+    detectError.value = true
+  } finally {
+    detecting.value = false
+  }
+}
+
+// Apply the recommendation: overlay the proposed scalar fields, but APPEND backend bindings
+// (never overwrite existing rows or their `source` — that would wipe configured service links).
+// Only env-var names not already present are added.
+function applyDetection() {
+  const rec = detectResult.value
+  if (!rec) return
+  const { backendBindings: proposed, ...rest } = rec.config
+  const existing = bindings.value
+  const existingNames = new Set(existing.map((b) => b.envVar.trim()).filter(Boolean))
+  const added = (proposed ?? []).filter((b) => b.envVar && !existingNames.has(b.envVar.trim()))
+  save({ ...rest, backendBindings: [...existing, ...added] })
+  // Open the groups so the user sees what changed.
+  showBuild.value = true
+  showServe.value = true
+  if (added.length) showBindings.value = true
+  detectResult.value = null
+}
+
 // ---- Browsable preview (live runtime state, distinct from the persisted toggle) ----------
 // The live preview is a separate resource fetched from the preview endpoints; the store keys it
 // by frame id and self-polls while it is `starting`. Only relevant on a preview-capable runtime
@@ -140,139 +216,290 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       {{ t('inspector.frontendConfig.hint') }}
     </p>
 
-    <!-- Package manager -->
-    <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">{{
-        t('inspector.frontendConfig.packageManager')
-      }}</span>
-      <div class="flex flex-wrap gap-1">
+    <!-- Detect from repo: propose a config the user reviews + applies. Non-binding — nothing is
+         persisted until Apply. Only shown when the frame is linked to a repo. -->
+    <div
+      v-if="repoLink"
+      class="space-y-2 rounded border border-slate-800 bg-slate-900/40 p-2"
+      data-testid="frontend-detect"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.detect.title')
+        }}</span>
         <UButton
-          v-for="pm in PACKAGE_MANAGERS"
-          :key="pm"
-          :color="packageManager === pm ? 'primary' : 'neutral'"
-          :variant="packageManager === pm ? 'soft' : 'ghost'"
           size="xs"
-          @click="save({ packageManager: pm })"
+          variant="soft"
+          color="primary"
+          icon="i-lucide-wand-sparkles"
+          :loading="detecting"
+          data-testid="frontend-detect-button"
+          @click="detectFromRepo"
         >
-          {{ pm }}
+          {{ t('inspector.frontendConfig.detect.button') }}
         </UButton>
       </div>
-    </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.detect.hint') }}
+      </p>
+
+      <p v-if="detectError" class="text-[11px] text-rose-300/80">
+        {{ t('inspector.frontendConfig.detect.error') }}
+      </p>
+
+      <template v-if="detectResult && !detecting">
+        <p v-if="!detectResult.detected" class="text-[11px] text-amber-300/80">
+          {{ t('inspector.frontendConfig.detect.none') }}
+        </p>
 
-    <!-- Build: install command + build script + output dir -->
-    <div class="space-y-1">
-      <label class="text-[11px] text-slate-400">{{
-        t('inspector.frontendConfig.installCommand')
-      }}</label>
-      <UInput
-        :model-value="config.installCommand ?? ''"
-        size="xs"
-        class="font-mono"
-        maxlength="400"
-        placeholder="pnpm install --frozen-lockfile"
-        @blur="(e: FocusEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)"
-        @keydown.enter="
-          (e: KeyboardEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)
-        "
-      />
+        <ul v-if="detectResult.notes.length" class="space-y-0.5">
+          <li
+            v-for="(n, i) in detectResult.notes"
+            :key="i"
+            class="flex items-start gap-1.5 text-[11px] leading-snug text-slate-500"
+          >
+            <span :class="n.confidence === 'high' ? 'text-emerald-400/70' : 'text-amber-400/70'">
+              {{
+                n.confidence === 'high'
+                  ? t('inspector.frontendConfig.detect.confidenceHigh')
+                  : t('inspector.frontendConfig.detect.confidenceLow')
+              }}
+            </span>
+            <span>{{ n.message }}</span>
+          </li>
+        </ul>
+
+        <div v-if="detectResult.detected" class="flex flex-wrap gap-1">
+          <UButton
+            size="xs"
+            variant="soft"
+            color="primary"
+            icon="i-lucide-check"
+            data-testid="frontend-detect-apply"
+            @click="applyDetection"
+          >
+            {{ t('inspector.frontendConfig.detect.apply') }}
+          </UButton>
+          <UButton size="xs" variant="ghost" color="neutral" @click="detectResult = null">
+            {{ t('inspector.frontendConfig.detect.dismiss') }}
+          </UButton>
+        </div>
+      </template>
     </div>
 
-    <div class="grid grid-cols-2 gap-2">
-      <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.buildScript')
-        }}</label>
-        <UInput
-          :model-value="config.buildScript ?? ''"
-          size="xs"
-          class="font-mono"
-          maxlength="200"
-          placeholder="build"
-          @blur="(e: FocusEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)"
-          @keydown.enter="
-            (e: KeyboardEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)
-          "
-        />
-      </div>
-      <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.outputDir')
-        }}</label>
-        <UInput
-          :model-value="config.outputDir ?? ''"
-          size="xs"
-          class="font-mono"
-          maxlength="400"
-          placeholder="dist"
-          @blur="(e: FocusEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)"
-          @keydown.enter="
-            (e: KeyboardEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)
-          "
+    <!-- Build: package manager + frontend directory + install command + build script + output dir -->
+    <div class="border-t border-slate-800 pt-2">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showBuild = !showBuild"
+      >
+        <UIcon
+          :name="showBuild ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
         />
+        {{ t('inspector.frontendConfig.groups.build') }}
+      </button>
+
+      <div v-if="showBuild" class="mt-2 space-y-3">
+        <div class="space-y-1">
+          <span class="text-[11px] text-slate-400">{{
+            t('inspector.frontendConfig.packageManager')
+          }}</span>
+          <div class="flex flex-wrap gap-1">
+            <UButton
+              v-for="pm in PACKAGE_MANAGERS"
+              :key="pm"
+              :color="packageManager === pm ? 'primary' : 'neutral'"
+              :variant="packageManager === pm ? 'soft' : 'ghost'"
+              size="xs"
+              @click="save({ packageManager: pm })"
+            >
+              {{ pm }}
+            </UButton>
+          </div>
+        </div>
+
+        <div class="space-y-1">
+          <label class="text-[11px] text-slate-400">{{
+            t('inspector.frontendConfig.directory')
+          }}</label>
+          <UInput
+            :model-value="config.directory ?? ''"
+            size="xs"
+            class="font-mono"
+            maxlength="400"
+            placeholder="frontend/"
+            @blur="(e: FocusEvent) => saveText('directory', (e.target as HTMLInputElement).value)"
+            @keydown.enter="
+              (e: KeyboardEvent) => saveText('directory', (e.target as HTMLInputElement).value)
+            "
+          />
+          <p class="text-[11px] leading-snug text-slate-500">
+            {{ t('inspector.frontendConfig.directoryHint') }}
+          </p>
+        </div>
+
+        <div class="space-y-1">
+          <label class="text-[11px] text-slate-400">{{
+            t('inspector.frontendConfig.installCommand')
+          }}</label>
+          <UInput
+            :model-value="config.installCommand ?? ''"
+            size="xs"
+            class="font-mono"
+            maxlength="400"
+            placeholder="pnpm install --frozen-lockfile"
+            @blur="
+              (e: FocusEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)
+            "
+            @keydown.enter="
+              (e: KeyboardEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)
+            "
+          />
+        </div>
+
+        <div class="grid grid-cols-2 gap-2">
+          <div class="space-y-1">
+            <label class="text-[11px] text-slate-400">{{
+              t('inspector.frontendConfig.buildScript')
+            }}</label>
+            <UInput
+              :model-value="config.buildScript ?? ''"
+              size="xs"
+              class="font-mono"
+              maxlength="200"
+              placeholder="build"
+              @blur="
+                (e: FocusEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)
+              "
+              @keydown.enter="
+                (e: KeyboardEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)
+              "
+            />
+          </div>
+          <div class="space-y-1">
+            <label class="text-[11px] text-slate-400">{{
+              t('inspector.frontendConfig.outputDir')
+            }}</label>
+            <UInput
+              :model-value="config.outputDir ?? ''"
+              size="xs"
+              class="font-mono"
+              maxlength="400"
+              placeholder="dist"
+              @blur="(e: FocusEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)"
+              @keydown.enter="
+                (e: KeyboardEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)
+              "
+            />
+          </div>
+        </div>
       </div>
     </div>
 
     <!-- Serve: mode (static vs command) + serve script (command mode) + port -->
-    <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">{{ t('inspector.frontendConfig.serveMode') }}</span>
-      <div class="flex flex-wrap gap-1">
-        <UButton
-          :color="serveMode === 'static' ? 'primary' : 'neutral'"
-          :variant="serveMode === 'static' ? 'soft' : 'ghost'"
-          size="xs"
-          @click="save({ serveMode: 'static' })"
-        >
-          {{ t('inspector.frontendConfig.serveStatic') }}
-        </UButton>
-        <UButton
-          :color="serveMode === 'command' ? 'primary' : 'neutral'"
-          :variant="serveMode === 'command' ? 'soft' : 'ghost'"
-          size="xs"
-          @click="save({ serveMode: 'command' })"
-        >
-          {{ t('inspector.frontendConfig.serveCommand') }}
-        </UButton>
-      </div>
-      <p class="text-[11px] leading-snug text-slate-500">
-        {{ t('inspector.frontendConfig.serveModeHint') }}
-      </p>
-    </div>
+    <div class="border-t border-slate-800 pt-2">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showServe = !showServe"
+      >
+        <UIcon
+          :name="showServe ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
+        />
+        {{ t('inspector.frontendConfig.groups.serve') }}
+      </button>
+
+      <div v-if="showServe" class="mt-2 space-y-3">
+        <div class="space-y-1">
+          <span class="text-[11px] text-slate-400">{{
+            t('inspector.frontendConfig.serveMode')
+          }}</span>
+          <div class="flex flex-wrap gap-1">
+            <UButton
+              :color="serveMode === 'static' ? 'primary' : 'neutral'"
+              :variant="serveMode === 'static' ? 'soft' : 'ghost'"
+              size="xs"
+              @click="save({ serveMode: 'static' })"
+            >
+              {{ t('inspector.frontendConfig.serveStatic') }}
+            </UButton>
+            <UButton
+              :color="serveMode === 'command' ? 'primary' : 'neutral'"
+              :variant="serveMode === 'command' ? 'soft' : 'ghost'"
+              size="xs"
+              @click="save({ serveMode: 'command' })"
+            >
+              {{ t('inspector.frontendConfig.serveCommand') }}
+            </UButton>
+          </div>
+          <!-- Explain each mode, and disambiguate from the separate envInjection axis. -->
+          <p class="text-[11px] leading-snug text-slate-500">
+            <span class="text-slate-400">{{ t('inspector.frontendConfig.serveStatic') }}:</span>
+            {{ t('inspector.frontendConfig.serveStaticDesc') }}
+          </p>
+          <p class="text-[11px] leading-snug text-slate-500">
+            <span class="text-slate-400">{{ t('inspector.frontendConfig.serveCommand') }}:</span>
+            {{ t('inspector.frontendConfig.serveCommandDesc') }}
+          </p>
+          <p class="text-[11px] leading-snug text-slate-500/80">
+            {{ t('inspector.frontendConfig.serveEnvAxisNote') }}
+          </p>
+        </div>
 
-    <div v-if="serveMode === 'command'" class="space-y-1">
-      <label class="text-[11px] text-slate-400">{{
-        t('inspector.frontendConfig.serveScript')
-      }}</label>
-      <UInput
-        :model-value="config.serveScript ?? ''"
-        size="xs"
-        class="font-mono"
-        maxlength="200"
-        placeholder="preview"
-        @blur="(e: FocusEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)"
-        @keydown.enter="
-          (e: KeyboardEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)
-        "
-      />
+        <div v-if="serveMode === 'command'" class="space-y-1">
+          <label class="text-[11px] text-slate-400">{{
+            t('inspector.frontendConfig.serveScript')
+          }}</label>
+          <UInput
+            :model-value="config.serveScript ?? ''"
+            size="xs"
+            class="font-mono"
+            maxlength="200"
+            placeholder="preview"
+            @blur="(e: FocusEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)"
+            @keydown.enter="
+              (e: KeyboardEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)
+            "
+          />
+        </div>
+
+        <div class="space-y-1">
+          <label class="text-[11px] text-slate-400">{{
+            t('inspector.frontendConfig.servePort')
+          }}</label>
+          <UInput
+            :model-value="config.servePort != null ? String(config.servePort) : ''"
+            type="number"
+            min="1"
+            max="65535"
+            step="1"
+            size="xs"
+            class="font-mono"
+            placeholder="4173"
+            @blur="(e: FocusEvent) => saveServePort((e.target as HTMLInputElement).value)"
+          />
+        </div>
+      </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-2">
-      <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
-          t('inspector.frontendConfig.servePort')
-        }}</label>
-        <UInput
-          :model-value="config.servePort != null ? String(config.servePort) : ''"
-          type="number"
-          min="1"
-          max="65535"
-          step="1"
-          size="xs"
-          class="font-mono"
-          placeholder="4173"
-          @blur="(e: FocusEvent) => saveServePort((e.target as HTMLInputElement).value)"
+    <!-- Mocking: WireMock mappings dir -->
+    <div class="border-t border-slate-800 pt-2">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showMocking = !showMocking"
+      >
+        <UIcon
+          :name="showMocking ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
         />
-      </div>
-      <div class="space-y-1">
+        {{ t('inspector.frontendConfig.groups.mocking') }}
+      </button>
+
+      <div v-if="showMocking" class="mt-2 space-y-1">
         <label class="text-[11px] text-slate-400">{{
           t('inspector.frontendConfig.mockMappingsPath')
         }}</label>
@@ -289,185 +516,225 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="col-span-2 text-[11px] leading-snug text-slate-500">
+        <p class="text-[11px] leading-snug text-slate-500">
           {{ t('inspector.frontendConfig.mockMappingsHint') }}
         </p>
       </div>
     </div>
 
     <!-- Env injection: build-time env vars vs a runtime window.env shim -->
-    <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">{{
-        t('inspector.frontendConfig.envInjection')
-      }}</span>
-      <div class="flex flex-wrap gap-1">
-        <UButton
-          :color="envInjection === 'build' ? 'primary' : 'neutral'"
-          :variant="envInjection === 'build' ? 'soft' : 'ghost'"
-          size="xs"
-          @click="save({ envInjection: 'build' })"
-        >
-          {{ t('inspector.frontendConfig.envBuild') }}
-        </UButton>
-        <UButton
-          :color="envInjection === 'runtime' ? 'primary' : 'neutral'"
-          :variant="envInjection === 'runtime' ? 'soft' : 'ghost'"
-          size="xs"
-          @click="save({ envInjection: 'runtime' })"
-        >
-          {{ t('inspector.frontendConfig.envRuntime') }}
-        </UButton>
+    <div class="border-t border-slate-800 pt-2">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showEnv = !showEnv"
+      >
+        <UIcon
+          :name="showEnv ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
+        />
+        {{ t('inspector.frontendConfig.groups.envInjection') }}
+      </button>
+
+      <div v-if="showEnv" class="mt-2 space-y-1">
+        <div class="flex flex-wrap gap-1">
+          <UButton
+            :color="envInjection === 'build' ? 'primary' : 'neutral'"
+            :variant="envInjection === 'build' ? 'soft' : 'ghost'"
+            size="xs"
+            @click="save({ envInjection: 'build' })"
+          >
+            {{ t('inspector.frontendConfig.envBuild') }}
+          </UButton>
+          <UButton
+            :color="envInjection === 'runtime' ? 'primary' : 'neutral'"
+            :variant="envInjection === 'runtime' ? 'soft' : 'ghost'"
+            size="xs"
+            @click="save({ envInjection: 'runtime' })"
+          >
+            {{ t('inspector.frontendConfig.envRuntime') }}
+          </UButton>
+        </div>
+        <p class="text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.frontendConfig.envInjectionHint') }}
+        </p>
       </div>
-      <p class="text-[11px] leading-snug text-slate-500">
-        {{ t('inspector.frontendConfig.envInjectionHint') }}
-      </p>
     </div>
 
     <!-- Backend bindings: env var → upstream. These double as the board's frontend→service links. -->
-    <div class="space-y-2 border-t border-slate-800 pt-2">
-      <div class="flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('inspector.frontendConfig.bindings.title') }}
-        </span>
-        <UButton
-          size="xs"
-          variant="ghost"
-          color="neutral"
-          icon="i-lucide-plus"
-          @click="addBinding"
+    <div class="border-t border-slate-800 pt-2">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showBindings = !showBindings"
+      >
+        <UIcon
+          :name="showBindings ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
         />
-      </div>
-      <p class="text-[11px] leading-snug text-slate-500">
-        {{ t('inspector.frontendConfig.bindings.hint') }}
-      </p>
+        {{ t('inspector.frontendConfig.groups.bindings') }}
+        <span v-if="bindings.length" class="font-normal normal-case text-slate-600"
+          >({{ bindings.length }})</span
+        >
+      </button>
 
-      <div v-if="bindings.length" class="space-y-1.5">
-        <div v-for="(b, i) in bindings" :key="i" class="flex items-center gap-1">
-          <UInput
-            :model-value="b.envVar"
-            size="xs"
-            class="flex-1 font-mono"
-            maxlength="200"
-            placeholder="PUB_BACKEND_URL"
-            @blur="(e: FocusEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)"
-            @keydown.enter="
-              (e: KeyboardEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)
-            "
-          />
-          <USelect
-            :model-value="sourceValue(b)"
-            :items="sourceItems"
-            size="xs"
-            class="flex-1"
-            @update:model-value="(v: string) => setBindingSource(i, v)"
-          />
+      <div v-if="showBindings" class="mt-2 space-y-2">
+        <div class="flex items-center justify-between">
+          <p class="text-[11px] leading-snug text-slate-500">
+            {{ t('inspector.frontendConfig.bindings.hint') }}
+          </p>
           <UButton
             size="xs"
             variant="ghost"
             color="neutral"
-            icon="i-lucide-x"
-            :title="t('inspector.frontendConfig.bindings.remove')"
-            @click="removeBinding(i)"
+            icon="i-lucide-plus"
+            @click="addBinding"
           />
         </div>
-      </div>
-      <div v-else class="text-[11px] text-slate-500">
-        {{ t('inspector.frontendConfig.bindings.empty') }}
+
+        <div v-if="bindings.length" class="space-y-1.5">
+          <div v-for="(b, i) in bindings" :key="i" class="flex items-center gap-1">
+            <UInput
+              :model-value="b.envVar"
+              size="xs"
+              class="flex-1 font-mono"
+              maxlength="200"
+              placeholder="PUB_BACKEND_URL"
+              @blur="(e: FocusEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)"
+              @keydown.enter="
+                (e: KeyboardEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)
+              "
+            />
+            <USelect
+              :model-value="sourceValue(b)"
+              :items="sourceItems"
+              size="xs"
+              class="flex-1"
+              @update:model-value="(v: string) => setBindingSource(i, v)"
+            />
+            <UButton
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-x"
+              :title="t('inspector.frontendConfig.bindings.remove')"
+              @click="removeBinding(i)"
+            />
+          </div>
+        </div>
+        <div v-else class="text-[11px] text-slate-500">
+          {{ t('inspector.frontendConfig.bindings.empty') }}
+        </div>
       </div>
     </div>
 
     <!-- Browsable preview (local/node only; the Worker reports it unsupported). -->
     <div class="border-t border-slate-800 pt-2">
-      <UCheckbox
-        :model-value="previewSupported && config.previewEnabled === true"
-        :label="t('inspector.frontendConfig.previewEnabled')"
-        :disabled="!previewSupported"
-        size="xs"
-        @update:model-value="
-          (v: boolean | 'indeterminate') => save({ previewEnabled: v === true ? true : undefined })
-        "
-      />
-      <p class="mt-1 text-[11px] leading-snug text-slate-500">
-        {{
-          previewSupported
-            ? t('inspector.frontendConfig.previewHint')
-            : t('inspector.frontendConfig.previewUnsupported')
-        }}
-      </p>
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showPreview = !showPreview"
+      >
+        <UIcon
+          :name="showPreview ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
+        />
+        {{ t('inspector.frontendConfig.groups.preview') }}
+      </button>
+
+      <div v-if="showPreview" class="mt-2">
+        <UCheckbox
+          :model-value="previewSupported && config.previewEnabled === true"
+          :label="t('inspector.frontendConfig.previewEnabled')"
+          :disabled="!previewSupported"
+          size="xs"
+          @update:model-value="
+            (v: boolean | 'indeterminate') =>
+              save({ previewEnabled: v === true ? true : undefined })
+          "
+        />
+        <p class="mt-1 text-[11px] leading-snug text-slate-500">
+          {{
+            previewSupported
+              ? t('inspector.frontendConfig.previewHint')
+              : t('inspector.frontendConfig.previewUnsupported')
+          }}
+        </p>
 
-      <!-- Live preview control: start / open (clickable URL) / stop, reflecting the runtime state. -->
-      <div v-if="previewActive" class="mt-2 space-y-1.5" data-testid="preview-panel">
-        <div class="flex items-center gap-2">
-          <span
-            class="text-[11px] font-medium"
-            :class="{
-              'text-emerald-400': previewStatus === 'ready',
-              'text-amber-400': previewStatus === 'starting',
-              'text-rose-400': previewStatus === 'failed',
-              'text-slate-400': previewStatus === 'stopped',
-            }"
-            data-testid="preview-status"
+        <!-- Live preview control: start / open (clickable URL) / stop, reflecting the runtime state. -->
+        <div v-if="previewActive" class="mt-2 space-y-1.5" data-testid="preview-panel">
+          <div class="flex items-center gap-2">
+            <span
+              class="text-[11px] font-medium"
+              :class="{
+                'text-emerald-400': previewStatus === 'ready',
+                'text-amber-400': previewStatus === 'starting',
+                'text-rose-400': previewStatus === 'failed',
+                'text-slate-400': previewStatus === 'stopped',
+              }"
+              data-testid="preview-status"
+            >
+              {{ previewStatusLabel }}
+            </span>
+
+            <UButton
+              v-if="previewStatus === 'ready' && previewState?.url"
+              :to="previewState.url"
+              target="_blank"
+              rel="noopener"
+              size="xs"
+              variant="soft"
+              color="primary"
+              trailing-icon="i-lucide-external-link"
+              data-testid="preview-url"
+            >
+              {{ t('inspector.frontendConfig.preview.open') }}
+            </UButton>
+          </div>
+
+          <div class="flex flex-wrap gap-1">
+            <UButton
+              v-if="previewStatus === 'stopped' || previewStatus === 'failed'"
+              size="xs"
+              variant="soft"
+              color="primary"
+              icon="i-lucide-play"
+              :loading="previewBusy"
+              data-testid="preview-start"
+              @click="preview.start(props.block.id)"
+            >
+              {{ t('inspector.frontendConfig.preview.start') }}
+            </UButton>
+            <UButton
+              v-if="previewStatus === 'ready' || previewStatus === 'starting'"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-square"
+              :loading="previewBusy"
+              data-testid="preview-stop"
+              @click="preview.stop(props.block.id)"
+            >
+              {{ t('inspector.frontendConfig.preview.stop') }}
+            </UButton>
+          </div>
+
+          <p
+            v-if="previewStatus === 'failed' && previewState?.error"
+            class="text-[11px] leading-snug text-rose-400"
+            data-testid="preview-error"
           >
-            {{ previewStatusLabel }}
-          </span>
+            {{ previewState.error }}
+          </p>
 
-          <UButton
-            v-if="previewStatus === 'ready' && previewState?.url"
-            :to="previewState.url"
-            target="_blank"
-            rel="noopener"
-            size="xs"
-            variant="soft"
-            color="primary"
-            trailing-icon="i-lucide-external-link"
-            data-testid="preview-url"
+          <p
+            v-if="previewRequestError"
+            class="text-[11px] leading-snug text-rose-400"
+            data-testid="preview-request-error"
           >
-            {{ t('inspector.frontendConfig.preview.open') }}
-          </UButton>
+            {{ previewRequestError }}
+          </p>
         </div>
-
-        <div class="flex flex-wrap gap-1">
-          <UButton
-            v-if="previewStatus === 'stopped' || previewStatus === 'failed'"
-            size="xs"
-            variant="soft"
-            color="primary"
-            icon="i-lucide-play"
-            :loading="previewBusy"
-            data-testid="preview-start"
-            @click="preview.start(props.block.id)"
-          >
-            {{ t('inspector.frontendConfig.preview.start') }}
-          </UButton>
-          <UButton
-            v-if="previewStatus === 'ready' || previewStatus === 'starting'"
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-square"
-            :loading="previewBusy"
-            data-testid="preview-stop"
-            @click="preview.stop(props.block.id)"
-          >
-            {{ t('inspector.frontendConfig.preview.stop') }}
-          </UButton>
-        </div>
-
-        <p
-          v-if="previewStatus === 'failed' && previewState?.error"
-          class="text-[11px] leading-snug text-rose-400"
-          data-testid="preview-error"
-        >
-          {{ previewState.error }}
-        </p>
-
-        <p
-          v-if="previewRequestError"
-          class="text-[11px] leading-snug text-rose-400"
-          data-testid="preview-request-error"
-        >
-          {{ previewRequestError }}
-        </p>
       </div>
     </div>
   </div>