Make provider diagnostics easier to share (#1611)

* Show PATH matches in provider diagnostics

* Add copyable provider command probes

* Fix provider diagnostic path reporting

* Clean up command probe diagnostics

packages/app/src/components/provider-diagnostic-sheet.tsx

@@ -1,4 +1,5 @@
-import { AlertTriangle, FileText, Plus, RotateCw, Trash2 } from "lucide-react-native";
+import * as Clipboard from "expo-clipboard";
+import { AlertTriangle, Copy, FileText, Plus, RotateCw, Trash2 } from "lucide-react-native";
 import type { TFunction } from "i18next";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +21,7 @@ import { Button } from "@/components/ui/button";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
+import { useToast } from "@/contexts/toast-context";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import { useDaemonConfig } from "@/hooks/use-daemon-config";
 import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
@@ -248,6 +250,7 @@ function DiagnosticSubSheet({
 }) {
   const { t } = useTranslation();
   const { theme } = useUnistyles();
+  const toast = useToast();
   const client = useHostRuntimeClient(serverId);
   const [diagnostic, setDiagnostic] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -288,31 +291,62 @@ function DiagnosticSubSheet({
     void fetchDiagnostic();
   }, [fetchDiagnostic]);
 
+  const copyButtonStyle = useCallback(
+    ({ hovered, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
+      sheetStyles.iconButton,
+      (Boolean(hovered) || pressed) && Boolean(diagnostic) && sheetStyles.iconButtonHovered,
+      diagnostic ? null : sheetStyles.disabled,
+    ],
+    [diagnostic],
+  );
+
+  const handleCopyPress = useCallback(() => {
+    if (!diagnostic) return;
+    void Clipboard.setStringAsync(diagnostic)
+      .then(() => toast.copied(t("settings.providers.diagnostic.copyLabel")))
+      .catch(() => toast.error(t("settings.providers.diagnostic.copyFailed")));
+  }, [diagnostic, t, toast]);
+
   const header = useMemo<SheetHeader>(
     () => ({
       title: t("settings.providers.diagnostic.title"),
       actions: (
-        <Pressable
-          onPress={handleRefreshPress}
-          disabled={loading}
-          hitSlop={8}
-          style={refreshButtonStyle}
-          accessibilityRole="button"
-          accessibilityLabel={
-            loading
-              ? t("settings.providers.diagnostic.refreshingAccessibility")
-              : t("settings.providers.diagnostic.refreshAccessibility")
-          }
-        >
-          {loading ? (
-            <LoadingSpinner size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-          ) : (
-            <RotateCw size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-          )}
-        </Pressable>
+        <View style={sheetStyles.headerActions}>
+          <Pressable
+            onPress={handleCopyPress}
+            disabled={!diagnostic}
+            hitSlop={8}
+            style={copyButtonStyle}
+            accessibilityRole="button"
+            accessibilityLabel={t("settings.providers.diagnostic.copyAccessibility")}
+          >
+            <Copy size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+          </Pressable>
+          <Pressable
+            onPress={handleRefreshPress}
+            disabled={loading}
+            hitSlop={8}
+            style={refreshButtonStyle}
+            accessibilityRole="button"
+            accessibilityLabel={
+              loading
+                ? t("settings.providers.diagnostic.refreshingAccessibility")
+                : t("settings.providers.diagnostic.refreshAccessibility")
+            }
+          >
+            {loading ? (
+              <LoadingSpinner size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+            ) : (
+              <RotateCw size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+            )}
+          </Pressable>
+        </View>
       ),
     }),
     [
+      copyButtonStyle,
+      diagnostic,
+      handleCopyPress,
       handleRefreshPress,
       loading,
       refreshButtonStyle,
@@ -733,6 +767,11 @@ const sheetStyles = StyleSheet.create((theme) => ({
   iconButtonHovered: {
     backgroundColor: theme.colors.surface2,
   },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+  },
   disabled: {
     opacity: 0.5,
   },