Show tester connect pack in launch UI

Author: FlowmemoryAI

apps/dashboard/src/styles.css

@@ -3080,6 +3080,7 @@ dd {
 .tester-launch-main,
 .tester-launch-side,
 .tester-launch-workflow,
+.tester-launch-connect-pack,
 .tester-launch-checklist,
 .tester-launch-routes,
 .tester-launch-owner-inputs,
@@ -3099,6 +3100,48 @@ dd {
   gap: 10px;
 }
 
+.tester-launch-profile-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.tester-launch-profile-grid div {
+  display: grid;
+  align-content: start;
+  gap: 7px;
+  min-width: 0;
+  min-height: 92px;
+  padding: 12px;
+  border: 1px solid #d4ddd6;
+  border-radius: 8px;
+  background: #f8faf6;
+}
+
+.tester-launch-profile-grid span {
+  color: var(--muted);
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.tester-launch-profile-grid strong,
+.tester-launch-profile-grid code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.tester-launch-profile-grid strong {
+  color: var(--ink);
+  font-size: 0.92rem;
+}
+
+.tester-launch-profile-grid code {
+  align-self: end;
+  width: 100%;
+  margin: 0;
+}
+
 .tester-launch-card {
   display: grid;
   grid-template-rows: auto auto minmax(38px, auto) auto auto;
@@ -3175,26 +3218,53 @@ dd {
 }
 
 .tester-launch-route-grid,
-.tester-launch-gateway-routes div {
+.tester-launch-gateway-routes div,
+.tester-launch-route-pair {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+}
+
+.tester-launch-route-pair > div {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #f9faf6;
+}
+
+.tester-launch-route-pair > div > div {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 8px;
 }
 
 .tester-launch-route-grid code,
 .tester-launch-gateway-routes code,
+.tester-launch-route-pair code,
 .tester-launch-owner-inputs code,
 .tester-launch-commands code {
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
-.tester-launch-gateway-routes {
+.tester-launch-gateway-routes,
+.tester-launch-route-pair {
   display: grid;
   gap: 8px;
   padding-top: 2px;
 }
 
+.tester-launch-route-pair strong {
+  color: var(--muted);
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .tester-launch-owner-inputs details,
 .tester-launch-commands details {
   display: grid;
@@ -4447,6 +4517,7 @@ code {
   .tester-launch-command-panel,
   .tester-launch-layout,
   .tester-launch-card-grid,
+  .tester-launch-profile-grid,
   .product-surface-grid,
   .pilot-status-body,
   .local-action-grid,
@@ -4555,7 +4626,8 @@ code {
 
   .explorer-category-strip,
   .explorer-facts,
-  .tester-launch-card-grid {
+  .tester-launch-card-grid,
+  .tester-launch-profile-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -4571,8 +4643,11 @@ code {
   .live-readiness-gates,
   .tester-launch-command-panel,
   .tester-launch-card-grid,
+  .tester-launch-profile-grid,
   .tester-launch-route-grid,
   .tester-launch-gateway-routes div,
+  .tester-launch-route-pair,
+  .tester-launch-route-pair > div > div,
   .workbench-switcher,
   .explorer-category-strip,
   .explorer-facts,

apps/dashboard/src/test/dashboardData.test.ts

@@ -449,6 +449,12 @@ describe("dashboard fixture", () => {
     expect(html).toContain("Packet smoke");
     expect(html).toContain("Gateway proof");
     expect(html).toContain("Tester workflow");
+    expect(html).toContain("Connection profile");
+    expect(html).toContain("Connect pack");
+    expect(html).toContain("FlowChain friends-and-family pilot");
+    expect(html).toContain("flowmemory-local-devnet-v0");
+    expect(html).toContain("<OWNER_PUBLIC_ENDPOINT>/rpc");
+    expect(html).toContain("<OWNER_PUBLIC_ENDPOINT>/explorer/summary");
     expect(html).toContain("Create tester wallet");
     expect(html).toContain("Faucet fund");
     expect(html).toContain("Send capped transfer");
@@ -459,6 +465,7 @@ describe("dashboard fixture", () => {
     expect(html).toContain("/tester/wallets/create");
     expect(html).toContain("/tester/faucet");
     expect(html).toContain("/tester/wallets/send");
+    expect(html).toContain("/explorer/summary");
     expect(html).toContain("npm run flowchain:external-tester:packet");
     expect(html).not.toContain("local-tester-write-token");
   });

apps/dashboard/src/views/ExternalTesterLaunchView.tsx

@@ -6,6 +6,7 @@ import {
   Compass,
   KeyRound,
   ListChecks,
+  Network,
   Route,
   Search,
   Server,
@@ -75,6 +76,7 @@ export function ExternalTesterLaunchView({ workbench }: { workbench: WorkbenchSn
   const report = isRecord(workbench.raw.liveReadinessReport) ? workbench.raw.liveReadinessReport : null;
   const metrics = isRecord(report?.metrics) ? report.metrics : {};
   const testerLaunch = isRecord(report?.testerLaunch) ? report.testerLaunch : {};
+  const connectPackNetwork = isRecord(testerLaunch.connectPackNetwork) ? testerLaunch.connectPackNetwork : {};
   const reportCommands = isRecord(report?.commands) ? report.commands : {};
   const testerCommands = isRecord(testerLaunch.commands) ? testerLaunch.commands : {};
   const liveReadinessRecords = workbench.sections.liveReadiness;
@@ -91,6 +93,8 @@ export function ExternalTesterLaunchView({ workbench }: { workbench: WorkbenchSn
     workbench.sections.blocks.length + workbench.sections.transactions.length + workbench.sections.explorerRecords.length;
   const packetRoutes = stringList(testerLaunch.packetSmokeRoutes);
   const gatewayRoutes = stringList(testerLaunch.gatewayRoutes);
+  const connectPackReadOnlyRoutes = stringList(testerLaunch.connectPackReadOnlyRoutes);
+  const connectPackTesterWriteRoutes = stringList(testerLaunch.connectPackTesterWriteRoutes);
   const hasTesterRoute = (route: string) => packetRoutes.includes(route) || gatewayRoutes.includes(route);
   const ownerInputs = asArray(report?.ownerInputs).filter(isRecord).map((input) => ({
     name: text(input.name),
@@ -156,6 +160,19 @@ export function ExternalTesterLaunchView({ workbench }: { workbench: WorkbenchSn
       to: "/raw",
       Icon: Route,
     },
+    {
+      id: "connect-pack",
+      label: "Connect pack",
+      status: statusFromText(testerLaunch.connectPackReady),
+      value: boolText(testerLaunch.connectPackReady),
+      detail: text(connectPackNetwork.chainId, "network profile"),
+      command: commandGroup(testerCommands.readiness, [
+        "npm run flowchain:tester:readiness -- -AllowBlocked",
+        "npm run flowchain:external-tester:packet -- -AllowBlocked",
+      ])[1],
+      to: "/raw",
+      Icon: Network,
+    },
     {
       id: "bridge",
       label: "Bridge",
@@ -302,6 +319,11 @@ export function ExternalTesterLaunchView({ workbench }: { workbench: WorkbenchSn
           <strong>{boolText(testerLaunch.packetExecutableSmokeValidated)}</strong>
           <small>{packetRoutes.length} routes</small>
         </div>
+        <div>
+          <span>Connect pack</span>
+          <strong>{boolText(testerLaunch.connectPackReady)}</strong>
+          <small>{text(connectPackNetwork.chainId, "chain not recorded")}</small>
+        </div>
         <div>
           <span>Gateway proof</span>
           <strong>{text(testerLaunch.gatewayStatus, "not recorded")}</strong>
@@ -348,6 +370,52 @@ export function ExternalTesterLaunchView({ workbench }: { workbench: WorkbenchSn
             </div>
           </article>
 
+          <article className="panel tester-launch-connect-pack">
+            <div className="panel-heading">
+              <div>
+                <Network size={18} aria-hidden="true" />
+                <h2>Connection profile</h2>
+              </div>
+              <StatusBadge status={statusFromText(testerLaunch.connectPackReady)} compact />
+            </div>
+            <div className="tester-launch-profile-grid">
+              <div>
+                <span>network</span>
+                <strong>{text(connectPackNetwork.name, "not recorded")}</strong>
+              </div>
+              <div>
+                <span>chain</span>
+                <strong>{text(connectPackNetwork.chainId, "not recorded")}</strong>
+              </div>
+              <div>
+                <span>RPC</span>
+                <code>{text(connectPackNetwork.rpcEndpointPlaceholder, "<OWNER_PUBLIC_ENDPOINT>/rpc")}</code>
+              </div>
+              <div>
+                <span>explorer</span>
+                <code>{text(connectPackNetwork.explorerSummaryUrlPlaceholder, "<OWNER_PUBLIC_ENDPOINT>/explorer/summary")}</code>
+              </div>
+            </div>
+            <div className="tester-launch-route-pair">
+              <div>
+                <strong>Read routes</strong>
+                <div>
+                  {connectPackReadOnlyRoutes.map((route) => (
+                    <code key={`read:${route}`}>{route}</code>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <strong>Write routes</strong>
+                <div>
+                  {connectPackTesterWriteRoutes.map((route) => (
+                    <code key={`write:${route}`}>{route}</code>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </article>
+
           <article className="panel tester-launch-checklist">
             <div className="panel-heading">
               <div>