Merge pull request #45 from paritytech/fix-link-display-no-osc8

Fix link display in terminals without OSC 8 hyperlink support

Author: charlesHetterich

.changeset/fix-link-display-no-osc8.md

@@ -0,0 +1,5 @@
+---
+"@parity/cdm-cli": patch
+---
+
+Fix deploy/install link display in terminals without OSC 8 hyperlink support. Instead of squeezing the full URL into a narrow table column (where it wrapped into an unreadable smear), the cell now keeps the short hash and the full link is printed on its own line below the row.

src/apps/cli/src/lib/components/DeployTable.tsx

@@ -3,6 +3,8 @@ import { Box, Text } from "ink";
 import type { ContractStatus, PhaseInfo } from "../deploy-pipeline";
 import {
     Link,
+    LinkLine,
+    hyperlinksSupported,
     Spinner,
     ProgressBar,
     EmptyBar,
@@ -203,7 +205,7 @@ function ContractRow({
         addrCell = <Idle />;
     }
 
-    return (
+    const row = (
         <Box>
             <Cell width={COL_CONTRACT}>
                 <Text bold wrap="truncate">
@@ -217,6 +219,43 @@ function ContractRow({
             <Cell width={COL_ADDR}>{addrCell}</Cell>
         </Box>
     );
+
+    if (hyperlinksSupported) return row;
+
+    // No OSC 8 support: the phase cells only show short hashes, so surface each
+    // full link on its own line below the row. Conditions mirror the cell
+    // rendering above so an inline line appears iff a cell shows a link.
+    const linkDefs: { label: string; url: string }[] = [];
+    if (
+        ["registering", "done"].includes(state) &&
+        s?.deployTxHash &&
+        s?.deployBlockHash &&
+        assethubUrl
+    ) {
+        linkDefs.push({ label: "deploy", url: pjsExplorerUrl(assethubUrl, s.deployBlockHash) });
+    }
+    if (["registering", "done"].includes(state) && s?.cid && ipfsGatewayUrl) {
+        linkDefs.push({ label: "metadata", url: ipfsUrl(ipfsGatewayUrl, s.cid) });
+    }
+    if (state === "done" && s?.registerTxHash && s?.registerBlockHash && assethubUrl) {
+        linkDefs.push({ label: "register", url: pjsExplorerUrl(assethubUrl, s.registerBlockHash) });
+    }
+    if (linkDefs.length === 0) return row;
+
+    // Deploy and register share one block hash (single batch), so collapse
+    // duplicate URLs into a single line with a combined label.
+    const byUrl = new Map<string, string[]>();
+    for (const { label, url } of linkDefs) {
+        byUrl.set(url, [...(byUrl.get(url) ?? []), label]);
+    }
+    return (
+        <Box flexDirection="column">
+            {row}
+            {[...byUrl].map(([url, labels]) => (
+                <LinkLine key={url} label={labels.join("/")} url={url} />
+            ))}
+        </Box>
+    );
 }
 
 export interface DeployTableProps {

src/apps/cli/src/lib/components/InstallTable.tsx

@@ -3,6 +3,8 @@ import { Box, Text } from "ink";
 import type { InstallStatus } from "../install-pipeline";
 import {
     Link,
+    LinkLine,
+    hyperlinksSupported,
     Spinner,
     Cell,
     Idle,
@@ -70,7 +72,7 @@ function InstallRow({
         addrCell = <Idle />;
     }
 
-    return (
+    const row = (
         <Box>
             <Cell width={COL_CONTRACT}>
                 <Text bold wrap="truncate">
@@ -82,6 +84,17 @@ function InstallRow({
             <Cell width={COL_ADDR}>{addrCell}</Cell>
         </Box>
     );
+
+    // When OSC 8 hyperlinks aren't available, the metadata cell only shows the
+    // short CID hash; surface the full link on its own line below the row.
+    const hasLink = state === "done" && s?.metadataCid && ipfsGatewayUrl;
+    if (hyperlinksSupported || !hasLink) return row;
+    return (
+        <Box flexDirection="column">
+            {row}
+            <LinkLine url={ipfsUrl(ipfsGatewayUrl!, s!.metadataCid!)} />
+        </Box>
+    );
 }
 
 export interface InstallTableProps {

src/apps/cli/src/lib/components/shared.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import { Box, Text } from "ink";
 import supportsHyperlinks from "supports-hyperlinks";
 
+/** Whether the terminal supports OSC 8 embedded hyperlinks. */
+export const hyperlinksSupported = supportsHyperlinks.stdout;
+
 /** Terminal hyperlink using OSC 8 escape sequence */
 export function Link({ url, children }: { url: string; children: React.ReactNode }) {
-    if (supportsHyperlinks.stdout) {
+    if (hyperlinksSupported) {
         return (
             <Text>
                 {`\x1b]8;;${url}\x07`}
@@ -13,7 +16,25 @@ export function Link({ url, children }: { url: string; children: React.ReactNode
             </Text>
         );
     }
-    return <Text>{url}</Text>;
+    // No OSC 8 support: render only the short anchor text in the cell so the
+    // table stays aligned. The full URL is surfaced separately on its own line
+    // via <LinkLine>. Rendering the full URL here would squeeze it into a
+    // narrow column and wrap it into an unreadable smear (issue #44).
+    return <Text>{children}</Text>;
+}
+
+/**
+ * A full link printed on its own line, used as a fallback when the terminal
+ * lacks OSC 8 hyperlink support. The URL is rendered outside the table grid so
+ * it stays on a single line instead of being squeezed into a column.
+ */
+export function LinkLine({ label, url }: { label?: string; url: string }) {
+    return (
+        <Text>
+            <Text dimColor>{`  ↳ ${label ? `${label.padEnd(8)} ` : ""}`}</Text>
+            <Text color="cyan">{url}</Text>
+        </Text>
+    );
 }
 
 export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];