fix(mobile): share accessible connection trace controls

apps/mobile/src/features/connection/CloudEnvironmentRows.tsx

@@ -1,3 +1,4 @@
+import { ConnectionTraceId } from "./ConnectionTraceId";
 import { useAuth } from "@clerk/expo";
 import { SymbolView } from "../../components/AppSymbol";
 import {
@@ -405,23 +406,15 @@ function CloudEnvironmentRowShell(props: {
           >
             {statusText}
             {errorTraceId ? (
-              <>
-                {" Trace ID: "}
-                <Text
-                  accessibilityHint="Copies the trace ID"
-                  accessibilityRole="button"
-                  className={cn("text-xs underline decoration-dotted", statusClassName)}
-                  onLongPress={(event) => {
-                    event.stopPropagation();
-                    copyTextWithHaptic(errorTraceId, { target: "connection-trace-id" });
-                  }}
-                  onPress={(event) => {
-                    event.stopPropagation();
-                  }}
-                >
-                  {errorTraceId}
-                </Text>
-              </>
+              <ConnectionTraceId
+                traceId={errorTraceId}
+                tone={
+                  props.connectionError && props.connectionState !== "unsupported"
+                    ? "danger"
+                    : "muted"
+                }
+                activation="longPress"
+              />
             ) : null}
           </Text>
           {errorCanExpand ? (

apps/mobile/src/features/connection/ConnectionEnvironmentRow.tsx

@@ -1,3 +1,4 @@
+import { ConnectionTraceId } from "./ConnectionTraceId";
 import { SymbolView } from "../../components/AppSymbol";
 import { connectionStatusText } from "@t3tools/client-runtime/connection";
 import type { AtomCommandResult } from "@t3tools/client-runtime/state/runtime";
@@ -15,7 +16,6 @@ import { MaterialButton } from "../../components/MaterialButton";
 import { MaterialIconButton } from "../../components/MaterialIconButton";
 import { ThemedSwitch } from "../../components/ThemedSwitch";
 import { cn } from "../../lib/cn";
-import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
 import type { ConnectedEnvironmentSummary } from "../../state/remote-runtime-types";
 import { serverEnvironment } from "../../state/server";
 import { ConnectionStatusDot } from "./ConnectionStatusDot";
@@ -114,23 +114,11 @@ export function ConnectionEnvironmentRow(props: {
             >
               {statusLabel}
               {statusTraceId ? (
-                <>
-                  {" Trace ID: "}
-                  <Text
-                    accessibilityHint="Copies the trace ID"
-                    accessibilityRole="button"
-                    className="underline decoration-dotted"
-                    onLongPress={(event) => {
-                      event.stopPropagation();
-                      copyTextWithHaptic(statusTraceId, { target: "connection-trace-id" });
-                    }}
-                    onPress={(event) => {
-                      event.stopPropagation();
-                    }}
-                  >
-                    {statusTraceId}
-                  </Text>
-                </>
+                <ConnectionTraceId
+                  traceId={statusTraceId}
+                  tone={hasConnectionFailure ? "danger" : "muted"}
+                  activation="longPress"
+                />
               ) : null}
             </Text>
           ) : null}

apps/mobile/src/features/connection/ConnectionTraceId.tsx

@@ -0,0 +1,51 @@
+import { AppText as Text } from "../../components/AppText";
+import { cn } from "../../lib/cn";
+import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
+
+/** Inline trace control; disclosure rows reserve ordinary taps for their own navigation. */
+export function ConnectionTraceId({
+  traceId,
+  tone = "muted",
+  activation = "press",
+}: {
+  readonly traceId: string;
+  readonly tone?: "muted" | "danger";
+  readonly activation?: "press" | "longPress";
+}) {
+  const copy = () => copyTextWithHaptic(traceId, { target: "connection-trace-id" });
+  return (
+    <>
+      {" Trace ID: "}
+      <Text
+        accessibilityHint={
+          activation === "longPress" ? "Long press to copy the trace ID" : "Copies the trace ID"
+        }
+        accessibilityLabel={`Copy trace ID ${traceId}`}
+        accessibilityRole="button"
+        accessibilityActions={[{ name: "activate", label: "Copy trace ID" }]}
+        onAccessibilityAction={(event) => {
+          event.stopPropagation();
+          if (event.nativeEvent.actionName === "activate") copy();
+        }}
+        className={cn(
+          "underline decoration-dotted",
+          tone === "danger" ? "text-danger-foreground" : "text-foreground-muted",
+        )}
+        onLongPress={
+          activation === "longPress"
+            ? (event) => {
+                event.stopPropagation();
+                copy();
+              }
+            : undefined
+        }
+        onPress={(event) => {
+          event.stopPropagation();
+          if (activation === "press") copy();
+        }}
+      >
+        {traceId}
+      </Text>
+    </>
+  );
+}

apps/mobile/src/features/connection/EnvironmentConnectionNotice.tsx

@@ -1,3 +1,4 @@
+import { ConnectionTraceId } from "./ConnectionTraceId";
 import {
   type EnvironmentConnectionPhase,
   type EnvironmentConnectionPresentation,
@@ -6,7 +7,6 @@ import { SymbolView } from "../../components/AppSymbol";
 import { ActivityIndicator, Pressable, View } from "react-native";
 
 import { AppText as Text } from "../../components/AppText";
-import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
 
 function noticeTitle(phase: EnvironmentConnectionPhase, environmentLabel: string): string {
   switch (phase) {
@@ -81,21 +81,7 @@ export function EnvironmentConnectionNotice(props: {
         <Text className="text-center text-sm leading-normal text-foreground-muted">
           {noticeDetail(props.connection.phase, props.resourceName, props.connection.error)}
           {props.connection.traceId ? (
-            <>
-              {" Trace ID: "}
-              <Text
-                accessibilityHint="Copies the trace ID"
-                accessibilityRole="button"
-                className="underline decoration-dotted"
-                onPress={() =>
-                  copyTextWithHaptic(props.connection.traceId!, {
-                    target: "connection-trace-id",
-                  })
-                }
-              >
-                {props.connection.traceId}
-              </Text>
-            </>
+            <ConnectionTraceId traceId={props.connection.traceId} />
           ) : null}
         </Text>