@tangle-network/blueprint-ui 0.1.0

package/README.md

@@ -0,0 +1,160 @@
+![Tangle Network Banner](https://raw.githubusercontent.com/tangle-network/tangle/refs/heads/main/assets/Tangle%20%20Banner.png)
+
+<h1 align="center">@tangle-network/blueprint-ui</h1>
+
+<p align="center"><em>Shared UI components, hooks, stores, and contract utilities for Tangle Blueprint applications.</em></p>
+
+<p align="center">
+  <a href="https://discord.com/invite/cv8EfJu3Tn"><img src="https://img.shields.io/discord/833784453251596298?label=Discord" alt="Discord"></a>
+  <a href="https://t.me/tanglenet"><img src="https://img.shields.io/endpoint?color=neon&url=https%3A%2F%2Ftg.sumanjay.workers.dev%2Ftanglenet" alt="Telegram"></a>
+</p>
+
+---
+
+A TypeScript/React package that provides the building blocks for blueprint UIs on the Tangle Network. Designed to be consumed as a source dependency (no build step required) by apps using Vite or similar bundlers.
+
+## What's Included
+
+### Components
+
+**UI Primitives** — Badge, Button, Card, Dialog, Input, Select, Separator, Skeleton, Table, Tabs, Textarea, Toggle
+
+**Forms** — `FormField`, `BlueprintJobForm` (auto-generated from job definitions), `FormSummary`, `JobExecutionDialog`
+
+**Layout / App Shell** — `AppDocument`, `AppFooter`, `AppToaster`, `Web3Shell`, `ChainSwitcher`, `ThemeToggle`
+
+**Shared** — `Identicon` (blockie avatars), `TangleLogo`
+
+**Motion** — `AnimatedPage`, `StaggerContainer`, `StaggerItem`
+
+### Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useSubmitJob` | Submit on-chain jobs with TX lifecycle tracking |
+| `useJobForm` | Generic form state derived from `JobDefinition` |
+| `useJobPrice` / `useJobPrices` | Fetch job pricing from operators |
+| `useQuotes` | Operator quote aggregation with PoW challenge solving |
+| `useOperators` | Discover active operators for a blueprint |
+| `useServiceValidation` | Check service status and permissions |
+| `useProvisionProgress` | Track provision lifecycle (events + polling) |
+| `useSessionAuth` | PASETO session management |
+| `useAuthenticatedFetch` | Fetch wrapper with automatic token refresh |
+| `useThemeValue` | Resolve theme-dependent values |
+
+### Stores (nanostores)
+
+- **`infraStore`** — Blueprint ID, service ID, operator info
+- **`sessionMapStore`** — PASETO sessions per operator
+- **`txListStore`** — Transaction history tracking
+- **`themeStore`** — Light/dark theme state
+- **`persistedAtom`** — localStorage-backed atom with BigInt serialization
+
+### Contract Utilities
+
+- **ABI exports** — `tangleJobsAbi`, `tangleServicesAbi`, `tangleOperatorsAbi`
+- **Chain configs** — Tangle Local, Testnet, Mainnet with RPC resolution
+- **`publicClient`** — Singleton viem public client tied to selected chain
+- **`encodeJobArgs`** — ABI-encode job arguments from form values using job field metadata
+- **Web3 helpers** — `createTangleTransports`, `defaultConnectKitOptions`, `tangleWalletChains`, `resolveOperatorRpc`
+
+## Package Boundaries
+
+Use `@tangle-network/blueprint-ui` for:
+- App-agnostic shell/layout primitives and design-system building blocks
+- Shared chain/contract/provisioning hooks + stores
+- Reusable cross-blueprint form and submission workflows
+
+Keep in app-local code:
+- Product-specific routes and copy
+- Feature composition that is unique to a single app
+
+### Blueprint Registry
+
+- **`registerBlueprint`** / **`getBlueprint`** — Register and look up blueprint definitions
+- **`JobDefinition`** — Declarative job schema with field types, ABI metadata, and categories
+
+## Installation
+## Installation
+
+```bash
+# As a git dependency (recommended for Tangle apps)
+pnpm add github:tangle-network/blueprint-ui
+```
+
+## Publishing
+
+Automated npm publishing is configured via GitHub Actions with npm Trusted Publishing (OIDC):
+- Workflow: `.github/workflows/publish-npm.yml`
+- Triggers:
+  - GitHub Release published (`vX.Y.Z`)
+  - Manual `workflow_dispatch`
+
+No long-lived npm token is required once trusted publishing is configured.
+
+Release flow:
+1. Bump `package.json` version.
+2. Create and publish a GitHub release tagged `v<same-version>`.
+3. Workflow typechecks and runs `npm publish --access public`.
+
+Trusted publishing setup (one-time in npm):
+1. Open npm package settings for `@tangle-network/blueprint-ui`.
+2. Configure a trusted publisher:
+   - Provider: GitHub Actions
+   - Owner: `tangle-network`
+   - Repository: `blueprint-ui`
+   - Workflow file: `publish-npm.yml`
+   - Environment (if used): must match your workflow configuration
+
+If npm does not allow configuring trusted publishing before first publish, do a one-time bootstrap publish with a short-lived token, then switch to trusted publishing and delete the token.
+
+## Usage
+
+```tsx
+// Import hooks and utilities from the main entry
+import { useSubmitJob, useJobForm, encodeJobArgs } from '@tangle-network/blueprint-ui';
+
+// Import UI components from the /components entry
+import { Button, Card, FormField } from '@tangle-network/blueprint-ui/components';
+```
+
+The package uses source-level exports (`main` and `types` both point to `.ts` files). Your bundler must support TypeScript resolution — Vite works out of the box.
+
+## Peer Dependencies
+
+React 19, wagmi 3.x, viem 2.x, nanostores, Radix UI primitives, framer-motion, sonner, tailwind-merge, class-variance-authority. See `package.json` for the full list and version ranges.
+
+## License
+
+Licensed under either of [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0) or [MIT license](http://opensource.org/licenses/MIT), at your option.
+
+---
+
+## Key Concepts
+
+**Blueprint UI** is a TypeScript/React component library for building user interfaces that interact with Tangle Network blueprints. It provides pre-built components for operator management, service requests, job submission, and payment flows.
+
+**Tangle Network** is a decentralized infrastructure protocol where operators stake economic collateral to run verifiable services called blueprints.
+
+**x402** is an HTTP-native micropayment protocol that enables per-request payments for blueprint services, integrated into the UI through payment hooks and components.
+
+**Blueprint** is a deployable service specification on Tangle that defines computation, verification, and payment in a single package.
+
+---
+
+## Frequently Asked Questions
+
+**What is @tangle-network/blueprint-ui?**
+A React component library providing UI primitives, hooks, and contract utilities for building applications on Tangle Network.
+
+**Do I need to build this package before using it?**
+No. It is designed as a source dependency consumed directly by Vite or similar bundlers with no build step required.
+
+**What framework does blueprint-ui support?**
+React with TypeScript. Components use Radix UI primitives and Tailwind CSS for styling.
+
+**How do I connect to Tangle contracts?**
+Use the provided contract hooks and ABI utilities. The package includes typed bindings for Tangle's on-chain service registry, operator staking, and job submission.
+
+**Can I use blueprint-ui for x402 payment flows?**
+Yes. The hooks and utilities support x402 payment header construction for per-request micropayments to blueprint operators.

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@tangle-network/blueprint-ui",
+  "version": "0.1.0",
+  "description": "Shared blueprint UI components, hooks, and contract utilities for Tangle Network apps",
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tangle-network/blueprint-ui.git"
+  },
+  "homepage": "https://github.com/tangle-network/blueprint-ui",
+  "bugs": {
+    "url": "https://github.com/tangle-network/blueprint-ui/issues"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "package.json",
+    "tsconfig.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./components": "./src/components.ts",
+    "./preset": "./src/preset.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@nanostores/react": "^0.7.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "blo": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^12.0.0",
+    "nanostores": "^0.10.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.2.0",
+    "viem": "^2.31.0",
+    "wagmi": "^3.3.0"
+  },
+  "peerDependenciesMeta": {},
+  "devDependencies": {
+    "@tanstack/react-query": "^5.90.16",
+    "@nanostores/react": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
+    "blo": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.34.3",
+    "nanostores": "^1.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "^7.13.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "typescript": "^5.5.2",
+    "viem": "^2.46.2",
+    "wagmi": "^3.5.0"
+  }
+}

package/src/blueprints/registry.ts

@@ -0,0 +1,107 @@
+import type { Address } from 'viem';
+
+/**
+ * Blueprint Registry — defines the metadata layer for Tangle blueprints.
+ *
+ * Each blueprint exposes a set of jobs. The registry maps on-chain job IDs
+ * to human-readable metadata: labels, descriptions, categories, form fields,
+ * and pricing info. This enables the UI to render appropriate forms for each
+ * job without procedurally generating UI from raw ABI data.
+ *
+ * Third-party blueprints can register here to appear in the wizard.
+ */
+
+// ── Types ──
+
+export type JobCategory = 'lifecycle' | 'execution' | 'batch' | 'workflow' | 'ssh' | 'management';
+
+export interface JobFieldDef {
+  name: string;
+  label: string;
+  type: 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'json' | 'combobox';
+  placeholder?: string;
+  required?: boolean;
+  defaultValue?: string | number | boolean;
+  options?: { label: string; value: string }[];
+  helperText?: string;
+  /** Minimum allowed value for number fields */
+  min?: number;
+  /** Maximum allowed value for number fields */
+  max?: number;
+  /** Step increment for number fields */
+  step?: number;
+  /** Solidity ABI type for encoding (e.g. 'string', 'uint64', 'bool', 'uint8') */
+  abiType?: string;
+  /** ABI param name if different from `name` (e.g. 'agent_identifier' vs 'agentIdentifier') */
+  abiParam?: string;
+  /** Field is included in ABI encoding but never shown in form (e.g. sidecar_token) */
+  internal?: boolean;
+}
+
+/** ABI param injected from runtime context, not user input (e.g. sidecar_url, sandbox_id) */
+export interface AbiContextParam {
+  abiName: string;
+  abiType: string;
+}
+
+export interface JobDefinition {
+  id: number;
+  name: string;
+  label: string;
+  description: string;
+  category: JobCategory;
+  icon: string;
+  pricingMultiplier: number;
+  /** Fields the user needs to fill for this job */
+  fields: JobFieldDef[];
+  /** Whether this job requires an existing sandbox to target */
+  requiresSandbox: boolean;
+  /** Optional warning shown before submission */
+  warning?: string;
+  /** ABI params prepended from runtime context (e.g. sidecar_url for sandbox jobs) */
+  contextParams?: AbiContextParam[];
+  /** Override for jobs with complex ABI encoding (e.g. nested structs) */
+  customEncoder?: (values: Record<string, unknown>, context?: Record<string, unknown>) => `0x${string}`;
+}
+
+export interface BlueprintDefinition {
+  id: string;
+  name: string;
+  version: string;
+  description: string;
+  icon: string;
+  color: string;
+  /** Contract address per chain ID — resolved at runtime */
+  contracts: Record<number, Address>;
+  /** Supported job definitions */
+  jobs: JobDefinition[];
+  /** Category ordering for the UI */
+  categories: { key: JobCategory; label: string; icon: string }[];
+}
+
+// ── Registry ──
+
+const blueprintRegistry = new Map<string, BlueprintDefinition>();
+
+export function registerBlueprint(bp: BlueprintDefinition) {
+  blueprintRegistry.set(bp.id, bp);
+}
+
+export function getBlueprint(id: string): BlueprintDefinition | undefined {
+  return blueprintRegistry.get(id);
+}
+
+export function getAllBlueprints(): BlueprintDefinition[] {
+  return Array.from(blueprintRegistry.values());
+}
+
+export function getBlueprintJobs(blueprintId: string, category?: JobCategory): JobDefinition[] {
+  const bp = blueprintRegistry.get(blueprintId);
+  if (!bp) return [];
+  return category ? bp.jobs.filter((j) => j.category === category) : bp.jobs;
+}
+
+export function getJobById(blueprintId: string, jobId: number): JobDefinition | undefined {
+  const bp = blueprintRegistry.get(blueprintId);
+  return bp?.jobs.find((j) => j.id === jobId);
+}

package/src/components/forms/BlueprintJobForm.tsx

@@ -0,0 +1,88 @@
+import type { JobDefinition } from '../../blueprints/registry';
+import { FormField } from './FormField';
+
+export interface FormSection {
+  label: string;
+  fields: string[];
+  collapsed?: boolean;
+}
+
+interface BlueprintJobFormProps {
+  job: JobDefinition;
+  values: Record<string, unknown>;
+  onChange: (name: string, value: unknown) => void;
+  errors?: Record<string, string>;
+  sections?: FormSection[];
+}
+
+export function BlueprintJobForm({ job, values, onChange, errors, sections }: BlueprintJobFormProps) {
+  const visibleFields = job.fields.filter((f) => !f.internal);
+
+  if (sections) {
+    return (
+      <div className="space-y-6">
+        {sections.map((section) => {
+          const sectionFields = section.fields
+            .map((name) => visibleFields.find((f) => f.name === name))
+            .filter(Boolean);
+
+          if (sectionFields.length === 0) return null;
+
+          if (section.collapsed) {
+            return (
+              <details key={section.label} className="group">
+                <summary className="cursor-pointer text-sm font-display font-medium text-bp-elements-textTertiary hover:text-bp-elements-textSecondary transition-colors">
+                  {section.label}
+                </summary>
+                <div className="mt-4 space-y-4">
+                  {sectionFields.map((field) => (
+                    <FormField
+                      key={field!.name}
+                      field={field!}
+                      value={values[field!.name]}
+                      onChange={onChange}
+                      error={errors?.[field!.name]}
+                    />
+                  ))}
+                </div>
+              </details>
+            );
+          }
+
+          return (
+            <div key={section.label}>
+              <label className="block text-sm font-display font-medium text-bp-elements-textSecondary mb-3">
+                {section.label}
+              </label>
+              <div className="space-y-4">
+                {sectionFields.map((field) => (
+                  <FormField
+                    key={field!.name}
+                    field={field!}
+                    value={values[field!.name]}
+                    onChange={onChange}
+                    error={errors?.[field!.name]}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {visibleFields.map((field) => (
+        <FormField
+          key={field.name}
+          field={field}
+          value={values[field.name]}
+          onChange={onChange}
+          error={errors?.[field.name]}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/forms/FormField.tsx

@@ -0,0 +1,206 @@
+import { useState } from 'react';
+import type { JobFieldDef } from '../../blueprints/registry';
+import { Input } from '../ui/input';
+import { Select } from '../ui/select';
+import { Textarea } from '../ui/textarea';
+import { Toggle } from '../ui/toggle';
+import { cn } from '../../utils';
+
+interface FormFieldProps {
+  field: JobFieldDef;
+  value: unknown;
+  onChange: (name: string, value: unknown) => void;
+  error?: string;
+}
+
+export function FormField({ field, value, onChange, error }: FormFieldProps) {
+  if (field.internal) return null;
+
+  const isBool = field.type === 'boolean';
+
+  return (
+    <div className={cn(isBool && 'flex items-center gap-3')}>
+      {!isBool && (
+        <label className="block text-sm font-display font-medium text-bp-elements-textSecondary mb-2">
+          {field.label}
+          {field.required && ' *'}
+        </label>
+      )}
+      <FieldInput field={field} value={value} onChange={onChange} />
+      {isBool && (
+        <span className="text-sm font-display text-bp-elements-textSecondary">{field.label}</span>
+      )}
+      {field.helperText && !error && (
+        <p className="text-xs text-bp-elements-textTertiary mt-1">{field.helperText}</p>
+      )}
+      {error && <p className="text-xs text-crimson-400 mt-1">{error}</p>}
+    </div>
+  );
+}
+
+function FieldInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: JobFieldDef;
+  value: unknown;
+  onChange: (name: string, value: unknown) => void;
+}) {
+  switch (field.type) {
+    case 'text':
+      return (
+        <Input
+          value={String(value ?? '')}
+          onChange={(e) => onChange(field.name, e.target.value)}
+          placeholder={field.placeholder}
+        />
+      );
+    case 'number':
+      return <NumberInput field={field} value={value} onChange={onChange} />;
+    case 'textarea':
+    case 'json':
+      return (
+        <Textarea
+          value={String(value ?? '')}
+          onChange={(e) => onChange(field.name, e.target.value)}
+          placeholder={field.placeholder}
+          rows={field.type === 'json' ? 3 : 4}
+          className={field.type === 'json' ? 'font-data text-sm' : undefined}
+        />
+      );
+    case 'boolean':
+      return <Toggle checked={Boolean(value)} onChange={(v) => onChange(field.name, v)} />;
+    case 'select':
+      return (
+        <Select
+          value={String(value ?? '')}
+          onValueChange={(v) => onChange(field.name, v)}
+          options={field.options ?? []}
+        />
+      );
+    case 'combobox':
+      return <ComboboxInput field={field} value={value} onChange={onChange} />;
+    default:
+      return null;
+  }
+}
+
+/** Number input with inline stepper buttons */
+function NumberInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: JobFieldDef;
+  value: unknown;
+  onChange: (name: string, value: unknown) => void;
+}) {
+  const numVal = Number(value ?? field.min ?? 0);
+  const step = field.step ?? 1;
+
+  const clamp = (raw: number) => {
+    if (field.min != null && raw < field.min) return field.min;
+    if (field.max != null && raw > field.max) return field.max;
+    return raw;
+  };
+
+  const canDecrement = field.min == null || numVal > field.min;
+  const canIncrement = field.max == null || numVal < field.max;
+
+  return (
+    <div className="flex items-stretch h-11 rounded-lg border border-bp-elements-borderColor bg-bp-elements-background-depth-3 dark:bg-bp-elements-background-depth-4 transition-all duration-200 hover:border-bp-elements-borderColorActive/40 focus-within:border-violet-500/40 focus-within:ring-2 focus-within:ring-violet-500/10">
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled={!canDecrement}
+        onClick={() => onChange(field.name, clamp(numVal - step))}
+        className="flex items-center justify-center w-10 shrink-0 text-bp-elements-textTertiary transition-colors hover:text-bp-elements-textPrimary hover:bg-white/[0.04] rounded-l-lg disabled:opacity-30 disabled:pointer-events-none"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
+      </button>
+      <input
+        type="number"
+        value={numVal}
+        min={field.min}
+        max={field.max}
+        step={step}
+        onChange={(e) => {
+          if (e.target.value === '') {
+            onChange(field.name, field.min ?? 0);
+            return;
+          }
+          onChange(field.name, clamp(Number(e.target.value)));
+        }}
+        placeholder={field.placeholder}
+        className="flex-1 min-w-0 bg-transparent text-center text-base font-data text-bp-elements-textPrimary outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled={!canIncrement}
+        onClick={() => onChange(field.name, clamp(numVal + step))}
+        className="flex items-center justify-center w-10 shrink-0 text-bp-elements-textTertiary transition-colors hover:text-bp-elements-textPrimary hover:bg-white/[0.04] rounded-r-lg disabled:opacity-30 disabled:pointer-events-none"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 3v8M3 7h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
+      </button>
+    </div>
+  );
+}
+
+/** Dropdown with preset options + free-text custom input */
+function ComboboxInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: JobFieldDef;
+  value: unknown;
+  onChange: (name: string, value: unknown) => void;
+}) {
+  const strVal = String(value ?? '');
+  const options = field.options ?? [];
+  const isPreset = options.some((o) => o.value === strVal);
+  const [isCustom, setIsCustom] = useState(!isPreset && strVal !== '');
+
+  if (isCustom) {
+    return (
+      <div className="flex gap-2">
+        <Input
+          value={strVal}
+          onChange={(e) => onChange(field.name, e.target.value)}
+          placeholder={field.placeholder}
+          className="flex-1"
+        />
+        <button
+          type="button"
+          onClick={() => {
+            setIsCustom(false);
+            onChange(field.name, options[0]?.value ?? '');
+          }}
+          className="shrink-0 rounded-lg border border-bp-elements-borderColor bg-bp-elements-background-depth-3 px-3 py-2 text-xs font-display text-bp-elements-textTertiary transition-colors hover:border-bp-elements-borderColorActive/40 hover:text-bp-elements-textSecondary"
+        >
+          Presets
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2 w-full">
+      <Select
+        value={strVal}
+        onValueChange={(v) => {
+          if (v === '__custom__') {
+            setIsCustom(true);
+            onChange(field.name, '');
+          } else {
+            onChange(field.name, v);
+          }
+        }}
+        options={[...options, { label: 'Custom...', value: '__custom__' }]}
+        className="flex-1"
+      />
+    </div>
+  );
+}

package/src/components/forms/FormSummary.tsx

@@ -0,0 +1,47 @@
+import type { JobDefinition } from '../../blueprints/registry';
+import { cn } from '../../utils';
+
+interface FormSummaryProps {
+  job: JobDefinition;
+  values: Record<string, unknown>;
+  context?: Record<string, unknown>;
+}
+
+export function FormSummary({ job, values, context }: FormSummaryProps) {
+  return (
+    <div className="glass-card rounded-lg p-4 space-y-2.5">
+      {context &&
+        Object.entries(context).map(([key, val]) => (
+          <SummaryRow key={key} label={key} value={String(val)} mono />
+        ))}
+      {context && job.fields.length > 0 && (
+        <div className="border-t border-bp-elements-dividerColor my-2" />
+      )}
+      {job.fields
+        .filter((f) => !f.internal)
+        .map((field) => {
+          const v = values[field.name];
+          let display: string;
+          if (field.type === 'boolean') {
+            display = v ? 'Enabled' : 'Disabled';
+          } else if (field.type === 'select' && field.options) {
+            display = field.options.find((o) => o.value === String(v))?.label ?? String(v ?? '');
+          } else {
+            display = String(v ?? '--');
+          }
+          return <SummaryRow key={field.name} label={field.label} value={display} mono={field.type === 'json'} />;
+        })}
+    </div>
+  );
+}
+
+function SummaryRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="flex justify-between text-sm">
+      <span className="text-bp-elements-textSecondary">{label}</span>
+      <span className={cn('text-bp-elements-textPrimary', mono ? 'font-data text-xs' : 'font-display')}>
+        {value || '--'}
+      </span>
+    </div>
+  );
+}