@tangle-network/blueprint-ui 0.1.1 → 0.3.0

package/src/hooks/useProvisionProgress.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { getEnvVar } from '../utils/env';
 
 // ---------------------------------------------------------------------------
 // Types matching sandbox-runtime/src/provision_progress.rs
@@ -64,7 +65,7 @@ export function useProvisionProgress({
   const [isPolling, setIsPolling] = useState(false);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const baseUrl = apiUrl ?? import.meta.env.VITE_OPERATOR_API_URL ?? 'http://localhost:9090';
+  const baseUrl = apiUrl ?? getEnvVar('VITE_OPERATOR_API_URL') ?? 'http://localhost:9090';
 
   const fetchProgress = useCallback(async () => {
     if (callId == null) return;

package/src/hooks/useQuotes.ts

@@ -18,22 +18,39 @@ import { resolveOperatorRpc } from '../utils/resolveOperatorRpc';
 
 // ── Types ──
 
+type SecurityCommitment = {
+  asset: { kind: number; token: Address };
+  exposureBps: number;
+};
+
+type ResourceCommitment = {
+  kind: number;
+  count: bigint;
+};
+
 export interface OperatorQuote {
   operator: Address;
   totalCost: bigint;
   signature: `0x${string}`;
   details: {
+    /**
+     * Address of the account that will submit `createServiceFromQuotes`.
+     * Required since tnt-core v0.13.0 — the contract enforces
+     * `requester == msg.sender` and rejects `address(0)` (no wildcard quotes).
+     */
+    requester: Address;
     blueprintId: bigint;
     ttlBlocks: bigint;
     totalCost: bigint;
     timestamp: bigint;
     expiry: bigint;
-    securityCommitments: readonly {
-      asset: { kind: number; token: Address };
-      exposureBps: number;
-    }[];
+    confidentiality: number;
+    securityCommitments: readonly SecurityCommitment[];
+    resourceCommitments: readonly ResourceCommitment[];
   };
   costRate: number;
+  teeAttested?: boolean;
+  teeProvider?: string;
 }
 
 export interface UseQuotesResult {
@@ -49,6 +66,20 @@ export interface UseQuotesResult {
 
 const POW_DIFFICULTY = 20;
 const WEI_PER_TNT = 1_000_000_000_000_000_000; // 10^18
+const RESOURCE_KIND_TO_ID = {
+  CPU: 0,
+  MemoryMB: 1,
+  StorageMB: 2,
+  NetworkEgressMB: 3,
+  NetworkIngressMB: 4,
+  GPU: 5,
+} as const;
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' as Address;
+const DEFAULT_RESOURCE_REQUIREMENTS = [
+  { kind: 'CPU', count: 1 },
+  { kind: 'MemoryMB', count: 1024 },
+  { kind: 'StorageMB', count: 10240 },
+] as const;
 
 function sha256(data: Uint8Array): Uint8Array {
   return viemSha256(data, 'bytes');
@@ -114,14 +145,71 @@ export function formatCost(totalCost: bigint): string {
   return `${tnt.toLocaleString(undefined, { maximumFractionDigits: 2 })} TNT`;
 }
 
+function quoteConfidentiality(requireTee: boolean): number {
+  return requireTee ? 1 : 0;
+}
+
+function resourceKindToId(kind: string): number {
+  const mapped = RESOURCE_KIND_TO_ID[kind as keyof typeof RESOURCE_KIND_TO_ID];
+  if (mapped === undefined) {
+    throw new Error(`Unsupported resource kind in quote: ${kind}`);
+  }
+  return mapped;
+}
+
+function mapJsonSecurityCommitment(sc: any): SecurityCommitment {
+  return {
+    asset: {
+      kind: sc.asset?.kind ?? 0,
+      token: (sc.asset?.token ?? ZERO_ADDRESS) as Address,
+    },
+    exposureBps: sc.exposure_bps ?? 0,
+  };
+}
+
+function mapJsonResourceCommitment(resource: any): ResourceCommitment {
+  return {
+    kind: resourceKindToId(String(resource.kind ?? 'CPU')),
+    count: BigInt(resource.count ?? 0),
+  };
+}
+
 // ── Hook ──
 
+const ZERO_ADDRESS_LOWER = ZERO_ADDRESS.toLowerCase();
+
+/**
+ * Fetches signed `OperatorQuote` payloads from a set of operators for
+ * `createServiceFromQuotes`.
+ *
+ * @param operators   Operators discovered from the on-chain registry.
+ * @param blueprintId Target blueprint id.
+ * @param ttlBlocks   Requested service TTL in blocks.
+ * @param enabled     Gate to disable fetching (e.g. while inputs settle).
+ * @param requester   Address that will submit `createServiceFromQuotes` —
+ *                    must equal `msg.sender` at submission time. Required
+ *                    since tnt-core v0.13.0; the contract rejects
+ *                    `address(0)` and any mismatch.
+ * @param requireTee  If true, asks operators for TEE-attested quotes.
+ */
 export function useQuotes(
   operators: DiscoveredOperator[],
   blueprintId: bigint,
   ttlBlocks: bigint,
   enabled: boolean,
+  requester: Address,
+  requireTee = false,
 ): UseQuotesResult {
+  // Defensive guard: only assert when the caller has actually opted in via
+  // `enabled`. This lets components compute `requester` from
+  // `useAccount().address` and pass `enabled=false` until the wallet connects.
+  if (enabled && (!requester || requester.toLowerCase() === ZERO_ADDRESS_LOWER)) {
+    throw new Error(
+      'useQuotes: `requester` is required and must be a non-zero address when `enabled=true`. ' +
+        'Pass `useAccount().address` from wagmi. tnt-core v0.13.0 contracts ' +
+        'reject quotes whose requester is address(0) or != msg.sender.',
+    );
+  }
   const [quotes, setQuotes] = useState<OperatorQuote[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isSolvingPow, setIsSolvingPow] = useState(false);
@@ -168,6 +256,8 @@ export function useQuotes(
             ttlBlocks,
             proofOfWork: proof,
             challengeTimestamp: timestamp,
+            requireTee,
+            requester,
           });
 
           if (!response) throw new Error('No quote returned from operator');
@@ -194,7 +284,7 @@ export function useQuotes(
     return () => {
       cancelled = true;
     };
-  }, [operators, blueprintId, ttlBlocks, enabled, fetchKey]);
+  }, [operators, blueprintId, ttlBlocks, enabled, fetchKey, requireTee, requester]);
 
   const totalCost = quotes.reduce((sum, q) => sum + q.totalCost, 0n);
 
@@ -213,6 +303,8 @@ async function fetchPriceFromOperator(
     ttlBlocks: bigint;
     proofOfWork: Uint8Array;
     challengeTimestamp: bigint;
+    requireTee: boolean;
+    requester: Address;
   },
 ): Promise<OperatorQuote | null> {
   // Try JSON endpoint (simpler, no protobuf dependency required)
@@ -225,11 +317,12 @@ async function fetchPriceFromOperator(
         ttl_blocks: String(params.ttlBlocks),
         proof_of_work: toHex(params.proofOfWork),
         challenge_timestamp: String(params.challengeTimestamp),
-        resource_requirements: [
-          { kind: 'CPU', count: 1 },
-          { kind: 'MemoryMB', count: 1024 },
-          { kind: 'StorageMB', count: 10240 },
-        ],
+        require_tee: params.requireTee,
+        // tnt-core v0.13.0: bind the quote to the future caller. Operators
+        // sign this address into QuoteDetails; the contract enforces
+        // `requester == msg.sender`.
+        requester: params.requester,
+        resource_requirements: DEFAULT_RESOURCE_REQUIREMENTS,
       }),
       signal: AbortSignal.timeout(10_000),
     });
@@ -242,16 +335,21 @@ async function fetchPriceFromOperator(
       totalCost: BigInt(data.total_cost ?? '0'),
       signature: (data.signature ?? '0x') as `0x${string}`,
       costRate: Number(data.cost_rate ?? 0),
+      teeAttested: Boolean(data.tee_attested),
+      teeProvider: data.tee_provider || undefined,
       details: {
+        // Prefer the operator-signed value; fall back to the hook's input.
+        // If the operator returns a mismatched requester the contract will
+        // revert at submission, so callers should still verify equality.
+        requester: ((data.details?.requester as Address | undefined) ?? params.requester),
         blueprintId: BigInt(data.details?.blueprint_id ?? params.blueprintId),
         ttlBlocks: BigInt(data.details?.ttl_blocks ?? params.ttlBlocks),
         totalCost: BigInt(data.details?.total_cost ?? '0'),
         timestamp: BigInt(data.details?.timestamp ?? params.challengeTimestamp),
         expiry: BigInt(data.details?.expiry ?? '0'),
-        securityCommitments: (data.details?.security_commitments ?? []).map((sc: any) => ({
-          asset: { kind: sc.asset?.kind ?? 0, token: (sc.asset?.token ?? '0x0000000000000000000000000000000000000000') as Address },
-          exposureBps: sc.exposure_bps ?? 0,
-        })),
+        confidentiality: Number(data.details?.confidentiality ?? quoteConfidentiality(params.requireTee)),
+        securityCommitments: (data.details?.security_commitments ?? []).map(mapJsonSecurityCommitment),
+        resourceCommitments: (data.details?.resources ?? []).map(mapJsonResourceCommitment),
       },
     };
   } catch {

package/src/hooks/useSessionAuth.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useSignMessage } from 'wagmi';
 import { getSession, setSession, removeSession, type SessionEntry } from '../stores/session';
+import { getEnvVar } from '../utils/env';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -28,7 +29,7 @@ interface UseSessionAuthOptions {
 }
 
 export function useSessionAuth({ sandboxId, apiUrl }: UseSessionAuthOptions) {
-  const baseUrl = apiUrl ?? import.meta.env.VITE_OPERATOR_API_URL ?? 'http://localhost:9090';
+  const baseUrl = apiUrl ?? getEnvVar('VITE_OPERATOR_API_URL') ?? 'http://localhost:9090';
   const { signMessageAsync } = useSignMessage();
 
   const [isAuthenticating, setIsAuthenticating] = useState(false);

package/src/host/components/BlueprintHostHero.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../components/ui/card';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { cn } from '../../utils';
+
+type Action = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: React.ComponentProps<typeof Button>['variant'];
+  disabled?: boolean;
+};
+
+export type BlueprintHostHeroProps = {
+  title: string;
+  tagline?: string;
+  description?: string;
+  badges?: string[];
+  actions?: Action[];
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export function BlueprintHostHero({
+  title,
+  tagline,
+  description,
+  badges = [],
+  actions = [],
+  children,
+  className,
+}: BlueprintHostHeroProps) {
+  return (
+    <Card className={cn('rounded-3xl border-bp-elements-borderColor/70 bg-bp-elements-background-depth-2', className)}>
+      <CardHeader className="space-y-4">
+        {badges.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {badges.map((badge) => (
+              <Badge key={badge} variant="secondary">
+                {badge}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+        <div className="space-y-2">
+          <CardTitle className="text-3xl">{title}</CardTitle>
+          {tagline ? (
+            <CardDescription className="text-base text-bp-elements-textPrimary/80">
+              {tagline}
+            </CardDescription>
+          ) : null}
+        </div>
+        {description ? (
+          <p className="max-w-3xl text-sm leading-6 text-bp-elements-textSecondary">
+            {description}
+          </p>
+        ) : null}
+      </CardHeader>
+      {(actions.length > 0 || children) && (
+        <CardContent className="space-y-4">
+          {actions.length > 0 ? (
+            <div className="flex flex-wrap gap-3">
+              {actions.map((action) => {
+                const button = (
+                  <Button
+                    key={action.label}
+                    variant={action.variant ?? 'default'}
+                    onClick={action.onClick}
+                    disabled={action.disabled}
+                  >
+                    {action.label}
+                  </Button>
+                );
+
+                return action.href ? (
+                  <a key={action.label} href={action.href}>
+                    {button}
+                  </a>
+                ) : (
+                  button
+                );
+              })}
+            </div>
+          ) : null}
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  );
+}

package/src/host/components/BlueprintHostPanel.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
+import { cn } from '../../utils';
+
+export type BlueprintHostPanelProps = {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function BlueprintHostPanel({
+  title,
+  children,
+  className,
+}: BlueprintHostPanelProps) {
+  return (
+    <Card className={cn('rounded-3xl border-bp-elements-borderColor/70 bg-bp-elements-background-depth-2', className)}>
+      <CardHeader>
+        <CardTitle className="text-xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/src/host/index.ts

@@ -0,0 +1,42 @@
+export type {
+  BlueprintAppVisibility,
+  BlueprintPublisherVerification,
+  BlueprintExperienceTier,
+  BlueprintSlugPolicy,
+  BlueprintUiSurface,
+  BlueprintResourceRoute,
+  BlueprintPermissionScope,
+  BlueprintExternalAppMode,
+  BlueprintExternalAppTrust,
+  BlueprintPublisher,
+  BlueprintResourceModel,
+  BlueprintPermissionDescriptor,
+  BlueprintExternalAppConfig,
+  BlueprintUiManifest,
+  BlueprintAppModuleBinding,
+  BlueprintAppEntry,
+  BlueprintAppResolvedView,
+} from './types';
+
+export {
+  buildCanonicalBlueprintSlug,
+  resolveBlueprintAppView,
+  toBlueprintAppEntry,
+  getBlueprintExperienceTierLabel,
+  getBlueprintSlugPolicyLabel,
+  getBlueprintSurfaceLabel,
+  getBlueprintPublisherVerificationLabel,
+  getExternalAppTrustLabel,
+  isVerifiedBlueprintPublisher,
+  canPublisherClaimSlug,
+  isTrustedExternalAppHost,
+  getBlueprintPath,
+  getBlueprintServicePath,
+  sanitizeBlueprintSlugPart,
+  deriveBlueprintRequestedSlug,
+} from './resolver';
+
+export type { BlueprintHostHeroProps } from './components/BlueprintHostHero';
+export { BlueprintHostHero } from './components/BlueprintHostHero';
+export type { BlueprintHostPanelProps } from './components/BlueprintHostPanel';
+export { BlueprintHostPanel } from './components/BlueprintHostPanel';

package/src/host/resolver.ts

@@ -0,0 +1,204 @@
+import type {
+  BlueprintAppEntry,
+  BlueprintAppResolvedView,
+  BlueprintExperienceTier,
+  BlueprintExternalAppTrust,
+  BlueprintPublisher,
+  BlueprintPublisherVerification,
+  BlueprintSlugPolicy,
+  BlueprintUiSurface,
+} from './types';
+
+const EXPERIENCE_TIER_LABELS: Record<BlueprintExperienceTier, string> = {
+  generic: 'Protocol fallback',
+  declarative: 'Declarative blueprint UI',
+  'curated-module': 'Curated app module',
+  'external-app': 'External app handoff',
+};
+
+const SLUG_POLICY_LABELS: Record<BlueprintSlugPolicy, string> = {
+  reserved: 'Reserved slug',
+  'publisher-scoped': 'Publisher-scoped slug',
+  'public-requested': 'Public requested slug',
+};
+
+const SURFACE_LABELS: Record<BlueprintUiSurface, string> = {
+  'generic-overview': 'Generic overview',
+  'service-explorer': 'Service explorer',
+  'service-console': 'Service console',
+  'actions-panel': 'Actions panel',
+  resources: 'Resources',
+  chat: 'Chat',
+  vaults: 'Vaults',
+  metrics: 'Metrics',
+  permissions: 'Permissions',
+};
+
+const PUBLISHER_VERIFICATION_LABELS: Record<
+  BlueprintPublisherVerification,
+  string
+> = {
+  'first-party': 'First-party publisher',
+  verified: 'Verified publisher',
+  unverified: 'Unverified publisher',
+};
+
+const EXTERNAL_APP_TRUST_LABELS: Record<BlueprintExternalAppTrust, string> = {
+  trusted: 'Trusted external app',
+  restricted: 'Restricted external app',
+};
+
+export function buildCanonicalBlueprintSlug(entry: BlueprintAppEntry): string {
+  if (entry.canonicalSlug) {
+    return entry.canonicalSlug;
+  }
+
+  if (entry.slugPolicy === 'reserved' || !entry.publisher.namespace) {
+    return entry.slug;
+  }
+
+  return `@${entry.publisher.namespace}/${entry.slug}`;
+}
+
+export function resolveBlueprintAppView(
+  entry: BlueprintAppEntry,
+): BlueprintAppResolvedView {
+  return {
+    slug: entry.slug,
+    canonicalSlug: buildCanonicalBlueprintSlug(entry),
+    blueprintId: entry.blueprintId,
+    publisher: entry.publisher,
+    tier: entry.tier,
+    slugPolicy: entry.slugPolicy,
+    manifest: entry.manifest,
+    module: entry.module,
+    fallbackEnabled: true,
+  };
+}
+
+export function toBlueprintAppEntry(
+  view: BlueprintAppResolvedView,
+): BlueprintAppEntry {
+  return {
+    slug: view.slug,
+    canonicalSlug: view.canonicalSlug,
+    blueprintId: view.blueprintId,
+    publisher: view.publisher,
+    tier: view.tier,
+    slugPolicy: view.slugPolicy,
+    manifest: view.manifest,
+    module: view.module,
+  };
+}
+
+export function getBlueprintExperienceTierLabel(
+  tier: BlueprintExperienceTier,
+): string {
+  return EXPERIENCE_TIER_LABELS[tier];
+}
+
+export function getBlueprintSlugPolicyLabel(policy: BlueprintSlugPolicy): string {
+  return SLUG_POLICY_LABELS[policy];
+}
+
+export function getBlueprintSurfaceLabel(surface: BlueprintUiSurface): string {
+  return SURFACE_LABELS[surface];
+}
+
+export function getBlueprintPublisherVerificationLabel(
+  verification: BlueprintPublisherVerification,
+): string {
+  return PUBLISHER_VERIFICATION_LABELS[verification];
+}
+
+export function getExternalAppTrustLabel(
+  trust: BlueprintExternalAppTrust,
+): string {
+  return EXTERNAL_APP_TRUST_LABELS[trust];
+}
+
+export function isVerifiedBlueprintPublisher(
+  publisher: BlueprintPublisher,
+): boolean {
+  return (
+    publisher.verification === 'first-party' ||
+    publisher.verification === 'verified'
+  );
+}
+
+export function canPublisherClaimSlug(
+  slug: string,
+  publisher?: Pick<BlueprintPublisher, 'namespace' | 'verification'>,
+  reservedSlugs: Set<string> = new Set(),
+): boolean {
+  if (reservedSlugs.has(slug)) {
+    return false;
+  }
+
+  return (
+    publisher?.namespace !== undefined &&
+    publisher.namespace.trim().length > 0 &&
+    (publisher.verification === 'verified' ||
+      publisher.verification === 'first-party')
+  );
+}
+
+export function isTrustedExternalAppHost(
+  host: string,
+  trustedHosts: readonly string[] = [],
+): boolean {
+  const normalizedHost = host.trim().toLowerCase();
+
+  return trustedHosts.some(
+    (trustedHost) =>
+      normalizedHost === trustedHost || normalizedHost.endsWith(`.${trustedHost}`),
+  );
+}
+
+export function getBlueprintPath(view: BlueprintAppResolvedView): string {
+  if (view.tier === 'curated-module' || view.tier === 'external-app') {
+    return `/blueprints/${view.canonicalSlug}`;
+  }
+
+  if (view.blueprintId !== undefined) {
+    return `/blueprints/${view.blueprintId.toString()}`;
+  }
+
+  return `/blueprints/${view.slug}`;
+}
+
+export function getBlueprintServicePath(
+  view: BlueprintAppResolvedView,
+  serviceId: string,
+): string {
+  if (view.tier === 'curated-module' || view.tier === 'external-app') {
+    return `${getBlueprintPath(view)}/${serviceId}`;
+  }
+
+  return `${getBlueprintPath(view)}/services/${serviceId}`;
+}
+
+export function sanitizeBlueprintSlugPart(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-{2,}/g, '-');
+}
+
+export function deriveBlueprintRequestedSlug(
+  blueprint: Pick<{ name: string; author: string; id: bigint }, 'name' | 'author' | 'id'>,
+): string {
+  const fromName = sanitizeBlueprintSlugPart(blueprint.name);
+  if (fromName.length > 0) {
+    return fromName;
+  }
+
+  const fromAuthor = sanitizeBlueprintSlugPart(blueprint.author);
+  if (fromAuthor.length > 0) {
+    return `${fromAuthor}-${blueprint.id.toString()}`;
+  }
+
+  return `blueprint-${blueprint.id.toString()}`;
+}