fix: Add command to open tool repository

Author: hverlin

package.json

@@ -319,6 +319,10 @@
 				"command": "mise.openMenu",
 				"title": "Mise: Open Menu"
 			},
+			{
+				"command": "mise.openToolRepository",
+				"title": "Mise: Open Tool Repository"
+			},
 			{
 				"command": "mise.selectWorkspaceFolder",
 				"title": "Mise: Select Workspace Folder"
@@ -520,6 +524,11 @@
 					"when": "view == miseToolsView && viewItem == tool-installed",
 					"group": "2_modification"
 				},
+				{
+					"command": "mise.openToolWebsite",
+					"when": "view == miseToolsView",
+					"group": "2_modification"
+				},
 				{
 					"command": "mise.installTool",
 					"when": "view == miseToolsView && viewItem == tool-notinstalled",

src/commands.ts

@@ -27,3 +27,4 @@ export const MISE_WATCH_TASK = "mise.watchTask";
 export const MISE_FMT = "mise.fmt";
 export const MISE_EDIT_SETTING = "mise.editSetting";
 export const MISE_SELECT_WORKSPACE_FOLDER = "mise.selectWorkspaceFolder";
+export const MISE_OPEN_TOOL_REPOSITORY = "mise.openToolRepository";

src/miseService.ts

@@ -759,6 +759,16 @@ export class MiseService {
 		}
 	}
 
+	async miseToolInfo(toolName: string) {
+		if (!this.getMiseBinaryPath()) {
+			return;
+		}
+		const { stdout } = await this.cache.execCmd({
+			command: `tool "${toolName.replace(/"/g, '\\"')}" --json`,
+		});
+		return JSON.parse(stdout) as MiseToolInfo;
+	}
+
 	async miseRegistry() {
 		if (!this.getMiseBinaryPath()) {
 			return [];

src/providers/toolsProvider.ts

@@ -8,6 +8,7 @@ import {
 	MISE_INSTALL_TOOL,
 	MISE_OPEN_FILE,
 	MISE_OPEN_TOOL_DEFINITION,
+	MISE_OPEN_TOOL_REPOSITORY,
 	MISE_RELOAD,
 	MISE_REMOVE_TOOL,
 	MISE_USE_TOOL,
@@ -27,6 +28,7 @@ import {
 } from "../utils/fileUtils";
 import { logger } from "../utils/logger";
 import { findToolPosition } from "../utils/miseFileParser";
+import { getWebsiteForTool } from "../utils/miseUtilts";
 import { CONFIGURABLE_EXTENSIONS_BY_TOOL_NAME } from "../utils/supportedExtensions";
 
 type TreeItem = ToolsSourceItem | ToolItem;
@@ -467,6 +469,41 @@ export function registerToolsCommands(
 			},
 		),
 
+		vscode.commands.registerCommand(
+			MISE_OPEN_TOOL_REPOSITORY,
+			async (providedTool: MiseTool | ToolItem | undefined) => {
+				let tool = providedTool;
+				if (!tool) {
+					const tools = await miseService.getCurrentTools();
+					const toolNames = tools.map((tool) => tool.name);
+					const selectedToolName = await vscode.window.showQuickPick(
+						toolNames,
+						{ canPickMany: false, placeHolder: "Select a tool to open" },
+					);
+					tool = tools.find((tool) => tool.name === selectedToolName);
+				}
+
+				if (tool instanceof ToolItem) {
+					tool = tool.tool;
+				}
+
+				if (!tool) {
+					return;
+				}
+
+				const toolInfo = await miseService.miseToolInfo(tool.name);
+				if (!toolInfo) {
+					return;
+				}
+
+				const uri = await getWebsiteForTool(toolInfo);
+				if (!uri) {
+					return;
+				}
+				vscode.env.openExternal(vscode.Uri.parse(uri));
+			},
+		),
+
 		vscode.commands.registerCommand(
 			MISE_CONFIGURE_SDK_PATH,
 			async (toolName: string | undefined) => {

src/types.ts

@@ -42,3 +42,16 @@ type MiseSettingInfo = {
 	value: string | number | boolean | string[] | number[] | boolean[] | object;
 	source?: string;
 };
+
+type MiseToolInfo = {
+	backend: string;
+	description: string;
+	installed_versions: string[];
+	requested_versions: string[];
+	active_versions: string[];
+	config_source: { type: string; path: string };
+	tool_options: {
+		os: string;
+		install_env: Record<string, string>;
+	};
+};

src/utils/miseUtilts.ts

@@ -126,6 +126,50 @@ export function getDefaultForType(type?: string): unknown {
 		case "array":
 			return [];
 		default:
-			return "";
+			return undefined;
 	}
 }
+
+export const getWebsiteForTool = async (toolInfo: MiseToolInfo) => {
+	if (!toolInfo?.backend) {
+		return;
+	}
+
+	// backendName:repo
+	const [backendName, repo] = toolInfo.backend.split(":");
+	if (!repo) {
+		return;
+	}
+
+	if (
+		repo.includes("/") &&
+		(backendName === "ubi" ||
+			backendName === "aqua" ||
+			backendName === "asdf" ||
+			backendName === "vfox")
+	) {
+		if (repo?.startsWith("https://")) {
+			return repo;
+		}
+		return `https://github.com/${repo}`;
+	}
+
+	if (backendName === "core") {
+		return `https://mise.jdx.dev/lang/${repo}`;
+	}
+
+	if (backendName === "npm") {
+		return `https://www.npmjs.com/package/${repo}`;
+	}
+
+	if (backendName === "asdf") {
+		const res = await fetch(
+			`https://raw.githubusercontent.com/asdf-vm/asdf-plugins/refs/heads/master/plugins/${repo}`,
+		);
+		const data = await res.text();
+		const url = data.match(/(https:\/\/github.com\/[^"]+)/);
+		if (url?.[1] && typeof url[1] === "string") {
+			return url[1];
+		}
+	}
+};

src/webviews/Settings.tsx

@@ -2,14 +2,10 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { VscodeCheckbox } from "@vscode-elements/react-elements";
 import { type FlattenedProperty, getDefaultForType } from "../utils/miseUtilts";
 import CustomTable from "./components/CustomTable";
+import { FileLink } from "./components/FileLink";
 import { IconButton } from "./components/IconButton";
 import { useWebviewStore } from "./store";
-import {
-	toDisplayPath,
-	useEditSettingMutation,
-	useOpenFileMutation,
-	vscodeClient,
-} from "./webviewVsCodeApi";
+import { useEditSettingMutation, vscodeClient } from "./webviewVsCodeApi";
 
 export const Settings = () => {
 	const showModifiedOnly = useWebviewStore(
@@ -18,7 +14,6 @@ export const Settings = () => {
 	const setShowModifiedOnly = useWebviewStore(
 		(state) => state.setShowModifiedSettingsOnly,
 	);
-	const openFileMutation = useOpenFileMutation();
 	const queryClient = useQueryClient();
 
 	const settingsQuery = useQuery({
@@ -175,7 +170,7 @@ export const Settings = () => {
 											}}
 										/>
 									</div>
-									{actual !== defaultValue && (
+									{actual !== defaultValue && defaultValue !== undefined && (
 										<div
 											style={{ display: "flex", alignItems: "center", gap: 4 }}
 										>
@@ -189,16 +184,7 @@ export const Settings = () => {
 										<div
 											style={{ display: "flex", alignItems: "center", gap: 4 }}
 										>
-											source{" "}
-											<a
-												href={`file://${source}`}
-												onClick={(e) => {
-													e.preventDefault();
-													openFileMutation.mutate(source);
-												}}
-											>
-												{toDisplayPath(source || "")}
-											</a>
+											source: <FileLink filePath={source} />
 										</div>
 									)}
 								</div>

src/webviews/Tools.tsx

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { VscodeButton, VscodeCheckbox } from "@vscode-elements/react-elements";
 import CustomTable from "./components/CustomTable";
+import { FileLink } from "./components/FileLink";
 import { IconButton } from "./components/IconButton";
 import { useWebviewStore } from "./store";
 import {
@@ -9,6 +10,8 @@ import {
 	vscodeClient,
 } from "./webviewVsCodeApi";
 
+import React, { useState } from "react";
+
 const styles = {
 	infoPanel: { padding: "10px" },
 	header: { marginBottom: "10px" },
@@ -27,15 +30,43 @@ const styles = {
 	},
 	value: {
 		fontSize: "14px",
-		wordBreak: "break-all",
+		wordBreak: "break-word",
 		color: "var(--vscode-foreground)",
 	},
+	toggleButton: {
+		display: "flex",
+		alignItems: "center",
+		gap: "4px",
+		color: "var(--vscode-textLink-foreground)",
+		cursor: "pointer",
+		background: "none",
+		border: "none",
+		padding: "4px 0",
+		marginTop: "0px",
+	},
+	pathContainer: {
+		display: "flex",
+		flexDirection: "column" as const,
+		gap: "6px",
+	},
+	pathItem: {
+		display: "flex",
+		alignItems: "center",
+	},
+	pathInfo: {
+		marginLeft: "8px",
+		opacity: 0.8,
+	},
 } as const;
 
 const ToolInfo = ({
 	onClose,
 	selectedTool,
-}: { selectedTool: MiseTool; onClose: () => void }) => {
+}: {
+	selectedTool: MiseTool;
+	onClose: () => void;
+}) => {
+	const [showAll, setShowAll] = useState(false);
 	const trackedConfigQuery = useQuery(trackedConfigsQueryOptions);
 	const configs = trackedConfigQuery.data || [];
 
@@ -47,6 +78,11 @@ const ToolInfo = ({
 		return Object.keys(config.tools).includes(selectedTool.name);
 	});
 
+	const displayedConfigs = showAll
+		? configsWithTool
+		: configsWithTool.slice(0, 3);
+	const hasMore = configsWithTool.length > 3;
+
 	return (
 		<div style={styles.infoPanel}>
 			<div
@@ -61,7 +97,7 @@ const ToolInfo = ({
 					<i className="codicon codicon-tools" />
 					{selectedTool.name}
 				</div>
-				<IconButton iconName={"close"} onClick={onClose} />
+				<IconButton iconName="close" onClick={onClose} />
 			</div>
 
 			<div>
@@ -112,14 +148,37 @@ const ToolInfo = ({
 			{configsWithTool.length > 0 && (
 				<div>
 					<p style={styles.label}>Used in</p>
-					<div style={styles.value}>
-						{configsWithTool
-							.map((config) => {
-								// @ts-ignore
-								const toolInfo = config.tools[selectedTool.name];
-								return `${toDisplayPath(config.path)} (${JSON.stringify(toolInfo)})`;
-							})
-							.join(", ")}
+					<div style={styles.pathContainer}>
+						{displayedConfigs.map((config) => {
+							// @ts-ignore
+							const toolInfo = config.tools[selectedTool.name];
+							return (
+								<span
+									key={config.path + selectedTool.name}
+									style={styles.pathItem}
+								>
+									<FileLink filePath={config.path} />
+									<span style={styles.pathInfo}>
+										({JSON.stringify(toolInfo)})
+									</span>
+								</span>
+							);
+						})}
+
+						{hasMore && (
+							<button
+								type={"button"}
+								onClick={() => setShowAll(!showAll)}
+								style={styles.toggleButton}
+							>
+								<i
+									className={`codicon codicon-chevron-${showAll ? "up" : "down"}`}
+								/>
+								{showAll
+									? "Show less"
+									: `Show ${configsWithTool.length - 3} more`}
+							</button>
+						)}
 					</div>
 				</div>
 			)}
@@ -246,10 +305,28 @@ export const Tools = () => {
 		mutationFn: () => vscodeClient.request({ mutationKey: ["pruneTools"] }),
 	});
 
+	const trackedConfigQuery = useQuery(trackedConfigsQueryOptions);
+	const configs = trackedConfigQuery.data || [];
+
+	if (!selectedTool) {
+		return null;
+	}
+
+	const configsWithTool = configs.filter((config) => {
+		return Object.keys(config.tools).includes(selectedTool.name);
+	});
+
 	const outdatedToolsQuery = useQuery({
 		queryKey: ["outdatedTools"],
-		queryFn: ({ queryKey }) =>
-			vscodeClient.request({ queryKey }) as Promise<Array<MiseToolUpdate>>,
+		queryFn: ({ queryKey }) => {
+			if (!navigator.onLine) {
+				return [];
+			}
+
+			return vscodeClient.request({ queryKey }) as Promise<
+				Array<MiseToolUpdate>
+			>;
+		},
 	});
 
 	if (toolsQuery.isError) {
@@ -285,7 +362,11 @@ export const Tools = () => {
 				/>
 			)}
 			<CustomTable
-				style={{ height: window.innerHeight - (selectedTool ? 280 : 40) }}
+				style={{
+					height:
+						window.innerHeight -
+						(selectedTool ? (configsWithTool?.length > 3 ? 320 : 280) : 40),
+				}}
 				filterRowElement={
 					<div
 						style={{